mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-01-17 21:08:13 +01:00
Complete modal component
The modal component is now documented and completed fully.
This commit is contained in:
Angelos Chalaris
parent
57e608bf79
commit
61ad457605
@ -63,7 +63,7 @@
|
||||
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
|
||||
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
|
||||
<br/> <a href="progress.html#progress-title">Progress</a>
|
||||
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
|
||||
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
|
||||
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
|
||||
<br/> <a href="progress.html#progress-title">Progress</a>
|
||||
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
|
||||
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
|
||||
@ -84,7 +84,7 @@
|
||||
<div class="row" style="padding-top: 40px;" id="contextual-title">
|
||||
<div class="col-sm-12">
|
||||
<h1>Contextual</h1>
|
||||
<p style="text-align:justify">The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. Contextual toasts and tooltips are also provided, aiming to help deliver important information to users. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.</p>
|
||||
<p style="text-align:justify">The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. Contextual toasts, tooltips and modals are also provided, aiming to help deliver important information to users. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.</p>
|
||||
<p style="text-align:justify"><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br/>
|
||||
</div>
|
||||
</div>
|
||||
@ -93,7 +93,7 @@
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Quick overview</h2>
|
||||
<p style="text-align:justify">Almost every website present on the web has some sort of content that needs highlighting in one way or another. The <strong>contextual</strong> module provides you with simple semantic text highlighting that utilises the <code><mark></code> HTML element. Apart from that, this module contains styles and definitions for a simple <code>.toast</code> container, that you can use to display toast messages on your websites and web apps. Toasts mimic the native application notifications of certain devices, making them mobile friendly. Finally, a simple accessible <code>.tooltip</code> implementation is included. All components in this module are fully accessible, so that's another thing not to worry about.</p><br>
|
||||
<p style="text-align:justify">Almost every website present on the web has some sort of content that needs highlighting in one way or another. The <strong>contextual</strong> module provides you with simple semantic text highlighting that utilises the <code><mark></code> HTML element. Apart from that, this module contains styles and definitions for a simple <code>.toast</code> container, that you can use to display toast messages on your websites and web apps. Toasts mimic the native application notifications of certain devices, making them mobile friendly. Finally, a simple accessible <code>.tooltip</code> implementation is included along with an implementation for <code>.modal</code> dialogs. All components in this module are fully accessible, so that's another thing not to worry about.</p><br>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Quick start</h2>
|
||||
@ -227,6 +227,66 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="modals">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Modals</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<div style="text-align:center"><br/>
|
||||
<label class="button primary large" for="modal-check">Click to display a modal dialog</label><br/><br/>
|
||||
<input id="modal-check" type="checkbox"/>
|
||||
<div class="modal" style="text-align:initial">
|
||||
<div class="card">
|
||||
<label for="modal-check" class="close"></label>
|
||||
<h3 class="section double-padded">Modal</h3>
|
||||
<div class="section double-padded">
|
||||
<p>This is a modal window!</p>
|
||||
<label class="button primary" for="modal-check">Close modal</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p style="text-align: justify;">Modal dialogs are pretty ease to make. Simply create an <code><input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"></code> element, immediately followed by a <code><div></code> element with the <code>.modal</code> class. Inside this element, you can add a <code>.card</code> element with your modal dialog's contents. Remember to add a <code><label></code> element linked to your modal dialog's <code><input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"></code> to let users close the dialog. You can also apply the <code>.close</code> class to a <code><label></code> element to display a close icon at the top right of the modal dialog.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><label for="modal-toggle">Show modal</label>
|
||||
|
||||
<input id="modal-toggle" type="checkbox"/>
|
||||
<div class="modal">
|
||||
<div class="card">
|
||||
<label for="modal-toggle" class="close"></label>
|
||||
<h3 class="section">Modal</h3>
|
||||
<p class="section">This is a modal window!</p>
|
||||
</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul style="text-align: justify;">
|
||||
<li>You can use any styles you want from the <strong><a href="card.html">card</a></strong> module to create different dialogs based on context (e.g. alerts, warnings etc.).</li>
|
||||
<li>Remember to add a <code><label></code> linked to your modal dialog's <code><input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"></code> or use Javascript to alter its state, otherwise users will not be able to close the dialog.</li>
|
||||
<li>You can place your modal dialog anywhere on your page, as long as the structure is not altered. You can also toggle it from anywhere on a page.</li>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<pre><input id="modal-toggle" type="checkbox"/>
|
||||
<label for="modal-toggle">Show modal</label>
|
||||
<div class="modal">
|
||||
<div class="card">
|
||||
<label for="modal-toggle" class="close"></label>
|
||||
<h3 class="section">Bad Modal</h3>
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="dont" style="text-align: justify;"><mark class="secondary">Don't:</mark> The syntax and structure of the modal dialog's container is very strict. Try to follow it exactly as described in this section.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
||||
<div class="col-sm-12">
|
||||
<p style="text-align:justify">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
|
||||
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
|
||||
<br/> <a href="progress.html#progress-title">Progress</a>
|
||||
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
|
||||
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
|
||||
|
||||
@ -63,7 +63,8 @@
|
||||
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
|
||||
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
|
||||
<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
||||
<br/> <a href="progress.html#progress-title">Progress</a>
|
||||
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
|
||||
|
||||
@ -62,7 +62,8 @@
|
||||
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
|
||||
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
|
||||
<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
||||
<br/> <a href="progress.html#progress-title">Progress</a>
|
||||
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
|
||||
@ -79,7 +80,7 @@
|
||||
<div class="row" style="padding-top: 40px;" id="contextual-title">
|
||||
<div class="col-sm-12">
|
||||
<h1>Contextual</h1>
|
||||
<p style="text-align:justify">The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. Contextual toasts and tooltips are also provided, aiming to help deliver important information to users. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.</p><br/>
|
||||
<p style="text-align:justify">The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. Contextual toasts, tooltips and modals are also provided, aiming to help deliver important information to users. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.</p><br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
@ -212,7 +213,7 @@
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Tooltips</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>contextual</strong> module's contains a flag to enable or disable tooltips, custom classes for creating them and other variables for style customization.</p><br/>
|
||||
<p style="text-align:justify">The <strong>contextual</strong> module contains a flag to enable or disable tooltips, custom classes for creating them and other variables for style customization.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
@ -268,6 +269,59 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="modals">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Modals</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>contextual</strong> module contains a flag to enable or disable modals, a custom class for creating them and other variables for style customization.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$include-modal</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Enables modal components<sup><a href="#modal-note-one">1</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$modal-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for modal components<sup><a href="#modal-note-one">1</a></sup></td><td data-label="Sample value">'modal'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$modal-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for modal components<sup><a href="#modal-note-one">1</a></sup></td><td data-label="Sample value">black</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$modal-back-opacity</td><td data-label="Type">Opacity</td>
|
||||
<td data-label="Description">Background opacity for modal components<sup><a href="#modal-note-one">1</a></sup></td><td data-label="Sample value">0.4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$modal-close-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name of the close button of the modal component<sup><a href="#modal-note-one">1</a></sup></td><td data-label="Sample value">'close'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$modal-close-top</td><td data-label="Type">Position top</td>
|
||||
<td data-label="Description">Top position of the close button of the modal component<sup><a href="#modal-note-one">1</a></sup></td><td data-label="Sample value">12px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$modal-close-right</td><td data-label="Type">Position right</td>
|
||||
<td data-label="Description">Right position of the close button of the modal component<sup><a href="#modal-note-one">1</a></sup><td data-label="Sample value">4px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes:</h3>
|
||||
<ol style="text-align:justify">
|
||||
<li id="modal-note-one">The values used in the modal components will only be used if <code>$include-modal</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="highlighting-mixins">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
|
||||
@ -62,7 +62,8 @@
|
||||
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
|
||||
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
|
||||
<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
||||
<br/> <a href="progress.html#progress-title">Progress</a>
|
||||
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
|
||||
|
||||
@ -64,7 +64,8 @@
|
||||
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
|
||||
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
|
||||
<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
||||
<br/> <a href="progress.html#progress-title">Progress</a>
|
||||
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
|
||||
|
||||
@ -61,7 +61,8 @@
|
||||
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
|
||||
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
|
||||
<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
||||
<br/> <a href="progress.html#progress-title">Progress</a>
|
||||
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
|
||||
|
||||
@ -63,7 +63,8 @@
|
||||
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
|
||||
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
|
||||
<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
||||
<br/> <a href="progress.html#progress-title">Progress</a>
|
||||
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
|
||||
|
||||
@ -62,7 +62,8 @@
|
||||
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
|
||||
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
|
||||
<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
||||
<br/> <a href="progress.html#progress-title">Progress</a>
|
||||
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
|
||||
|
||||
@ -64,7 +64,8 @@
|
||||
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
|
||||
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
|
||||
<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
||||
<br/> <a href="progress.html#progress-title">Progress</a>
|
||||
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
|
||||
|
||||
@ -62,7 +62,8 @@
|
||||
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
|
||||
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
|
||||
<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
||||
<br/> <a href="progress.html#progress-title">Progress</a>
|
||||
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
|
||||
|
||||
@ -62,7 +62,8 @@
|
||||
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
|
||||
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
|
||||
<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
||||
<br/> <a href="progress.html#progress-title">Progress</a>
|
||||
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
|
||||
|
||||
@ -62,7 +62,8 @@
|
||||
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
|
||||
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
|
||||
<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
||||
<br/> <a href="progress.html#progress-title">Progress</a>
|
||||
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
|
||||
|
||||
@ -65,7 +65,7 @@
|
||||
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
|
||||
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
|
||||
<br/> <a href="progress.html#progress-title">Progress</a>
|
||||
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
|
||||
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
|
||||
|
||||
@ -65,7 +65,7 @@
|
||||
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
|
||||
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
|
||||
<br/> <a href="progress.html#progress-title">Progress</a>
|
||||
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
|
||||
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
|
||||
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
|
||||
<br/> <a href="progress.html#progress-title">Progress</a>
|
||||
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
|
||||
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
|
||||
@ -167,10 +167,11 @@
|
||||
<div class="col-sm-12 col-lg-6 row">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="secondary"><i class="fa fa-tags fa-fw" aria-hidden="true"></i></mark> Contextual</h2>
|
||||
<div class="section box-left"><p style="text-align: justify;">The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. Contextual toasts and tooltips are also provided, aiming to help deliver important information to users. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily. More specifically, the <strong>contextual</strong> module contains:</p><ul>
|
||||
<div class="section box-left"><p style="text-align: justify;">The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. Contextual toasts, tooltips and modals are also provided, aiming to help deliver important information to users. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily. More specifically, the <strong>contextual</strong> module contains:</p><ul>
|
||||
<li><a href="contextual.html#text-highlighting" class="sublink-1">Styling for highlighted text</a></li>
|
||||
<li><a href="contextual.html#toasts" class="sublink-1">Classes for creating toast messages</a></li>
|
||||
<li><a href="contextual.html#tooltips" class="sublink-1">Classes for creating hover-over tooltips</a></li>
|
||||
<li><a href="contextual.html#modals" class="sublink-1">Classes for creating modal dialogs</a></li>
|
||||
</ul></div><a href="contextual.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -67,7 +67,7 @@
|
||||
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
|
||||
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
|
||||
<br/> <a href="progress.html#progress-title">Progress</a>
|
||||
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
|
||||
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
|
||||
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
|
||||
<br/> <a href="progress.html#progress-title">Progress</a>
|
||||
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
|
||||
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
|
||||
|
||||
@ -1025,6 +1025,30 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Modals <a href="https://codepen.io/chalarangelo/pen/rwagLK" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><label for="modal-toggle">Show modal</label>
|
||||
|
||||
<input id="modal-toggle" type="checkbox"/>
|
||||
<div class="modal">
|
||||
<div class="card">
|
||||
<label for="modal-toggle" class="close"></label>
|
||||
<h3 class="section">Modal</h3>
|
||||
<p class="section">This is a modal window!</p>
|
||||
</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul style="text-align:justify">
|
||||
<li>Create an <code><input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"></code> element, immediately followed by a <code><div></code> element with the <code>.modal</code> class</li>
|
||||
<li>Use a <code>.card</code> inside the <code>.modal</code> to display contents</li>
|
||||
<li>Remember to use a <code><label></code> or some Javascript to allow users to close the dialog</li>
|
||||
<li>Modal dialogs can be placed and toggled from anywhere, although the structure must be kept intact</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
|
||||
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
|
||||
<br/> <a href="progress.html#progress-title">Progress</a>
|
||||
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
|
||||
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
|
||||
|
||||
@ -69,7 +69,7 @@
|
||||
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
|
||||
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
|
||||
<br/> <a href="progress.html#progress-title">Progress</a>
|
||||
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
|
||||
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
|
||||
|
||||
@ -64,7 +64,7 @@
|
||||
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
|
||||
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
|
||||
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
|
||||
<br/> <a href="progress.html#progress-title">Progress</a>
|
||||
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
|
||||
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
|
||||
|
||||
@ -1220,3 +1220,9 @@
|
||||
- All changes have been tested and no errors were found (as far as I can tell).
|
||||
- Created the `.modal` component, added to the `default` flavor, documenting and adding to other flavors pending.
|
||||
- Updated all flavors for the new `.modal` component to be included (or not) as needed.
|
||||
|
||||
## 20170606
|
||||
|
||||
- Fully documented `modal` component.
|
||||
- Added navigation for `modal` component.
|
||||
- Documented customization of `modal` component.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user