mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-21 21:15:13 +02:00
Added toast message component
Completed component, added mixins, used mixins, updated documentation, updated customization documentation, made sure everything works neatly.
This commit is contained in:
Angelos Chalaris
@@ -25,6 +25,7 @@
|
||||
@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-12.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}}
|
||||
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
|
||||
.box-colored {color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
|
||||
.toast.demo { position: relative; top: 2rem; left: calc(50% - 6rem); z-index: 1;} .toast.demo.small { top: 4.5rem; left: calc(50% - 6.75rem);} .toast.demo.large { top: 7.5rem; left: calc(50% - 8rem);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -153,52 +154,36 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TODO -->
|
||||
<div class="row" id="toasts">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Toasts</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
|
||||
<div>
|
||||
<div class="alert" style="margin-top: 8px; margin-bottom: 8px;"><h3>This is an alert</h3><p>Make sure you read this!</p></div>
|
||||
<div class="alert urgent" style="margin-bottom: 8px;"><h3>This is an urgent alert</h3><p>Make absolutely sure you read this!</p></div>
|
||||
<div class="alert critical" style="margin-bottom: 8px;"><h3>This is a critical alert</h3><p>Make certain you read and actually understand this!</p></div>
|
||||
</div>
|
||||
<div style="height: 15rem;">
|
||||
<span class="toast demo">I'm a toast message!</span><br/>
|
||||
<span class="toast small demo">I'm a small toast message!</span><br/>
|
||||
<span class="toast large demo">I'm a large toast message!</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
|
||||
<p>Alerts replace modal dialogs, along with messages, notifications and traditional alerts with a simpler, easier design paradigm. To create an alert, use a <code><div></code> element, which will contain one or more elements (for example a <code><h3></code> and a <code><p></code>) and add the <code>.alert</code> class to it. For more urgent alerts, use the <code>.urgent</code> class and for critical alerts, use the <code>.critical</code> class.</p>
|
||||
<p>Toasts aim to help bridge the gap between web and native applications on mobile devices, by displaying native-looking toast messages. To create a toast, wrap some text inside a <code><span></code> element with the <code>.toast</code> class. Toasts appear at the bottom of the screen on top of everything else. If you want to create smaller or larger toast messasges, you can add the <code>.small</code> or <code>.large</code> classes respectively.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><div class="alert">
|
||||
<h3>This is an alert</h3>
|
||||
<p>Make sure you read this!</p>
|
||||
</div>
|
||||
<div class="alert urgent">
|
||||
<h3>This is an urgent alert</h3>
|
||||
<p>Make absolutely sure you read this!</p>
|
||||
</div>
|
||||
<div class="alert critical">
|
||||
<h3>This is a critical alert</h3>
|
||||
<p>Make certain you read and actually understand this!</p>
|
||||
</div></pre>
|
||||
<pre><span class="toast">This is a normal toast message!</span>
|
||||
<span class="toast small">This is a large toast message!</span>
|
||||
<span class="toast large">This is a small toast message!</span></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Alert elements do not have any pre-defined behavior. You should use your own Javascript code and interactive HTML elements to deal with showing and hiding them as necessary.</li>
|
||||
<li>If you want to make your alerts more accessible, we suggest you add either the <code><span class="fore-secondary">role</span>=<span class="fore-primary">"<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role">alert</a>"</span></code> attribute or the <code><span class="fore-secondary">role</span>=<span class="fore-primary">"<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">alertdialog</a>"</span></code> attribute, depending on the behavior you are planning to implement for your alerts.</li>
|
||||
<li>Toast elements do not have any pre-defined behavior. You should use your own Javascript code and interactive HTML elements to deal with showing and hiding them as necessary.</li>
|
||||
<li>If you want to create your own color or size variants for toast messages, check out the <a href="customization.html">customization</a> page.</li>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><p class="alert">Short and to the point</p>
|
||||
<span class="fore-tertiary"><!-- or --></span>
|
||||
<h2 class="alert urgent">Large and to the point</h2></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> Instead of using a <code><div></code> element, you can also apply the <code>.alert</code> class to common textual elements, such as paragraphs or headings.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||||
<pre><button class="alert">Not a good alert</button></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Avoid applying the <code>.alert</code> class to non-textual HTML elements, such as buttons or images. Doing so might result in unexpected behavior.</p>
|
||||
<div class="col-sm-12">
|
||||
<pre><span class="toast small large">Not a good toast</span></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Avoid combining two toast size variants, as this might cause unexpected behavior.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -150,13 +150,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TODO -->
|
||||
<div class="row" id="toasts">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Toasts</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>contextual</strong> module's contains custom classes and styles for defining alerts.</p><br/>
|
||||
<p>The <strong>contextual</strong> module's contains custom classes and styles for defining toast messages.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
@@ -164,54 +163,40 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$alert-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for alert components</td><td data-label="Sample value">'alert'</td>
|
||||
<td data-label="Variable">$toast-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for toast components</td><td data-label="Sample value">'toast'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$alert-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for alert components</td><td data-label="Sample value">#eeeeee</td>
|
||||
<td data-label="Variable">$toast-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for toast components</td><td data-label="Sample value">#424242</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$alert-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for alert components</td><td data-label="Sample value">$fore-color</td>
|
||||
<td data-label="Variable">$toast-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for toast components</td><td data-label="Sample value">$fore-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$alert-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for alert components</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
||||
<td data-label="Variable">$toast-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for toast components</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$alert-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for alert components</td><td data-label="Sample value">2px</td>
|
||||
<td data-label="Variable">$toast-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for toast components</td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$alert-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for alert components</td><td data-label="Sample value">12px 16px</td>
|
||||
<td data-label="Variable">$toast-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for toast components</td><td data-label="Sample value">12px 16px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$alert-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for alert components</td><td data-label="Sample value">6px</td>
|
||||
<td data-label="Variable">$toast-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for toast components</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$alert-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for alert components</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$alert-include-animated</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Enables animated alert components<sup><a href="#alert-note-one">1</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$alert-animated-class</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for animated alert components<sup><a href="#alert-note-one">1</a></sup></td><td data-label="Sample value">'animated'</td>
|
||||
<td data-label="Variable">$toast-bottom</td><td data-label="Type">Position bottom</td>
|
||||
<td data-label="Description">Position bottom for toast components</td><td data-label="Sample value">20px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes:</h3>
|
||||
<ol>
|
||||
<li id="alert-note-one">The value of <code>$alert-animated-class</code> will only be used if <code>$alert-include-animated</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -372,7 +357,7 @@
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Toast mixins</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>contextual</strong> module contains a couple of mixins for adding custom styles to alerts (color and style variants).</p><br/>
|
||||
<p>The <strong>contextual</strong> module contains a couple of mixins for adding custom styles to toasts (color and style variants).</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Mixin definitions</caption>
|
||||
<thead>
|
||||
@@ -380,72 +365,68 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-alert-alt-color (<span class="fore-primary">$alert-alt-name</span>, <span class="fore-primary">$alert-alt-back-color</span>, <span class="fore-tertiary">$alert-alt-fore-color</span>)</td>
|
||||
<td data-label="Description">Creates a new alert color variant using the specified values.</td>
|
||||
<td data-label="Mixin">make-toast-alt-color (<span class="fore-primary">$toast-alt-name</span>, <span class="fore-primary">$toast-alt-back-color</span>, <span class="fore-tertiary">$toast-alt-fore-color</span>)</td>
|
||||
<td data-label="Description">Creates a new toast color variant using the specified values.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-alert-alt-style (<span class="fore-primary">$alert-alt-name</span>, <span class="fore-primary">$alert-alt-border-style</span>, <span class="fore-primary">$alert-alt-border-radius</span>, <span class="fore-tertiary">$alert-alt-padding</span>, <span class="fore-tertiary">$alert-alt-margin</span>, <span class="fore-tertiary">$alert-alt-box-shadow</span>)</td>
|
||||
<td data-label="Description">Creates a new alert style variant using the specified values.</td>
|
||||
<td data-label="Mixin">make-toast-alt-style (<span class="fore-primary">$toast-alt-name</span>, <span class="fore-primary">$toast-alt-border-style</span>, <span class="fore-primary">$toast-alt-border-radius</span>, <span class="fore-tertiary">$toast-alt-padding</span>, <span class="fore-tertiary">$toast-alt-box-shadow</span>)</td>
|
||||
<td data-label="Description">Creates a new toast style variant using the specified values.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-alert-alt-color</caption>
|
||||
<caption style="font-family: monospace, monospace">make-toast-alt-color</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$alert-alt-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the alert color variant</td><td data-label="Sample value">'urgent'</td>
|
||||
<td data-label="Parameter">$toast-alt-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the toast color variant</td><td data-label="Sample value">'warning'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$alert-alt-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for the alert color variant</td><td data-label="Sample value">#ffca28</td>
|
||||
<td data-label="Parameter">$toast-alt-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for the toast color variant</td><td data-label="Sample value">#ffca28</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$alert-alt-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">(Optional) Text color for the alert color variant</td><td data-label="Sample value">#212121</td>
|
||||
<td data-label="Parameter">$toast-alt-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">(Optional) Text color for the toast color variant</td><td data-label="Sample value">#212121</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-alert-alt-color</span> ('urgent', #ffca28, #212121);</pre>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-toast-alt-color</span> ('warning', #ffca28, #212121);</pre>
|
||||
<br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-alert-alt-style</caption>
|
||||
<caption style="font-family: monospace, monospace">make-toast-alt-style</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$alert-alt-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the alert style variant</td><td data-label="Sample value">'urgent'</td>
|
||||
<td data-label="Parameter">$toast-alt-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the toast style variant</td><td data-label="Sample value">'small'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$alert-alt-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for the alert style variant</td><td data-label="Sample value">1px solid #ff8f00</td>
|
||||
<td data-label="Parameter">$toast-alt-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for the toast style variant</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$alert-alt-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for the alert style variant</td><td data-label="Sample value">2px</td>
|
||||
<td data-label="Parameter">$toast-alt-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for the toast style variant</td><td data-label="Sample value">6px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$alert-alt-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for the alert style variant</td><td data-label="Sample value">12px 16px</td>
|
||||
<td data-label="Parameter">$toast-alt-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">(Optional) Padding for the toast style variant</td><td data-label="Sample value">9px 12px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$alert-alt-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for the alert style variant</td><td data-label="Sample value">6px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$alert-alt-box-shadow</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Box shadow for the alert style variant</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
<td data-label="Parameter">$toast-alt-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">(Optional) Box shadow for the toast style variant</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-alert-alt-style</span> ('urgent', 1px solid #ff8f00, 2px, 12px 16px, 6px, 6px, 0 1px 3px rgba(0,0,0, 0.1));</pre>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-toast-alt-style</span> ('small', 1px solid #bdbdbd, 6px, 9px 12px, 0 1px 3px rgba(0,0,0, 0.1));</pre>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -517,11 +498,11 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$tooltip-alt-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for the tooltip style variant</td><td data-label="Sample value">15px 20px</td>
|
||||
<td data-label="Description">(Optional) Padding for the tooltip style variant</td><td data-label="Sample value">15px 20px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$tooltip-alt-box-shadow</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Box shadow for the tooltip style variant</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
<td data-label="Parameter">$tooltip-alt-box-shadow</td><td data-label="Type">Box Shadow</td>
|
||||
<td data-label="Description">(Optional) Box shadow for the tooltip style variant</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
|
||||
2
docs/mini-default.min.css
vendored
2
docs/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -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> View on Codepen</a></h3>
|
||||
<pre><div class="alert">
|
||||
<h3>This is an alert</h3>
|
||||
<p>Make sure you read this!</p>
|
||||
</div>
|
||||
<div class="alert urgent">
|
||||
<h3>This is an urgent alert</h3>
|
||||
<p>Make absolutely sure you read this!</p>
|
||||
</div>
|
||||
<div class="alert critical">
|
||||
<h3>This is a critical alert</h3>
|
||||
<p>Make certain you read and actually understand this!</p>
|
||||
</div></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> View on Codepen</a></h3>
|
||||
<pre><span class="toast">This is a normal toast message!</span>
|
||||
<span class="toast small">This is a large toast message!</span>
|
||||
<span class="toast large">This is a small toast message!</span></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><div></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">"<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role">alert</a>"</span></code> attribute or the <code><span class="fore-secondary">role</span>=<span class="fore-primary">"<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">alertdialog</a>"</span></code> attribute for accessible alerts</li>
|
||||
<li>Use the <code>.toast</code> class on <code><span></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>
|
||||
|
||||
@@ -1122,3 +1122,11 @@
|
||||
- Deprecated `.alert` and all that comes with it, updated flavors to reflect this. I will update all docs after commiting, just to be on the safe side. By the way, `mini-default` is now `6.12KB` without the deprecated components and with a few of the additions already built-in. Pretty happy with how it's coming along right now!
|
||||
- Updated docs just barely to make sure that the new `.toast` component will easily find a suitable home in them.
|
||||
- Implemented `.toast` quite quickly and without doing too much work on it, seems to work pretty well. Documentation, mixins and customization not yet done.
|
||||
|
||||
## 20170511
|
||||
|
||||
- Added `.toast` mixins to make them customizable.
|
||||
- Added `.large` and `.small` size variants for `.toast` elements.
|
||||
- Added `z-index` to `.toast` elements, so that they display above everything else so far.
|
||||
- Documented `.toast` changes in their page. Updated the documentation in `quick_reference`. Created related codepen (bit fiddly but should be ok).
|
||||
- Updated `customization` for the new `.toast` component, fixed some mistakes I found in the `customization/contextual.html` page.
|
||||
|
||||
Reference in New Issue
Block a user