mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-06 13:56:27 +02:00
Code Issues Releases Wiki Activity

Added toast message component

Browse Source 
Completed component, added mixins, used mixins, updated documentation, updated customization documentation, made sure everything works neatly.
This commit is contained in:
Angelos Chalaris
2017-05-11 10:54:47 +03:00
parent 9dfe71cea6
commit 657db332a9
10 changed files with 153 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
docs/quick_reference.html
View File

@@ -958,32 +958,20 @@
</ul>
</div>
</div>
<!-- TODO (Also remember to change the Codepen link)-->
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Toasts <a href="https://codepen.io/chalarangelo/pen/bBzYzj" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;div class=&quot;alert&quot;&gt;
&lt;h3&gt;This is an alert&lt;/h3&gt;
&lt;p&gt;Make sure you read this!&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;alert urgent&quot;&gt;
&lt;h3&gt;This is an urgent alert&lt;/h3&gt;
&lt;p&gt;Make absolutely sure you read this!&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;alert critical&quot;&gt;
&lt;h3&gt;This is a critical alert&lt;/h3&gt;
&lt;p&gt;Make certain you read and actually understand this!&lt;/p&gt;
&lt;/div&gt;</pre>
<h3>Toasts <a href="https://codepen.io/chalarangelo/pen/XREdeq" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;span class=&quot;toast&quot;&gt;This is a normal toast message!&lt;/span&gt;
&lt;span class=&quot;toast small&quot;&gt;This is a large toast message!&lt;/span&gt;
&lt;span class=&quot;toast large&quot;&gt;This is a small toast message!&lt;/span&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Use the <code>.alert</code> class to create alerts</li>
<li>Color variants available using the <code>.urgent</code> and <code>.critical</code> classes</li>
<li>Alerts have no pre-defined behavior, use Javascript</li>
<li>The <code>.alert</code> class can be applied to <code>&lt;div&gt;</code> elements and textual elements alike</li>
<li>Avoid applying the <code>.alert</code> class to non-textual elements, such as images</li>
<li>Use either the <code><span class="fore-secondary">role</span>=<span class="fore-primary">&quot;<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role">alert</a>&quot;</span></code> attribute or the <code><span class="fore-secondary">role</span>=<span class="fore-primary">&quot;<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">alertdialog</a>&quot;</span></code> attribute for accessible alerts</li>
<li>Use the <code>.toast</code> class on <code>&lt;span&gt;</code> elements to create toast messages</li>
<li>Size variants available using the <code>.small</code> and <code>.large</code> classes</li>
<li>Toasts have no pre-defined behavior, use Javascript</li>
<li>Toasts display at the bottom of the screen on top of everything else</li>
</ul>
</div>
</div>