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
parent
9dfe71cea6
commit
657db332a9
10 changed files with 153 additions and 123 deletions
11
dist/mini-default.css
vendored
11
dist/mini-default.css
vendored
|
|
@ -1656,6 +1656,7 @@ mark.inline-block {
|
|||
color: #fafafa;
|
||||
border-radius: 2rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
z-index: 1110;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
|
|
@ -1749,6 +1750,16 @@ mark.inline-block {
|
|||
padding: 0.375em;
|
||||
}
|
||||
|
||||
.toast.small {
|
||||
border-radius: 1.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.toast.large {
|
||||
border-radius: 3rem;
|
||||
padding: 1.125rem 2.25rem;
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for progress elements and spinners.
|
||||
*/
|
||||
|
|
|
|||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -405,13 +405,21 @@ $mark-style2-padding: 0.375em; // Padding for <mark> style 2
|
|||
$mark-style2-font-size: 1em; // Font size for <mark> style 2
|
||||
$mark-style2-line-height: 1.375em; // Line height for <mark> style 2
|
||||
$toast-name: 'toast'; // Class name for toast component
|
||||
$toast-bottom-position: 1.5rem; // Bottom position for toasts
|
||||
$toast-bottom: 1.5rem; // Bottom position for toasts
|
||||
$toast-back-color: #424242; // Background color for toasts
|
||||
$toast-fore-color: #fafafa; // Text color for toasts
|
||||
$toast-border-style: 0; // Border style for toasts
|
||||
$toast-border-radius: 2rem; // Border radius for toasts
|
||||
$toast-padding: 0.75rem 1.5rem; // Padding for toasts
|
||||
$toast-box-shadow: none; // Box shadow for toasts
|
||||
$toast-style1-name: 'small'; // Class name for toast style 1
|
||||
$toast-style1-border-style: 0; // Border style for toast style 1
|
||||
$toast-style1-border-radius:1.5rem; // Border radius for toast style 1
|
||||
$toast-style1-padding: 0.5rem 1rem; // Padding for toast style 1
|
||||
$toast-style2-name: 'large'; // Class name for toast style 2
|
||||
$toast-style2-border-style: 0; // Border style for toast style 2
|
||||
$toast-style2-border-radius:3rem; // Border radius for toast style 2
|
||||
$toast-style2-padding: 1.125rem 2.25rem; // Padding for toast style 2
|
||||
$include-tooltip: true; // Should tooltips be included? (`true`/`false`) [1]
|
||||
$tooltip-name: 'tooltip'; // Class name for the tooltip component
|
||||
$tooltip-back-color: $fore-color; // Background color for tooltips
|
||||
|
|
@ -547,6 +555,10 @@ $include-center-block-name: false; // Should center block be included? (
|
|||
$mark-style1-border-radius, $mark-style1-padding);
|
||||
@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-style,
|
||||
$mark-style2-border-radius, $mark-style2-padding, $mark-style2-font-size, $mark-style2-line-height);
|
||||
@include make-toast-alt-style($toast-style1-name, $toast-style1-border-style,
|
||||
$toast-style1-border-radius, $toast-style1-padding);
|
||||
@include make-toast-alt-style($toast-style2-name, $toast-style2-border-style,
|
||||
$toast-style2-border-radius, $toast-style2-padding);
|
||||
@import '../mini/progress';
|
||||
/*
|
||||
Custom elements for progress elements and spinners.
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
*/
|
||||
// Contextual background elements use the mark element as their base.
|
||||
$mark-inline-block-name: 'inline-block' !default; // Class name for <mark> inline block styling.
|
||||
$include-toast: true !default; // [Hidden flag] Should toasts be included? (`true`/`false`)
|
||||
$toast-name: 'toast' !default; // Class name for the toasts.
|
||||
$include-tooltip: true !default; // Should tooltips be included? (`true`/`false`)
|
||||
$tooltip-name: 'tooltip' !default; // Class name for the tooltips.
|
||||
$tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name.
|
||||
$include-toast: true !default; // [Hidden flag] Should toasts be included? (`true`/`false`)
|
||||
$toast-name: 'toast' !default; // Class name for the toasts.
|
||||
// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
|
||||
$back-color: white !default; // [External variable - core] Background color for everything.
|
||||
$fore-color: black !default; // [External variable - core] Foreground color for everything.
|
||||
|
|
@ -53,7 +53,7 @@ mark {
|
|||
.#{$toast-name} {
|
||||
position: fixed;
|
||||
background: $toast-back-color;
|
||||
bottom: $toast-bottom-position;
|
||||
bottom: $toast-bottom;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
@if $toast-fore-color != $fore-color {
|
||||
|
|
@ -71,7 +71,7 @@ mark {
|
|||
@if $toast-box-shadow != none {
|
||||
box-shadow: $toast-box-shadow;
|
||||
}
|
||||
|
||||
z-index: 1110;
|
||||
}
|
||||
}
|
||||
// Default styling for tooltips. Use mixins for alternate styles
|
||||
|
|
|
|||
|
|
@ -48,6 +48,51 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate toast (toast color variants).
|
||||
// Variables:
|
||||
// - $toast-alt-name : The name of the class used for the alternate toast.
|
||||
// - $toast-alt-back-color : The background color of the alternate toast.
|
||||
// - $toast-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the toast.
|
||||
@mixin make-toast-alt-color ($toast-alt-name, $toast-alt-back-color, $toast-alt-fore-color: $toast-fore-color) {
|
||||
@if not ($include-toast) {
|
||||
@error "Contextual module's toast mixins are only available if toasts are enabled. Set '$include-toast' to 'true' and try again!";
|
||||
}
|
||||
.#{$toast-name}.#{$toast-alt-name} {
|
||||
@if $toast-alt-back-color != $toast-back-color {
|
||||
background: $toast-alt-back-color;
|
||||
}
|
||||
@if $toast-alt-fore-color != $toast-fore-color {
|
||||
color: $toast-alt-fore-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate toast styles (toast style variants).
|
||||
// Variables:
|
||||
// - $toast-alt-name : The name of the class used for the alternate toast style.
|
||||
// - $toast-alt-border-style : The border style of the alternate toast style.
|
||||
// - $toast-alt-border-radius : Border radius of the alternate toast style.
|
||||
// - $toast-alt-padding : (Optional) Padding of the alternate toast style. Defaults to the toast's padding.
|
||||
// - $toast-alt-box-shadow : (Optional) Box shadow of the alretnate toast style. Defaults to the toast's box shadow.
|
||||
@mixin make-toast-alt-style ($toast-alt-name, $toast-alt-border-style, $toast-alt-border-radius,
|
||||
$toast-alt-padding : $toast-padding, $toast-alt-box-shadow : $toast-box-shadow) {
|
||||
@if not ($include-toast) {
|
||||
@error "Contextual module's toast mixins are only available if toasts are enabled. Set '$include-toast' to 'true' and try again!";
|
||||
}
|
||||
.#{$toast-name}.#{$toast-alt-name} {
|
||||
@if $toast-alt-border-style != $toast-border-style {
|
||||
border: $toast-alt-border-style;
|
||||
}
|
||||
@if $toast-alt-border-radius != $toast-border-radius {
|
||||
border-radius: $toast-alt-border-radius;
|
||||
}
|
||||
@if $toast-alt-padding != $toast-padding {
|
||||
padding: $toast-alt-padding;
|
||||
}
|
||||
@if $toast-alt-box-shadow != $toast-box-shadow {
|
||||
box-shadow: $toast-alt-box-shadowbox-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate tooltip (tooltip color variants).
|
||||
// Variables:
|
||||
// - $tooltip-alt-name : The name of the class used for the alternate tooltip.
|
||||
|
|
@ -55,7 +100,7 @@
|
|||
// - $tooltip-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the tooltip.
|
||||
@mixin make-tooltip-alt-color ($tooltip-alt-name, $tooltip-alt-back-color, $tooltip-alt-fore-color: $tooltip-fore-color) {
|
||||
@if not ($include-tooltip) {
|
||||
@error "Contextual module's tooltip mixins are only available if tooltips are enabled. Set '$include-tooltips' to 'true' and try again!";
|
||||
@error "Contextual module's tooltip mixins are only available if tooltips are enabled. Set '$include-tooltip' to 'true' and try again!";
|
||||
}
|
||||
.#{$tooltip-name}.#{$tooltip-alt-name} {
|
||||
@if $tooltip-alt-back-color != $tooltip-back-color {
|
||||
|
|
@ -86,7 +131,7 @@
|
|||
@mixin make-tooltip-alt-style ($tooltip-alt-name, $tooltip-alt-tail-size, $tooltip-alt-border-radius,
|
||||
$tooltip-alt-padding : $tooltip-padding, $tooltip-alt-box-shadow : $tooltip-box-shadow) {
|
||||
@if not ($include-tooltip) {
|
||||
@error "Contextual module's tooltip mixins are only available if tooltips are enabled. Set '$include-tooltips' to 'true' and try again!";
|
||||
@error "Contextual module's tooltip mixins are only available if tooltips are enabled. Set '$include-tooltip' to 'true' and try again!";
|
||||
}
|
||||
.#{$tooltip-name}.#{$tooltip-alt-name} {
|
||||
@if $tooltip-alt-tail-size != $tooltip-tail-size {
|
||||
|
|
|
|||
Loading…
Reference in a new issue