diff options
| author | Yan Zhu <picturepan2@hotmail.com> | 2017-10-18 10:01:36 +0300 |
|---|---|---|
| committer | Yan Zhu <picturepan2@hotmail.com> | 2017-10-18 10:01:36 +0300 |
| commit | 2d12f808e4b91e92cf4c28de7dca1c9f02dd0b8b (patch) | |
| tree | ccc0e464cd6a4fe6c35c698ac4a56170cbd4a94b /docs | |
| parent | 7b7137c277fb38e67d39a11acd1342f6c2891dfd (diff) | |
Rewrite Off-canvas component and update the Docs
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/components.html | 3338 | ||||
| -rw-r--r-- | docs/css/docs.css | 311 | ||||
| -rw-r--r-- | docs/dist/spectre-exp.css | 35 | ||||
| -rw-r--r-- | docs/dist/spectre-exp.min.css | 2 | ||||
| -rw-r--r-- | docs/dist/spectre-icons.css | 2 | ||||
| -rw-r--r-- | docs/dist/spectre-icons.min.css | 2 | ||||
| -rw-r--r-- | docs/dist/spectre.css | 2 | ||||
| -rw-r--r-- | docs/dist/spectre.min.css | 2 | ||||
| -rw-r--r-- | docs/elements.html | 2849 | ||||
| -rw-r--r-- | docs/experimentals.html | 1488 | ||||
| -rw-r--r-- | docs/getting-started.html | 1034 | ||||
| -rw-r--r-- | docs/layout.html | 1194 | ||||
| -rw-r--r-- | docs/src/docs.scss | 222 | ||||
| -rw-r--r-- | docs/utilities.html | 856 |
14 files changed, 5609 insertions, 5728 deletions
diff --git a/docs/components.html b/docs/components.html index 3758f65..9898b83 100644 --- a/docs/components.html +++ b/docs/components.html @@ -9,397 +9,396 @@ <title>Components - Spectre.css CSS Framework</title> <link rel="stylesheet" href="dist/spectre.css"> <link rel="stylesheet" href="dist/spectre-icons.css"> + <link rel="stylesheet" href="dist/spectre-exp.css"> <link rel="stylesheet" href="css/docs.css"> </head> <body> - <div class="s-container container"> - <div class="columns"> - <div id="sidebar" class="s-sidebar"> - <div class="s-brand"> - <a href="index.html" class="s-logo"> - <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>Spectre.css</h2> - </a> - </div> - <div class="s-nav"> - <div class="accordion-container"> + <div class="docs-container off-canvas"> + <div class="docs-navbar"> + <a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"> + <i class="icon icon-menu"></i> + </a> + <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> + </div> + + <div id="sidebar" class="docs-sidebar off-canvas-sidebar"> + <div class="docs-brand"> + <a href="index.html" class="docs-logo"> + <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> + <h2>Spectre.css</h2> + </a> + </div> + <div class="docs-nav"> + <div class="accordion-container"> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-1"> + Getting started + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="getting-started.html#introduction">Introduction</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#installation">Installation</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#custom">Custom version</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#browsers">Browser support</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#whatsnew">What's new</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-2"> + Elements + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="elements.html#typography">Typography</a> + </li> + <li class="menu-item"> + <a href="elements.html#tables">Tables</a> + </li> + <li class="menu-item"> + <a href="elements.html#buttons">Buttons</a> + </li> + <li class="menu-item"> + <a href="elements.html#forms">Forms</a> + </li> + <li class="menu-item"> + <a href="elements.html#icons">Icons</a> + </li> + <li class="menu-item"> + <a href="elements.html#labels">Labels</a> + </li> + <li class="menu-item"> + <a href="elements.html#codes">Codes</a> + </li> + <li class="menu-item"> + <a href="elements.html#media">Media</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-3"> + Layout + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="layout.html#grid">Flexbox grid</a> + </li> + <li class="menu-item"> + <a href="layout.html#responsive">Responsive</a> + </li> + <li class="menu-item"> + <a href="layout.html#navbar">Navbar</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden checked> + <label class="accordion-header c-hand" for="docs-accordion-4"> + Components + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="components.html#accordions">Accordions</a> + </li> + <li class="menu-item"> + <a href="components.html#autocomplete">Autocomplete</a> + </li> + <li class="menu-item"> + <a href="components.html#avatars">Avatars</a> + </li> + <li class="menu-item"> + <a href="components.html#badges">Badges</a> + </li> + <li class="menu-item"> + <a href="components.html#bars">Bars</a> + </li> + <li class="menu-item"> + <a href="components.html#breadcrumbs">Breadcrumbs</a> + </li> + <li class="menu-item"> + <a href="components.html#cards">Cards</a> + </li> + <li class="menu-item"> + <a href="components.html#chips">Chips</a> + </li> + <li class="menu-item"> + <a href="components.html#empty">Empty states</a> + </li> + <li class="menu-item"> + <a href="components.html#menus">Menus</a> + </li> + <li class="menu-item"> + <a href="components.html#modals">Modals</a> + </li> + <li class="menu-item"> + <a href="components.html#navs">Navs</a> + </li> + <li class="menu-item"> + <a href="components.html#pagination">Pagination</a> + </li> + <li class="menu-item"> + <a href="components.html#panels">Panels</a> + </li> + <li class="menu-item"> + <a href="components.html#popovers">Popovers</a> + </li> + <li class="menu-item"> + <a href="components.html#steps">Steps</a> + </li> + <li class="menu-item"> + <a href="components.html#tabs">Tabs</a> + </li> + <li class="menu-item"> + <a href="components.html#tiles">Tiles</a> + </li> + <li class="menu-item"> + <a href="components.html#toasts">Toasts</a> + </li> + <li class="menu-item"> + <a href="components.html#tooltips">Tooltips</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-5"> + Utilities + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="utilities.html#colors">Colors</a> + </li> + <li class="menu-item"> + <a href="utilities.html#cursors">Cursors</a> + </li> + <li class="menu-item"> + <a href="utilities.html#display">Display</a> + </li> + <li class="menu-item"> + <a href="utilities.html#divider">Divider</a> + </li> + <li class="menu-item"> + <a href="utilities.html#loading">Loading</a> + </li> + <li class="menu-item"> + <a href="utilities.html#position">Position</a> + </li> + <li class="menu-item"> + <a href="utilities.html#shapes">Shapes</a> + </li> + <li class="menu-item"> + <a href="utilities.html#text">Text</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-6"> + Experimentals + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="experimentals.html#calendars">Calendars</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#carousels">Carousels</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#comparison">Comparison sliders</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#filters">Filters</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#meters">Meters</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#off-canvas">Off-canvas</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#parallax">Parallax</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#progress">Progress</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#sliders">Sliders</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#timelines">Timelines</a> + </li> + </ul> + </div> + </div> + </div> + </div> + </div> + + <a class="off-canvas-overlay" href="#close"></a> + + <div id="content" class="docs-content off-canvas-content"> + <div id="components" class="container"> + <h3 class="s-title"><a href="#components" class="anchor" aria-hidden="true">#</a>Components</h3> + </div> + + <div class="container"> + <div class="docs-ad"> + <div class="hide-md"> + <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <!-- GitHub-lg --> + <ins class="adsbygoogle" + style="display:inline-block;width:728px;height:90px" + data-ad-client="ca-pub-2225124559530218" + data-ad-slot="9894180784"></ins> + <script> + (adsbygoogle = window.adsbygoogle || []).push({}); + </script> + </div> + <div class="show-md"> + <!-- GitHub-sm --> + <ins class="adsbygoogle" + style="display:inline-block;width:300px;height:250px" + data-ad-client="ca-pub-2225124559530218" + data-ad-slot="9278881734"></ins> + <script> + (adsbygoogle = window.adsbygoogle || []).push({}); + </script> + </div> + </div> + </div> + + <div id="accordions" class="container"> + <h3 class="s-title"><a href="#accordions" class="anchor" aria-hidden="true">#</a>Accordions</h3> + <div class="docs-note"> + <p>Accordions are used to toggle sections of content.</p> + </div> + <div class="columns"> + <div class="column col-6 col-md-12"> <div class="accordion"> - <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-1"> - Getting started + <input type="radio" id="accordion-1" name="accordion-radio" hidden checked> + <label class="accordion-header c-hand" for="accordion-1"> + <i class="icon icon-arrow-right mr-1"></i> + Elements </label> <div class="accordion-body"> <ul class="menu menu-nav"> <li class="menu-item"> - <a href="getting-started.html#introduction">Introduction</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#installation">Installation</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#custom">Custom version</a> + <a href="#accordions">Element 1</a> </li> <li class="menu-item"> - <a href="getting-started.html#browsers">Browser support</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#whatsnew">What's new</a> + <a href="#accordions">Element 2</a> </li> </ul> </div> </div> <div class="accordion"> - <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-2"> - Elements + <input type="radio" id="accordion-2" name="accordion-radio" hidden> + <label class="accordion-header c-hand" for="accordion-2"> + <i class="icon icon-arrow-right mr-1"></i> + Layout </label> <div class="accordion-body"> <ul class="menu menu-nav"> <li class="menu-item"> - <a href="elements.html#typography">Typography</a> - </li> - <li class="menu-item"> - <a href="elements.html#tables">Tables</a> - </li> - <li class="menu-item"> - <a href="elements.html#buttons">Buttons</a> - </li> - <li class="menu-item"> - <a href="elements.html#forms">Forms</a> + <a href="#accordions">Layout 1</a> </li> <li class="menu-item"> - <a href="elements.html#icons">Icons</a> - </li> - <li class="menu-item"> - <a href="elements.html#labels">Labels</a> - </li> - <li class="menu-item"> - <a href="elements.html#codes">Codes</a> - </li> - <li class="menu-item"> - <a href="elements.html#media">Media</a> + <a href="#accordions">Layout 2</a> </li> </ul> </div> </div> <div class="accordion"> - <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-3"> - Layout + <input type="radio" id="accordion-3" name="accordion-radio" hidden> + <label class="accordion-header c-hand" for="accordion-3"> + <i class="icon icon-arrow-right mr-1"></i> + Components </label> <div class="accordion-body"> <ul class="menu menu-nav"> <li class="menu-item"> - <a href="layout.html#grid">Flexbox grid</a> - </li> - <li class="menu-item"> - <a href="layout.html#responsive">Responsive</a> + <a href="#accordions">Component 1</a> </li> <li class="menu-item"> - <a href="layout.html#navbar">Navbar</a> + <a href="#accordions">Component 2</a> </li> </ul> </div> </div> + </div> + <div class="column col-6 col-md-12"> <div class="accordion"> - <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden checked> - <label class="accordion-header c-hand" for="docs-accordion-4"> - Components + <input type="checkbox" id="accordion-4" name="accordion-checkbox" hidden checked> + <label class="accordion-header c-hand" for="accordion-4"> + Elements </label> <div class="accordion-body"> <ul class="menu menu-nav"> <li class="menu-item"> - <a href="components.html#accordions">Accordions</a> + <a href="#accordions">Element 1</a> </li> <li class="menu-item"> - <a href="components.html#autocomplete">Autocomplete</a> - </li> - <li class="menu-item"> - <a href="components.html#avatars">Avatars</a> - </li> - <li class="menu-item"> - <a href="components.html#badges">Badges</a> - </li> - <li class="menu-item"> - <a href="components.html#bars">Bars</a> - </li> - <li class="menu-item"> - <a href="components.html#breadcrumbs">Breadcrumbs</a> - </li> - <li class="menu-item"> - <a href="components.html#cards">Cards</a> - </li> - <li class="menu-item"> - <a href="components.html#chips">Chips</a> - </li> - <li class="menu-item"> - <a href="components.html#empty">Empty states</a> - </li> - <li class="menu-item"> - <a href="components.html#menus">Menus</a> - </li> - <li class="menu-item"> - <a href="components.html#modals">Modals</a> - </li> - <li class="menu-item"> - <a href="components.html#navs">Navs</a> - </li> - <li class="menu-item"> - <a href="components.html#pagination">Pagination</a> - </li> - <li class="menu-item"> - <a href="components.html#panels">Panels</a> - </li> - <li class="menu-item"> - <a href="components.html#popovers">Popovers</a> - </li> - <li class="menu-item"> - <a href="components.html#steps">Steps</a> - </li> - <li class="menu-item"> - <a href="components.html#tabs">Tabs</a> - </li> - <li class="menu-item"> - <a href="components.html#tiles">Tiles</a> - </li> - <li class="menu-item"> - <a href="components.html#toasts">Toasts</a> - </li> - <li class="menu-item"> - <a href="components.html#tooltips">Tooltips</a> + <a href="#accordions">Element 2</a> </li> </ul> </div> </div> <div class="accordion"> - <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-5"> - Utilities + <input type="checkbox" id="accordion-5" name="accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="accordion-5"> + Layout </label> <div class="accordion-body"> <ul class="menu menu-nav"> <li class="menu-item"> - <a href="utilities.html#colors">Colors</a> + <a href="#accordions">Layout 1</a> </li> <li class="menu-item"> - <a href="utilities.html#cursors">Cursors</a> - </li> - <li class="menu-item"> - <a href="utilities.html#display">Display</a> - </li> - <li class="menu-item"> - <a href="utilities.html#divider">Divider</a> - </li> - <li class="menu-item"> - <a href="utilities.html#loading">Loading</a> - </li> - <li class="menu-item"> - <a href="utilities.html#position">Position</a> - </li> - <li class="menu-item"> - <a href="utilities.html#shapes">Shapes</a> - </li> - <li class="menu-item"> - <a href="utilities.html#text">Text</a> + <a href="#accordions">Layout 2</a> </li> </ul> </div> </div> <div class="accordion"> - <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-6"> - Experimentals + <input type="checkbox" id="accordion-6" name="accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="accordion-6"> + Components </label> <div class="accordion-body"> <ul class="menu menu-nav"> <li class="menu-item"> - <a href="experimentals.html#calendars">Calendars</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#carousels">Carousels</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#comparison">Comparison sliders</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#filters">Filters</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#meters">Meters</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#off-canvas">Off-canvas</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#parallax">Parallax</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#progress">Progress</a> + <a href="#accordions">Component 1</a> </li> <li class="menu-item"> - <a href="experimentals.html#sliders">Sliders</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#timelines">Timelines</a> + <a href="#accordions">Component 2</a> </li> </ul> </div> </div> </div> </div> - </div> - <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> - - <div class="s-navbar"> - <div class="menu-btn"> - <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a> - </div> - <div class="float-btn"> - <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> - </div> - </div> - - <div id="content" class="s-content"> - <div id="components" class="container"> - <h3 class="s-title"><a href="#components" class="anchor" aria-hidden="true">#</a>Components</h3> - </div> - - <div class="container"> - <div class="docs-ad"> - <div class="hide-md"> - <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> - <!-- GitHub-lg --> - <ins class="adsbygoogle" - style="display:inline-block;width:728px;height:90px" - data-ad-client="ca-pub-2225124559530218" - data-ad-slot="9894180784"></ins> - <script> - (adsbygoogle = window.adsbygoogle || []).push({}); - </script> - </div> - <div class="show-md"> - <!-- GitHub-sm --> - <ins class="adsbygoogle" - style="display:inline-block;width:300px;height:250px" - data-ad-client="ca-pub-2225124559530218" - data-ad-slot="9278881734"></ins> - <script> - (adsbygoogle = window.adsbygoogle || []).push({}); - </script> - </div> - </div> - </div> - - <div id="accordions" class="container"> - <h3 class="s-title"><a href="#accordions" class="anchor" aria-hidden="true">#</a>Accordions</h3> - <div class="docs-note"> - <p>Accordions are used to toggle sections of content.</p> - </div> - <div class="columns"> - <div class="column col-6 col-md-12"> - <div class="accordion"> - <input type="radio" id="accordion-1" name="accordion-radio" hidden checked> - <label class="accordion-header c-hand" for="accordion-1"> - <i class="icon icon-arrow-right mr-1"></i> - Elements - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="#accordions">Element 1</a> - </li> - <li class="menu-item"> - <a href="#accordions">Element 2</a> - </li> - </ul> - </div> - </div> - <div class="accordion"> - <input type="radio" id="accordion-2" name="accordion-radio" hidden> - <label class="accordion-header c-hand" for="accordion-2"> - <i class="icon icon-arrow-right mr-1"></i> - Layout - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="#accordions">Layout 1</a> - </li> - <li class="menu-item"> - <a href="#accordions">Layout 2</a> - </li> - </ul> - </div> - </div> - <div class="accordion"> - <input type="radio" id="accordion-3" name="accordion-radio" hidden> - <label class="accordion-header c-hand" for="accordion-3"> - <i class="icon icon-arrow-right mr-1"></i> - Components - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="#accordions">Component 1</a> - </li> - <li class="menu-item"> - <a href="#accordions">Component 2</a> - </li> - </ul> - </div> - </div> - </div> - <div class="column col-6 col-md-12"> - <div class="accordion"> - <input type="checkbox" id="accordion-4" name="accordion-checkbox" hidden checked> - <label class="accordion-header c-hand" for="accordion-4"> - Elements - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="#accordions">Element 1</a> - </li> - <li class="menu-item"> - <a href="#accordions">Element 2</a> - </li> - </ul> - </div> - </div> - <div class="accordion"> - <input type="checkbox" id="accordion-5" name="accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="accordion-5"> - Layout - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="#accordions">Layout 1</a> - </li> - <li class="menu-item"> - <a href="#accordions">Layout 2</a> - </li> - </ul> - </div> - </div> - <div class="accordion"> - <input type="checkbox" id="accordion-6" name="accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="accordion-6"> - Components - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="#accordions">Component 1</a> - </li> - <li class="menu-item"> - <a href="#accordions">Component 2</a> - </li> - </ul> - </div> - </div> - </div> - </div> <!-- accordions --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- standard Accordions example --></span> @@ -426,9 +425,9 @@ <<span class="tag">/div</span>> </code></pre> - <div class="docs-note"> - <p>Alternatively, you can use <code>details</code> and <code>summary</code> instead of <code>input</code> radio or checkbox trick. Add the <code>open</code> attribute to <code>details</code> to expand it. Microsoft Edge support is <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/" target="_blank">in development</a>.</p> - </div> + <div class="docs-note"> + <p>Alternatively, you can use <code>details</code> and <code>summary</code> instead of <code>input</code> radio or checkbox trick. Add the <code>open</code> attribute to <code>details</code> to expand it. Microsoft Edge support is <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/" target="_blank">in development</a>.</p> + </div> <!-- accordions --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- details and summary Accordions example --></span> @@ -443,93 +442,93 @@ <<span class="tag">/details</span>> </code></pre> - </div> + </div> - <div id="autocomplete" class="container"> - <h3 class="s-title"><a href="#autocomplete" class="anchor" aria-hidden="true">#</a>Autocomplete</h3> - <div class="docs-note"> - <p>Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. </p> - </div> - <div class="columns"> - <div class="column col-9 col-xs-12"> - <div class="form-group"> - <div class="form-autocomplete"> - <div class="form-autocomplete-input form-input"> - <span class="chip"> - Bruce Banner - </span> - <div class="chip"> - <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Avatar"> - Thor Odinson - </div> - <div class="chip"> - <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Avatar"> - Steve Rogers - </div> - <div class="chip"> - <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure> - Tony Stark - </div> - <span class="chip active"> - Natasha Romanoff - </span> - <input class="form-input" type="text" placeholder=""> + <div id="autocomplete" class="container"> + <h3 class="s-title"><a href="#autocomplete" class="anchor" aria-hidden="true">#</a>Autocomplete</h3> + <div class="docs-note"> + <p>Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. </p> + </div> + <div class="columns"> + <div class="column col-9 col-xs-12"> + <div class="form-group"> + <div class="form-autocomplete"> + <div class="form-autocomplete-input form-input"> + <span class="chip"> + Bruce Banner + </span> + <div class="chip"> + <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Avatar"> + Thor Odinson + </div> + <div class="chip"> + <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Avatar"> + Steve Rogers </div> + <div class="chip"> + <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure> + Tony Stark + </div> + <span class="chip active"> + Natasha Romanoff + </span> + <input class="form-input" type="text" placeholder=""> </div> </div> </div> - <div class="column col-9 col-xs-12"> - <div class="form-group"> - <div class="form-autocomplete"> - <div class="form-autocomplete-input form-input is-focused"> - <span class="chip"> - Bruce Banner - <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> - </span> - <span class="chip"> - <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"> - Thor Odinson - <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> - </span> - <div class="has-icon-left"> - <input class="form-input" type="text" placeholder="" value="S"> - <i class="form-icon loading"></i> - </div> + </div> + <div class="column col-9 col-xs-12"> + <div class="form-group"> + <div class="form-autocomplete"> + <div class="form-autocomplete-input form-input is-focused"> + <span class="chip"> + Bruce Banner + <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> + </span> + <span class="chip"> + <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"> + Thor Odinson + <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> + </span> + <div class="has-icon-left"> + <input class="form-input" type="text" placeholder="" value="S"> + <i class="form-icon loading"></i> </div> - <ul class="menu"> - <li class="menu-item"> - <a href="#autocomplete"> - <div class="tile tile-centered"> - <div class="tile-icon"> - <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers"> - </div> - <div class="tile-content"> - <mark>S</mark>teve Roger<mark>s</mark> - </div> + </div> + <ul class="menu"> + <li class="menu-item"> + <a href="#autocomplete"> + <div class="tile tile-centered"> + <div class="tile-icon"> + <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers"> </div> - </a> - </li> - <li class="menu-item"> - <a href="#autocomplete"> - <div class="tile tile-centered"> - <div class="tile-icon"> - <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure> - </div> - <div class="tile-content"> - Tony <mark>S</mark>tark - </div> + <div class="tile-content"> + <mark>S</mark>teve Roger<mark>s</mark> </div> - </a> - </li> - </ul> - </div> + </div> + </a> + </li> + <li class="menu-item"> + <a href="#autocomplete"> + <div class="tile tile-centered"> + <div class="tile-icon"> + <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure> + </div> + <div class="tile-content"> + Tony <mark>S</mark>tark + </div> + </div> + </a> + </li> + </ul> </div> </div> </div> - <div class="docs-note"> - <p>Add a container element with the <code>form-autocomplete</code> class. There are 2 parts of it, one is <code>form-autocomplete-input</code>, another is <code>menu</code> component. You may add the <code>is-focused</code> class to <code>form-autocomplete-input</code> to make it appear as focus state.</p> - <p>Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. The autocomplete HTML structure is exampled below.</p> - </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>form-autocomplete</code> class. There are 2 parts of it, one is <code>form-autocomplete-input</code>, another is <code>menu</code> component. You may add the <code>is-focused</code> class to <code>form-autocomplete-input</code> to make it appear as focus state.</p> + <p>Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. The autocomplete HTML structure is exampled below.</p> + </div> <!-- autocomplete --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete"</span>> @@ -566,67 +565,67 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="avatars" class="container"> - <h3 class="s-title"><a href="#avatars" class="anchor" aria-hidden="true">#</a>Avatars</h3> - <div class="docs-note"> - <p>Avatars are user profile pictures. </p> - </div> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <figure class="avatar avatar-xl"> - <img src="img/avatar-1.png" alt="Avatar XL"> - </figure> - <figure class="avatar avatar-lg"> - <img src="img/avatar-2.png" alt="Avatar LG"> - </figure> - <figure class="avatar"> - <img src="img/avatar-3.png" alt="Avatar"> - </figure> - <figure class="avatar avatar-sm"> - <img src="img/avatar-4.png" alt="Avatar SM"> - </figure> - <figure class="avatar avatar-xs"> - <img src="img/avatar-5.png" alt="Avatar XS"> - </figure> - </div> - <div class="column col-6 col-xs-12"> - <figure class="avatar avatar-xl" data-initial="YZ"></figure> - <figure class="avatar avatar-lg" data-initial="YZ"></figure> - <figure class="avatar" data-initial="YZ"></figure> - <figure class="avatar avatar-sm" data-initial="YZ"></figure> - <figure class="avatar avatar-xs" data-initial="YZ"></figure> - </div> + <div id="avatars" class="container"> + <h3 class="s-title"><a href="#avatars" class="anchor" aria-hidden="true">#</a>Avatars</h3> + <div class="docs-note"> + <p>Avatars are user profile pictures. </p> + </div> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <figure class="avatar avatar-xl"> + <img src="img/avatar-1.png" alt="Avatar XL"> + </figure> + <figure class="avatar avatar-lg"> + <img src="img/avatar-2.png" alt="Avatar LG"> + </figure> + <figure class="avatar"> + <img src="img/avatar-3.png" alt="Avatar"> + </figure> + <figure class="avatar avatar-sm"> + <img src="img/avatar-4.png" alt="Avatar SM"> + </figure> + <figure class="avatar avatar-xs"> + <img src="img/avatar-5.png" alt="Avatar XS"> + </figure> + </div> + <div class="column col-6 col-xs-12"> + <figure class="avatar avatar-xl" data-initial="YZ"></figure> + <figure class="avatar avatar-lg" data-initial="YZ"></figure> + <figure class="avatar" data-initial="YZ"></figure> + <figure class="avatar avatar-sm" data-initial="YZ"></figure> + <figure class="avatar avatar-xs" data-initial="YZ"></figure> </div> - <div class="docs-note"> - <p>Add the <code>avatar</code> class to <img> element. There are 4 additional sizes available, including <code>avatar-xl</code> (64px), <code>avatar-lg</code> (48px), <code>avatar-sm</code> (24px), and <code>avatar-xs</code> (16px). By default, the avatar size is 32px.</p> - <p>For users who don't have profile pictures, you may use their initials for avatars. Add the <code>avatar</code> class and avatar size class to <div> element. The <code>data-initial</code> attribute is the name appear inside the avatar.</p> - </div> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <figure class="avatar avatar-xl"> - <img src="img/avatar-1.png" alt="Avatar"> - <img src="img/avatar-2.png" class="avatar-icon" alt="Avatar"> - </figure> - <figure class="avatar avatar-lg"> - <img src="img/avatar-2.png" alt="Avatar"> - <img src="img/avatar-3.png" class="avatar-icon" alt="Avatar"> - </figure> - <figure class="avatar"> - <img src="img/avatar-3.png" alt="Avatar"> - <img src="img/avatar-4.png" class="avatar-icon" alt="Avatar"> - </figure> - <figure class="avatar avatar-sm"> - <img src="img/avatar-4.png" alt="Avatar"> - <img src="img/avatar-5.png" class="avatar-icon" alt="Avatar"> - </figure> - <figure class="avatar avatar-xs"> - <img src="img/avatar-5.png" alt="Avatar"> - <img src="img/avatar-1.png" class="avatar-icon" alt="Avatar"> - </figure> - </div> + </div> + <div class="docs-note"> + <p>Add the <code>avatar</code> class to <img> element. There are 4 additional sizes available, including <code>avatar-xl</code> (64px), <code>avatar-lg</code> (48px), <code>avatar-sm</code> (24px), and <code>avatar-xs</code> (16px). By default, the avatar size is 32px.</p> + <p>For users who don't have profile pictures, you may use their initials for avatars. Add the <code>avatar</code> class and avatar size class to <div> element. The <code>data-initial</code> attribute is the name appear inside the avatar.</p> + </div> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <figure class="avatar avatar-xl"> + <img src="img/avatar-1.png" alt="Avatar"> + <img src="img/avatar-2.png" class="avatar-icon" alt="Avatar"> + </figure> + <figure class="avatar avatar-lg"> + <img src="img/avatar-2.png" alt="Avatar"> + <img src="img/avatar-3.png" class="avatar-icon" alt="Avatar"> + </figure> + <figure class="avatar"> + <img src="img/avatar-3.png" alt="Avatar"> + <img src="img/avatar-4.png" class="avatar-icon" alt="Avatar"> + </figure> + <figure class="avatar avatar-sm"> + <img src="img/avatar-4.png" alt="Avatar"> + <img src="img/avatar-5.png" class="avatar-icon" alt="Avatar"> + </figure> + <figure class="avatar avatar-xs"> + <img src="img/avatar-5.png" alt="Avatar"> + <img src="img/avatar-1.png" class="avatar-icon" alt="Avatar"> + </figure> </div> + </div> <!-- avatars --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- Basic avatar examples --></span> @@ -647,28 +646,28 @@ <<span class="tag">/figure</span>> </code></pre> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <figure class="avatar avatar-xl" data-initial="YZ"> - <i class="avatar-presence online"></i> - </figure> - <figure class="avatar avatar-lg" data-initial="YZ"> - <i class="avatar-presence busy"></i> - </figure> - <figure class="avatar" data-initial="YZ"> - <i class="avatar-presence away"></i> - </figure> - <figure class="avatar avatar-sm" data-initial="YZ"> - <i class="avatar-presence offline"></i> - </figure> - <figure class="avatar avatar-xs" data-initial="YZ"> - <i class="avatar-presence online"></i> - </figure> - </div> - </div> - <div class="docs-note"> - <p>Avatars support presence indicators. You can add an <code>i</code> element with the <code>avatar-presence</code> class, and add <code>online</code>, <code>busy</code> or <code>away</code> class for different status colors. The default is gray which means offline. </p> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <figure class="avatar avatar-xl" data-initial="YZ"> + <i class="avatar-presence online"></i> + </figure> + <figure class="avatar avatar-lg" data-initial="YZ"> + <i class="avatar-presence busy"></i> + </figure> + <figure class="avatar" data-initial="YZ"> + <i class="avatar-presence away"></i> + </figure> + <figure class="avatar avatar-sm" data-initial="YZ"> + <i class="avatar-presence offline"></i> + </figure> + <figure class="avatar avatar-xs" data-initial="YZ"> + <i class="avatar-presence online"></i> + </figure> </div> + </div> + <div class="docs-note"> + <p>Avatars support presence indicators. You can add an <code>i</code> element with the <code>avatar-presence</code> class, and add <code>online</code>, <code>busy</code> or <code>away</code> class for different status colors. The default is gray which means offline. </p> + </div> <!-- avatars --> <pre class="code" data-lang="HTML"><code><<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span>> @@ -677,63 +676,63 @@ <<span class="tag">/figure</span>> </code></pre> - </div> + </div> - <div id="badges" class="container"> - <h3 class="s-title"><a href="#badges" class="anchor" aria-hidden="true">#</a>Badges</h3> - <div class="docs-note"> - <p>Badges are often used as unread number indicators.</p> - </div> - <div class="columns"> - <div class="column col-3 col-xs-6"> - <span class="badge" data-badge=""> - Notifications - </span> - </div> - <div class="column col-3 col-xs-6"> - <span class="badge" data-badge="8"> - Notifications - </span> - </div> - <div class="column col-3 col-xs-6"> - <span class="badge" data-badge="88"> - Notifications - </span> - </div> - <div class="column col-3 col-xs-6"> - <span class="badge" data-badge="888"> - Notifications - </span> - </div> - </div> - <div class="docs-note"> - <p>Add the <code>badge</code> class to non self closing elements. And add the <code>data-badge</code> attribute to define the content of a badge. The badge will appear in the top-right direction of the element. </p> - <p>If there is no <code>data-badge</code> or the attribute is not specified, the badge will appear as a dot.</p> - </div> - <div class="columns"> - <div class="column col-sm-12"> - <button class="btn badge" data-badge="">Button</button> - <button class="btn badge" data-badge="8">Button</button> - </div> - <div class="column col-sm-12"> - <button class="btn btn-primary badge" data-badge="">Button</button> - <button class="btn btn-primary badge" data-badge="8">Button</button> - </div> - <div class="column col-sm-12"> - <figure class="avatar avatar-xl badge" data-badge="8" data-initial="YZ"> - <img src="img/avatar-1.png" alt="YZ"> - </figure> - <figure class="avatar avatar-lg badge" data-badge="8" data-initial="YZ"> - <img src="img/avatar-2.png" alt="YZ"> - </figure> - <figure class="avatar badge" data-badge="8" data-initial="YZ"> - <img src="img/avatar-3.png" alt="YZ"> - </figure> - </div> + <div id="badges" class="container"> + <h3 class="s-title"><a href="#badges" class="anchor" aria-hidden="true">#</a>Badges</h3> + <div class="docs-note"> + <p>Badges are often used as unread number indicators.</p> + </div> + <div class="columns"> + <div class="column col-3 col-xs-6"> + <span class="badge" data-badge=""> + Notifications + </span> + </div> + <div class="column col-3 col-xs-6"> + <span class="badge" data-badge="8"> + Notifications + </span> + </div> + <div class="column col-3 col-xs-6"> + <span class="badge" data-badge="88"> + Notifications + </span> + </div> + <div class="column col-3 col-xs-6"> + <span class="badge" data-badge="888"> + Notifications + </span> </div> - <div class="docs-note"> - <p>Badges support <code>button</code> and <code>avatars</code> elements as well. </p> + </div> + <div class="docs-note"> + <p>Add the <code>badge</code> class to non self closing elements. And add the <code>data-badge</code> attribute to define the content of a badge. The badge will appear in the top-right direction of the element. </p> + <p>If there is no <code>data-badge</code> or the attribute is not specified, the badge will appear as a dot.</p> + </div> + <div class="columns"> + <div class="column col-sm-12"> + <button class="btn badge" data-badge="">Button</button> + <button class="btn badge" data-badge="8">Button</button> + </div> + <div class="column col-sm-12"> + <button class="btn btn-primary badge" data-badge="">Button</button> + <button class="btn btn-primary badge" data-badge="8">Button</button> + </div> + <div class="column col-sm-12"> + <figure class="avatar avatar-xl badge" data-badge="8" data-initial="YZ"> + <img src="img/avatar-1.png" alt="YZ"> + </figure> + <figure class="avatar avatar-lg badge" data-badge="8" data-initial="YZ"> + <img src="img/avatar-2.png" alt="YZ"> + </figure> + <figure class="avatar badge" data-badge="8" data-initial="YZ"> + <img src="img/avatar-3.png" alt="YZ"> + </figure> </div> + </div> + <div class="docs-note"> + <p>Badges support <code>button</code> and <code>avatars</code> elements as well. </p> + </div> <!-- badges --> <pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"badge"</span>> @@ -753,41 +752,41 @@ <<span class="tag">/figure</span>> </code></pre> - </div> + </div> - <div id="bars" class="container"> - <h3 class="s-title"><a href="#bars" class="anchor" aria-hidden="true">#</a>Bars</h3> - <div class="docs-note"> - <p>Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <code>progress</code>, <code>meter</code> and <code>input range</code> elements.</p> - </div> - <div class="columns"> - <div class="column col-8 col-xs-12"> - <div class="bar bar-sm"> - <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> - </div> + <div id="bars" class="container"> + <h3 class="s-title"><a href="#bars" class="anchor" aria-hidden="true">#</a>Bars</h3> + <div class="docs-note"> + <p>Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <code>progress</code>, <code>meter</code> and <code>input range</code> elements.</p> + </div> + <div class="columns"> + <div class="column col-8 col-xs-12"> + <div class="bar bar-sm"> + <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> - <div class="columns"> - <div class="column col-8 col-xs-12"> - <div class="bar"> - <div class="bar-item tooltip" data-tooltip="50%" role="progressbar" style="width:50%;"></div> - </div> + </div> + <div class="columns"> + <div class="column col-8 col-xs-12"> + <div class="bar"> + <div class="bar-item tooltip" data-tooltip="50%" role="progressbar" style="width:50%;"></div> </div> </div> - <div class="columns"> - <div class="column col-8 col-xs-12"> - <div class="bar"> - <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;">25%</div> - <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;background:#817fe3;">15%</div> - <div class="bar-item tooltip" data-tooltip="10%" role="progressbar" style="width:10%;background:#aaa9eb;">10%</div> - <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;">15%</div> - </div> + </div> + <div class="columns"> + <div class="column col-8 col-xs-12"> + <div class="bar"> + <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;">25%</div> + <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;background:#817fe3;">15%</div> + <div class="bar-item tooltip" data-tooltip="10%" role="progressbar" style="width:10%;background:#aaa9eb;">10%</div> + <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;">15%</div> </div> </div> - <div class="docs-note"> - <p>Add a container element with the <code>bar</code> class. And add child elements with the <code>bar-item</code> class. The width percentage value is needed for every <code>bar-item</code>.</p> - <p>There is the <code>bar-sm</code> class for thinner Bars. Also, you could use <a href="#tooltips">Tooltips</a> for any <code>bar-item</code>.</p> - </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>bar</code> class. And add child elements with the <code>bar-item</code> class. The width percentage value is needed for every <code>bar-item</code>.</p> + <p>There is the <code>bar-sm</code> class for thinner Bars. Also, you could use <a href="#tooltips">Tooltips</a> for any <code>bar-item</code>.</p> + </div> <!-- bars --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar bar-sm"</span>> @@ -801,33 +800,33 @@ <<span class="tag">/div</span>> </code></pre> - <h4 id="bars-slider" class="s-subtitle">Slider bars</h4> - <div class="columns"> - <div class="column col-8 col-xs-12"> - <div class="bar bar-slider"> - <div class="bar-item" role="progressbar" style="width:50%;"> - <button class="bar-slider-btn btn tooltip" data-tooltip="50%" role="slider"></button> - </div> + <h4 id="bars-slider" class="s-subtitle">Slider bars</h4> + <div class="columns"> + <div class="column col-8 col-xs-12"> + <div class="bar bar-slider"> + <div class="bar-item" role="progressbar" style="width:50%;"> + <button class="bar-slider-btn btn tooltip" data-tooltip="50%" role="slider"></button> </div> </div> </div> - <div class="columns"> - <div class="column col-8 col-xs-12"> - <div class="bar bar-slider"> - <div class="bar-item" role="progressbar" style="width:15%;"> - <button class="bar-slider-btn btn tooltip" data-tooltip="25%" role="slider"></button> - </div> - <div class="bar-item" role="progressbar" style="width:65%;"> - <button class="bar-slider-btn btn tooltip" data-tooltip="65%" role="slider"></button> - </div> + </div> + <div class="columns"> + <div class="column col-8 col-xs-12"> + <div class="bar bar-slider"> + <div class="bar-item" role="progressbar" style="width:15%;"> + <button class="bar-slider-btn btn tooltip" data-tooltip="25%" role="slider"></button> + </div> + <div class="bar-item" role="progressbar" style="width:65%;"> + <button class="bar-slider-btn btn tooltip" data-tooltip="65%" role="slider"></button> </div> </div> </div> + </div> - <div class="docs-note"> - <p>You can add the <code>bar-slider</code> class to the Bars container. And add child elements with the <code>bar-item</code> class and <code>bar-slider-btn</code> inside bar-item. You need to set the <code>bar-item</code> width manually to have the slider point.</p> - <p>If there are two <code>bar-item</code> divs in one bar-slider, you will have a range slider.</p> - </div> + <div class="docs-note"> + <p>You can add the <code>bar-slider</code> class to the Bars container. And add child elements with the <code>bar-item</code> class and <code>bar-slider-btn</code> inside bar-item. You need to set the <code>bar-item</code> width manually to have the slider point.</p> + <p>If there are two <code>bar-item</code> divs in one bar-slider, you will have a range slider.</p> + </div> <!-- slider bars --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- slider --></span> @@ -848,71 +847,71 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="breadcrumbs" class="container"> - <h3 class="s-title"><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</a>Breadcrumbs</h3> - <div class="docs-note"> - <p>Breadcrumbs are used as navigational hierarchies to indicate current location.</p> - </div> - <div class="columns"> - <div class="column col-12"> - <ul class="breadcrumb"> - <li class="breadcrumb-item"> - <a href="#breadcrumbs" class="tooltip" data-tooltip="Home"> - Home - </a> - </li> - <li class="breadcrumb-item"> - <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings"> - Settings - </a> - </li> - </ul> - </div> - <div class="column col-12"> - <ul class="breadcrumb"> - <li class="breadcrumb-item"> - <a href="#breadcrumbs" class="tooltip" data-tooltip="Home"> - Home - </a> - </li> - <li class="breadcrumb-item"> - <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings"> - Settings - </a> - </li> - <li class="breadcrumb-item"> - <a href="#breadcrumbs" class="tooltip" data-tooltip="Change avatar"> - Change avatar - </a> - </li> - </ul> - </div> + <div id="breadcrumbs" class="container"> + <h3 class="s-title"><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</a>Breadcrumbs</h3> + <div class="docs-note"> + <p>Breadcrumbs are used as navigational hierarchies to indicate current location.</p> + </div> + <div class="columns"> <div class="column col-12"> - <ul class="breadcrumb"> - <li class="breadcrumb-item"> - <a href="#breadcrumbs" class="tooltip" data-tooltip="Home"> - Home - </a> - </li> - <li class="breadcrumb-item"> - <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings"> - Settings - </a> - </li> - <li class="breadcrumb-item"> - Search result: - <a href="#breadcrumbs" class="tooltip" data-tooltip="Search result: Spectre"> - Spectre - </a> - </li> - </ul> - </div> - </div> - <div class="docs-note"> - <p>Add a container element with the <code>breadcrumb</code> class. And add child elements with the <code>breadcrumb-item</code> class.</p> + <ul class="breadcrumb"> + <li class="breadcrumb-item"> + <a href="#breadcrumbs" class="tooltip" data-tooltip="Home"> + Home + </a> + </li> + <li class="breadcrumb-item"> + <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings"> + Settings + </a> + </li> + </ul> + </div> + <div class="column col-12"> + <ul class="breadcrumb"> + <li class="breadcrumb-item"> + <a href="#breadcrumbs" class="tooltip" data-tooltip="Home"> + Home + </a> + </li> + <li class="breadcrumb-item"> + <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings"> + Settings + </a> + </li> + <li class="breadcrumb-item"> + <a href="#breadcrumbs" class="tooltip" data-tooltip="Change avatar"> + Change avatar + </a> + </li> + </ul> + </div> + <div class="column col-12"> + <ul class="breadcrumb"> + <li class="breadcrumb-item"> + <a href="#breadcrumbs" class="tooltip" data-tooltip="Home"> + Home + </a> + </li> + <li class="breadcrumb-item"> + <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings"> + Settings + </a> + </li> + <li class="breadcrumb-item"> + Search result: + <a href="#breadcrumbs" class="tooltip" data-tooltip="Search result: Spectre"> + Spectre + </a> + </li> + </ul> </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>breadcrumb</code> class. And add child elements with the <code>breadcrumb-item</code> class.</p> + </div> <!-- breadcrumbs --> <pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"breadcrumb"</span>> @@ -928,117 +927,117 @@ <<span class="tag">/ul</span>> </code></pre> - </div> + </div> - <div id="cards" class="container"> - <h3 class="s-title"><a href="#cards" class="anchor" aria-hidden="true">#</a>Cards</h3> - <div class="docs-note"> - <p>Cards are flexible content containers.</p> - </div> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="card"> - <div class="card-image"> - <img class="img-responsive" src="img/osx-el-capitan.jpg" alt="OS X El Capitan"> - </div> - <div class="card-header"> - <div class="card-title h5">Microsoft</div> - <div class="card-subtitle text-gray">Software and hardware</div> - </div> - <div class="card-body"> - Empower every person and every organization on the planet to achieve more. - </div> - <div class="card-footer"> - <a href="#cards" class="btn btn-primary">Do</a> - </div> + <div id="cards" class="container"> + <h3 class="s-title"><a href="#cards" class="anchor" aria-hidden="true">#</a>Cards</h3> + <div class="docs-note"> + <p>Cards are flexible content containers.</p> + </div> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-image"> + <img class="img-responsive" src="img/osx-el-capitan.jpg" alt="OS X El Capitan"> </div> - </div> - <div class="column col-6 col-xs-12"> - <div class="card"> - <div class="card-header"> - <div class="card-title h5">Apple</div> - <div class="card-subtitle text-gray">Hardware and software</div> - </div> - <div class="card-image"> - <img class="img-responsive" src="img/osx-yosemite.jpg" alt="OS X Yosemite"> - </div> - <div class="card-body"> - To make a contribution to the world by making tools for the mind that advance humankind. - </div> - <div class="card-footer"> - <div class="btn-group btn-group-block"> - <button class="btn btn-primary">Buy</button> - <button class="btn">Buy</button> - <button class="btn">Buy</button> - </div> - </div> + <div class="card-header"> + <div class="card-title h5">Microsoft</div> + <div class="card-subtitle text-gray">Software and hardware</div> + </div> + <div class="card-body"> + Empower every person and every organization on the planet to achieve more. + </div> + <div class="card-footer"> + <a href="#cards" class="btn btn-primary">Do</a> </div> </div> - <div class="column col-6 col-xs-12"> - <div class="card"> - <div class="card-image"> - <img class="img-responsive" src="img/macos-sierra-2.jpg" alt="macOS Sierra"> - </div> - <div class="card-header"> - <button class="btn btn-primary float-right"><i class="icon icon-plus"></i></button> - <div class="card-title h5">Google I/O</div> - <div class="card-subtitle text-gray">Software and hardware</div> - </div> - <div class="card-body"> - An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond. + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Apple</div> + <div class="card-subtitle text-gray">Hardware and software</div> + </div> + <div class="card-image"> + <img class="img-responsive" src="img/osx-yosemite.jpg" alt="OS X Yosemite"> + </div> + <div class="card-body"> + To make a contribution to the world by making tools for the mind that advance humankind. + </div> + <div class="card-footer"> + <div class="btn-group btn-group-block"> + <button class="btn btn-primary">Buy</button> + <button class="btn">Buy</button> + <button class="btn">Buy</button> </div> </div> </div> - <div class="column col-6 col-xs-12"> - <div class="card"> - <div class="card-image"> - <img class="img-responsive" src="img/osx-el-capitan-2.jpg" alt="OS X El Capitan"> - </div> - <div class="card-footer"> - <a href="#cards" class="btn btn-primary">Buy</a> - <a href="#cards" class="btn btn-link">Share</a> - </div> - <div class="card-body"> - <strong>Surface Studio</strong>. Turn your desk into a Studio. Surface Studio is designed for the creative process. - </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-image"> + <img class="img-responsive" src="img/macos-sierra-2.jpg" alt="macOS Sierra"> + </div> + <div class="card-header"> + <button class="btn btn-primary float-right"><i class="icon icon-plus"></i></button> + <div class="card-title h5">Google I/O</div> + <div class="card-subtitle text-gray">Software and hardware</div> + </div> + <div class="card-body"> + An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond. </div> </div> - <div class="column col-6 col-xs-12"> - <div class="card"> - <div class="card-header"> - <div class="card-title h5">Apple</div> - <div class="card-subtitle text-gray">Hardware and software</div> - </div> - <div class="card-body"> - To make a contribution to the world by making tools for the mind that advance humankind. - </div> - <div class="card-image"> - <img class="img-responsive" src="img/macos-sierra.jpg" alt="macOS Sierra"> - </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-image"> + <img class="img-responsive" src="img/osx-el-capitan-2.jpg" alt="OS X El Capitan"> + </div> + <div class="card-footer"> + <a href="#cards" class="btn btn-primary">Buy</a> + <a href="#cards" class="btn btn-link">Share</a> + </div> + <div class="card-body"> + <strong>Surface Studio</strong>. Turn your desk into a Studio. Surface Studio is designed for the creative process. </div> </div> - <div class="column col-6 col-xs-12"> - <div class="card"> - <div class="card-header"> - <div class="card-title h5">Google</div> - <div class="card-subtitle text-gray">Software and hardware</div> - </div> - <div class="card-body"> - Organize the world’s information and make it universally accessible and useful. - </div> - <div class="card-image"> - <img class="img-responsive" src="img/osx-yosemite-2.jpg" alt="OS X Yosemite"> - </div> - <div class="card-footer"> - <a href="#cards" class="btn btn-primary">Search</a> - <a href="#cards" class="btn btn-link">Share</a> - </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Apple</div> + <div class="card-subtitle text-gray">Hardware and software</div> + </div> + <div class="card-body"> + To make a contribution to the world by making tools for the mind that advance humankind. + </div> + <div class="card-image"> + <img class="img-responsive" src="img/macos-sierra.jpg" alt="macOS Sierra"> </div> </div> </div> - <div class="docs-note"> - <p>Add a container element with the <code>card</code> class. And add child elements with the <code>card-image</code>, <code>card-header</code>, <code>card-body</code> and/or <code>card-footer</code> classes. The <code>card-image</code> can be placed in any position. </p> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Google</div> + <div class="card-subtitle text-gray">Software and hardware</div> + </div> + <div class="card-body"> + Organize the world’s information and make it universally accessible and useful. + </div> + <div class="card-image"> + <img class="img-responsive" src="img/osx-yosemite-2.jpg" alt="OS X Yosemite"> + </div> + <div class="card-footer"> + <a href="#cards" class="btn btn-primary">Search</a> + <a href="#cards" class="btn btn-link">Share</a> + </div> + </div> </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>card</code> class. And add child elements with the <code>card-image</code>, <code>card-header</code>, <code>card-body</code> and/or <code>card-footer</code> classes. The <code>card-image</code> can be placed in any position. </p> + </div> <!-- cards --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card"</span>> @@ -1058,48 +1057,48 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="chips" class="container"> - <h3 class="s-title"><a href="#chips" class="anchor" aria-hidden="true">#</a>Chips</h3> - <div class="docs-note"> - <p>Chips are complex entities in small blocks. </p> - </div> - <div class="columns"> - <div class="column col-12"> - <span class="chip"> - Crime - </span> - <span class="chip"> - Drama - </span> - <span class="chip"> - Biography - <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> - </span> - <span class="chip"> - Mystery - <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> - </span> - </div> - <div class="column col-12"> - <div class="chip"> - <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure> - Tony Stark - </div> - <div class="chip"> - <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"> - Thor Odinson - </div> - <div class="chip"> - <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers"> - Steve Rogers - </div> + <div id="chips" class="container"> + <h3 class="s-title"><a href="#chips" class="anchor" aria-hidden="true">#</a>Chips</h3> + <div class="docs-note"> + <p>Chips are complex entities in small blocks. </p> + </div> + <div class="columns"> + <div class="column col-12"> + <span class="chip"> + Crime + </span> + <span class="chip"> + Drama + </span> + <span class="chip"> + Biography + <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> + </span> + <span class="chip"> + Mystery + <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> + </span> + </div> + <div class="column col-12"> + <div class="chip"> + <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure> + Tony Stark + </div> + <div class="chip"> + <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"> + Thor Odinson + </div> + <div class="chip"> + <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers"> + Steve Rogers </div> </div> - <div class="docs-note"> - <p>Add a container element with the <code>chip</code> class. And add child text element, buttons or avatars with the <code>avatar</code> class.</p> - </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>chip</code> class. And add child text element, buttons or avatars with the <code>avatar</code> class.</p> + </div> <!-- chips --> <pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip"</span>>Crime<<span class="tag">/span</span>> @@ -1116,59 +1115,59 @@ <<span class="tag">/div</span>></code> </pre> - </div> + </div> - <div id="empty" class="container"> - <h3 class="s-title"><a href="#empty" class="anchor" aria-hidden="true">#</a>Empty states</h3> - <div class="docs-note"> - <p>Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.</p> - </div> - <div class="columns"> - <div class="column col-12"> - <div class="empty"> - <div class="empty-icon"> - <i class="icon icon-3x icon-mail"></i> - </div> - <p class="empty-title h5">You have no new messages</p> - <p class="empty-subtitle">Click the button to start a conversation</p> - <div class="empty-action"> - <button class="btn btn-primary">Send a message</button> - </div> + <div id="empty" class="container"> + <h3 class="s-title"><a href="#empty" class="anchor" aria-hidden="true">#</a>Empty states</h3> + <div class="docs-note"> + <p>Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.</p> + </div> + <div class="columns"> + <div class="column col-12"> + <div class="empty"> + <div class="empty-icon"> + <i class="icon icon-3x icon-mail"></i> + </div> + <p class="empty-title h5">You have no new messages</p> + <p class="empty-subtitle">Click the button to start a conversation</p> + <div class="empty-action"> + <button class="btn btn-primary">Send a message</button> </div> </div> - <div class="column col-12"> - <div class="empty"> - <div class="empty-icon"> - <i class="icon icon-3x icon-mail"></i> - </div> - <p class="empty-title h5">You've successfully signed up</p> - <p class="empty-subtitle">Click the button to invite your friends</p> - <div class="empty-action"> - <button class="btn btn-primary">Invite your friends</button> - </div> - <div class="empty-action"> - <button class="btn btn-link">Skip</button> - </div> + </div> + <div class="column col-12"> + <div class="empty"> + <div class="empty-icon"> + <i class="icon icon-3x icon-mail"></i> + </div> + <p class="empty-title h5">You've successfully signed up</p> + <p class="empty-subtitle">Click the button to invite your friends</p> + <div class="empty-action"> + <button class="btn btn-primary">Invite your friends</button> + </div> + <div class="empty-action"> + <button class="btn btn-link">Skip</button> </div> </div> - <div class="column col-12"> - <div class="empty"> - <div class="empty-icon"> - <i class="icon icon-3x icon-people"></i> - </div> - <p class="empty-title h5">You are not following anyone</p> - <p class="empty-subtitle">Start to meet new friends</p> - <div class="empty-action input-group input-inline"> - <input type="text" class="form-input" placeholder=""> - <button class="btn btn-primary input-group-btn">Search</button> - </div> + </div> + <div class="column col-12"> + <div class="empty"> + <div class="empty-icon"> + <i class="icon icon-3x icon-people"></i> + </div> + <p class="empty-title h5">You are not following anyone</p> + <p class="empty-subtitle">Start to meet new friends</p> + <div class="empty-action input-group input-inline"> + <input type="text" class="form-input" placeholder=""> + <button class="btn btn-primary input-group-btn">Search</button> </div> </div> </div> + </div> - <div class="docs-note"> - <p>An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. Add <code>empty-icon</code>, <code>empty-title</code>, <code>empty-subtitle</code> or <code>empty-action</code> to the elements. HTML structure is exampled below. </p> - </div> + <div class="docs-note"> + <p>An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. Add <code>empty-icon</code>, <code>empty-title</code>, <code>empty-subtitle</code> or <code>empty-action</code> to the elements. HTML structure is exampled below. </p> + </div> <!-- empty states --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"empty"</span>> @@ -1183,78 +1182,78 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="menus" class="container"> - <h3 class="s-title"><a href="#menus" class="anchor" aria-hidden="true">#</a>Menus</h3> - <div class="docs-note"> - <p>Menus are vertical list of links or buttons for actions and navigation.</p> - </div> - <div class="columns"> - <div class="column col-4 col-xs-12"> - <ul class="menu"> - <li class="menu-item"> - <div class="tile tile-centered"> - <div class="tile-icon"> - <img src="img/avatar-4.png" class="avatar" alt="Avatar"> - </div> - <div class="tile-content"> - Steve Rogers - </div> + <div id="menus" class="container"> + <h3 class="s-title"><a href="#menus" class="anchor" aria-hidden="true">#</a>Menus</h3> + <div class="docs-note"> + <p>Menus are vertical list of links or buttons for actions and navigation.</p> + </div> + <div class="columns"> + <div class="column col-4 col-xs-12"> + <ul class="menu"> + <li class="menu-item"> + <div class="tile tile-centered"> + <div class="tile-icon"> + <img src="img/avatar-4.png" class="avatar" alt="Avatar"> </div> - </li> - <li class="divider"></li> - <li class="menu-item"> - <div class="menu-badge"> - <label class="label label-primary">2</label> + <div class="tile-content"> + Steve Rogers </div> - <a href="#menus" class="active"> - My profile - </a> - </li> - <li class="menu-item"> - <a href="#menus"> - Settings - </a> - </li> - <li class="menu-item"> - <a href="#menus"> - Logout - </a> - </li> - </ul> - </div> - <div class="column col-4 col-xs-12"> - <ul class="menu"> - <li class="divider" data-content="LINKS"></li> - <li class="menu-item"> - <a href="#menus">Slack</a> - </li> - <li class="menu-item"> - <a href="#menus">Hipchat</a> - </li> - <li class="menu-item"> - <a href="#menus">Skype</a> - </li> - </ul> - </div> - <div class="column col-4 col-xs-12"> - <ul class="menu"> - <li class="menu-item"> - <a href="#menus">Slack</a> - </li> - <li class="menu-item"> - <a href="#menus">Hipchat</a> - </li> - <li class="menu-item"> - <a href="#menus">Skype</a> - </li> - </ul> - </div> - </div> - <div class="docs-note"> - <p>Add a container element with the <code>menu</code> class. And add child elements with the <code>menu-item</code> class. You can separate menu items with a <code>divider</code>. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.</p> + </div> + </li> + <li class="divider"></li> + <li class="menu-item"> + <div class="menu-badge"> + <label class="label label-primary">2</label> + </div> + <a href="#menus" class="active"> + My profile + </a> + </li> + <li class="menu-item"> + <a href="#menus"> + Settings + </a> + </li> + <li class="menu-item"> + <a href="#menus"> + Logout + </a> + </li> + </ul> + </div> + <div class="column col-4 col-xs-12"> + <ul class="menu"> + <li class="divider" data-content="LINKS"></li> + <li class="menu-item"> + <a href="#menus">Slack</a> + </li> + <li class="menu-item"> + <a href="#menus">Hipchat</a> + </li> + <li class="menu-item"> + <a href="#menus">Skype</a> + </li> + </ul> + </div> + <div class="column col-4 col-xs-12"> + <ul class="menu"> + <li class="menu-item"> + <a href="#menus">Slack</a> + </li> + <li class="menu-item"> + <a href="#menus">Hipchat</a> + </li> + <li class="menu-item"> + <a href="#menus">Skype</a> + </li> + </ul> </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>menu</code> class. And add child elements with the <code>menu-item</code> class. You can separate menu items with a <code>divider</code>. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.</p> + </div> <!-- menus --> <pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"menu"</span>> @@ -1281,39 +1280,16 @@ <<span class="tag">/ul</span>> </code></pre> - <h4 id="dropdowns" class="s-subtitle"><a href="#dropdowns" class="anchor" aria-hidden="true">#</a>Dropdown menus</h4> - <div class="docs-note"> - <p>The dropdown is a combination of buttons and menus.</p> - </div> - <div class="columns"> - <div class="column col-xs-12"> - <div class="dropdown"> - <div class="btn-group"> - <a class="btn btn-primary">dropdown button</a> - <a class="btn btn-primary dropdown-toggle" tabindex="0"><i class="icon icon-caret"></i></a> - <ul class="menu"> - <li class="menu-item"> - <a href="#dropdowns"> - Slack - </a> - </li> - <li class="menu-item"> - <a href="#dropdowns"> - Hipchat - </a> - </li> - <li class="menu-item"> - <a href="#dropdowns"> - Skype - </a> - </li> - </ul> - </div> - </div> - </div> - <div class="column col-xs-12"> - <div class="dropdown"> - <a class="btn btn-link dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a> + <h4 id="dropdowns" class="s-subtitle"><a href="#dropdowns" class="anchor" aria-hidden="true">#</a>Dropdown menus</h4> + <div class="docs-note"> + <p>The dropdown is a combination of buttons and menus.</p> + </div> + <div class="columns"> + <div class="column col-xs-12"> + <div class="dropdown"> + <div class="btn-group"> + <a class="btn btn-primary">dropdown button</a> + <a class="btn btn-primary dropdown-toggle" tabindex="0"><i class="icon icon-caret"></i></a> <ul class="menu"> <li class="menu-item"> <a href="#dropdowns"> @@ -1334,32 +1310,55 @@ </div> </div> </div> - <div class="docs-note"> - <p>Dropdown menus component is built entirely in CSS. It is triggered by <code>:focus</code> event.</p> - <p>Add a container element with the <code>dropdown</code> class. And add a focusable element with the <code>dropdown-toggle</code> class for the button and a <code>menu</code> component right next to it. You also need to add <code>tabindex</code> to make the buttons focusable.</p> - <p>If the dropdown is close to the right edge of the browser, you can add the <code>dropdown-right</code> class to the container to prevent it appearing off screen.</p> - </div> - <div class="columns"> - <div class="column col-xs-12 text-right"> - <div class="dropdown dropdown-right"> - <a class="btn btn-primary dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a> - <ul class="menu text-left"> - <li class="menu-item"> - <a href="#dropdowns">Slack</a> - </li> - <li class="menu-item"> - <a href="#dropdowns">Hipchat</a> - </li> - <li class="menu-item"> - <a href="#dropdowns">Skype</a> - </li> - </ul> - </div> + <div class="column col-xs-12"> + <div class="dropdown"> + <a class="btn btn-link dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a> + <ul class="menu"> + <li class="menu-item"> + <a href="#dropdowns"> + Slack + </a> + </li> + <li class="menu-item"> + <a href="#dropdowns"> + Hipchat + </a> + </li> + <li class="menu-item"> + <a href="#dropdowns"> + Skype + </a> + </li> + </ul> </div> </div> - <div class="docs-note"> - <p>Also, you can implement your JS to interact with the dropdown menus by adding the <code>active</code> class to the <code>dropdown</code> container.</p> + </div> + <div class="docs-note"> + <p>Dropdown menus component is built entirely in CSS. It is triggered by <code>:focus</code> event.</p> + <p>Add a container element with the <code>dropdown</code> class. And add a focusable element with the <code>dropdown-toggle</code> class for the button and a <code>menu</code> component right next to it. You also need to add <code>tabindex</code> to make the buttons focusable.</p> + <p>If the dropdown is close to the right edge of the browser, you can add the <code>dropdown-right</code> class to the container to prevent it appearing off screen.</p> + </div> + <div class="columns"> + <div class="column col-xs-12 text-right"> + <div class="dropdown dropdown-right"> + <a class="btn btn-primary dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a> + <ul class="menu text-left"> + <li class="menu-item"> + <a href="#dropdowns">Slack</a> + </li> + <li class="menu-item"> + <a href="#dropdowns">Hipchat</a> + </li> + <li class="menu-item"> + <a href="#dropdowns">Skype</a> + </li> + </ul> + </div> </div> + </div> + <div class="docs-note"> + <p>Also, you can implement your JS to interact with the dropdown menus by adding the <code>active</code> class to the <code>dropdown</code> container.</p> + </div> <!-- dropdowns --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- basic dropdown button --></span> @@ -1391,49 +1390,49 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="modals" class="container"> - <h3 class="s-title"><a href="#modals" class="anchor" aria-hidden="true">#</a>Modals</h3> - <div class="docs-note"> - <p>Modals are flexible dialog prompts.</p> - </div> - <div class="columns"> - <div class="column"> - <a href="#example-modal-1" class="btn btn-primary">Open Modal</a> - <div class="modal" id="example-modal-1"> - <a href="#modals" class="modal-overlay" aria-label="Close"></a> - <div class="modal-container" role="document"> - <div class="modal-header"> - <a href="#modals" class="btn btn-clear float-right" aria-label="Close"></a> - <div class="modal-title h5">Modal title</div> - </div> - <div class="modal-body"> - <div class="content"> - <p>This is the content inside the modal.</p> - <h4>Lorem ipsum</h4> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> - <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> - <h4>Cupcake ipsum</h4> - <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p> - <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p> - <h4>Candy ipsum</h4> - <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p> - <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p> - </div> - </div> - <div class="modal-footer"> - <button class="btn btn-primary">Share</button> - <a href="#modals" class="btn btn-link">Close</a> + <div id="modals" class="container"> + <h3 class="s-title"><a href="#modals" class="anchor" aria-hidden="true">#</a>Modals</h3> + <div class="docs-note"> + <p>Modals are flexible dialog prompts.</p> + </div> + <div class="columns"> + <div class="column"> + <a href="#example-modal-1" class="btn btn-primary">Open Modal</a> + <div class="modal" id="example-modal-1"> + <a href="#modals" class="modal-overlay" aria-label="Close"></a> + <div class="modal-container" role="document"> + <div class="modal-header"> + <a href="#modals" class="btn btn-clear float-right" aria-label="Close"></a> + <div class="modal-title h5">Modal title</div> + </div> + <div class="modal-body"> + <div class="content"> + <p>This is the content inside the modal.</p> + <h4>Lorem ipsum</h4> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> + <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> + <h4>Cupcake ipsum</h4> + <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p> + <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p> + <h4>Candy ipsum</h4> + <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p> + <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p> </div> </div> + <div class="modal-footer"> + <button class="btn btn-primary">Share</button> + <a href="#modals" class="btn btn-link">Close</a> + </div> </div> </div> </div> - <div class="docs-note"> - <p>Add a container element with the <code>modal</code> class. And add a real container <code>modal-container</code> and overlay <code>modal-overlay</code> inside it. You can add child elements with the <code>modal-header</code>, <code>modal-content</code> and <code>modal-footer</code> - any or all of them. </p> - <p>Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the <code>active</code> class to the <code>modal</code> container.</p> - </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>modal</code> class. And add a real container <code>modal-container</code> and overlay <code>modal-overlay</code> inside it. You can add child elements with the <code>modal-header</code>, <code>modal-content</code> and <code>modal-footer</code> - any or all of them. </p> + <p>Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the <code>active</code> class to the <code>modal</code> container.</p> + </div> <!-- modals example --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal active"</span>> @@ -1455,84 +1454,84 @@ <<span class="tag">/div</span>> </code></pre> - <h4 id="modals-sizes" class="s-subtitle">Modal sizes</h4> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <a href="#example-modal-2" class="btn btn-primary">Open small size Modal</a> - <div class="modal modal-sm" id="example-modal-2"> - <a href="#modals-sizes" class="modal-overlay" aria-label="Close"></a> - <div class="modal-container" role="document"> - <div class="modal-header"> - <a href="#modals-sizes" class="btn btn-clear float-right" aria-label="Close"></a> - <div class="modal-title h5">Modal title</div> - </div> - <div class="modal-body"> - <div class="content"> - <form> - <div class="form-group"> - <label class="form-label" for="input-example-7">Name</label> - <input class="form-input" type="text" id="input-example-7" placeholder="Name"> - </div> - <div class="form-group"> - <label class="form-label">Gender</label> - <label class="form-radio"> - <input type="radio" name="gender"> - <i class="form-icon"></i> Male - </label> - <label class="form-radio"> - <input type="radio" name="gender" checked> - <i class="form-icon"></i> Female - </label> - </div> - </form> - </div> - </div> - <div class="modal-footer"> - <button class="btn btn-primary">Submit</button> - <button class="btn btn-link">Close</button> + <h4 id="modals-sizes" class="s-subtitle">Modal sizes</h4> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <a href="#example-modal-2" class="btn btn-primary">Open small size Modal</a> + <div class="modal modal-sm" id="example-modal-2"> + <a href="#modals-sizes" class="modal-overlay" aria-label="Close"></a> + <div class="modal-container" role="document"> + <div class="modal-header"> + <a href="#modals-sizes" class="btn btn-clear float-right" aria-label="Close"></a> + <div class="modal-title h5">Modal title</div> + </div> + <div class="modal-body"> + <div class="content"> + <form> + <div class="form-group"> + <label class="form-label" for="input-example-7">Name</label> + <input class="form-input" type="text" id="input-example-7" placeholder="Name"> + </div> + <div class="form-group"> + <label class="form-label">Gender</label> + <label class="form-radio"> + <input type="radio" name="gender"> + <i class="form-icon"></i> Male + </label> + <label class="form-radio"> + <input type="radio" name="gender" checked> + <i class="form-icon"></i> Female + </label> + </div> + </form> </div> </div> + <div class="modal-footer"> + <button class="btn btn-primary">Submit</button> + <button class="btn btn-link">Close</button> + </div> </div> </div> </div> - <div class="docs-note"> - <p>Use the <code>modal-sm</code> class for a smaller modal dialog. The container max width is <code>320px</code>.</p> - </div> - <div class="columns"> - <div class="column"> - <a href="#example-modal-3" class="btn btn-primary">Open large size Modal</a> - <div class="modal modal-lg" id="example-modal-3"> - <a href="#modals-sizes" class="modal-overlay" aria-label="Close"></a> - <div class="modal-container" role="document"> - <div class="modal-header"> - <a href="#modals-sizes" class="btn btn-clear float-right" aria-label="Close"></a> - <div class="modal-title h5">Modal title</div> - </div> - <div class="modal-body"> - <div class="content"> - <p>This is the content inside the modal.</p> - <h4>Lorem ipsum</h4> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> - <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> - <h4>Cupcake ipsum</h4> - <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p> - <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p> - <h4>Candy ipsum</h4> - <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p> - <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p> - </div> - </div> - <div class="modal-footer"> - <button class="btn btn-primary">Share</button> - <a href="#modals-sizes" class="btn btn-link">Close</a> + </div> + <div class="docs-note"> + <p>Use the <code>modal-sm</code> class for a smaller modal dialog. The container max width is <code>320px</code>.</p> + </div> + <div class="columns"> + <div class="column"> + <a href="#example-modal-3" class="btn btn-primary">Open large size Modal</a> + <div class="modal modal-lg" id="example-modal-3"> + <a href="#modals-sizes" class="modal-overlay" aria-label="Close"></a> + <div class="modal-container" role="document"> + <div class="modal-header"> + <a href="#modals-sizes" class="btn btn-clear float-right" aria-label="Close"></a> + <div class="modal-title h5">Modal title</div> + </div> + <div class="modal-body"> + <div class="content"> + <p>This is the content inside the modal.</p> + <h4>Lorem ipsum</h4> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> + <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> + <h4>Cupcake ipsum</h4> + <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p> + <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p> + <h4>Candy ipsum</h4> + <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p> + <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p> </div> </div> + <div class="modal-footer"> + <button class="btn btn-primary">Share</button> + <a href="#modals-sizes" class="btn btn-link">Close</a> + </div> </div> </div> </div> - <div class="docs-note"> - <p>Use the <code>modal-lg</code> class for a full size modal. The container max width is <code>960px</code>.</p> - </div> + </div> + <div class="docs-note"> + <p>Use the <code>modal-lg</code> class for a full size modal. The container max width is <code>960px</code>.</p> + </div> <!-- modals --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal modal-sm"</span>> @@ -1543,45 +1542,45 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="navs" class="container"> - <h3 class="s-title"><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h3> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <ul class="nav"> - <li class="nav-item"> - <a href="#nav">Elements</a> - </li> - <li class="nav-item active"> - <a href="#nav">Layout</a> - <ul class="nav"> - <li class="nav-item"> - <a href="#nav">Flexbox grid</a> - </li> - <li class="nav-item"> - <a href="#nav">Responsive</a> - </li> - <li class="nav-item"> - <a href="#nav">Navbar</a> - </li> - <li class="nav-item"> - <a href="#nav">Empty states</a> - </li> - </ul> - </li> - <li class="nav-item"> - <a href="#nav">Components</a> - </li> - <li class="nav-item"> - <a href="#nav">Utilities</a> - </li> - </ul> - </div> - </div> - <div class="docs-note"> - <p>Add a container element with the <code>nav</code> class. And add child elements with the <code>nav-item</code> class. The <code>nav-item</code> with the <code>active</code> class will be highlighted.</p> + <div id="navs" class="container"> + <h3 class="s-title"><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h3> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <ul class="nav"> + <li class="nav-item"> + <a href="#nav">Elements</a> + </li> + <li class="nav-item active"> + <a href="#nav">Layout</a> + <ul class="nav"> + <li class="nav-item"> + <a href="#nav">Flexbox grid</a> + </li> + <li class="nav-item"> + <a href="#nav">Responsive</a> + </li> + <li class="nav-item"> + <a href="#nav">Navbar</a> + </li> + <li class="nav-item"> + <a href="#nav">Empty states</a> + </li> + </ul> + </li> + <li class="nav-item"> + <a href="#nav">Components</a> + </li> + <li class="nav-item"> + <a href="#nav">Utilities</a> + </li> + </ul> </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>nav</code> class. And add child elements with the <code>nav-item</code> class. The <code>nav-item</code> with the <code>active</code> class will be highlighted.</p> + </div> <!-- navs --> <pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"nav"</span>> @@ -1614,71 +1613,71 @@ <<span class="tag">/ul</span>> </code></pre> - </div> + </div> - <div id="pagination" class="container"> - <h3 class="s-title"><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h3> - <div class="columns"> - <div class="column col-xs-12"> - <ul class="pagination"> - <li class="page-item"> - <a href="#pagination">Prev</a> - </li> - <li class="page-item"> - <a href="#pagination">1</a> - </li> - <li class="page-item"> - <span>...</span> - </li> - <li class="page-item"> - <a href="#pagination">4</a> - </li> - <li class="page-item active"> - <a href="#pagination">5</a> - </li> - <li class="page-item"> - <a href="#pagination">6</a> - </li> - <li class="page-item"> - <span>...</span> - </li> - <li class="page-item"> - <a href="#pagination">9</a> - </li> - <li class="page-item"> - <a href="#pagination">Next</a> - </li> - </ul> - </div> - <div class="column col-xs-12"> - <ul class="pagination"> - <li class="page-item disabled"> - <a href="#pagination" tabindex="-1">Prev</a> - </li> - <li class="page-item active"> - <a href="#pagination">1</a> - </li> - <li class="page-item"> - <a href="#pagination">2</a> - </li> - <li class="page-item"> - <a href="#pagination">3</a> - </li> - <li class="page-item"> - <span>...</span> - </li> - <li class="page-item"> - <a href="#pagination">9</a> - </li> - <li class="page-item"> - <a href="#pagination">Next</a> - </li> - </ul> - </div> - </div> - <div class="docs-note"> - <p>Add a container element with the <code>pagination</code> class. And add child elements with the <code>page-item</code> class. The <code>page-item</code> with the <code>active</code> class will be highlighted. You can add the <code>disabled</code> to the <code>page-item</code> to have unclickable page links. </p> + <div id="pagination" class="container"> + <h3 class="s-title"><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h3> + <div class="columns"> + <div class="column col-xs-12"> + <ul class="pagination"> + <li class="page-item"> + <a href="#pagination">Prev</a> + </li> + <li class="page-item"> + <a href="#pagination">1</a> + </li> + <li class="page-item"> + <span>...</span> + </li> + <li class="page-item"> + <a href="#pagination">4</a> + </li> + <li class="page-item active"> + <a href="#pagination">5</a> + </li> + <li class="page-item"> + <a href="#pagination">6</a> + </li> + <li class="page-item"> + <span>...</span> + </li> + <li class="page-item"> + <a href="#pagination">9</a> + </li> + <li class="page-item"> + <a href="#pagination">Next</a> + </li> + </ul> + </div> + <div class="column col-xs-12"> + <ul class="pagination"> + <li class="page-item disabled"> + <a href="#pagination" tabindex="-1">Prev</a> + </li> + <li class="page-item active"> + <a href="#pagination">1</a> + </li> + <li class="page-item"> + <a href="#pagination">2</a> + </li> + <li class="page-item"> + <a href="#pagination">3</a> + </li> + <li class="page-item"> + <span>...</span> + </li> + <li class="page-item"> + <a href="#pagination">9</a> + </li> + <li class="page-item"> + <a href="#pagination">Next</a> + </li> + </ul> </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>pagination</code> class. And add child elements with the <code>page-item</code> class. The <code>page-item</code> with the <code>active</code> class will be highlighted. You can add the <code>disabled</code> to the <code>page-item</code> to have unclickable page links. </p> + </div> <!-- pagination --> <pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"pagination"</span>> @@ -1706,27 +1705,27 @@ <<span class="tag">/ul</span>> </code></pre> - <div class="columns"> - <div class="column col-12"> - <ul class="pagination"> - <li class="page-item page-prev"> - <a href="#pagination"> - <div class="page-item-subtitle">Previous</div> - <div class="page-item-title h5">Getting started</div> - </a> - </li> - <li class="page-item page-next"> - <a href="#pagination"> - <div class="page-item-subtitle">Next</div> - <div class="page-item-title h5">Layout</div> - </a> - </li> - </ul> - </div> - </div> - <div class="docs-note"> - <p>You could use previous and next pagination to navigate. </p> + <div class="columns"> + <div class="column col-12"> + <ul class="pagination"> + <li class="page-item page-prev"> + <a href="#pagination"> + <div class="page-item-subtitle">Previous</div> + <div class="page-item-title h5">Getting started</div> + </a> + </li> + <li class="page-item page-next"> + <a href="#pagination"> + <div class="page-item-subtitle">Next</div> + <div class="page-item-title h5">Layout</div> + </a> + </li> + </ul> </div> + </div> + <div class="docs-note"> + <p>You could use previous and next pagination to navigate. </p> + </div> <!-- pagination --> <pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"pagination"</span>> @@ -1745,149 +1744,149 @@ <<span class="tag">/ul</span>> </code></pre> - </div> + </div> - <div id="panels" class="container"> - <h3 class="s-title"><a href="#panels" class="anchor" aria-hidden="true">#</a>Panels</h3> - <div class="docs-note"> - <p>Panels are flexible view container with auto-expand content section.</p> - </div> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="panel"> - <div class="panel-header text-center"> - <figure class="avatar avatar-lg"> - <img src="img/avatar-2.png" alt="Avatar"> - </figure> - <div class="panel-title h5 mt-10">Bruce Banner</div> - <div class="panel-subtitle">THE HULK</div> - </div> - <nav class="panel-nav"> - <ul class="tab tab-block"> - <li class="tab-item active"> - <a href="#panels"> - Profile - </a> - </li> - <li class="tab-item"> - <a href="#panels"> - Files - </a> - </li> - <li class="tab-item"> - <a href="#panels"> - Tasks - </a> - </li> - </ul> - </nav> - <div class="panel-body"> - <div class="tile tile-centered"> - <div class="tile-content"> - <div class="tile-title">E-mail</div> - <div class="tile-subtitle">bruce.banner@hulk.com</div> - </div> - <div class="tile-action"> - <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button> - </div> + <div id="panels" class="container"> + <h3 class="s-title"><a href="#panels" class="anchor" aria-hidden="true">#</a>Panels</h3> + <div class="docs-note"> + <p>Panels are flexible view container with auto-expand content section.</p> + </div> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <div class="panel"> + <div class="panel-header text-center"> + <figure class="avatar avatar-lg"> + <img src="img/avatar-2.png" alt="Avatar"> + </figure> + <div class="panel-title h5 mt-10">Bruce Banner</div> + <div class="panel-subtitle">THE HULK</div> + </div> + <nav class="panel-nav"> + <ul class="tab tab-block"> + <li class="tab-item active"> + <a href="#panels"> + Profile + </a> + </li> + <li class="tab-item"> + <a href="#panels"> + Files + </a> + </li> + <li class="tab-item"> + <a href="#panels"> + Tasks + </a> + </li> + </ul> + </nav> + <div class="panel-body"> + <div class="tile tile-centered"> + <div class="tile-content"> + <div class="tile-title">E-mail</div> + <div class="tile-subtitle">bruce.banner@hulk.com</div> + </div> + <div class="tile-action"> + <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button> </div> - <div class="tile tile-centered"> - <div class="tile-content"> - <div class="tile-title">Skype</div> - <div class="tile-subtitle">bruce.banner</div> - </div> - <div class="tile-action"> - <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button> - </div> + </div> + <div class="tile tile-centered"> + <div class="tile-content"> + <div class="tile-title">Skype</div> + <div class="tile-subtitle">bruce.banner</div> </div> - <div class="tile tile-centered"> - <div class="tile-content"> - <div class="tile-title">Location</div> - <div class="tile-subtitle">Dayton, Ohio</div> - </div> - <div class="tile-action"> - <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button> - </div> + <div class="tile-action"> + <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button> </div> </div> - <div class="panel-footer"> - <button class="btn btn-primary btn-block">Save</button> + <div class="tile tile-centered"> + <div class="tile-content"> + <div class="tile-title">Location</div> + <div class="tile-subtitle">Dayton, Ohio</div> + </div> + <div class="tile-action"> + <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button> + </div> </div> </div> + <div class="panel-footer"> + <button class="btn btn-primary btn-block">Save</button> + </div> </div> - <div class="column col-6 col-xs-12"> - <div class="panel"> - <div class="panel-header"> - <div class="panel-title h6">Comments</div> + </div> + <div class="column col-6 col-xs-12"> + <div class="panel"> + <div class="panel-header"> + <div class="panel-title h6">Comments</div> + </div> + <div class="panel-body"> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar"> + <img src="img/avatar-1.png" alt="Avatar"> + </figure> + </div> + <div class="tile-content"> + <p class="tile-title">Thor Odinson</p> + <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> + </div> </div> - <div class="panel-body"> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar"> - <img src="img/avatar-1.png" alt="Avatar"> - </figure> - </div> - <div class="tile-content"> - <p class="tile-title">Thor Odinson</p> - <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> - </div> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar"> + <img src="img/avatar-2.png" alt="Avatar"> + </figure> </div> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar"> - <img src="img/avatar-2.png" alt="Avatar"> - </figure> - </div> - <div class="tile-content"> - <p class="tile-title">Bruce Banner</p> - <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> - </div> + <div class="tile-content"> + <p class="tile-title">Bruce Banner</p> + <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> </div> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar" data-initial="TS"></figure> - </div> - <div class="tile-content"> - <p class="tile-title">Tony Stark</p> - <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> - </div> + </div> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar" data-initial="TS"></figure> + </div> + <div class="tile-content"> + <p class="tile-title">Tony Stark</p> + <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> </div> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar"> - <img src="img/avatar-4.png" alt="Avatar"> - </figure> - </div> - <div class="tile-content"> - <p class="tile-title">Steve Rogers</p> - <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> - </div> + </div> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar"> + <img src="img/avatar-4.png" alt="Avatar"> + </figure> </div> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar"> - <img src="img/avatar-3.png" alt="Avatar"> - </figure> - </div> - <div class="tile-content"> - <p class="tile-title">Natasha Romanoff</p> - <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> - </div> + <div class="tile-content"> + <p class="tile-title">Steve Rogers</p> + <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> </div> </div> - <div class="panel-footer"> - <div class="input-group"> - <input type="text" class="form-input" placeholder="Hello"> - <button class="btn btn-primary input-group-btn">Send</button> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar"> + <img src="img/avatar-3.png" alt="Avatar"> + </figure> </div> + <div class="tile-content"> + <p class="tile-title">Natasha Romanoff</p> + <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> + </div> + </div> + </div> + <div class="panel-footer"> + <div class="input-group"> + <input type="text" class="form-input" placeholder="Hello"> + <button class="btn btn-primary input-group-btn">Send</button> </div> </div> </div> </div> + </div> - <div class="docs-note"> - <p>Add a container element with the <code>panel</code> class. And add child elements with the <code>panel-header</code>, <code>panel-nav</code>, <code>panel-body</code> and/or <code>panel-footer</code> class. The <code>panel-body</code> can be auto expanded and vertically scrollable. </p> - </div> + <div class="docs-note"> + <p>Add a container element with the <code>panel</code> class. And add child elements with the <code>panel-header</code>, <code>panel-nav</code>, <code>panel-body</code> and/or <code>panel-footer</code> class. The <code>panel-body</code> can be auto expanded and vertically scrollable. </p> + </div> <!-- panels --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"panel"</span>> @@ -1906,103 +1905,103 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="popovers" class="container"> - <h3 class="s-title"><a href="#popovers" class="anchor" aria-hidden="true">#</a>Popovers</h3> - <div class="docs-note"> - <p>Popovers are small overlay content containers. Popovers component is built entirely in CSS.</p> - </div> - <div class="columns"> - <div class="column col-3 col-sm-6"> - <div class="popover"> - <a href="#popovers" class="btn btn-primary"> - top popover - </a> - <div class="popover-container"> - <div class="card"> - <div class="card-header"> - <div class="card-title h5">Apple</div> - <div class="card-subtitle">Software and hardware</div> - </div> - <div class="card-body"> - To make a contribution to the world by making tools for the mind that advance humankind. - </div> - <div class="card-footer"> - <button class="btn btn-primary">Buy</button> - </div> + <div id="popovers" class="container"> + <h3 class="s-title"><a href="#popovers" class="anchor" aria-hidden="true">#</a>Popovers</h3> + <div class="docs-note"> + <p>Popovers are small overlay content containers. Popovers component is built entirely in CSS.</p> + </div> + <div class="columns"> + <div class="column col-3 col-sm-6"> + <div class="popover"> + <a href="#popovers" class="btn btn-primary"> + top popover + </a> + <div class="popover-container"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Apple</div> + <div class="card-subtitle">Software and hardware</div> + </div> + <div class="card-body"> + To make a contribution to the world by making tools for the mind that advance humankind. + </div> + <div class="card-footer"> + <button class="btn btn-primary">Buy</button> </div> </div> </div> </div> - <div class="column col-3 col-sm-6"> - <div class="popover popover-right"> - <a href="#popovers" class="btn btn-primary"> - right popover - </a> - <div class="popover-container"> - <div class="card"> - <div class="card-header"> - <div class="card-title h5">Apple</div> - <div class="card-subtitle">Software and hardware</div> - </div> - <div class="card-body"> - To make a contribution to the world by making tools for the mind that advance humankind. - </div> - <div class="card-footer"> - <button class="btn btn-primary">Buy</button> - </div> + </div> + <div class="column col-3 col-sm-6"> + <div class="popover popover-right"> + <a href="#popovers" class="btn btn-primary"> + right popover + </a> + <div class="popover-container"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Apple</div> + <div class="card-subtitle">Software and hardware</div> + </div> + <div class="card-body"> + To make a contribution to the world by making tools for the mind that advance humankind. + </div> + <div class="card-footer"> + <button class="btn btn-primary">Buy</button> </div> </div> </div> </div> - <div class="column col-3 col-sm-6"> - <div class="popover popover-bottom"> - <a href="#popovers" class="btn btn-primary"> - bottom popover - </a> - <div class="popover-container"> - <div class="card"> - <div class="card-header"> - <div class="card-title h5">Apple</div> - <div class="card-subtitle">Software and hardware</div> - </div> - <div class="card-body"> - To make a contribution to the world by making tools for the mind that advance humankind. - </div> - <div class="card-footer"> - <button class="btn btn-primary">Buy</button> - </div> + </div> + <div class="column col-3 col-sm-6"> + <div class="popover popover-bottom"> + <a href="#popovers" class="btn btn-primary"> + bottom popover + </a> + <div class="popover-container"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Apple</div> + <div class="card-subtitle">Software and hardware</div> + </div> + <div class="card-body"> + To make a contribution to the world by making tools for the mind that advance humankind. + </div> + <div class="card-footer"> + <button class="btn btn-primary">Buy</button> </div> </div> </div> </div> - <div class="column col-3 col-sm-6"> - <div class="popover popover-left"> - <a href="#popovers" class="btn btn-primary"> - left popover - </a> - <div class="popover-container"> - <div class="card"> - <div class="card-header"> - <div class="card-title h5">Apple</div> - <div class="card-subtitle">Software and hardware</div> - </div> - <div class="card-body"> - To make a contribution to the world by making tools for the mind that advance humankind. - </div> - <div class="card-footer"> - <button class="btn btn-primary">Buy</button> - </div> + </div> + <div class="column col-3 col-sm-6"> + <div class="popover popover-left"> + <a href="#popovers" class="btn btn-primary"> + left popover + </a> + <div class="popover-container"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Apple</div> + <div class="card-subtitle">Software and hardware</div> + </div> + <div class="card-body"> + To make a contribution to the world by making tools for the mind that advance humankind. + </div> + <div class="card-footer"> + <button class="btn btn-primary">Buy</button> </div> </div> </div> </div> </div> - <div class="docs-note"> - <p>Wrap an element by a container with the <code>popover</code> class. And add a container with the <code>popover-container</code> next to the element. You can use <a href="#cards">Cards</a> component inside the <code>popover-container</code>. </p> - <p>Also, you can add the <code>popover-right</code>, <code>popover-bottom</code> or <code>popover-left</code> class to define the position. By default, the popovers appear above the element.</p> - </div> + </div> + <div class="docs-note"> + <p>Wrap an element by a container with the <code>popover</code> class. And add a container with the <code>popover-container</code> next to the element. You can use <a href="#cards">Cards</a> component inside the <code>popover-container</code>. </p> + <p>Also, you can add the <code>popover-right</code>, <code>popover-bottom</code> or <code>popover-left</code> class to define the position. By default, the popovers appear above the element.</p> + </div> <!-- popovers --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"popover popover-right"</span>> @@ -2023,50 +2022,50 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="steps" class="container"> - <h3 class="s-title"><a href="#steps" class="anchor" aria-hidden="true">#</a>Steps</h3> - <div class="docs-note"> - <p>Steps are progress indicators of a sequence of task steps.</p> - </div> - <div class="columns"> - <div class="column col-12"> - <ul class="step"> - <li class="step-item"> - <a href="#steps" class="tooltip" data-tooltip="Step 1 Tooltip"></a> - </li> - <li class="step-item active"> - <a href="#steps" class="tooltip" data-tooltip="Step 2 Tooltip"></a> - </li> - <li class="step-item"> - <a href="#steps" class="tooltip" data-tooltip="Step 3 Tooltip"></a> - </li> - <li class="step-item"> - <a href="#steps" class="tooltip" data-tooltip="Step 4 Tooltip"></a> - </li> - </ul> - </div> - <div class="column col-12"> - <ul class="step"> - <li class="step-item"> - <a href="#steps" class="tooltip" data-tooltip="Step 1 Tooltip">Step 1</a> - </li> - <li class="step-item"> - <a href="#steps" class="tooltip" data-tooltip="Step 2 Tooltip">Step 2</a> - </li> - <li class="step-item active"> - <a href="#steps" class="tooltip" data-tooltip="Step 3 Tooltip">Step 3</a> - </li> - <li class="step-item"> - <a href="#steps" class="tooltip" data-tooltip="Step 4 Tooltip">Step 4</a> - </li> - </ul> - </div> - </div> - <div class="docs-note"> - <p>Add a container element with the <code>step</code> class. And add child elements with the <code>step-item</code> class. The <code>step-item</code> with the <code>active</code> class will be highlighted and indicate the current state of progress.</p> + <div id="steps" class="container"> + <h3 class="s-title"><a href="#steps" class="anchor" aria-hidden="true">#</a>Steps</h3> + <div class="docs-note"> + <p>Steps are progress indicators of a sequence of task steps.</p> + </div> + <div class="columns"> + <div class="column col-12"> + <ul class="step"> + <li class="step-item"> + <a href="#steps" class="tooltip" data-tooltip="Step 1 Tooltip"></a> + </li> + <li class="step-item active"> + <a href="#steps" class="tooltip" data-tooltip="Step 2 Tooltip"></a> + </li> + <li class="step-item"> + <a href="#steps" class="tooltip" data-tooltip="Step 3 Tooltip"></a> + </li> + <li class="step-item"> + <a href="#steps" class="tooltip" data-tooltip="Step 4 Tooltip"></a> + </li> + </ul> + </div> + <div class="column col-12"> + <ul class="step"> + <li class="step-item"> + <a href="#steps" class="tooltip" data-tooltip="Step 1 Tooltip">Step 1</a> + </li> + <li class="step-item"> + <a href="#steps" class="tooltip" data-tooltip="Step 2 Tooltip">Step 2</a> + </li> + <li class="step-item active"> + <a href="#steps" class="tooltip" data-tooltip="Step 3 Tooltip">Step 3</a> + </li> + <li class="step-item"> + <a href="#steps" class="tooltip" data-tooltip="Step 4 Tooltip">Step 4</a> + </li> + </ul> </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>step</code> class. And add child elements with the <code>step-item</code> class. The <code>step-item</code> with the <code>active</code> class will be highlighted and indicate the current state of progress.</p> + </div> <!-- steps --> <pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"step"</span>> @@ -2085,61 +2084,61 @@ <<span class="tag">/ul</span>> </code></pre> - </div> + </div> - <div id="tabs" class="container"> - <h3 class="s-title"><a href="#tabs" class="anchor" aria-hidden="true">#</a>Tabs</h3> - <div class="docs-note"> - <p>Tabs enable quick switch between different views.</p> - </div> - <div class="columns"> - <div class="column col-6 col-sm-12"> - <ul class="tab"> - <li class="tab-item active"> - <a href="#tabs"> - Music - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Radio - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Store - </a> - </li> - </ul> - </div> - <div class="column col-6 col-sm-12"> - <ul class="tab tab-block"> - <li class="tab-item active"> - <a href="#tabs"> - Music - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Radio - </a> - </li> - </ul> - </div> - </div> - <div class="docs-note"> - <p>Add a container element with the <code>tab</code> class. And add child elements with the <code>tab-item</code> class. You can add the <code>tab-block</code> class for a full-width tab. The <code>tab-item</code> or its child <a> with the <code>active</code> class will be highlighted.</p> + <div id="tabs" class="container"> + <h3 class="s-title"><a href="#tabs" class="anchor" aria-hidden="true">#</a>Tabs</h3> + <div class="docs-note"> + <p>Tabs enable quick switch between different views.</p> + </div> + <div class="columns"> + <div class="column col-6 col-sm-12"> + <ul class="tab"> + <li class="tab-item active"> + <a href="#tabs"> + Music + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Playlists + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Radio + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Store + </a> + </li> + </ul> + </div> + <div class="column col-6 col-sm-12"> + <ul class="tab tab-block"> + <li class="tab-item active"> + <a href="#tabs"> + Music + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Playlists + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Radio + </a> + </li> + </ul> </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>tab</code> class. And add child elements with the <code>tab-item</code> class. You can add the <code>tab-block</code> class for a full-width tab. The <code>tab-item</code> or its child <a> with the <code>active</code> class will be highlighted.</p> + </div> <!-- tabs --> <pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab tab-block"</span>> @@ -2158,49 +2157,49 @@ <<span class="tag">/ul</span>> </code></pre> - <div class="columns"> - <div class="column col-sm-12"> - <ul class="tab"> - <li class="tab-item active"> - <a href="#tabs" class="badge" data-badge="999"> - Music - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Radio - </a> - </li> - </ul> - </div> - <div class="column col-sm-12"> - <ul class="tab tab-block"> - <li class="tab-item active"> - <a href="#tabs" class="badge" data-badge="9"> - Music - </a> - </li> - <li class="tab-item"> - <a href="#tabs" class="badge" data-badge="99"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Radio - </a> - </li> - </ul> - </div> - </div> - <div class="docs-note"> - <p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>. </p> + <div class="columns"> + <div class="column col-sm-12"> + <ul class="tab"> + <li class="tab-item active"> + <a href="#tabs" class="badge" data-badge="999"> + Music + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Playlists + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Radio + </a> + </li> + </ul> + </div> + <div class="column col-sm-12"> + <ul class="tab tab-block"> + <li class="tab-item active"> + <a href="#tabs" class="badge" data-badge="9"> + Music + </a> + </li> + <li class="tab-item"> + <a href="#tabs" class="badge" data-badge="99"> + Playlists + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Radio + </a> + </li> + </ul> </div> + </div> + <div class="docs-note"> + <p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>. </p> + </div> <!-- tabs with badges --> <pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab tab-block"</span>> @@ -2212,42 +2211,42 @@ <<span class="tag">/ul</span>> </code></pre> - <div class="columns"> - <div class="column col-12"> - <ul class="tab"> - <li class="tab-item active"> - <a href="#tabs"> - Music - <span class="btn btn-clear"></span> - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Radio - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Store - </a> - </li> - <li class="tab-item tab-action"> - <div class="input-group input-inline"> - <input class="form-input input-sm" type="text" placeholder="search"> - <button class="btn btn-primary btn-sm input-group-btn">Search</button> - </div> - </li> - </ul> - </div> - </div> - <div class="docs-note"> - <p>You could add a search box or buttons inside a tab. Add the <code>tab-action</code> class to the <code>tab-item</code>. </p> + <div class="columns"> + <div class="column col-12"> + <ul class="tab"> + <li class="tab-item active"> + <a href="#tabs"> + Music + <span class="btn btn-clear"></span> + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Playlists + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Radio + </a> + </li> + <li class="tab-item"> + <a href="#tabs"> + Store + </a> + </li> + <li class="tab-item tab-action"> + <div class="input-group input-inline"> + <input class="form-input input-sm" type="text" placeholder="search"> + <button class="btn btn-primary btn-sm input-group-btn">Search</button> + </div> + </li> + </ul> </div> + </div> + <div class="docs-note"> + <p>You could add a search box or buttons inside a tab. Add the <code>tab-action</code> class to the <code>tab-item</code>. </p> + </div> <!-- tabs with badges --> <pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab"</span>> @@ -2265,53 +2264,53 @@ <<span class="tag">/ul</span>> </code></pre> - </div> + </div> - <div id="tiles" class="container"> - <h3 class="s-title"><a href="#tiles" class="anchor" aria-hidden="true">#</a>Tiles</h3> - <div class="docs-note"> - <p>Tiles are repeatable or embeddable information blocks.</p> - </div> - <div class="columns"> - <div class="column col-9 col-sm-12"> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar avatar-lg"> - <img src="img/avatar-3.png" alt="Avatar"> - </figure> - </div> - <div class="tile-content"> - <p class="tile-title">The Avengers</p> - <p class="tile-subtitle text-gray">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> - </div> - <div class="tile-action"> - <button class="btn btn-primary">Join</button> - <button class="btn">Contact</button> - </div> + <div id="tiles" class="container"> + <h3 class="s-title"><a href="#tiles" class="anchor" aria-hidden="true">#</a>Tiles</h3> + <div class="docs-note"> + <p>Tiles are repeatable or embeddable information blocks.</p> + </div> + <div class="columns"> + <div class="column col-9 col-sm-12"> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar avatar-lg"> + <img src="img/avatar-3.png" alt="Avatar"> + </figure> </div> - </div> - <div class="column col-9 col-sm-12"> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar avatar-lg"> - <img src="img/avatar-2.png" alt="Avatar"> - </figure> - </div> - <div class="tile-content"> - <p class="tile-title">The S.H.I.E.L.D.</p> - <p class="tile-subtitle text-gray">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> - <p> - <button class="btn btn-primary btn-sm">Join</button> - <button class="btn btn-sm">Contact</button> - </p> - </div> + <div class="tile-content"> + <p class="tile-title">The Avengers</p> + <p class="tile-subtitle text-gray">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> + </div> + <div class="tile-action"> + <button class="btn btn-primary">Join</button> + <button class="btn">Contact</button> </div> </div> </div> - <div class="docs-note"> - <p>Add a container with the <code>tile</code> class. And add child elements with the <code>tile-icon</code>, <code>tile-content</code> or/and <code>tile-action</code> classes. The <code>tile-icon</code> and <code>tile-action</code> are optional.</p> - <p>There are <code>tile-title</code> and <code>tile-subtitle</code> classes for title and subtitle text styles.</p> + <div class="column col-9 col-sm-12"> + <div class="tile"> + <div class="tile-icon"> + <figure class="avatar avatar-lg"> + <img src="img/avatar-2.png" alt="Avatar"> + </figure> + </div> + <div class="tile-content"> + <p class="tile-title">The S.H.I.E.L.D.</p> + <p class="tile-subtitle text-gray">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> + <p> + <button class="btn btn-primary btn-sm">Join</button> + <button class="btn btn-sm">Contact</button> + </p> + </div> + </div> </div> + </div> + <div class="docs-note"> + <p>Add a container with the <code>tile</code> class. And add child elements with the <code>tile-icon</code>, <code>tile-content</code> or/and <code>tile-action</code> classes. The <code>tile-icon</code> and <code>tile-action</code> are optional.</p> + <p>There are <code>tile-title</code> and <code>tile-subtitle</code> classes for title and subtitle text styles.</p> + </div> <!-- tiles --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile"</span>> @@ -2330,29 +2329,29 @@ <<span class="tag">/div</span>> </code></pre> - <h4 id="tiles-compact" class="s-subtitle">Compact tiles</h4> - <div class="docs-note"> - <p>There is compact version of Tiles component, which is often used as contact and file info blocks.</p> - <p>Add the <code>tile-centered</code> class to the container <code>tile</code>. The <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code> will be vertically centered.</p> - </div> - <div class="columns"> - <div class="column col-6 col-md-9 col-xs-12"> - <div class="tile tile-centered"> - <div class="tile-icon"> - <div class="example-tile-icon"> - <i class="icon icon-mail centered"></i> - </div> - </div> - <div class="tile-content"> - <div class="tile-title">spectre-docs.pdf</div> - <div class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</div> - </div> - <div class="tile-action"> - <button class="btn btn-link btn-action"><i class="icon icon-more-vert"></i></button> + <h4 id="tiles-compact" class="s-subtitle">Compact tiles</h4> + <div class="docs-note"> + <p>There is compact version of Tiles component, which is often used as contact and file info blocks.</p> + <p>Add the <code>tile-centered</code> class to the container <code>tile</code>. The <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code> will be vertically centered.</p> + </div> + <div class="columns"> + <div class="column col-6 col-md-9 col-xs-12"> + <div class="tile tile-centered"> + <div class="tile-icon"> + <div class="example-tile-icon"> + <i class="icon icon-mail centered"></i> </div> </div> + <div class="tile-content"> + <div class="tile-title">spectre-docs.pdf</div> + <div class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</div> + </div> + <div class="tile-action"> + <button class="btn btn-link btn-action"><i class="icon icon-more-vert"></i></button> + </div> </div> </div> + </div> <!-- tiles --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile tile-centered"</span>> @@ -2373,54 +2372,54 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="toasts" class="container"> - <h3 class="s-title"><a href="#toasts" class="anchor" aria-hidden="true">#</a>Toasts</h3> - <div class="docs-note"> - <p>Toasts are used to show alert or information to users.</p> - </div> - <div class="columns"> - <div class="column col-9 col-sm-12"> - <div class="toast"> - <button class="btn btn-clear float-right"></button> - <h6>Toast Title</h6> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - </div> - </div> - <div class="column col-9 col-sm-12"> - <div class="toast toast-primary"> - <button class="btn btn-clear float-right"></button> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - </div> + <div id="toasts" class="container"> + <h3 class="s-title"><a href="#toasts" class="anchor" aria-hidden="true">#</a>Toasts</h3> + <div class="docs-note"> + <p>Toasts are used to show alert or information to users.</p> + </div> + <div class="columns"> + <div class="column col-9 col-sm-12"> + <div class="toast"> + <button class="btn btn-clear float-right"></button> + <h6>Toast Title</h6> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> - <div class="docs-note"> - <p>Add a container element with the <code>toast</code> class. You can add any text within the container, and even icons. You may also add a close button with the <code>btn-clear</code> class if you need. </p> - </div> - <div class="columns"> - <div class="column col-sm-12"> - <div class="toast toast-success"> - <button class="btn btn-clear float-right"></button> - Toast success - </div> + <div class="column col-9 col-sm-12"> + <div class="toast toast-primary"> + <button class="btn btn-clear float-right"></button> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> - <div class="column col-sm-12"> - <div class="toast toast-warning"> - <button class="btn btn-clear float-right"></button> - Toast warning - </div> + </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>toast</code> class. You can add any text within the container, and even icons. You may also add a close button with the <code>btn-clear</code> class if you need. </p> + </div> + <div class="columns"> + <div class="column col-sm-12"> + <div class="toast toast-success"> + <button class="btn btn-clear float-right"></button> + Toast success </div> - <div class="column col-sm-12"> - <div class="toast toast-error"> - <button class="btn btn-clear float-right"></button> - Toast error - </div> + </div> + <div class="column col-sm-12"> + <div class="toast toast-warning"> + <button class="btn btn-clear float-right"></button> + Toast warning </div> </div> - <div class="docs-note"> - <p>And you can add the <code>toast-primary</code>, <code>toast-success</code>, <code>toast-warning</code> or <code>toast-error</code> class for additional toast colors.</p> + <div class="column col-sm-12"> + <div class="toast toast-error"> + <button class="btn btn-clear float-right"></button> + Toast error + </div> </div> + </div> + <div class="docs-note"> + <p>And you can add the <code>toast-primary</code>, <code>toast-success</code>, <code>toast-warning</code> or <code>toast-error</code> class for additional toast colors.</p> + </div> <!-- toasts --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"toast"</span>> @@ -2433,45 +2432,44 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="tooltips" class="container"> - <h3 class="s-title"><a href="#tooltips" class="anchor" aria-hidden="true">#</a>Tooltips</h3> - <div class="docs-note"> - <p>Tooltips provide context information labels that appear on hover and focus.</p> + <div id="tooltips" class="container"> + <h3 class="s-title"><a href="#tooltips" class="anchor" aria-hidden="true">#</a>Tooltips</h3> + <div class="docs-note"> + <p>Tooltips provide context information labels that appear on hover and focus.</p> + </div> + <div class="columns text-center"> + <div class="column col-xs-12"> + <button class="btn btn-primary tooltip" data-tooltip="Top Tooltip Text">top tooltip</button> </div> - <div class="columns text-center"> - <div class="column col-xs-12"> - <button class="btn btn-primary tooltip" data-tooltip="Top Tooltip Text">top tooltip</button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Right Tooltip Text">right tooltip</button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Bottom Tooltip Text">bottom tooltip</button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Left Tooltip Text">left tooltip</button> - </div> + <div class="column col-xs-12"> + <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Right Tooltip Text">right tooltip</button> </div> - <div class="docs-note"> - <p>Tooltips component is built entirely in CSS.</p> - <p>Add the <code>tooltip</code> class and the <code>data-tooltip</code> attribute, which contains the tooltip content, to non self closing elements. And add the <code>tooltip-right</code>, <code>tooltip-bottom</code> or <code>tooltip-left</code> class to define the position of a tooltip. By default, the tooltip appears above the element.</p> + <div class="column col-xs-12"> + <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Bottom Tooltip Text">bottom tooltip</button> </div> + <div class="column col-xs-12"> + <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Left Tooltip Text">left tooltip</button> + </div> + </div> + <div class="docs-note"> + <p>Tooltips component is built entirely in CSS.</p> + <p>Add the <code>tooltip</code> class and the <code>data-tooltip</code> attribute, which contains the tooltip content, to non self closing elements. And add the <code>tooltip-right</code>, <code>tooltip-bottom</code> or <code>tooltip-left</code> class to define the position of a tooltip. By default, the tooltip appears above the element.</p> + </div> <!-- tooltips --> <pre class="code" data-lang="HTML"><code><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn tooltip"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Lorem ipsum dolor sit amet"</span>>top tooltip<<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn tooltip tooltip-right"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Lorem ipsum dolor sit amet"</span>>right tooltip<<span class="tag">/button</span>> </code></pre> - </div> + </div> - <footer class="s-footer"> - <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p> - <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> - </footer> + <footer class="docs-footer"> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p> + <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> + </footer> - </div> </div> </div> diff --git a/docs/css/docs.css b/docs/css/docs.css index 2988bef..539bde5 100644 --- a/docs/css/docs.css +++ b/docs/css/docs.css @@ -1,70 +1,85 @@ /*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */ .version::after { - content: "0.4.4"; + content: "0.4.5"; } -/* Spectre New Docs */ -.s-container > .columns { - -ms-flex-flow: nowrap; - flex-flow: nowrap; - min-height: 100vh; +.off-canvas .off-canvas-toggle { + font-size: 1rem; + left: 1.5rem; + position: fixed; + top: 1rem; } -.s-sidebar { - background: #f8f9fa; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - padding: 1.5rem 0 1.5rem 1.5rem; +.off-canvas .off-canvas-sidebar { width: 12rem; } -.s-sidebar .s-nav { +.off-canvas .off-canvas-content { + padding: 0 4rem; +} + +.docs-navbar { + height: 3.8rem; + position: fixed; + right: 0; + top: 0; + z-index: 200; +} + +.docs-navbar .btn { + position: absolute; + right: 1.5rem; + top: 1rem; +} + +.docs-sidebar .docs-nav { bottom: 1.5rem; overflow-y: auto; + padding: .5rem 1.5rem; position: fixed; - top: 5rem; - width: 10.5rem; + top: 3.5rem; + width: 12rem; } -.s-sidebar .accordion { - font-size: .7rem; +.docs-sidebar .accordion { margin-bottom: .75rem; } -.s-sidebar .accordion input ~ .accordion-header { +.docs-sidebar .accordion input ~ .accordion-header { color: #5b657a; - font-size: .6rem; + font-size: .65rem; font-weight: 600; text-transform: uppercase; } -.s-sidebar .accordion input:checked ~ .accordion-header { +.docs-sidebar .accordion input:checked ~ .accordion-header { color: #667189; } -.s-sidebar .accordion .menu .menu-item { +.docs-sidebar .accordion .menu .menu-item { + font-size: .7rem; padding-left: 1rem; } -.s-sidebar .accordion .menu .menu-item > a { +.docs-sidebar .accordion .menu .menu-item > a { background: transparent; color: #667189; display: inline-block; } -.s-content { +.docs-content { -ms-flex: 1 1 auto; flex: 1 1 auto; - max-width: 960px; - padding: 0 4rem; width: calc(100vw - 12rem); } -.s-content > .container { +.docs-content > .container { + margin-left: 0; + max-width: 800px; padding-bottom: 1.5rem; } -.s-content .anchor { +.docs-content .anchor { color: #6362dc; height: 0; margin-left: -2em; @@ -76,33 +91,34 @@ z-index: 100; } -.s-content .anchor:focus, -.s-content .anchor:hover { +.docs-content .anchor:focus, +.docs-content .anchor:hover { box-shadow: none; height: auto; text-decoration: none; width: 2em; } -.s-content .s-title, -.s-content .s-subtitle { - line-height: 1.6rem; +.docs-content .s-title, +.docs-content .s-subtitle { + color: #414857; + line-height: 1.8rem; margin-bottom: 0; - padding-bottom: 1.5rem; - padding-top: 1.5rem; + padding-bottom: 1rem; + padding-top: 1rem; position: static; } @supports ((position: -webkit-sticky) or (position: sticky)) { - .s-content .s-title, - .s-content .s-subtitle { + .docs-content .s-title, + .docs-content .s-subtitle { position: sticky; position: -webkit-sticky; top: 0; - z-index: 200; + z-index: 100; } - .s-content .s-title::before, - .s-content .s-subtitle::before { + .docs-content .s-title::before, + .docs-content .s-subtitle::before { background: #fff; bottom: 0; content: ""; @@ -115,22 +131,22 @@ } } -.s-content .s-title:hover .anchor, -.s-content .s-subtitle:hover .anchor { +.docs-content .s-title:hover .anchor, +.docs-content .s-subtitle:hover .anchor { height: auto; width: 1em; } -.s-content .s-title + .docs-note, -.s-content .s-subtitle + .docs-note { +.docs-content .s-title + .docs-note, +.docs-content .s-subtitle + .docs-note { margin-top: .4rem; } -.s-content .docs-note { +.docs-content .docs-note { margin: 1.5rem 0; } -.s-content .docs-ad { +.docs-content .docs-ad { background: #f8f9fa; border-radius: .1rem; display: inline-block; @@ -138,7 +154,7 @@ position: relative; } -.s-content .docs-ad::before { +.docs-content .docs-ad::before { color: #acb3c2; content: "AD"; font-size: .7rem; @@ -147,27 +163,27 @@ top: .1rem; } -.s-content .column { +.docs-content .column { padding: .4rem; } -.s-content .docs-block { +.docs-content .docs-block { border-radius: .1rem; padding: .4rem; } -.s-content .docs-block.bg-gray { +.docs-content .docs-block.bg-gray { background: #f0f1f4; } -.s-content .docs-shape { +.docs-content .docs-shape { height: 4.8rem; line-height: 1.2rem; padding: 1.8rem 0; width: 4.8rem; } -.s-content .docs-dot { +.docs-content .docs-dot { border-radius: 50%; display: inline-block; height: .5rem; @@ -175,43 +191,43 @@ width: .5rem; } -.s-content .docs-table th, -.s-content .docs-table td { +.docs-content .docs-table th, +.docs-content .docs-table td { padding: .75rem .25rem; } -.s-content .docs-color { +.docs-content .docs-color { border-radius: .1rem; margin: .25rem 0; padding: .5rem; } -.s-content .docs-color .color-subtitle { +.docs-content .docs-color .color-subtitle { font-size: .7rem; opacity: .75; } -.s-content .code { +.docs-content .code { color: #667189; } -.s-content .code .com { +.docs-content .code .com { color: #acb3c2; } -.s-content .code .tag { +.docs-content .code .tag { color: #5755d9; } -.s-content .code .atn { +.docs-content .code .atn { color: #667189; } -.s-content .code .atv { +.docs-content .code .atv { color: #e06870; } -.s-content .code[data-lang="Bash"] .tag { +.docs-content .code[data-lang="Bash"] .tag { margin-right: 1em; -webkit-user-select: none; -moz-user-select: none; @@ -219,23 +235,23 @@ user-select: none; } -.s-content .panel { +.docs-content .panel { height: 75vh; } -.s-content .panel .tile { +.docs-content .panel .tile { margin: .75rem 0; } -.s-content .parallax { +.docs-content .parallax { margin: 2rem auto; } -.s-content .form-autocomplete .menu { +.docs-content .form-autocomplete .menu { position: static; } -.s-content .example-tile-icon { +.docs-content .example-tile-icon { align-content: space-around; align-items: center; background: #5755d9; @@ -250,34 +266,33 @@ width: 2rem; } -.s-content .example-tile-icon .icon { +.docs-content .example-tile-icon .icon { margin: auto; } -.s-content .comparison-slider { +.docs-content .comparison-slider { height: auto; padding-bottom: 56.2222%; } -.s-content .comparison-slider .filter-grayscale { +.docs-content .comparison-slider .filter-grayscale { -webkit-filter: grayscale(75%); filter: grayscale(75%); } -.s-content .off-canvas { +.docs-content .off-canvas { height: 20rem; position: relative; } -.s-brand { +.docs-brand { color: #5755d9; - left: 0; - padding: 0 1.5rem; + left: 1.5rem; position: fixed; - top: 1.3rem; + top: .85rem; } -.s-brand .s-logo { +.docs-brand .docs-logo { align-items: center; border-radius: .1rem; display: inline-flex; @@ -288,32 +303,32 @@ width: auto; } -.s-brand .s-logo:focus, -.s-brand .s-logo:hover { +.docs-brand .docs-logo:focus, +.docs-brand .docs-logo:hover { text-decoration: none; } -.s-brand .s-logo img { +.docs-brand .docs-logo img { display: inline; height: auto; width: 1.6rem; } -.s-brand .s-logo h2 { +.docs-brand .docs-logo h2 { display: inline; - font-size: .8rem; + font-size: .9rem; font-weight: 500; margin-bottom: 0; margin-left: .5rem; margin-right: .5rem; } -.s-footer { +.docs-footer { color: #acb3c2; padding: .5rem .5rem 1.5rem .5rem; } -.s-footer a { +.docs-footer a { color: #667189; } @@ -408,116 +423,40 @@ margin-bottom: 0; } -.docs-nav-clear { - display: none; -} - -.s-navbar { - height: 3.5rem; - left: 0; - padding: .85rem 1.5rem; - position: fixed; - text-align: center; - z-index: 400; -} - -.s-navbar .s-logo, -.s-navbar .menu-btn { - display: none; -} - -.s-navbar .float-btn { - position: fixed; - right: 4rem; - top: 1.4rem; -} - -@media (max-width: 880px) { - .s-sidebar { - background: #f8f9fa; - bottom: 0; - left: 0; - overflow-y: auto; - padding: 3rem 1.5rem; - position: fixed; - top: 0; - transform: translateX(-100%); - transition: transform .2s ease; - z-index: 400; - } - .s-sidebar:target { - transform: translateX(0); - transition: transform .2s ease; - } - .s-sidebar:target + .docs-nav-clear { - display: block; +@media (max-width: 960px) { + .off-canvas .off-canvas-toggle { + z-index: 300; } - .s-sidebar .s-brand { - margin-top: -1.7rem; + .docs-sidebar .docs-brand { + margin: .85rem 1.5rem; padding: 0; position: static; } - .s-sidebar .s-nav { - margin-top: 2rem; + .docs-sidebar .docs-nav { + margin-top: 1rem; position: static; } - .s-sidebar .menu .menu-item > a { + .docs-sidebar .menu .menu-item > a { padding: .3rem .4rem; } - .s-navbar { - -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); - background: rgba(255, 255, 255, .65); - right: 0; - top: 0; - z-index: 200; - } - .s-navbar .menu-btn { - display: block; - left: 2.6rem; - position: fixed; - top: .85rem; - } - .s-navbar .menu-btn .btn { - font-size: 1rem; - } - .s-navbar .s-logo { - align-items: center; - border-radius: .1rem; - display: inline-flex; - display: -ms-inline-flexbox; - -ms-flex-align: center; - height: 2rem; - padding: .2rem; - width: auto; - } - .s-navbar .float-btn { - right: 2.9rem; - top: .85rem; - } - .docs-nav-clear { - background: rgba(0, 0, 0, .15); - display: none; - height: 100%; + .docs-navbar { + -webkit-backdrop-filter: blur(5px); + backdrop-filter: blur(5px); + background: rgba(248, 249, 250, .65); left: 0; - position: fixed; - right: 0; - top: 0; - width: 100%; - z-index: 300; } - .s-content { + .docs-content.off-canvas-content { min-width: auto; - padding: 0 2.5rem; + padding: 0 1.5rem; width: 100%; } - .s-content .s-title, - .s-content .s-subtitle { - padding-top: 4rem; + .docs-content .s-title, + .docs-content .s-subtitle { + padding-top: 5rem; position: static; } - .s-content .s-title::before, - .s-content .s-subtitle::before { + .docs-content .s-title::before, + .docs-content .s-subtitle::before { content: none; } .section-hero .s-brand { @@ -545,19 +484,19 @@ .grid-hero .card { padding: 0; } - .s-content { - padding: 3.5rem .5rem 0 .5rem; + .off-canvas .off-canvas-toggle { + left: .5rem; } - .s-content .docs-block { - padding: .4rem .1rem; + .docs-navbar .btn { + right: 1rem; } - .s-content .anchor { - display: none; + .docs-content.off-canvas-content { + padding: 0 .5rem; } - .s-navbar .menu-btn { - left: .65rem; + .docs-content .docs-block { + padding: .4rem .1rem; } - .s-navbar .float-btn { - right: 1rem; + .docs-content .anchor { + display: none; } }
\ No newline at end of file diff --git a/docs/dist/spectre-exp.css b/docs/dist/spectre-exp.css index 03a0f3b..2e19b40 100644 --- a/docs/dist/spectre-exp.css +++ b/docs/dist/spectre-exp.css @@ -1,4 +1,4 @@ -/*! Spectre.css Experimentals v0.4.4 | MIT License | github.com/picturepan2/spectre */ +/*! Spectre.css Experimentals v0.4.5 | MIT License | github.com/picturepan2/spectre */ .calendar { border: .05rem solid #e7e9ed; border-radius: .1rem; @@ -549,52 +549,51 @@ .off-canvas { display: flex; display: -ms-flexbox; + -ms-flex-flow: nowrap; + flex-flow: nowrap; height: 100%; - left: 0; - overflow: hidden; - position: fixed; - top: 0; + min-height: 100vh; + position: relative; width: 100%; } .off-canvas .off-canvas-sidebar { background: #f8f9fa; - height: 100%; + bottom: 0; left: 0; - padding: .8rem; - position: absolute; + min-width: 10rem; + overflow-y: auto; + position: fixed; top: 0; transform: translateX(-100%); transition: transform .25s ease; - width: 10rem; z-index: 300; } .off-canvas .off-canvas-content { -ms-flex: 1 1 auto; flex: 1 1 auto; - overflow-y: auto; + height: 100%; padding: .8rem .8rem .8rem 4rem; } -.off-canvas .off-canvas-checkbox:checked ~ .off-canvas-sidebar { +.off-canvas .off-canvas-sidebar:target { transform: translateX(0); } -.off-canvas .off-canvas-checkbox:checked ~ .off-canvas-toggle { +.off-canvas .off-canvas-sidebar:target ~ .off-canvas-overlay { background: rgba(69, 77, 93, .1); border-color: transparent; border-radius: 0; bottom: 0; + display: block; height: 100%; left: 0; + position: fixed; right: 0; top: 0; width: 100%; -} - -.off-canvas .off-canvas-checkbox:checked ~ .off-canvas-toggle .icon { - display: none; + z-index: 200; } .off-canvas .off-canvas-toggle { @@ -613,8 +612,8 @@ .off-canvas .off-canvas-sidebar { -ms-flex: 0 0 auto; flex: 0 0 auto; - position: static; - transform: translateX(0); + position: relative; + transform: none; } .off-canvas .off-canvas-content { padding-left: .8rem; diff --git a/docs/dist/spectre-exp.min.css b/docs/dist/spectre-exp.min.css index f9f9d3c..71f4720 100644 --- a/docs/dist/spectre-exp.min.css +++ b/docs/dist/spectre-exp.min.css @@ -1 +1 @@ -/*! Spectre.css Experimentals v0.4.4 | MIT License | github.com/picturepan2/spectre */.calendar{border:.05rem solid #e7e9ed;border-radius:.1rem;display:block;min-width:280px;text-align:center}.calendar .calendar-nav{align-items:center;background:#f8f9fa;border-top-left-radius:.1rem;border-top-right-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-align:center;font-size:.9rem;padding:.4rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center;padding:.4rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%}.calendar .calendar-header{background:#f8f9fa;border-bottom:.05rem solid #e7e9ed;color:#acb3c2;font-size:.7rem}.calendar .calendar-body{color:#667189}.calendar .calendar-date{border:0;padding:.2rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.05rem solid transparent;border-radius:50%;color:#667189;cursor:pointer;font-size:.7rem;height:1.4rem;line-height:1rem;outline:0;padding:.1rem;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:1.4rem}.calendar .calendar-date .date-item.date-today{border-color:#e5e5f9;color:#5755d9}.calendar .calendar-date .date-item:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fefeff;border-color:#e5e5f9;color:#5755d9;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:3px;top:3px;transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item:disabled,.calendar .calendar-date.disabled .calendar-event,.calendar .calendar-date.disabled .date-item{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#f1f1fc;content:"";height:1.4rem;left:0;position:absolute;right:0;top:50%;transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range .date-item{color:#5755d9}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.05rem solid #e7e9ed;border-right:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;height:5.5rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{align-self:flex-end;-ms-flex-item-align:end;height:1.4rem;margin-right:.2rem;margin-top:.2rem}.calendar.calendar-lg .calendar-range::before{top:19px}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:19px}.calendar.calendar-lg .calendar-range.range-end::before{right:19px}.calendar.calendar-lg .calendar-events{flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.2rem}.calendar.calendar-lg .calendar-event{background:#f1f1fc;border-radius:.1rem;color:#5755d9;display:block;font-size:.7rem;margin:.1rem auto;overflow:hidden;padding:3px 4px;text-align:left;text-overflow:ellipsis;white-space:nowrap}.carousel{background:#f8f9fa;display:block;overflow:hidden;position:relative;width:100%}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container::before{content:"";display:block;padding-bottom:56.25%}.carousel .carousel-container .carousel-item{animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);color:#e7e9ed;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .4s ease;z-index:200}.carousel .carousel-container .item-prev{left:1rem}.carousel .carousel-container .item-next{right:1rem}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4){animation:carousel-slidein .75s ease-in-out 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4){color:#e7e9ed}.carousel .carousel-nav{bottom:.4rem;display:flex;display:-ms-flexbox;-ms-flex-pack:center;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);width:10rem;z-index:200}.carousel .carousel-nav .nav-item{color:rgba(231,233,237,.5);display:block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.6rem;margin:.2rem;max-width:2.5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.1rem;position:absolute;top:.5rem;width:100%}@keyframes carousel-slidein{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes carousel-slideout{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(-50%)}}.comparison-slider{height:50vh;overflow:hidden;position:relative;width:100%}.comparison-slider .comparison-after,.comparison-slider .comparison-before{height:100%;left:0;margin:0;overflow:hidden;position:absolute;top:0}.comparison-slider .comparison-after img,.comparison-slider .comparison-before img{height:100%;object-fit:none;object-position:left center;position:absolute;width:100%}.comparison-slider .comparison-before{width:100%;z-index:1}.comparison-slider .comparison-before .comparison-label{right:.8rem}.comparison-slider .comparison-after{max-width:100%;min-width:0;z-index:2}.comparison-slider .comparison-after::before{background:0 0;content:"";cursor:default;height:100%;left:0;position:absolute;right:.8rem;top:0;z-index:1}.comparison-slider .comparison-after::after{background:currentColor;border-radius:50%;box-shadow:0 -5px,0 5px;color:#fff;content:"";height:3px;position:absolute;right:.4rem;top:50%;transform:translate(50%,-50%);width:3px}.comparison-slider .comparison-after .comparison-label{left:.8rem}.comparison-slider .comparison-resizer{animation:first-run 1.5s 1 ease-in-out;cursor:ew-resize;height:.8rem;left:0;max-width:100%;min-width:.8rem;opacity:0;outline:0;position:relative;resize:horizontal;top:50%;transform:translateY(-50%) scaleY(30);width:0}.comparison-slider .comparison-label{background:rgba(69,77,93,.5);bottom:.8rem;color:#fff;padding:.2rem .4rem;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@keyframes first-run{0%{width:0}25%{width:2.4rem}50%{width:.8rem}75%{width:1.2rem}100%{width:0}}.filter .filter-tag#tag-0:checked~.filter-nav .chip[for=tag-0],.filter .filter-tag#tag-1:checked~.filter-nav .chip[for=tag-1],.filter .filter-tag#tag-2:checked~.filter-nav .chip[for=tag-2],.filter .filter-tag#tag-3:checked~.filter-nav .chip[for=tag-3],.filter .filter-tag#tag-4:checked~.filter-nav .chip[for=tag-4],.filter .filter-tag#tag-5:checked~.filter-nav .chip[for=tag-5],.filter .filter-tag#tag-6:checked~.filter-nav .chip[for=tag-6],.filter .filter-tag#tag-7:checked~.filter-nav .chip[for=tag-7],.filter .filter-tag#tag-8:checked~.filter-nav .chip[for=tag-8]{background:#5755d9;color:#fff}.filter .filter-tag#tag-1:checked~.filter-body .filter-item:not([data-tag~=tag-1]),.filter .filter-tag#tag-2:checked~.filter-body .filter-item:not([data-tag~=tag-2]),.filter .filter-tag#tag-3:checked~.filter-body .filter-item:not([data-tag~=tag-3]),.filter .filter-tag#tag-4:checked~.filter-body .filter-item:not([data-tag~=tag-4]),.filter .filter-tag#tag-5:checked~.filter-body .filter-item:not([data-tag~=tag-5]),.filter .filter-tag#tag-6:checked~.filter-body .filter-item:not([data-tag~=tag-6]),.filter .filter-tag#tag-7:checked~.filter-body .filter-item:not([data-tag~=tag-7]),.filter .filter-tag#tag-8:checked~.filter-body .filter-item:not([data-tag~=tag-8]){display:none}.filter .filter-nav{margin:.4rem 0}.filter .filter-body{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f9fa;border:0;border-radius:.1rem;display:block;height:.8rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.1rem}.meter::-webkit-meter-bar{background:#f8f9fa}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.1rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.off-canvas{display:flex;display:-ms-flexbox;height:100%;left:0;overflow:hidden;position:fixed;top:0;width:100%}.off-canvas .off-canvas-sidebar{background:#f8f9fa;height:100%;left:0;padding:.8rem;position:absolute;top:0;transform:translateX(-100%);transition:transform .25s ease;width:10rem;z-index:300}.off-canvas .off-canvas-content{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:.8rem .8rem .8rem 4rem}.off-canvas .off-canvas-checkbox:checked~.off-canvas-sidebar{transform:translateX(0)}.off-canvas .off-canvas-checkbox:checked~.off-canvas-toggle{background:rgba(69,77,93,.1);border-color:transparent;border-radius:0;bottom:0;height:100%;left:0;right:0;top:0;width:100%}.off-canvas .off-canvas-checkbox:checked~.off-canvas-toggle .icon{display:none}.off-canvas .off-canvas-toggle{display:block;left:.8rem;padding-left:0;padding-right:0;position:absolute;top:.8rem;transition:none;width:2rem;z-index:200}@media (min-width:960px){.off-canvas .off-canvas-sidebar{-ms-flex:0 0 auto;flex:0 0 auto;position:static;transform:translateX(0)}.off-canvas .off-canvas-content{padding-left:.8rem}.off-canvas .off-canvas-toggle{display:none}}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 1rem 2.1rem rgba(69,77,93,.3);height:auto;transform:perspective(1000px);transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{align-items:center;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;height:100%;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 20px rgba(69,77,93,.75);top:0;transform:translateZ(50px) scale(.95);transition:all .4s ease;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;position:absolute;top:0;width:50%;z-index:100}.parallax .parallax-top-left:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,4.5px,50px) scale(.95)}.parallax .parallax-top-right{height:50%;position:absolute;right:0;top:0;width:50%;z-index:100}.parallax .parallax-top-right:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,4.5px,50px) scale(.95)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;position:absolute;width:50%;z-index:100}.parallax .parallax-bottom-left:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,-4.5px,50px) scale(.95)}.parallax .parallax-bottom-right{bottom:0;height:50%;position:absolute;right:0;width:50%;z-index:100}.parallax .parallax-bottom-right:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,-4.5px,50px) scale(.95)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.1rem;color:#5755d9;height:.2rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.1rem}.progress::-webkit-progress-value{background:#5755d9;border-radius:.1rem}.progress::-moz-progress-bar{background:#5755d9;border-radius:.1rem}.progress:indeterminate{animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5755d9 30%,#f0f1f4 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:1.2rem;width:100%}.slider:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2);outline:0}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5755d9;border:0;border-radius:50%;height:.6rem;margin-top:-.25rem;transition:transform .2s ease;width:.6rem}.slider::-moz-range-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider::-ms-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider:active::-webkit-slider-thumb{transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#e7e9ed;transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-moz-range-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-fill-lower{background:#5755d9}.timeline .timeline-item{display:flex;display:-ms-flexbox;margin-bottom:1.2rem;position:relative}.timeline .timeline-item::before{background:#e7e9ed;content:"";height:100%;left:11px;position:absolute;top:1.2rem;width:2px}.timeline .timeline-item .timeline-left{-ms-flex:0 0 auto;flex:0 0 auto}.timeline .timeline-item .timeline-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:2px 0 2px .8rem}.timeline .timeline-item .timeline-icon{border-radius:50%;color:#fff;display:block;height:1.2rem;text-align:center;width:1.2rem}.timeline .timeline-item .timeline-icon::before{border:.1rem solid #5755d9;border-radius:50%;content:"";display:block;height:.4rem;left:.4rem;position:absolute;top:.4rem;width:.4rem}.timeline .timeline-item .timeline-icon.icon-lg{background:#5755d9;line-height:1rem}.timeline .timeline-item .timeline-icon.icon-lg::before{content:none}
\ No newline at end of file +/*! Spectre.css Experimentals v0.4.5 | MIT License | github.com/picturepan2/spectre */.calendar{border:.05rem solid #e7e9ed;border-radius:.1rem;display:block;min-width:280px;text-align:center}.calendar .calendar-nav{align-items:center;background:#f8f9fa;border-top-left-radius:.1rem;border-top-right-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-align:center;font-size:.9rem;padding:.4rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center;padding:.4rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%}.calendar .calendar-header{background:#f8f9fa;border-bottom:.05rem solid #e7e9ed;color:#acb3c2;font-size:.7rem}.calendar .calendar-body{color:#667189}.calendar .calendar-date{border:0;padding:.2rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.05rem solid transparent;border-radius:50%;color:#667189;cursor:pointer;font-size:.7rem;height:1.4rem;line-height:1rem;outline:0;padding:.1rem;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:1.4rem}.calendar .calendar-date .date-item.date-today{border-color:#e5e5f9;color:#5755d9}.calendar .calendar-date .date-item:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fefeff;border-color:#e5e5f9;color:#5755d9;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:3px;top:3px;transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item:disabled,.calendar .calendar-date.disabled .calendar-event,.calendar .calendar-date.disabled .date-item{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#f1f1fc;content:"";height:1.4rem;left:0;position:absolute;right:0;top:50%;transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range .date-item{color:#5755d9}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.05rem solid #e7e9ed;border-right:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;height:5.5rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{align-self:flex-end;-ms-flex-item-align:end;height:1.4rem;margin-right:.2rem;margin-top:.2rem}.calendar.calendar-lg .calendar-range::before{top:19px}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:19px}.calendar.calendar-lg .calendar-range.range-end::before{right:19px}.calendar.calendar-lg .calendar-events{flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.2rem}.calendar.calendar-lg .calendar-event{background:#f1f1fc;border-radius:.1rem;color:#5755d9;display:block;font-size:.7rem;margin:.1rem auto;overflow:hidden;padding:3px 4px;text-align:left;text-overflow:ellipsis;white-space:nowrap}.carousel{background:#f8f9fa;display:block;overflow:hidden;position:relative;width:100%}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container::before{content:"";display:block;padding-bottom:56.25%}.carousel .carousel-container .carousel-item{animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);color:#e7e9ed;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .4s ease;z-index:200}.carousel .carousel-container .item-prev{left:1rem}.carousel .carousel-container .item-next{right:1rem}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4){animation:carousel-slidein .75s ease-in-out 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4){color:#e7e9ed}.carousel .carousel-nav{bottom:.4rem;display:flex;display:-ms-flexbox;-ms-flex-pack:center;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);width:10rem;z-index:200}.carousel .carousel-nav .nav-item{color:rgba(231,233,237,.5);display:block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.6rem;margin:.2rem;max-width:2.5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.1rem;position:absolute;top:.5rem;width:100%}@keyframes carousel-slidein{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes carousel-slideout{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(-50%)}}.comparison-slider{height:50vh;overflow:hidden;position:relative;width:100%}.comparison-slider .comparison-after,.comparison-slider .comparison-before{height:100%;left:0;margin:0;overflow:hidden;position:absolute;top:0}.comparison-slider .comparison-after img,.comparison-slider .comparison-before img{height:100%;object-fit:none;object-position:left center;position:absolute;width:100%}.comparison-slider .comparison-before{width:100%;z-index:1}.comparison-slider .comparison-before .comparison-label{right:.8rem}.comparison-slider .comparison-after{max-width:100%;min-width:0;z-index:2}.comparison-slider .comparison-after::before{background:0 0;content:"";cursor:default;height:100%;left:0;position:absolute;right:.8rem;top:0;z-index:1}.comparison-slider .comparison-after::after{background:currentColor;border-radius:50%;box-shadow:0 -5px,0 5px;color:#fff;content:"";height:3px;position:absolute;right:.4rem;top:50%;transform:translate(50%,-50%);width:3px}.comparison-slider .comparison-after .comparison-label{left:.8rem}.comparison-slider .comparison-resizer{animation:first-run 1.5s 1 ease-in-out;cursor:ew-resize;height:.8rem;left:0;max-width:100%;min-width:.8rem;opacity:0;outline:0;position:relative;resize:horizontal;top:50%;transform:translateY(-50%) scaleY(30);width:0}.comparison-slider .comparison-label{background:rgba(69,77,93,.5);bottom:.8rem;color:#fff;padding:.2rem .4rem;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@keyframes first-run{0%{width:0}25%{width:2.4rem}50%{width:.8rem}75%{width:1.2rem}100%{width:0}}.filter .filter-tag#tag-0:checked~.filter-nav .chip[for=tag-0],.filter .filter-tag#tag-1:checked~.filter-nav .chip[for=tag-1],.filter .filter-tag#tag-2:checked~.filter-nav .chip[for=tag-2],.filter .filter-tag#tag-3:checked~.filter-nav .chip[for=tag-3],.filter .filter-tag#tag-4:checked~.filter-nav .chip[for=tag-4],.filter .filter-tag#tag-5:checked~.filter-nav .chip[for=tag-5],.filter .filter-tag#tag-6:checked~.filter-nav .chip[for=tag-6],.filter .filter-tag#tag-7:checked~.filter-nav .chip[for=tag-7],.filter .filter-tag#tag-8:checked~.filter-nav .chip[for=tag-8]{background:#5755d9;color:#fff}.filter .filter-tag#tag-1:checked~.filter-body .filter-item:not([data-tag~=tag-1]),.filter .filter-tag#tag-2:checked~.filter-body .filter-item:not([data-tag~=tag-2]),.filter .filter-tag#tag-3:checked~.filter-body .filter-item:not([data-tag~=tag-3]),.filter .filter-tag#tag-4:checked~.filter-body .filter-item:not([data-tag~=tag-4]),.filter .filter-tag#tag-5:checked~.filter-body .filter-item:not([data-tag~=tag-5]),.filter .filter-tag#tag-6:checked~.filter-body .filter-item:not([data-tag~=tag-6]),.filter .filter-tag#tag-7:checked~.filter-body .filter-item:not([data-tag~=tag-7]),.filter .filter-tag#tag-8:checked~.filter-body .filter-item:not([data-tag~=tag-8]){display:none}.filter .filter-nav{margin:.4rem 0}.filter .filter-body{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f9fa;border:0;border-radius:.1rem;display:block;height:.8rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.1rem}.meter::-webkit-meter-bar{background:#f8f9fa}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.1rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.off-canvas{display:flex;display:-ms-flexbox;-ms-flex-flow:nowrap;flex-flow:nowrap;height:100%;min-height:100vh;position:relative;width:100%}.off-canvas .off-canvas-sidebar{background:#f8f9fa;bottom:0;left:0;min-width:10rem;overflow-y:auto;position:fixed;top:0;transform:translateX(-100%);transition:transform .25s ease;z-index:300}.off-canvas .off-canvas-content{-ms-flex:1 1 auto;flex:1 1 auto;height:100%;padding:.8rem .8rem .8rem 4rem}.off-canvas .off-canvas-sidebar:target{transform:translateX(0)}.off-canvas .off-canvas-sidebar:target~.off-canvas-overlay{background:rgba(69,77,93,.1);border-color:transparent;border-radius:0;bottom:0;display:block;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:200}.off-canvas .off-canvas-toggle{display:block;left:.8rem;padding-left:0;padding-right:0;position:absolute;top:.8rem;transition:none;width:2rem;z-index:200}@media (min-width:960px){.off-canvas .off-canvas-sidebar{-ms-flex:0 0 auto;flex:0 0 auto;position:relative;transform:none}.off-canvas .off-canvas-content{padding-left:.8rem}.off-canvas .off-canvas-toggle{display:none}}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 1rem 2.1rem rgba(69,77,93,.3);height:auto;transform:perspective(1000px);transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{align-items:center;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;height:100%;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 20px rgba(69,77,93,.75);top:0;transform:translateZ(50px) scale(.95);transition:all .4s ease;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;position:absolute;top:0;width:50%;z-index:100}.parallax .parallax-top-left:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,4.5px,50px) scale(.95)}.parallax .parallax-top-right{height:50%;position:absolute;right:0;top:0;width:50%;z-index:100}.parallax .parallax-top-right:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,4.5px,50px) scale(.95)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;position:absolute;width:50%;z-index:100}.parallax .parallax-bottom-left:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,-4.5px,50px) scale(.95)}.parallax .parallax-bottom-right{bottom:0;height:50%;position:absolute;right:0;width:50%;z-index:100}.parallax .parallax-bottom-right:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,-4.5px,50px) scale(.95)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.1rem;color:#5755d9;height:.2rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.1rem}.progress::-webkit-progress-value{background:#5755d9;border-radius:.1rem}.progress::-moz-progress-bar{background:#5755d9;border-radius:.1rem}.progress:indeterminate{animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5755d9 30%,#f0f1f4 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:1.2rem;width:100%}.slider:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2);outline:0}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5755d9;border:0;border-radius:50%;height:.6rem;margin-top:-.25rem;transition:transform .2s ease;width:.6rem}.slider::-moz-range-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider::-ms-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider:active::-webkit-slider-thumb{transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#e7e9ed;transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-moz-range-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-fill-lower{background:#5755d9}.timeline .timeline-item{display:flex;display:-ms-flexbox;margin-bottom:1.2rem;position:relative}.timeline .timeline-item::before{background:#e7e9ed;content:"";height:100%;left:11px;position:absolute;top:1.2rem;width:2px}.timeline .timeline-item .timeline-left{-ms-flex:0 0 auto;flex:0 0 auto}.timeline .timeline-item .timeline-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:2px 0 2px .8rem}.timeline .timeline-item .timeline-icon{border-radius:50%;color:#fff;display:block;height:1.2rem;text-align:center;width:1.2rem}.timeline .timeline-item .timeline-icon::before{border:.1rem solid #5755d9;border-radius:50%;content:"";display:block;height:.4rem;left:.4rem;position:absolute;top:.4rem;width:.4rem}.timeline .timeline-item .timeline-icon.icon-lg{background:#5755d9;line-height:1rem}.timeline .timeline-item .timeline-icon.icon-lg::before{content:none}
\ No newline at end of file diff --git a/docs/dist/spectre-icons.css b/docs/dist/spectre-icons.css index b772a4b..d2f379f 100644 --- a/docs/dist/spectre-icons.css +++ b/docs/dist/spectre-icons.css @@ -1,4 +1,4 @@ -/*! Spectre.css Icons v0.4.4 | MIT License | github.com/picturepan2/spectre */ +/*! Spectre.css Icons v0.4.5 | MIT License | github.com/picturepan2/spectre */ .icon { box-sizing: border-box; display: inline-block; diff --git a/docs/dist/spectre-icons.min.css b/docs/dist/spectre-icons.min.css index 0ecf323..b66068e 100644 --- a/docs/dist/spectre-icons.min.css +++ b/docs/dist/spectre-icons.min.css @@ -1 +1 @@ -/*! Spectre.css Icons v0.4.4 | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;font-style:normal;height:1em;position:relative;text-indent:-9999px;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.icon.icon-2x{font-size:1.6rem}.icon.icon-3x{font-size:2.4rem}.icon.icon-4x{font-size:3.2rem}.accordion .icon,.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}.btn-lg .icon{vertical-align:-15%}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;width:.65em}.icon-arrow-down::before{transform:translate(-50%,-75%) rotate(225deg)}.icon-arrow-left::before{transform:translate(-25%,-50%) rotate(-45deg)}.icon-arrow-right::before{transform:translate(-75%,-50%) rotate(135deg)}.icon-arrow-up::before{transform:translate(-50%,-25%) rotate(45deg)}.icon-back::after,.icon-forward::after{background:currentColor;content:"";height:.1rem;width:.8em}.icon-downward::after,.icon-upward::after{background:currentColor;content:"";height:.8em;width:.1rem}.icon-back::after{left:55%}.icon-back::before{transform:translate(-50%,-50%) rotate(-45deg)}.icon-downward::after{top:45%}.icon-downward::before{transform:translate(-50%,-50%) rotate(-135deg)}.icon-forward::after{left:45%}.icon-forward::before{transform:translate(-50%,-50%) rotate(135deg)}.icon-upward::after{top:55%}.icon-upward::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.1rem;width:100%}.icon-apps::before{background:currentColor;box-shadow:-.35em -.35em,-.35em 0,-.35em .35em,0 -.35em,0 .35em,.35em -.35em,.35em 0,.35em .35em;content:"";height:3px;width:3px}.icon-resize-horiz::after,.icon-resize-horiz::before,.icon-resize-vert::after,.icon-resize-vert::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.45em;width:.45em}.icon-resize-horiz::before,.icon-resize-vert::before{transform:translate(-50%,-90%) rotate(45deg)}.icon-resize-horiz::after,.icon-resize-vert::after{transform:translate(-50%,-10%) rotate(225deg)}.icon-resize-horiz::before{transform:translate(-90%,-50%) rotate(-45deg)}.icon-resize-horiz::after{transform:translate(-10%,-50%) rotate(135deg)}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:3px;width:3px}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.1rem;width:100%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:100%;width:.1rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-stop{border:.1rem solid currentColor;border-radius:50%}.icon-stop::before{background:currentColor;content:"";height:.1rem;transform:translate(-50%,-50%) rotate(45deg);width:1em}.icon-shutdown{border:.1rem solid currentColor;border-radius:50%;border-top-color:transparent}.icon-shutdown::before{background:currentColor;content:"";height:.5em;top:.1em;width:.1rem}.icon-refresh::before{border:.1rem solid currentColor;border-radius:50%;border-right-color:transparent;content:"";height:1em;width:1em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;content:"";height:0;left:80%;top:20%;width:0}.icon-search::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.1rem;left:80%;top:80%;transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.1rem solid currentColor;content:"";height:.4em;transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:5%;top:95%;transform:translate(0,-100%);width:0}.icon-delete::before{border:.1rem solid currentColor;border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem;border-top:0;content:"";height:.75em;top:60%;width:.75em}.icon-delete::after{background:currentColor;box-shadow:-.25em .2em,.25em .2em;content:"";height:.1rem;top:.05rem;width:.5em}.icon-share{border:.1rem solid currentColor;border-radius:.1rem;border-right:0;border-top:0}.icon-share::before{border:.1rem solid currentColor;border-left:0;border-top:0;content:"";height:.4em;left:100%;top:.25em;transform:translate(-125%,-50%) rotate(-45deg);width:.4em}.icon-share::after{border:.1rem solid currentColor;border-bottom:0;border-radius:75% 0;border-right:0;content:"";height:.5em;width:.6em}.icon-flag::before{background:currentColor;content:"";height:1em;left:15%;width:.1rem}.icon-flag::after{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top-right-radius:.1rem;content:"";height:.65em;left:60%;top:35%;width:.8em}.icon-bookmark::before{border:.1rem solid currentColor;border-bottom:0;border-top-left-radius:.1rem;border-top-right-radius:.1rem;content:"";height:.9em;width:.8em}.icon-bookmark::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;border-radius:.1rem;content:"";height:.5em;transform:translate(-50%,35%) rotate(-45deg) skew(15deg,15deg);width:.5em}.icon-download,.icon-upload{border-bottom:.1rem solid currentColor}.icon-download::before,.icon-upload::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.5em;transform:translate(-50%,-60%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.1rem}.icon-upload::before{transform:translate(-50%,-60%) rotate(45deg)}.icon-upload::after{top:50%}.icon-time{border:.1rem solid currentColor;border-radius:50%}.icon-time::before{background:currentColor;content:"";height:.4em;transform:translate(-50%,-75%);width:.1rem}.icon-time::after{background:currentColor;content:"";height:.3em;transform:translate(-50%,-75%) rotate(90deg);transform-origin:50% 90%;width:.1rem}.icon-mail::before{border:.1rem solid currentColor;border-radius:.1rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.1rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;top:75%;width:.9em}.icon-message{border:.1rem solid currentColor;border-bottom:0;border-radius:.1rem;border-right:0}.icon-message::before{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top:0;content:"";height:.8em;left:65%;top:40%;width:.7em}.icon-message::after{background:currentColor;border-radius:.1rem;content:"";height:.3em;left:10%;top:100%;transform:translate(0,-90%) rotate(45deg);width:.1rem}.icon-photo{border:.1rem solid currentColor;border-radius:.1rem}.icon-photo::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.25em;left:35%;top:35%;width:.25em}.icon-photo::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;content:"";height:.5em;left:60%;transform:translate(-50%,25%) rotate(-45deg);width:.5em}.icon-link::after,.icon-link::before{border:.1rem solid currentColor;border-radius:5em 0 0 5em;border-right:0;content:"";height:.5em;width:.75em}.icon-link::before{transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{transform:translate(-30%,-55%) rotate(135deg)}.icon-location::before{border:.1rem solid currentColor;border-radius:50% 50% 50% 0;content:"";height:.8em;transform:translate(-50%,-60%) rotate(-45deg);width:.8em}.icon-location::after{border:.1rem solid currentColor;border-radius:50%;content:"";height:.2em;transform:translate(-50%,-80%);width:.2em}.icon-emoji{border:.1rem solid currentColor;border-radius:50%}.icon-emoji::before{border-radius:50%;box-shadow:-.17em -.15em,.17em -.15em;content:"";height:.1em;width:.1em}.icon-emoji::after{border:.1rem solid currentColor;border-bottom-color:transparent;border-radius:50%;border-right-color:transparent;content:"";height:.5em;transform:translate(-50%,-40%) rotate(-135deg);width:.5em}
\ No newline at end of file +/*! Spectre.css Icons v0.4.5 | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;font-style:normal;height:1em;position:relative;text-indent:-9999px;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.icon.icon-2x{font-size:1.6rem}.icon.icon-3x{font-size:2.4rem}.icon.icon-4x{font-size:3.2rem}.accordion .icon,.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}.btn-lg .icon{vertical-align:-15%}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;width:.65em}.icon-arrow-down::before{transform:translate(-50%,-75%) rotate(225deg)}.icon-arrow-left::before{transform:translate(-25%,-50%) rotate(-45deg)}.icon-arrow-right::before{transform:translate(-75%,-50%) rotate(135deg)}.icon-arrow-up::before{transform:translate(-50%,-25%) rotate(45deg)}.icon-back::after,.icon-forward::after{background:currentColor;content:"";height:.1rem;width:.8em}.icon-downward::after,.icon-upward::after{background:currentColor;content:"";height:.8em;width:.1rem}.icon-back::after{left:55%}.icon-back::before{transform:translate(-50%,-50%) rotate(-45deg)}.icon-downward::after{top:45%}.icon-downward::before{transform:translate(-50%,-50%) rotate(-135deg)}.icon-forward::after{left:45%}.icon-forward::before{transform:translate(-50%,-50%) rotate(135deg)}.icon-upward::after{top:55%}.icon-upward::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.1rem;width:100%}.icon-apps::before{background:currentColor;box-shadow:-.35em -.35em,-.35em 0,-.35em .35em,0 -.35em,0 .35em,.35em -.35em,.35em 0,.35em .35em;content:"";height:3px;width:3px}.icon-resize-horiz::after,.icon-resize-horiz::before,.icon-resize-vert::after,.icon-resize-vert::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.45em;width:.45em}.icon-resize-horiz::before,.icon-resize-vert::before{transform:translate(-50%,-90%) rotate(45deg)}.icon-resize-horiz::after,.icon-resize-vert::after{transform:translate(-50%,-10%) rotate(225deg)}.icon-resize-horiz::before{transform:translate(-90%,-50%) rotate(-45deg)}.icon-resize-horiz::after{transform:translate(-10%,-50%) rotate(135deg)}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:3px;width:3px}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.1rem;width:100%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:100%;width:.1rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-stop{border:.1rem solid currentColor;border-radius:50%}.icon-stop::before{background:currentColor;content:"";height:.1rem;transform:translate(-50%,-50%) rotate(45deg);width:1em}.icon-shutdown{border:.1rem solid currentColor;border-radius:50%;border-top-color:transparent}.icon-shutdown::before{background:currentColor;content:"";height:.5em;top:.1em;width:.1rem}.icon-refresh::before{border:.1rem solid currentColor;border-radius:50%;border-right-color:transparent;content:"";height:1em;width:1em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;content:"";height:0;left:80%;top:20%;width:0}.icon-search::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.1rem;left:80%;top:80%;transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.1rem solid currentColor;content:"";height:.4em;transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:5%;top:95%;transform:translate(0,-100%);width:0}.icon-delete::before{border:.1rem solid currentColor;border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem;border-top:0;content:"";height:.75em;top:60%;width:.75em}.icon-delete::after{background:currentColor;box-shadow:-.25em .2em,.25em .2em;content:"";height:.1rem;top:.05rem;width:.5em}.icon-share{border:.1rem solid currentColor;border-radius:.1rem;border-right:0;border-top:0}.icon-share::before{border:.1rem solid currentColor;border-left:0;border-top:0;content:"";height:.4em;left:100%;top:.25em;transform:translate(-125%,-50%) rotate(-45deg);width:.4em}.icon-share::after{border:.1rem solid currentColor;border-bottom:0;border-radius:75% 0;border-right:0;content:"";height:.5em;width:.6em}.icon-flag::before{background:currentColor;content:"";height:1em;left:15%;width:.1rem}.icon-flag::after{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top-right-radius:.1rem;content:"";height:.65em;left:60%;top:35%;width:.8em}.icon-bookmark::before{border:.1rem solid currentColor;border-bottom:0;border-top-left-radius:.1rem;border-top-right-radius:.1rem;content:"";height:.9em;width:.8em}.icon-bookmark::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;border-radius:.1rem;content:"";height:.5em;transform:translate(-50%,35%) rotate(-45deg) skew(15deg,15deg);width:.5em}.icon-download,.icon-upload{border-bottom:.1rem solid currentColor}.icon-download::before,.icon-upload::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.5em;transform:translate(-50%,-60%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.1rem}.icon-upload::before{transform:translate(-50%,-60%) rotate(45deg)}.icon-upload::after{top:50%}.icon-time{border:.1rem solid currentColor;border-radius:50%}.icon-time::before{background:currentColor;content:"";height:.4em;transform:translate(-50%,-75%);width:.1rem}.icon-time::after{background:currentColor;content:"";height:.3em;transform:translate(-50%,-75%) rotate(90deg);transform-origin:50% 90%;width:.1rem}.icon-mail::before{border:.1rem solid currentColor;border-radius:.1rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.1rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;top:75%;width:.9em}.icon-message{border:.1rem solid currentColor;border-bottom:0;border-radius:.1rem;border-right:0}.icon-message::before{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top:0;content:"";height:.8em;left:65%;top:40%;width:.7em}.icon-message::after{background:currentColor;border-radius:.1rem;content:"";height:.3em;left:10%;top:100%;transform:translate(0,-90%) rotate(45deg);width:.1rem}.icon-photo{border:.1rem solid currentColor;border-radius:.1rem}.icon-photo::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.25em;left:35%;top:35%;width:.25em}.icon-photo::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;content:"";height:.5em;left:60%;transform:translate(-50%,25%) rotate(-45deg);width:.5em}.icon-link::after,.icon-link::before{border:.1rem solid currentColor;border-radius:5em 0 0 5em;border-right:0;content:"";height:.5em;width:.75em}.icon-link::before{transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{transform:translate(-30%,-55%) rotate(135deg)}.icon-location::before{border:.1rem solid currentColor;border-radius:50% 50% 50% 0;content:"";height:.8em;transform:translate(-50%,-60%) rotate(-45deg);width:.8em}.icon-location::after{border:.1rem solid currentColor;border-radius:50%;content:"";height:.2em;transform:translate(-50%,-80%);width:.2em}.icon-emoji{border:.1rem solid currentColor;border-radius:50%}.icon-emoji::before{border-radius:50%;box-shadow:-.17em -.15em,.17em -.15em;content:"";height:.1em;width:.1em}.icon-emoji::after{border:.1rem solid currentColor;border-bottom-color:transparent;border-radius:50%;border-right-color:transparent;content:"";height:.5em;transform:translate(-50%,-40%) rotate(-135deg);width:.5em}
\ No newline at end of file diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css index 951fe5d..aeb3f5c 100644 --- a/docs/dist/spectre.css +++ b/docs/dist/spectre.css @@ -1,4 +1,4 @@ -/*! Spectre.css v0.4.4 | MIT License | github.com/picturepan2/spectre */ +/*! Spectre.css v0.4.5 | MIT License | github.com/picturepan2/spectre */ /* Manually forked from Normalize.css */ /* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ /** 1. Change the default font family in all browsers (opinionated). 2. Correct the line height in all browsers. 3. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. */ diff --git a/docs/dist/spectre.min.css b/docs/dist/spectre.min.css index 838e8c6..b6c6815 100644 --- a/docs/dist/spectre.min.css +++ b/docs/dist/spectre.min.css @@ -1 +1 @@ -/*! Spectre.css v0.4.4 | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}address{font-style:normal}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%;font-weight:400}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item;outline:0}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:20px;line-height:1.5;-webkit-tap-highlight-color:transparent}body{background:#fff;color:#50596c;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:.8rem;overflow-x:hidden;text-rendering:optimizeLegibility}a{color:#5755d9;outline:0;text-decoration:none}a:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}a.active,a:active,a:focus,a:hover{color:#4240d4;text-decoration:underline}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:500;line-height:1.2;margin-bottom:.5em;margin-top:0}.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h3,h3{font-size:1.4rem}.h4,h4{font-size:1.2rem}.h5,h5{font-size:1rem}.h6,h6{font-size:.8rem}p{margin:0 0 1rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}abbr[title]{border-bottom:.05rem dotted;cursor:help;text-decoration:none}kbd{background:#454d5d;border-radius:.1rem;color:#fff;font-size:.7rem;line-height:1.2;padding:.1rem .15rem}mark{background:#ffe9b3;border-radius:.1rem;color:#50596c;padding:.05rem}blockquote{border-left:.1rem solid #e7e9ed;margin-left:0;padding:.4rem .8rem}blockquote p:last-child{margin-bottom:0}ol,ul{margin:.8rem 0 .8rem .8rem;padding:0}ol ol,ol ul,ul ol,ul ul{margin:.8rem 0 .8rem .8rem}ol li,ul li{margin-top:.4rem}ul{list-style:disc inside}ul ul{list-style-type:circle}ol{list-style:decimal inside}ol ol{list-style-type:lower-alpha}dl dt{font-weight:700}dl dd{margin:.4rem 0 .8rem 0}:lang(zh){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif}:lang(ja){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic Pro","Yu Gothic",YuGothic,Meiryo,"Helvetica Neue",sans-serif}:lang(ko){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Helvetica Neue",sans-serif}.cjk ins,.cjk u,:lang(ja) ins,:lang(ja) u,:lang(zh) ins,:lang(zh) u{border-bottom:.05rem solid;text-decoration:none}.cjk del+del,.cjk del+s,.cjk ins+ins,.cjk ins+u,.cjk s+del,.cjk s+s,.cjk u+ins,.cjk u+u,:lang(ja) del+del,:lang(ja) del+s,:lang(ja) ins+ins,:lang(ja) ins+u,:lang(ja) s+del,:lang(ja) s+s,:lang(ja) u+ins,:lang(ja) u+u,:lang(zh) del+del,:lang(zh) del+s,:lang(zh) ins+ins,:lang(zh) ins+u,:lang(zh) s+del,:lang(zh) s+s,:lang(zh) u+ins,:lang(zh) u+u{margin-left:.125em}.table{border-collapse:collapse;border-spacing:0;text-align:left;width:100%}.table.table-striped tbody tr:nth-of-type(odd){background:#f8f9fa}.table.table-hover tbody tr:hover{background:#f0f1f4}.table tbody tr.active,.table.table-striped tbody tr.active{background:#f0f1f4}.table td,.table th{border-bottom:.05rem solid #e7e9ed;padding:.6rem .4rem}.table th{border-bottom-width:.1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #5755d9;border-radius:.1rem;color:#5755d9;cursor:pointer;display:inline-block;font-size:.8rem;height:1.8rem;line-height:1rem;outline:0;padding:.35rem .4rem;text-align:center;text-decoration:none;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.btn:focus,.btn:hover{background:#f1f1fc;border-color:#4b48d6;text-decoration:none}.btn.active,.btn:active{background:#4b48d6;border-color:#3634d2;color:#fff;text-decoration:none}.btn.active.loading::after,.btn:active.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.disabled,.btn:disabled,.btn[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn.btn-primary{background:#5755d9;border-color:#4b48d6;color:#fff}.btn.btn-primary:focus,.btn.btn-primary:hover{background:#4240d4;border-color:#3634d2;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3a38d2;border-color:#302ecd;color:#fff}.btn.btn-primary.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-link{background:0 0;border-color:transparent;color:#5755d9}.btn.btn-link.active,.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{color:#4240d4}.btn.btn-sm{font-size:.7rem;height:1.4rem;padding:.15rem .3rem}.btn.btn-lg{font-size:.9rem;height:2rem;padding:.45rem .6rem}.btn.btn-block{display:block;width:100%}.btn.btn-action{padding-left:0;padding-right:0;width:1.8rem}.btn.btn-action.btn-sm{width:1.4rem}.btn.btn-action.btn-lg{width:2rem}.btn.btn-clear{background:0 0;border:0;color:currentColor;height:.8rem;line-height:.8rem;margin-left:.2rem;margin-right:-2px;opacity:1;padding:0;text-decoration:none;width:.8rem}.btn.btn-clear:hover{opacity:.95}.btn.btn-clear::before{content:"\2715"}.btn-group{display:inline-flex;display:-ms-inline-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.btn-group .btn{-ms-flex:1 0 auto;flex:1 0 auto}.btn-group .btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.btn-group .btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.btn-group .btn.active,.btn-group .btn:active,.btn-group .btn:focus,.btn-group .btn:hover{z-index:1}.btn-group.btn-group-block{display:flex;display:-ms-flexbox}.btn-group.btn-group-block .btn{-ms-flex:1 0 0;flex:1 0 0}.form-group:not(:last-child){margin-bottom:.4rem}fieldset{margin-bottom:.8rem}legend{font-size:.9rem;font-weight:500;margin-bottom:.8rem}.form-label{display:block;line-height:1rem;padding:.4rem 0}.form-label.label-sm{padding:.2rem 0}.form-label.label-lg{padding:.5rem 0}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;background-image:none;border:.05rem solid #caced7;border-radius:.1rem;color:#50596c;display:block;font-size:.8rem;height:1.8rem;line-height:1rem;max-width:100%;outline:0;padding:.35rem .4rem;position:relative;transition:all .2s ease;width:100%}.form-input:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-input::-webkit-input-placeholder{color:#acb3c2}.form-input:-ms-input-placeholder{color:#acb3c2}.form-input::placeholder{color:#acb3c2}.form-input.input-sm{font-size:.7rem;height:1.4rem;padding:.15rem .3rem}.form-input.input-lg{font-size:.9rem;height:2rem;padding:.45rem .6rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}.form-input[type=file]{height:auto}textarea.form-input{height:auto}.form-input-hint{color:#acb3c2;font-size:.7rem;margin-top:.2rem}.has-success .form-input-hint,.is-success+.form-input-hint{color:#32b643}.has-error .form-input-hint,.is-error+.form-input-hint{color:#e85600}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.05rem solid #caced7;border-radius:.1rem;color:inherit;font-size:.8rem;height:1.8rem;line-height:1rem;outline:0;padding:.35rem .4rem;vertical-align:middle;width:100%}.form-select[multiple],.form-select[size]{height:auto}.form-select[multiple] option,.form-select[size] option{padding:.1rem .2rem}.form-select:not([multiple]):not([size]){background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;padding-right:1.2rem}.form-select:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:.7rem;height:1.4rem;padding:.15rem 1.1rem .15rem .3rem}.form-select.select-lg{font-size:.9rem;height:2rem;padding:.45rem 1.4rem .45rem .6rem}.has-icon-left,.has-icon-right{position:relative}.has-icon-left .form-icon,.has-icon-right .form-icon{height:.8rem;margin:0 .35rem;position:absolute;top:50%;transform:translateY(-50%);width:.8rem}.has-icon-left .form-icon{left:.05rem}.has-icon-left .form-input{padding-left:1.5rem}.has-icon-right .form-icon{right:.05rem}.has-icon-right .form-input{padding-right:1.5rem}.form-checkbox,.form-radio,.form-switch{display:inline-block;line-height:1rem;padding:.2rem 1.2rem;position:relative}.form-checkbox input,.form-radio input,.form-switch input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}.form-checkbox input:focus+.form-icon,.form-radio input:focus+.form-icon,.form-switch input:focus+.form-icon{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon,.form-switch input:checked+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox .form-icon,.form-radio .form-icon,.form-switch .form-icon{border:.05rem solid #caced7;cursor:pointer;display:inline-block;position:absolute;transition:all .2s ease}.form-checkbox .form-icon,.form-radio .form-icon{background:#fff;height:.8rem;left:0;top:.3rem;width:.8rem}.form-checkbox input:active+.form-icon,.form-radio input:active+.form-icon{background:#f0f1f4}.form-checkbox .form-icon{border-radius:.1rem}.form-checkbox input:checked+.form-icon::before{background-clip:padding-box;border:.1rem solid #fff;border-left-width:0;border-top-width:0;content:"";height:12px;left:50%;margin-left:-4px;margin-top:-8px;position:absolute;top:50%;transform:rotate(45deg);width:8px}.form-checkbox input:indeterminate+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox input:indeterminate+.form-icon::before{background:#fff;content:"";height:2px;left:50%;margin-left:-5px;margin-top:-1px;position:absolute;top:50%;width:10px}.form-radio .form-icon{border-radius:50%}.form-radio input:checked+.form-icon::before{background:#fff;border-radius:50%;content:"";height:4px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:4px}.form-switch{padding-left:2rem}.form-switch .form-icon{background:#e7e9ed;background-clip:padding-box;border-radius:.45rem;height:.9rem;left:0;top:.25rem;width:1.6rem}.form-switch .form-icon::before{background:#fff;border-radius:50%;content:"";display:block;height:.8rem;left:0;position:absolute;top:0;transition:all .2s ease;width:.8rem}.form-switch input:checked+.form-icon::before{left:14px}.form-switch input:active+.form-icon::before{background:#f8f9fa}.input-group{display:flex;display:-ms-flexbox}.input-group .input-group-addon{background:#f8f9fa;border:.05rem solid #caced7;border-radius:.1rem;line-height:1rem;padding:.35rem .4rem}.input-group .input-group-addon.addon-sm{font-size:.7rem;padding:.15rem .3rem}.input-group .input-group-addon.addon-lg{font-size:.9rem;padding:.45rem .6rem}.input-group .form-input,.input-group .form-select{-ms-flex:1 1 auto;flex:1 1 auto}.input-group .input-group-btn{z-index:1}.input-group .form-input:first-child:not(:last-child),.input-group .form-select:first-child:not(:last-child),.input-group .input-group-addon:first-child:not(:last-child),.input-group .input-group-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.input-group .form-input:not(:first-child):not(:last-child),.input-group .form-select:not(:first-child):not(:last-child),.input-group .input-group-addon:not(:first-child):not(:last-child),.input-group .input-group-btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.input-group .form-input:last-child:not(:first-child),.input-group .form-select:last-child:not(:first-child),.input-group .input-group-addon:last-child:not(:first-child),.input-group .input-group-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.input-group .form-input:focus,.input-group .form-select:focus,.input-group .input-group-addon:focus,.input-group .input-group-btn:focus{z-index:2}.input-group .form-select{width:auto}.input-group.input-inline{display:inline-flex;display:-ms-inline-flexbox}.form-input.is-success,.form-select.is-success,.has-success .form-input,.has-success .form-select{border-color:#32b643}.form-input.is-success:focus,.form-select.is-success:focus,.has-success .form-input:focus,.has-success .form-select:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.form-input.is-error,.form-select.is-error,.has-error .form-input,.has-error .form-select{border-color:#e85600}.form-input.is-error:focus,.form-select.is-error:focus,.has-error .form-input:focus,.has-error .form-select:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error .form-icon,.form-radio.is-error .form-icon,.form-switch.is-error .form-icon,.has-error .form-checkbox .form-icon,.has-error .form-radio .form-icon,.has-error .form-switch .form-icon{border-color:#e85600}.form-checkbox.is-error input:checked+.form-icon,.form-radio.is-error input:checked+.form-icon,.form-switch.is-error input:checked+.form-icon,.has-error .form-checkbox input:checked+.form-icon,.has-error .form-radio input:checked+.form-icon,.has-error .form-switch input:checked+.form-icon{background:#e85600;border-color:#e85600}.form-checkbox.is-error input:focus+.form-icon,.form-radio.is-error input:focus+.form-icon,.form-switch.is-error input:focus+.form-icon,.has-error .form-checkbox input:focus+.form-icon,.has-error .form-radio input:focus+.form-icon,.has-error .form-switch input:focus+.form-icon{border-color:#e85600;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid{border-color:#e85600}.form-input:not(:placeholder-shown):invalid:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid+.form-input-hint{color:#e85600}.form-input.disabled,.form-input:disabled,.form-select.disabled,.form-select:disabled{background-color:#f0f1f4;cursor:not-allowed;opacity:.5}.form-input[readonly]{background-color:#f8f9fa}input.disabled+.form-icon,input:disabled+.form-icon{background:#f0f1f4;cursor:not-allowed;opacity:.5}.form-switch input.disabled+.form-icon::before,.form-switch input:disabled+.form-icon::before{background:#fff}.form-horizontal{padding:.4rem}.form-horizontal .form-group{display:flex;display:-ms-flexbox}.form-horizontal .form-checkbox,.form-horizontal .form-radio,.form-horizontal .form-switch{margin:.2rem 0}.label{background:#f0f1f4;border-radius:.1rem;color:#5b657a;display:inline-block;line-height:1.2;padding:.1rem .15rem}.label.label-rounded{border-radius:5rem;padding-left:.4rem;padding-right:.4rem}.label.label-primary{background:#5755d9;color:#fff}.label.label-secondary{background:#f1f1fc;color:#5755d9}.label.label-success{background:#32b643;color:#fff}.label.label-warning{background:#ffb700;color:#fff}.label.label-error{background:#e85600;color:#fff}code{background:#fdf4f4;border-radius:.1rem;color:#e06870;font-size:85%;line-height:1.2;padding:.1rem .15rem}.code{border-radius:.1rem;color:#50596c;position:relative}.code::before{color:#acb3c2;content:attr(data-lang);font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.code code{background:#f8f9fa;color:inherit;display:block;line-height:1.5;overflow-x:auto;padding:1rem;width:100%}.img-responsive{display:block;height:auto;max-width:100%}.img-fit-cover{object-fit:cover}.img-fit-contain{object-fit:contain}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive::before{content:"";display:block;padding-bottom:56.25%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}video.video-responsive{height:auto;max-width:100%}video.video-responsive::before{content:none}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 .4rem 0}.figure .figure-caption{color:#667189;margin-top:.4rem}.container{margin-left:auto;margin-right:auto;padding-left:.4rem;padding-right:.4rem;width:100%}.container.grid-xl{max-width:1296px}.container.grid-lg{max-width:976px}.container.grid-md{max-width:856px}.container.grid-sm{max-width:616px}.container.grid-xs{max-width:496px}.show-lg,.show-md,.show-sm,.show-xl,.show-xs{display:none!important}.columns{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.4rem;margin-right:-.4rem}.columns.col-gapless{margin-left:0;margin-right:0}.columns.col-gapless>.column{padding-left:0;padding-right:0}.columns.col-oneline{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.column{-ms-flex:1;flex:1;max-width:100%;padding-left:.4rem;padding-right:.4rem}.column.col-1,.column.col-10,.column.col-11,.column.col-12,.column.col-2,.column.col-3,.column.col-4,.column.col-5,.column.col-6,.column.col-7,.column.col-8,.column.col-9{-ms-flex:none;flex:none}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;max-width:none;width:auto}.col-mx-auto{margin-left:auto;margin-right:auto}.col-ml-auto{margin-left:auto}.col-mr-auto{margin-right:auto}@media (max-width:1280px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9{-ms-flex:none;flex:none}.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}.hide-xl{display:none!important}.show-xl{display:block!important}}@media (max-width:960px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{-ms-flex:none;flex:none}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.hide-lg{display:none!important}.show-lg{display:block!important}}@media (max-width:840px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{-ms-flex:none;flex:none}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.hide-md{display:none!important}.show-md{display:block!important}}@media (max-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{-ms-flex:none;flex:none}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.hide-sm{display:none!important}.show-sm{display:block!important}}@media (max-width:480px){.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{-ms-flex:none;flex:none}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.hide-xs{display:none!important}.show-xs{display:block!important}}.navbar{align-items:stretch;display:flex;display:-ms-flexbox;-ms-flex-align:stretch;-ms-flex-pack:justify;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between}.navbar .navbar-section{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:1 0 0;flex:1 0 0;-ms-flex-align:center}.navbar .navbar-section:last-child{-ms-flex-pack:end;justify-content:flex-end}.navbar .navbar-center{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center}.navbar .navbar-brand{font-size:.9rem;font-weight:500;text-decoration:none}.accordion input:checked~.accordion-header .icon,.accordion[open] .accordion-header .icon{transform:rotate(90deg)}.accordion input:checked~.accordion-body,.accordion[open] .accordion-body{max-height:50rem}.accordion .accordion-header{display:block;padding:.2rem .4rem}.accordion .accordion-header .icon{transition:all .2s ease}.accordion .accordion-body{margin-bottom:.4rem;max-height:0;overflow:hidden;transition:max-height .2s ease}summary.accordion-header::-webkit-details-marker{display:none}.form-autocomplete{position:relative}.form-autocomplete .form-autocomplete-input{align-content:flex-start;display:flex;display:-ms-flexbox;-ms-flex-line-pack:start;-ms-flex-wrap:wrap;flex-wrap:wrap;height:auto;min-height:1.6rem;padding:.1rem}.form-autocomplete .form-autocomplete-input.is-focused{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-autocomplete .form-autocomplete-input .form-input{border-color:transparent;box-shadow:none;display:inline-block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.2rem;line-height:.8rem;margin:.1rem;width:auto}.form-autocomplete .menu{left:0;position:absolute;top:100%;width:100%}.avatar{background:#5755d9;border-radius:50%;color:rgba(255,255,255,.85);display:inline-block;font-size:.8rem;font-weight:300;height:1.6rem;line-height:1.25;margin:0;position:relative;vertical-align:middle;width:1.6rem}.avatar.avatar-xs{font-size:.4rem;height:.8rem;width:.8rem}.avatar.avatar-sm{font-size:.6rem;height:1.2rem;width:1.2rem}.avatar.avatar-lg{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-xl{font-size:1.6rem;height:3.2rem;width:3.2rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:1}.avatar .avatar-icon,.avatar .avatar-presence{background:#fff;bottom:14.64%;height:50%;padding:.1rem;position:absolute;right:14.64%;transform:translate(50%,50%);width:50%;z-index:2}.avatar .avatar-presence{background:#acb3c2;border-radius:50%;box-shadow:0 0 0 .1rem #fff;height:.5em;width:.5em}.avatar .avatar-presence.online{background:#32b643}.avatar .avatar-presence.busy{background:#e85600}.avatar .avatar-presence.away{background:#ffb700}.avatar[data-initial]::before{color:currentColor;content:attr(data-initial);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.badge{position:relative;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge]::after{background:#5755d9;background-clip:padding-box;border-radius:.5rem;box-shadow:0 0 0 .1rem #fff;color:#fff;content:attr(data-badge);display:inline-block;transform:translate(-.1rem,-.5rem)}.badge[data-badge]::after{font-size:.7rem;height:.9rem;line-height:1;min-width:.9rem;padding:.1rem .2rem;text-align:center;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge=""]::after{height:6px;min-width:6px;padding:0;width:6px}.badge.btn::after{position:absolute;right:0;top:0;transform:translate(50%,-50%)}.badge.avatar::after{position:absolute;right:14.64%;top:14.64%;transform:translate(50%,-50%);z-index:100}.badge.avatar-xs::after{content:"";height:.4rem;min-width:.4rem;padding:0;width:.4rem}.breadcrumb{list-style:none;margin:.2rem 0;padding:.2rem 0}.breadcrumb .breadcrumb-item{color:#667189;display:inline-block;margin:0;padding:.2rem 0}.breadcrumb .breadcrumb-item:not(:last-child){margin-right:.2rem}.breadcrumb .breadcrumb-item:not(:last-child) a{color:#667189}.breadcrumb .breadcrumb-item:not(:first-child)::before{color:#e7e9ed;content:"/";padding-right:.2rem}.bar{background:#f0f1f4;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:.8rem;width:100%}.bar.bar-sm{height:.2rem}.bar .bar-item{background:#5755d9;color:#fff;display:block;-ms-flex-negative:0;flex-shrink:0;font-size:.7rem;height:100%;line-height:.8rem;position:relative;text-align:center;width:0}.bar .bar-item:first-child{border-bottom-left-radius:.1rem;border-top-left-radius:.1rem}.bar .bar-item:last-child{border-bottom-right-radius:.1rem;border-top-right-radius:.1rem;-ms-flex-negative:1;flex-shrink:1}.bar-slider{height:.1rem;margin:.4rem 0;position:relative}.bar-slider .bar-item{left:0;padding:0;position:absolute}.bar-slider .bar-item:not(:last-child):first-child{background:#f0f1f4;z-index:1}.bar-slider .bar-slider-btn{background:#5755d9;border:0;border-radius:50%;height:.6rem;padding:0;position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:.6rem}.bar-slider .bar-slider-btn:active{box-shadow:0 0 0 .1rem #5755d9}.card{background:#fff;border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.card .card-body,.card .card-footer,.card .card-header{padding:.8rem;padding-bottom:0}.card .card-body:last-child,.card .card-footer:last-child,.card .card-header:last-child{padding-bottom:.8rem}.card .card-image{padding-top:.8rem}.card .card-image:first-child{padding-top:0}.card .card-image:first-child img{border-top-left-radius:.1rem;border-top-right-radius:.1rem}.card .card-image:last-child img{border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem}.chip{align-items:center;background:#f0f1f4;border-radius:5rem;color:#667189;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;font-size:90%;height:1.2rem;line-height:.8rem;margin:.1rem;max-width:100%;padding:.2rem .4rem;text-decoration:none;vertical-align:middle}.chip.active{background:#5755d9;color:#fff}.chip .avatar{margin-left:-.4rem;margin-right:.2rem}.dropdown{display:inline-block;position:relative}.dropdown .menu{animation:slide-down .15s ease 1;display:none;left:0;max-height:50vh;overflow-y:auto;position:absolute;top:100%}.dropdown.dropdown-right .menu{left:auto;right:0}.dropdown .dropdown-toggle:focus+.menu,.dropdown .menu:hover,.dropdown.active .menu{display:block}.dropdown .btn-group .dropdown-toggle:nth-last-child(2){border-bottom-right-radius:.1rem;border-top-right-radius:.1rem}.empty{background:#f8f9fa;border-radius:.1rem;color:#667189;padding:3.2rem 1.6rem;text-align:center}.empty .empty-icon{margin-bottom:.8rem}.empty .empty-subtitle,.empty .empty-title{margin:.4rem auto}.empty .empty-action{margin-top:.8rem}.menu{background:#fff;border-radius:.1rem;box-shadow:0 .05rem .2rem rgba(69,77,93,.3);list-style:none;margin:0;min-width:180px;padding:.4rem;transform:translateY(.2rem);z-index:100}.menu.menu-nav{background:0 0;box-shadow:none}.menu .menu-item{margin-top:0;padding:0 .4rem;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu .menu-item>a{border-radius:.1rem;color:inherit;display:block;margin:0 -.4rem;padding:.2rem .4rem;text-decoration:none}.menu .menu-item>a:focus,.menu .menu-item>a:hover{background:#f1f1fc;color:#5755d9}.menu .menu-item>a.active,.menu .menu-item>a:active{background:#f1f1fc;color:#5755d9}.menu .menu-item+.menu-item{margin-top:.2rem}.menu .menu-badge{float:right;padding:.2rem 0}.menu .menu-badge .btn{margin-top:-.1rem}.modal{align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:flex;display:-ms-flexbox;opacity:1;z-index:400}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(248,249,250,.75);bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{animation:slide-down .2s ease 1;max-width:640px;width:100%;z-index:1}.modal.modal-sm .modal-container{max-width:320px;padding:0 .4rem}.modal.modal-lg .modal-overlay{background:#fff}.modal.modal-lg .modal-container{box-shadow:none;max-width:960px}.modal-container{background:#fff;border-radius:.1rem;box-shadow:0 .2rem .5rem rgba(69,77,93,.3);display:block;padding:0 .8rem;text-align:left}.modal-container .modal-header{padding:.8rem}.modal-container .modal-body{max-height:50vh;overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-footer{padding:.8rem;text-align:right}.nav{display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:.2rem 0}.nav .nav-item a{color:#667189;padding:.2rem .4rem;text-decoration:none}.nav .nav-item a:focus,.nav .nav-item a:hover{color:#5755d9}.nav .nav-item.active>a{color:#50596c;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5755d9}.nav .nav{margin-bottom:.4rem;margin-left:.8rem}.pagination{display:flex;display:-ms-flexbox;list-style:none;margin:.2rem 0;padding:.2rem 0}.pagination .page-item{margin:.2rem .05rem}.pagination .page-item span{display:inline-block;padding:.2rem .2rem}.pagination .page-item a{border-radius:.1rem;color:#667189;display:inline-block;padding:.2rem .4rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5755d9}.pagination .page-item.disabled a{cursor:default;opacity:.5;pointer-events:none}.pagination .page-item.active a{background:#5755d9;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-ms-flex:1 0 50%;flex:1 0 50%}.pagination .page-item.page-next{text-align:right}.pagination .page-item .page-item-title{margin:0}.pagination .page-item .page-item-subtitle{margin:0;opacity:.5}.panel{border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.panel .panel-footer,.panel .panel-header{-ms-flex:0 0 auto;flex:0 0 auto;padding:.8rem}.panel .panel-nav{-ms-flex:0 0 auto;flex:0 0 auto}.panel .panel-body{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:0 .8rem}.popover{display:inline-block;position:relative}.popover .popover-container{content:attr(data-tooltip);left:50%;opacity:0;padding:.4rem;position:absolute;top:0;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease;width:320px;z-index:400}.popover .popover-container:hover,.popover :focus+.popover-container,.popover:hover .popover-container{display:block;opacity:1;transform:translate(-50%,-100%) scale(1)}.popover.popover-right .popover-container{left:100%;top:50%}.popover.popover-right .popover-container:hover,.popover.popover-right :focus+.popover-container,.popover.popover-right:hover .popover-container{transform:translate(0,-50%) scale(1)}.popover.popover-bottom .popover-container{left:50%;top:100%}.popover.popover-bottom .popover-container:hover,.popover.popover-bottom :focus+.popover-container,.popover.popover-bottom:hover .popover-container{transform:translate(-50%,0) scale(1)}.popover.popover-left .popover-container{left:0;top:50%}.popover.popover-left .popover-container:hover,.popover.popover-left :focus+.popover-container,.popover.popover-left:hover .popover-container{transform:translate(-100%,-50%) scale(1)}.popover .card{border:0;box-shadow:0 .2rem .5rem rgba(69,77,93,.3)}.step{display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;list-style:none;margin:.2rem 0;width:100%}.step .step-item{-ms-flex:1 1 0;flex:1 1 0;margin-top:0;min-height:1rem;position:relative;text-align:center}.step .step-item:not(:first-child)::before{background:#5755d9;content:"";height:2px;left:-50%;position:absolute;top:9px;width:100%}.step .step-item a{color:#acb3c2;display:inline-block;padding:20px 10px 0;text-decoration:none}.step .step-item a::before{background:#5755d9;border:.1rem solid #fff;border-radius:50%;content:"";display:block;height:.6rem;left:50%;position:absolute;top:.2rem;transform:translateX(-50%);width:.6rem;z-index:1}.step .step-item.active a::before{background:#fff;border:.1rem solid #5755d9}.step .step-item.active~.step-item::before{background:#e7e9ed}.step .step-item.active~.step-item a::before{background:#e7e9ed}.tab{align-items:center;border-bottom:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:.2rem 0 .15rem 0}.tab .tab-item{margin-top:0}.tab .tab-item a{border-bottom:.1rem solid transparent;color:inherit;display:block;margin:0 .4rem 0 0;padding:.4rem .2rem .3rem .2rem;text-decoration:none}.tab .tab-item a:focus,.tab .tab-item a:hover{color:#5755d9}.tab .tab-item a.active,.tab .tab-item.active a{border-bottom-color:#5755d9;color:#5755d9}.tab .tab-item.tab-action{-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}.tab .tab-item .btn-clear{margin-top:-.2rem}.tab.tab-block .tab-item{-ms-flex:1 0 0;flex:1 0 0;text-align:center}.tab.tab-block .tab-item a{margin:0}.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:.1rem;top:.1rem;transform:translate(0,0)}.tab:not(.tab-block) .badge{padding-right:0}.tile{align-content:space-between;align-items:flex-start;display:flex;display:-ms-flexbox;-ms-flex-align:start;-ms-flex-line-pack:justify}.tile .tile-action,.tile .tile-icon{-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-content{-ms-flex:1 1 auto;flex:1 1 auto}.tile .tile-content:not(:first-child){padding-left:.4rem}.tile .tile-content:not(:last-child){padding-right:.4rem}.tile .tile-subtitle,.tile .tile-title{line-height:1rem}.tile.tile-centered{align-items:center;-ms-flex-align:center}.tile.tile-centered .tile-content{overflow:hidden}.tile.tile-centered .tile-subtitle,.tile.tile-centered .tile-title{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast{background:rgba(69,77,93,.9);border:.05rem solid #454d5d;border-color:#454d5d;border-radius:.1rem;color:#fff;display:block;padding:.4rem;width:100%}.toast.toast-primary{background:rgba(87,85,217,.9);border-color:#5755d9}.toast.toast-success{background:rgba(50,182,67,.9);border-color:#32b643}.toast.toast-warning{background:rgba(255,183,0,.9);border-color:#ffb700}.toast.toast-error{background:rgba(232,86,0,.9);border-color:#e85600}.toast a{color:#fff;text-decoration:underline}.toast a.active,.toast a:active,.toast a:focus,.toast a:hover{opacity:.75}.toast .btn-clear{margin:4px -2px 4px 4px}.tooltip{position:relative}.tooltip::after{background:rgba(69,77,93,.9);border-radius:.1rem;bottom:100%;color:#fff;content:attr(data-tooltip);display:block;font-size:.7rem;left:50%;max-width:320px;opacity:0;overflow:hidden;padding:.2rem .4rem;pointer-events:none;position:absolute;text-overflow:ellipsis;transform:translate(-50%,.4rem);transition:all .2s ease;white-space:pre;z-index:300}.tooltip:focus::after,.tooltip:hover::after{opacity:1;transform:translate(-50%,-.2rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;transform:translate(-.2rem,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{transform:translate(.2rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;transform:translate(-50%,-.4rem)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{transform:translate(-50%,.2rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;transform:translate(.4rem,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{transform:translate(-.2rem,50%)}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-1.6rem)}100%{opacity:1;transform:translateY(0)}}.text-primary{color:#5755d9}a.text-primary:focus,a.text-primary:hover{color:#4240d4}.text-secondary{color:#e5e5f9}a.text-secondary:focus,a.text-secondary:hover{color:#d1d0f4}.text-gray{color:#acb3c2}a.text-gray:focus,a.text-gray:hover{color:#9ea6b7}.text-light{color:#fff}a.text-light:focus,a.text-light:hover{color:#f2f2f2}.text-success{color:#32b643}a.text-success:focus,a.text-success:hover{color:#2da23c}.text-warning{color:#ffb700}a.text-warning:focus,a.text-warning:hover{color:#e6a500}.text-error{color:#e85600}a.text-error:focus,a.text-error:hover{color:#cf4d00}.bg-primary{background:#5755d9}.bg-secondary{background:#f1f1fc}.bg-dark{background:#454d5d}.bg-gray{background:#f8f9fa}.bg-success{background:#32b643}.bg-warning{background:#ffb700}.bg-error{background:#e85600}.c-hand{cursor:pointer}.c-move{cursor:move}.c-zoom-in{cursor:zoom-in}.c-zoom-out{cursor:zoom-out}.c-not-allowed{cursor:not-allowed}.c-auto{cursor:auto}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex;display:-ms-flexbox}.d-inline-flex{display:inline-flex;display:-ms-inline-flexbox}.d-hide,.d-none{display:none!important}.d-visible{visibility:visible}.d-invisible{visibility:hidden}.text-hide{background:0 0;border:0;color:transparent;font-size:0;line-height:0;text-shadow:none}.text-assistive{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.divider,.divider-vert{display:block;position:relative}.divider-vert[data-content]::after,.divider[data-content]::after{background:#fff;color:#acb3c2;content:attr(data-content);display:inline-block;font-size:.7rem;padding:0 .4rem;transform:translateY(-.65rem)}.divider{border-top:.05rem solid #e7e9ed;height:.05rem;margin:.4rem 0}.divider[data-content]{margin:.8rem 0}.divider-vert{display:block;padding:.8rem}.divider-vert::before{border-left:.05rem solid #e7e9ed;bottom:.4rem;content:"";display:block;left:50%;position:absolute;top:.4rem;transform:translateX(-50%)}.divider-vert[data-content]::after{left:50%;padding:.2rem 0;position:absolute;top:50%;transform:translate(-50%,-50%)}.loading{color:transparent!important;min-height:.8rem;pointer-events:none;position:relative}.loading::after{animation:loading .5s infinite linear;border:.1rem solid #5755d9;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:.8rem;left:50%;margin-left:-.4rem;margin-top:-.4rem;position:absolute;top:50%;width:.8rem;z-index:1}.loading.loading-lg{min-height:2rem}.loading.loading-lg::after{height:1.6rem;margin-left:-.8rem;margin-top:-.8rem;width:1.6rem}.clearfix::after,.container::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.centered{display:block;float:none;margin-left:auto;margin-right:auto}.flex-centered{align-items:center;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center}.m-0{margin:0}.mb-0{margin-bottom:0}.ml-0{margin-left:0}.mr-0{margin-right:0}.mt-0{margin-top:0}.mx-0{margin-left:0;margin-right:0}.my-0{margin-bottom:0;margin-top:0}.m-1{margin:.2rem}.mb-1{margin-bottom:.2rem}.ml-1{margin-left:.2rem}.mr-1{margin-right:.2rem}.mt-1{margin-top:.2rem}.mx-1{margin-left:.2rem;margin-right:.2rem}.my-1{margin-bottom:.2rem;margin-top:.2rem}.m-2{margin:.4rem}.mb-2{margin-bottom:.4rem}.ml-2{margin-left:.4rem}.mr-2{margin-right:.4rem}.mt-2{margin-top:.4rem}.mx-2{margin-left:.4rem;margin-right:.4rem}.my-2{margin-bottom:.4rem;margin-top:.4rem}.p-0{padding:0}.pb-0{padding-bottom:0}.pl-0{padding-left:0}.pr-0{padding-right:0}.pt-0{padding-top:0}.px-0{padding-left:0;padding-right:0}.py-0{padding-bottom:0;padding-top:0}.p-1{padding:.2rem}.pb-1{padding-bottom:.2rem}.pl-1{padding-left:.2rem}.pr-1{padding-right:.2rem}.pt-1{padding-top:.2rem}.px-1{padding-left:.2rem;padding-right:.2rem}.py-1{padding-bottom:.2rem;padding-top:.2rem}.p-2{padding:.4rem}.pb-2{padding-bottom:.4rem}.pl-2{padding-left:.4rem}.pr-2{padding-right:.4rem}.pt-2{padding-top:.4rem}.px-2{padding-left:.4rem;padding-right:.4rem}.py-2{padding-bottom:.4rem;padding-top:.4rem}.rounded{border-radius:.1rem}.circle{border-radius:50%}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-normal{font-weight:400}.text-bold{font-weight:700}.text-italic{font-style:italic}.text-large{font-size:1.2em}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-clip{overflow:hidden;text-overflow:clip;white-space:nowrap}.text-break{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-word;word-wrap:break-word}
\ No newline at end of file +/*! Spectre.css v0.4.5 | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}address{font-style:normal}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%;font-weight:400}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item;outline:0}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:20px;line-height:1.5;-webkit-tap-highlight-color:transparent}body{background:#fff;color:#50596c;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:.8rem;overflow-x:hidden;text-rendering:optimizeLegibility}a{color:#5755d9;outline:0;text-decoration:none}a:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}a.active,a:active,a:focus,a:hover{color:#4240d4;text-decoration:underline}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:500;line-height:1.2;margin-bottom:.5em;margin-top:0}.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h3,h3{font-size:1.4rem}.h4,h4{font-size:1.2rem}.h5,h5{font-size:1rem}.h6,h6{font-size:.8rem}p{margin:0 0 1rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}abbr[title]{border-bottom:.05rem dotted;cursor:help;text-decoration:none}kbd{background:#454d5d;border-radius:.1rem;color:#fff;font-size:.7rem;line-height:1.2;padding:.1rem .15rem}mark{background:#ffe9b3;border-radius:.1rem;color:#50596c;padding:.05rem}blockquote{border-left:.1rem solid #e7e9ed;margin-left:0;padding:.4rem .8rem}blockquote p:last-child{margin-bottom:0}ol,ul{margin:.8rem 0 .8rem .8rem;padding:0}ol ol,ol ul,ul ol,ul ul{margin:.8rem 0 .8rem .8rem}ol li,ul li{margin-top:.4rem}ul{list-style:disc inside}ul ul{list-style-type:circle}ol{list-style:decimal inside}ol ol{list-style-type:lower-alpha}dl dt{font-weight:700}dl dd{margin:.4rem 0 .8rem 0}:lang(zh){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif}:lang(ja){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic Pro","Yu Gothic",YuGothic,Meiryo,"Helvetica Neue",sans-serif}:lang(ko){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Helvetica Neue",sans-serif}.cjk ins,.cjk u,:lang(ja) ins,:lang(ja) u,:lang(zh) ins,:lang(zh) u{border-bottom:.05rem solid;text-decoration:none}.cjk del+del,.cjk del+s,.cjk ins+ins,.cjk ins+u,.cjk s+del,.cjk s+s,.cjk u+ins,.cjk u+u,:lang(ja) del+del,:lang(ja) del+s,:lang(ja) ins+ins,:lang(ja) ins+u,:lang(ja) s+del,:lang(ja) s+s,:lang(ja) u+ins,:lang(ja) u+u,:lang(zh) del+del,:lang(zh) del+s,:lang(zh) ins+ins,:lang(zh) ins+u,:lang(zh) s+del,:lang(zh) s+s,:lang(zh) u+ins,:lang(zh) u+u{margin-left:.125em}.table{border-collapse:collapse;border-spacing:0;text-align:left;width:100%}.table.table-striped tbody tr:nth-of-type(odd){background:#f8f9fa}.table.table-hover tbody tr:hover{background:#f0f1f4}.table tbody tr.active,.table.table-striped tbody tr.active{background:#f0f1f4}.table td,.table th{border-bottom:.05rem solid #e7e9ed;padding:.6rem .4rem}.table th{border-bottom-width:.1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #5755d9;border-radius:.1rem;color:#5755d9;cursor:pointer;display:inline-block;font-size:.8rem;height:1.8rem;line-height:1rem;outline:0;padding:.35rem .4rem;text-align:center;text-decoration:none;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.btn:focus,.btn:hover{background:#f1f1fc;border-color:#4b48d6;text-decoration:none}.btn.active,.btn:active{background:#4b48d6;border-color:#3634d2;color:#fff;text-decoration:none}.btn.active.loading::after,.btn:active.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.disabled,.btn:disabled,.btn[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn.btn-primary{background:#5755d9;border-color:#4b48d6;color:#fff}.btn.btn-primary:focus,.btn.btn-primary:hover{background:#4240d4;border-color:#3634d2;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3a38d2;border-color:#302ecd;color:#fff}.btn.btn-primary.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-link{background:0 0;border-color:transparent;color:#5755d9}.btn.btn-link.active,.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{color:#4240d4}.btn.btn-sm{font-size:.7rem;height:1.4rem;padding:.15rem .3rem}.btn.btn-lg{font-size:.9rem;height:2rem;padding:.45rem .6rem}.btn.btn-block{display:block;width:100%}.btn.btn-action{padding-left:0;padding-right:0;width:1.8rem}.btn.btn-action.btn-sm{width:1.4rem}.btn.btn-action.btn-lg{width:2rem}.btn.btn-clear{background:0 0;border:0;color:currentColor;height:.8rem;line-height:.8rem;margin-left:.2rem;margin-right:-2px;opacity:1;padding:0;text-decoration:none;width:.8rem}.btn.btn-clear:hover{opacity:.95}.btn.btn-clear::before{content:"\2715"}.btn-group{display:inline-flex;display:-ms-inline-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.btn-group .btn{-ms-flex:1 0 auto;flex:1 0 auto}.btn-group .btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.btn-group .btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.btn-group .btn.active,.btn-group .btn:active,.btn-group .btn:focus,.btn-group .btn:hover{z-index:1}.btn-group.btn-group-block{display:flex;display:-ms-flexbox}.btn-group.btn-group-block .btn{-ms-flex:1 0 0;flex:1 0 0}.form-group:not(:last-child){margin-bottom:.4rem}fieldset{margin-bottom:.8rem}legend{font-size:.9rem;font-weight:500;margin-bottom:.8rem}.form-label{display:block;line-height:1rem;padding:.4rem 0}.form-label.label-sm{padding:.2rem 0}.form-label.label-lg{padding:.5rem 0}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;background-image:none;border:.05rem solid #caced7;border-radius:.1rem;color:#50596c;display:block;font-size:.8rem;height:1.8rem;line-height:1rem;max-width:100%;outline:0;padding:.35rem .4rem;position:relative;transition:all .2s ease;width:100%}.form-input:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-input::-webkit-input-placeholder{color:#acb3c2}.form-input:-ms-input-placeholder{color:#acb3c2}.form-input::placeholder{color:#acb3c2}.form-input.input-sm{font-size:.7rem;height:1.4rem;padding:.15rem .3rem}.form-input.input-lg{font-size:.9rem;height:2rem;padding:.45rem .6rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}.form-input[type=file]{height:auto}textarea.form-input{height:auto}.form-input-hint{color:#acb3c2;font-size:.7rem;margin-top:.2rem}.has-success .form-input-hint,.is-success+.form-input-hint{color:#32b643}.has-error .form-input-hint,.is-error+.form-input-hint{color:#e85600}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.05rem solid #caced7;border-radius:.1rem;color:inherit;font-size:.8rem;height:1.8rem;line-height:1rem;outline:0;padding:.35rem .4rem;vertical-align:middle;width:100%}.form-select[multiple],.form-select[size]{height:auto}.form-select[multiple] option,.form-select[size] option{padding:.1rem .2rem}.form-select:not([multiple]):not([size]){background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;padding-right:1.2rem}.form-select:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:.7rem;height:1.4rem;padding:.15rem 1.1rem .15rem .3rem}.form-select.select-lg{font-size:.9rem;height:2rem;padding:.45rem 1.4rem .45rem .6rem}.has-icon-left,.has-icon-right{position:relative}.has-icon-left .form-icon,.has-icon-right .form-icon{height:.8rem;margin:0 .35rem;position:absolute;top:50%;transform:translateY(-50%);width:.8rem}.has-icon-left .form-icon{left:.05rem}.has-icon-left .form-input{padding-left:1.5rem}.has-icon-right .form-icon{right:.05rem}.has-icon-right .form-input{padding-right:1.5rem}.form-checkbox,.form-radio,.form-switch{display:inline-block;line-height:1rem;padding:.2rem 1.2rem;position:relative}.form-checkbox input,.form-radio input,.form-switch input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}.form-checkbox input:focus+.form-icon,.form-radio input:focus+.form-icon,.form-switch input:focus+.form-icon{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon,.form-switch input:checked+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox .form-icon,.form-radio .form-icon,.form-switch .form-icon{border:.05rem solid #caced7;cursor:pointer;display:inline-block;position:absolute;transition:all .2s ease}.form-checkbox .form-icon,.form-radio .form-icon{background:#fff;height:.8rem;left:0;top:.3rem;width:.8rem}.form-checkbox input:active+.form-icon,.form-radio input:active+.form-icon{background:#f0f1f4}.form-checkbox .form-icon{border-radius:.1rem}.form-checkbox input:checked+.form-icon::before{background-clip:padding-box;border:.1rem solid #fff;border-left-width:0;border-top-width:0;content:"";height:12px;left:50%;margin-left:-4px;margin-top:-8px;position:absolute;top:50%;transform:rotate(45deg);width:8px}.form-checkbox input:indeterminate+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox input:indeterminate+.form-icon::before{background:#fff;content:"";height:2px;left:50%;margin-left:-5px;margin-top:-1px;position:absolute;top:50%;width:10px}.form-radio .form-icon{border-radius:50%}.form-radio input:checked+.form-icon::before{background:#fff;border-radius:50%;content:"";height:4px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:4px}.form-switch{padding-left:2rem}.form-switch .form-icon{background:#e7e9ed;background-clip:padding-box;border-radius:.45rem;height:.9rem;left:0;top:.25rem;width:1.6rem}.form-switch .form-icon::before{background:#fff;border-radius:50%;content:"";display:block;height:.8rem;left:0;position:absolute;top:0;transition:all .2s ease;width:.8rem}.form-switch input:checked+.form-icon::before{left:14px}.form-switch input:active+.form-icon::before{background:#f8f9fa}.input-group{display:flex;display:-ms-flexbox}.input-group .input-group-addon{background:#f8f9fa;border:.05rem solid #caced7;border-radius:.1rem;line-height:1rem;padding:.35rem .4rem}.input-group .input-group-addon.addon-sm{font-size:.7rem;padding:.15rem .3rem}.input-group .input-group-addon.addon-lg{font-size:.9rem;padding:.45rem .6rem}.input-group .form-input,.input-group .form-select{-ms-flex:1 1 auto;flex:1 1 auto}.input-group .input-group-btn{z-index:1}.input-group .form-input:first-child:not(:last-child),.input-group .form-select:first-child:not(:last-child),.input-group .input-group-addon:first-child:not(:last-child),.input-group .input-group-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.input-group .form-input:not(:first-child):not(:last-child),.input-group .form-select:not(:first-child):not(:last-child),.input-group .input-group-addon:not(:first-child):not(:last-child),.input-group .input-group-btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.input-group .form-input:last-child:not(:first-child),.input-group .form-select:last-child:not(:first-child),.input-group .input-group-addon:last-child:not(:first-child),.input-group .input-group-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.input-group .form-input:focus,.input-group .form-select:focus,.input-group .input-group-addon:focus,.input-group .input-group-btn:focus{z-index:2}.input-group .form-select{width:auto}.input-group.input-inline{display:inline-flex;display:-ms-inline-flexbox}.form-input.is-success,.form-select.is-success,.has-success .form-input,.has-success .form-select{border-color:#32b643}.form-input.is-success:focus,.form-select.is-success:focus,.has-success .form-input:focus,.has-success .form-select:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.form-input.is-error,.form-select.is-error,.has-error .form-input,.has-error .form-select{border-color:#e85600}.form-input.is-error:focus,.form-select.is-error:focus,.has-error .form-input:focus,.has-error .form-select:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error .form-icon,.form-radio.is-error .form-icon,.form-switch.is-error .form-icon,.has-error .form-checkbox .form-icon,.has-error .form-radio .form-icon,.has-error .form-switch .form-icon{border-color:#e85600}.form-checkbox.is-error input:checked+.form-icon,.form-radio.is-error input:checked+.form-icon,.form-switch.is-error input:checked+.form-icon,.has-error .form-checkbox input:checked+.form-icon,.has-error .form-radio input:checked+.form-icon,.has-error .form-switch input:checked+.form-icon{background:#e85600;border-color:#e85600}.form-checkbox.is-error input:focus+.form-icon,.form-radio.is-error input:focus+.form-icon,.form-switch.is-error input:focus+.form-icon,.has-error .form-checkbox input:focus+.form-icon,.has-error .form-radio input:focus+.form-icon,.has-error .form-switch input:focus+.form-icon{border-color:#e85600;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid{border-color:#e85600}.form-input:not(:placeholder-shown):invalid:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid+.form-input-hint{color:#e85600}.form-input.disabled,.form-input:disabled,.form-select.disabled,.form-select:disabled{background-color:#f0f1f4;cursor:not-allowed;opacity:.5}.form-input[readonly]{background-color:#f8f9fa}input.disabled+.form-icon,input:disabled+.form-icon{background:#f0f1f4;cursor:not-allowed;opacity:.5}.form-switch input.disabled+.form-icon::before,.form-switch input:disabled+.form-icon::before{background:#fff}.form-horizontal{padding:.4rem}.form-horizontal .form-group{display:flex;display:-ms-flexbox}.form-horizontal .form-checkbox,.form-horizontal .form-radio,.form-horizontal .form-switch{margin:.2rem 0}.label{background:#f0f1f4;border-radius:.1rem;color:#5b657a;display:inline-block;line-height:1.2;padding:.1rem .15rem}.label.label-rounded{border-radius:5rem;padding-left:.4rem;padding-right:.4rem}.label.label-primary{background:#5755d9;color:#fff}.label.label-secondary{background:#f1f1fc;color:#5755d9}.label.label-success{background:#32b643;color:#fff}.label.label-warning{background:#ffb700;color:#fff}.label.label-error{background:#e85600;color:#fff}code{background:#fdf4f4;border-radius:.1rem;color:#e06870;font-size:85%;line-height:1.2;padding:.1rem .15rem}.code{border-radius:.1rem;color:#50596c;position:relative}.code::before{color:#acb3c2;content:attr(data-lang);font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.code code{background:#f8f9fa;color:inherit;display:block;line-height:1.5;overflow-x:auto;padding:1rem;width:100%}.img-responsive{display:block;height:auto;max-width:100%}.img-fit-cover{object-fit:cover}.img-fit-contain{object-fit:contain}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive::before{content:"";display:block;padding-bottom:56.25%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}video.video-responsive{height:auto;max-width:100%}video.video-responsive::before{content:none}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 .4rem 0}.figure .figure-caption{color:#667189;margin-top:.4rem}.container{margin-left:auto;margin-right:auto;padding-left:.4rem;padding-right:.4rem;width:100%}.container.grid-xl{max-width:1296px}.container.grid-lg{max-width:976px}.container.grid-md{max-width:856px}.container.grid-sm{max-width:616px}.container.grid-xs{max-width:496px}.show-lg,.show-md,.show-sm,.show-xl,.show-xs{display:none!important}.columns{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.4rem;margin-right:-.4rem}.columns.col-gapless{margin-left:0;margin-right:0}.columns.col-gapless>.column{padding-left:0;padding-right:0}.columns.col-oneline{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.column{-ms-flex:1;flex:1;max-width:100%;padding-left:.4rem;padding-right:.4rem}.column.col-1,.column.col-10,.column.col-11,.column.col-12,.column.col-2,.column.col-3,.column.col-4,.column.col-5,.column.col-6,.column.col-7,.column.col-8,.column.col-9{-ms-flex:none;flex:none}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;max-width:none;width:auto}.col-mx-auto{margin-left:auto;margin-right:auto}.col-ml-auto{margin-left:auto}.col-mr-auto{margin-right:auto}@media (max-width:1280px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9{-ms-flex:none;flex:none}.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}.hide-xl{display:none!important}.show-xl{display:block!important}}@media (max-width:960px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{-ms-flex:none;flex:none}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.hide-lg{display:none!important}.show-lg{display:block!important}}@media (max-width:840px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{-ms-flex:none;flex:none}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.hide-md{display:none!important}.show-md{display:block!important}}@media (max-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{-ms-flex:none;flex:none}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.hide-sm{display:none!important}.show-sm{display:block!important}}@media (max-width:480px){.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{-ms-flex:none;flex:none}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.hide-xs{display:none!important}.show-xs{display:block!important}}.navbar{align-items:stretch;display:flex;display:-ms-flexbox;-ms-flex-align:stretch;-ms-flex-pack:justify;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between}.navbar .navbar-section{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:1 0 0;flex:1 0 0;-ms-flex-align:center}.navbar .navbar-section:last-child{-ms-flex-pack:end;justify-content:flex-end}.navbar .navbar-center{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center}.navbar .navbar-brand{font-size:.9rem;font-weight:500;text-decoration:none}.accordion input:checked~.accordion-header .icon,.accordion[open] .accordion-header .icon{transform:rotate(90deg)}.accordion input:checked~.accordion-body,.accordion[open] .accordion-body{max-height:50rem}.accordion .accordion-header{display:block;padding:.2rem .4rem}.accordion .accordion-header .icon{transition:all .2s ease}.accordion .accordion-body{margin-bottom:.4rem;max-height:0;overflow:hidden;transition:max-height .2s ease}summary.accordion-header::-webkit-details-marker{display:none}.form-autocomplete{position:relative}.form-autocomplete .form-autocomplete-input{align-content:flex-start;display:flex;display:-ms-flexbox;-ms-flex-line-pack:start;-ms-flex-wrap:wrap;flex-wrap:wrap;height:auto;min-height:1.6rem;padding:.1rem}.form-autocomplete .form-autocomplete-input.is-focused{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-autocomplete .form-autocomplete-input .form-input{border-color:transparent;box-shadow:none;display:inline-block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.2rem;line-height:.8rem;margin:.1rem;width:auto}.form-autocomplete .menu{left:0;position:absolute;top:100%;width:100%}.avatar{background:#5755d9;border-radius:50%;color:rgba(255,255,255,.85);display:inline-block;font-size:.8rem;font-weight:300;height:1.6rem;line-height:1.25;margin:0;position:relative;vertical-align:middle;width:1.6rem}.avatar.avatar-xs{font-size:.4rem;height:.8rem;width:.8rem}.avatar.avatar-sm{font-size:.6rem;height:1.2rem;width:1.2rem}.avatar.avatar-lg{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-xl{font-size:1.6rem;height:3.2rem;width:3.2rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:1}.avatar .avatar-icon,.avatar .avatar-presence{background:#fff;bottom:14.64%;height:50%;padding:.1rem;position:absolute;right:14.64%;transform:translate(50%,50%);width:50%;z-index:2}.avatar .avatar-presence{background:#acb3c2;border-radius:50%;box-shadow:0 0 0 .1rem #fff;height:.5em;width:.5em}.avatar .avatar-presence.online{background:#32b643}.avatar .avatar-presence.busy{background:#e85600}.avatar .avatar-presence.away{background:#ffb700}.avatar[data-initial]::before{color:currentColor;content:attr(data-initial);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.badge{position:relative;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge]::after{background:#5755d9;background-clip:padding-box;border-radius:.5rem;box-shadow:0 0 0 .1rem #fff;color:#fff;content:attr(data-badge);display:inline-block;transform:translate(-.1rem,-.5rem)}.badge[data-badge]::after{font-size:.7rem;height:.9rem;line-height:1;min-width:.9rem;padding:.1rem .2rem;text-align:center;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge=""]::after{height:6px;min-width:6px;padding:0;width:6px}.badge.btn::after{position:absolute;right:0;top:0;transform:translate(50%,-50%)}.badge.avatar::after{position:absolute;right:14.64%;top:14.64%;transform:translate(50%,-50%);z-index:100}.badge.avatar-xs::after{content:"";height:.4rem;min-width:.4rem;padding:0;width:.4rem}.breadcrumb{list-style:none;margin:.2rem 0;padding:.2rem 0}.breadcrumb .breadcrumb-item{color:#667189;display:inline-block;margin:0;padding:.2rem 0}.breadcrumb .breadcrumb-item:not(:last-child){margin-right:.2rem}.breadcrumb .breadcrumb-item:not(:last-child) a{color:#667189}.breadcrumb .breadcrumb-item:not(:first-child)::before{color:#e7e9ed;content:"/";padding-right:.2rem}.bar{background:#f0f1f4;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:.8rem;width:100%}.bar.bar-sm{height:.2rem}.bar .bar-item{background:#5755d9;color:#fff;display:block;-ms-flex-negative:0;flex-shrink:0;font-size:.7rem;height:100%;line-height:.8rem;position:relative;text-align:center;width:0}.bar .bar-item:first-child{border-bottom-left-radius:.1rem;border-top-left-radius:.1rem}.bar .bar-item:last-child{border-bottom-right-radius:.1rem;border-top-right-radius:.1rem;-ms-flex-negative:1;flex-shrink:1}.bar-slider{height:.1rem;margin:.4rem 0;position:relative}.bar-slider .bar-item{left:0;padding:0;position:absolute}.bar-slider .bar-item:not(:last-child):first-child{background:#f0f1f4;z-index:1}.bar-slider .bar-slider-btn{background:#5755d9;border:0;border-radius:50%;height:.6rem;padding:0;position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:.6rem}.bar-slider .bar-slider-btn:active{box-shadow:0 0 0 .1rem #5755d9}.card{background:#fff;border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.card .card-body,.card .card-footer,.card .card-header{padding:.8rem;padding-bottom:0}.card .card-body:last-child,.card .card-footer:last-child,.card .card-header:last-child{padding-bottom:.8rem}.card .card-image{padding-top:.8rem}.card .card-image:first-child{padding-top:0}.card .card-image:first-child img{border-top-left-radius:.1rem;border-top-right-radius:.1rem}.card .card-image:last-child img{border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem}.chip{align-items:center;background:#f0f1f4;border-radius:5rem;color:#667189;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;font-size:90%;height:1.2rem;line-height:.8rem;margin:.1rem;max-width:100%;padding:.2rem .4rem;text-decoration:none;vertical-align:middle}.chip.active{background:#5755d9;color:#fff}.chip .avatar{margin-left:-.4rem;margin-right:.2rem}.dropdown{display:inline-block;position:relative}.dropdown .menu{animation:slide-down .15s ease 1;display:none;left:0;max-height:50vh;overflow-y:auto;position:absolute;top:100%}.dropdown.dropdown-right .menu{left:auto;right:0}.dropdown .dropdown-toggle:focus+.menu,.dropdown .menu:hover,.dropdown.active .menu{display:block}.dropdown .btn-group .dropdown-toggle:nth-last-child(2){border-bottom-right-radius:.1rem;border-top-right-radius:.1rem}.empty{background:#f8f9fa;border-radius:.1rem;color:#667189;padding:3.2rem 1.6rem;text-align:center}.empty .empty-icon{margin-bottom:.8rem}.empty .empty-subtitle,.empty .empty-title{margin:.4rem auto}.empty .empty-action{margin-top:.8rem}.menu{background:#fff;border-radius:.1rem;box-shadow:0 .05rem .2rem rgba(69,77,93,.3);list-style:none;margin:0;min-width:180px;padding:.4rem;transform:translateY(.2rem);z-index:100}.menu.menu-nav{background:0 0;box-shadow:none}.menu .menu-item{margin-top:0;padding:0 .4rem;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu .menu-item>a{border-radius:.1rem;color:inherit;display:block;margin:0 -.4rem;padding:.2rem .4rem;text-decoration:none}.menu .menu-item>a:focus,.menu .menu-item>a:hover{background:#f1f1fc;color:#5755d9}.menu .menu-item>a.active,.menu .menu-item>a:active{background:#f1f1fc;color:#5755d9}.menu .menu-item+.menu-item{margin-top:.2rem}.menu .menu-badge{float:right;padding:.2rem 0}.menu .menu-badge .btn{margin-top:-.1rem}.modal{align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:flex;display:-ms-flexbox;opacity:1;z-index:400}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(248,249,250,.75);bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{animation:slide-down .2s ease 1;max-width:640px;width:100%;z-index:1}.modal.modal-sm .modal-container{max-width:320px;padding:0 .4rem}.modal.modal-lg .modal-overlay{background:#fff}.modal.modal-lg .modal-container{box-shadow:none;max-width:960px}.modal-container{background:#fff;border-radius:.1rem;box-shadow:0 .2rem .5rem rgba(69,77,93,.3);display:block;padding:0 .8rem;text-align:left}.modal-container .modal-header{padding:.8rem}.modal-container .modal-body{max-height:50vh;overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-footer{padding:.8rem;text-align:right}.nav{display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:.2rem 0}.nav .nav-item a{color:#667189;padding:.2rem .4rem;text-decoration:none}.nav .nav-item a:focus,.nav .nav-item a:hover{color:#5755d9}.nav .nav-item.active>a{color:#50596c;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5755d9}.nav .nav{margin-bottom:.4rem;margin-left:.8rem}.pagination{display:flex;display:-ms-flexbox;list-style:none;margin:.2rem 0;padding:.2rem 0}.pagination .page-item{margin:.2rem .05rem}.pagination .page-item span{display:inline-block;padding:.2rem .2rem}.pagination .page-item a{border-radius:.1rem;color:#667189;display:inline-block;padding:.2rem .4rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5755d9}.pagination .page-item.disabled a{cursor:default;opacity:.5;pointer-events:none}.pagination .page-item.active a{background:#5755d9;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-ms-flex:1 0 50%;flex:1 0 50%}.pagination .page-item.page-next{text-align:right}.pagination .page-item .page-item-title{margin:0}.pagination .page-item .page-item-subtitle{margin:0;opacity:.5}.panel{border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.panel .panel-footer,.panel .panel-header{-ms-flex:0 0 auto;flex:0 0 auto;padding:.8rem}.panel .panel-nav{-ms-flex:0 0 auto;flex:0 0 auto}.panel .panel-body{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:0 .8rem}.popover{display:inline-block;position:relative}.popover .popover-container{content:attr(data-tooltip);left:50%;opacity:0;padding:.4rem;position:absolute;top:0;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease;width:320px;z-index:400}.popover .popover-container:hover,.popover :focus+.popover-container,.popover:hover .popover-container{display:block;opacity:1;transform:translate(-50%,-100%) scale(1)}.popover.popover-right .popover-container{left:100%;top:50%}.popover.popover-right .popover-container:hover,.popover.popover-right :focus+.popover-container,.popover.popover-right:hover .popover-container{transform:translate(0,-50%) scale(1)}.popover.popover-bottom .popover-container{left:50%;top:100%}.popover.popover-bottom .popover-container:hover,.popover.popover-bottom :focus+.popover-container,.popover.popover-bottom:hover .popover-container{transform:translate(-50%,0) scale(1)}.popover.popover-left .popover-container{left:0;top:50%}.popover.popover-left .popover-container:hover,.popover.popover-left :focus+.popover-container,.popover.popover-left:hover .popover-container{transform:translate(-100%,-50%) scale(1)}.popover .card{border:0;box-shadow:0 .2rem .5rem rgba(69,77,93,.3)}.step{display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;list-style:none;margin:.2rem 0;width:100%}.step .step-item{-ms-flex:1 1 0;flex:1 1 0;margin-top:0;min-height:1rem;position:relative;text-align:center}.step .step-item:not(:first-child)::before{background:#5755d9;content:"";height:2px;left:-50%;position:absolute;top:9px;width:100%}.step .step-item a{color:#acb3c2;display:inline-block;padding:20px 10px 0;text-decoration:none}.step .step-item a::before{background:#5755d9;border:.1rem solid #fff;border-radius:50%;content:"";display:block;height:.6rem;left:50%;position:absolute;top:.2rem;transform:translateX(-50%);width:.6rem;z-index:1}.step .step-item.active a::before{background:#fff;border:.1rem solid #5755d9}.step .step-item.active~.step-item::before{background:#e7e9ed}.step .step-item.active~.step-item a::before{background:#e7e9ed}.tab{align-items:center;border-bottom:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:.2rem 0 .15rem 0}.tab .tab-item{margin-top:0}.tab .tab-item a{border-bottom:.1rem solid transparent;color:inherit;display:block;margin:0 .4rem 0 0;padding:.4rem .2rem .3rem .2rem;text-decoration:none}.tab .tab-item a:focus,.tab .tab-item a:hover{color:#5755d9}.tab .tab-item a.active,.tab .tab-item.active a{border-bottom-color:#5755d9;color:#5755d9}.tab .tab-item.tab-action{-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}.tab .tab-item .btn-clear{margin-top:-.2rem}.tab.tab-block .tab-item{-ms-flex:1 0 0;flex:1 0 0;text-align:center}.tab.tab-block .tab-item a{margin:0}.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:.1rem;top:.1rem;transform:translate(0,0)}.tab:not(.tab-block) .badge{padding-right:0}.tile{align-content:space-between;align-items:flex-start;display:flex;display:-ms-flexbox;-ms-flex-align:start;-ms-flex-line-pack:justify}.tile .tile-action,.tile .tile-icon{-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-content{-ms-flex:1 1 auto;flex:1 1 auto}.tile .tile-content:not(:first-child){padding-left:.4rem}.tile .tile-content:not(:last-child){padding-right:.4rem}.tile .tile-subtitle,.tile .tile-title{line-height:1rem}.tile.tile-centered{align-items:center;-ms-flex-align:center}.tile.tile-centered .tile-content{overflow:hidden}.tile.tile-centered .tile-subtitle,.tile.tile-centered .tile-title{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast{background:rgba(69,77,93,.9);border:.05rem solid #454d5d;border-color:#454d5d;border-radius:.1rem;color:#fff;display:block;padding:.4rem;width:100%}.toast.toast-primary{background:rgba(87,85,217,.9);border-color:#5755d9}.toast.toast-success{background:rgba(50,182,67,.9);border-color:#32b643}.toast.toast-warning{background:rgba(255,183,0,.9);border-color:#ffb700}.toast.toast-error{background:rgba(232,86,0,.9);border-color:#e85600}.toast a{color:#fff;text-decoration:underline}.toast a.active,.toast a:active,.toast a:focus,.toast a:hover{opacity:.75}.toast .btn-clear{margin:4px -2px 4px 4px}.tooltip{position:relative}.tooltip::after{background:rgba(69,77,93,.9);border-radius:.1rem;bottom:100%;color:#fff;content:attr(data-tooltip);display:block;font-size:.7rem;left:50%;max-width:320px;opacity:0;overflow:hidden;padding:.2rem .4rem;pointer-events:none;position:absolute;text-overflow:ellipsis;transform:translate(-50%,.4rem);transition:all .2s ease;white-space:pre;z-index:300}.tooltip:focus::after,.tooltip:hover::after{opacity:1;transform:translate(-50%,-.2rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;transform:translate(-.2rem,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{transform:translate(.2rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;transform:translate(-50%,-.4rem)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{transform:translate(-50%,.2rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;transform:translate(.4rem,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{transform:translate(-.2rem,50%)}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-1.6rem)}100%{opacity:1;transform:translateY(0)}}.text-primary{color:#5755d9}a.text-primary:focus,a.text-primary:hover{color:#4240d4}.text-secondary{color:#e5e5f9}a.text-secondary:focus,a.text-secondary:hover{color:#d1d0f4}.text-gray{color:#acb3c2}a.text-gray:focus,a.text-gray:hover{color:#9ea6b7}.text-light{color:#fff}a.text-light:focus,a.text-light:hover{color:#f2f2f2}.text-success{color:#32b643}a.text-success:focus,a.text-success:hover{color:#2da23c}.text-warning{color:#ffb700}a.text-warning:focus,a.text-warning:hover{color:#e6a500}.text-error{color:#e85600}a.text-error:focus,a.text-error:hover{color:#cf4d00}.bg-primary{background:#5755d9}.bg-secondary{background:#f1f1fc}.bg-dark{background:#454d5d}.bg-gray{background:#f8f9fa}.bg-success{background:#32b643}.bg-warning{background:#ffb700}.bg-error{background:#e85600}.c-hand{cursor:pointer}.c-move{cursor:move}.c-zoom-in{cursor:zoom-in}.c-zoom-out{cursor:zoom-out}.c-not-allowed{cursor:not-allowed}.c-auto{cursor:auto}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex;display:-ms-flexbox}.d-inline-flex{display:inline-flex;display:-ms-inline-flexbox}.d-hide,.d-none{display:none!important}.d-visible{visibility:visible}.d-invisible{visibility:hidden}.text-hide{background:0 0;border:0;color:transparent;font-size:0;line-height:0;text-shadow:none}.text-assistive{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.divider,.divider-vert{display:block;position:relative}.divider-vert[data-content]::after,.divider[data-content]::after{background:#fff;color:#acb3c2;content:attr(data-content);display:inline-block;font-size:.7rem;padding:0 .4rem;transform:translateY(-.65rem)}.divider{border-top:.05rem solid #e7e9ed;height:.05rem;margin:.4rem 0}.divider[data-content]{margin:.8rem 0}.divider-vert{display:block;padding:.8rem}.divider-vert::before{border-left:.05rem solid #e7e9ed;bottom:.4rem;content:"";display:block;left:50%;position:absolute;top:.4rem;transform:translateX(-50%)}.divider-vert[data-content]::after{left:50%;padding:.2rem 0;position:absolute;top:50%;transform:translate(-50%,-50%)}.loading{color:transparent!important;min-height:.8rem;pointer-events:none;position:relative}.loading::after{animation:loading .5s infinite linear;border:.1rem solid #5755d9;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:.8rem;left:50%;margin-left:-.4rem;margin-top:-.4rem;position:absolute;top:50%;width:.8rem;z-index:1}.loading.loading-lg{min-height:2rem}.loading.loading-lg::after{height:1.6rem;margin-left:-.8rem;margin-top:-.8rem;width:1.6rem}.clearfix::after,.container::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.centered{display:block;float:none;margin-left:auto;margin-right:auto}.flex-centered{align-items:center;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center}.m-0{margin:0}.mb-0{margin-bottom:0}.ml-0{margin-left:0}.mr-0{margin-right:0}.mt-0{margin-top:0}.mx-0{margin-left:0;margin-right:0}.my-0{margin-bottom:0;margin-top:0}.m-1{margin:.2rem}.mb-1{margin-bottom:.2rem}.ml-1{margin-left:.2rem}.mr-1{margin-right:.2rem}.mt-1{margin-top:.2rem}.mx-1{margin-left:.2rem;margin-right:.2rem}.my-1{margin-bottom:.2rem;margin-top:.2rem}.m-2{margin:.4rem}.mb-2{margin-bottom:.4rem}.ml-2{margin-left:.4rem}.mr-2{margin-right:.4rem}.mt-2{margin-top:.4rem}.mx-2{margin-left:.4rem;margin-right:.4rem}.my-2{margin-bottom:.4rem;margin-top:.4rem}.p-0{padding:0}.pb-0{padding-bottom:0}.pl-0{padding-left:0}.pr-0{padding-right:0}.pt-0{padding-top:0}.px-0{padding-left:0;padding-right:0}.py-0{padding-bottom:0;padding-top:0}.p-1{padding:.2rem}.pb-1{padding-bottom:.2rem}.pl-1{padding-left:.2rem}.pr-1{padding-right:.2rem}.pt-1{padding-top:.2rem}.px-1{padding-left:.2rem;padding-right:.2rem}.py-1{padding-bottom:.2rem;padding-top:.2rem}.p-2{padding:.4rem}.pb-2{padding-bottom:.4rem}.pl-2{padding-left:.4rem}.pr-2{padding-right:.4rem}.pt-2{padding-top:.4rem}.px-2{padding-left:.4rem;padding-right:.4rem}.py-2{padding-bottom:.4rem;padding-top:.4rem}.rounded{border-radius:.1rem}.circle{border-radius:50%}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-normal{font-weight:400}.text-bold{font-weight:700}.text-italic{font-style:italic}.text-large{font-size:1.2em}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-clip{overflow:hidden;text-overflow:clip;white-space:nowrap}.text-break{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-word;word-wrap:break-word}
\ No newline at end of file diff --git a/docs/elements.html b/docs/elements.html index 9bcc209..8ffabdc 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -9,312 +9,312 @@ <title>Elements - Spectre.css CSS Framework</title> <link rel="stylesheet" href="dist/spectre.css"> <link rel="stylesheet" href="dist/spectre-icons.css"> + <link rel="stylesheet" href="dist/spectre-exp.css"> <link rel="stylesheet" href="css/docs.css"> </head> <body> - <div class="s-container container"> - <div class="columns"> - <div id="sidebar" class="s-sidebar"> - <div class="s-brand"> - <a href="index.html" class="s-logo"> - <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>Spectre.css</h2> - </a> - </div> - <div class="s-nav"> - <div class="accordion-container"> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-1"> - Getting started - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="getting-started.html#introduction">Introduction</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#installation">Installation</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#custom">Custom version</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#browsers">Browser support</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#whatsnew">What's new</a> - </li> - </ul> - </div> + <div class="docs-container off-canvas"> + <div class="docs-navbar"> + <a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"> + <i class="icon icon-menu"></i> + </a> + <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> + </div> + + <div id="sidebar" class="docs-sidebar off-canvas-sidebar"> + <div class="docs-brand"> + <a href="index.html" class="docs-logo"> + <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> + <h2>Spectre.css</h2> + </a> + </div> + <div class="docs-nav"> + <div class="accordion-container"> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-1"> + Getting started + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="getting-started.html#introduction">Introduction</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#installation">Installation</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#custom">Custom version</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#browsers">Browser support</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#whatsnew">What's new</a> + </li> + </ul> </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden checked> - <label class="accordion-header c-hand" for="docs-accordion-2"> - Elements - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="elements.html#typography">Typography</a> - </li> - <li class="menu-item"> - <a href="elements.html#tables">Tables</a> - </li> - <li class="menu-item"> - <a href="elements.html#buttons">Buttons</a> - </li> - <li class="menu-item"> - <a href="elements.html#forms">Forms</a> - </li> - <li class="menu-item"> - <a href="elements.html#icons">Icons</a> - </li> - <li class="menu-item"> - <a href="elements.html#labels">Labels</a> - </li> - <li class="menu-item"> - <a href="elements.html#codes">Codes</a> - </li> - <li class="menu-item"> - <a href="elements.html#media">Media</a> - </li> - </ul> - </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden checked> + <label class="accordion-header c-hand" for="docs-accordion-2"> + Elements + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="elements.html#typography">Typography</a> + </li> + <li class="menu-item"> + <a href="elements.html#tables">Tables</a> + </li> + <li class="menu-item"> + <a href="elements.html#buttons">Buttons</a> + </li> + <li class="menu-item"> + <a href="elements.html#forms">Forms</a> + </li> + <li class="menu-item"> + <a href="elements.html#icons">Icons</a> + </li> + <li class="menu-item"> + <a href="elements.html#labels">Labels</a> + </li> + <li class="menu-item"> + <a href="elements.html#codes">Codes</a> + </li> + <li class="menu-item"> + <a href="elements.html#media">Media</a> + </li> + </ul> </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-3"> - Layout - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="layout.html#grid">Flexbox grid</a> - </li> - <li class="menu-item"> - <a href="layout.html#responsive">Responsive</a> - </li> - <li class="menu-item"> - <a href="layout.html#navbar">Navbar</a> - </li> - </ul> - </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-3"> + Layout + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="layout.html#grid">Flexbox grid</a> + </li> + <li class="menu-item"> + <a href="layout.html#responsive">Responsive</a> + </li> + <li class="menu-item"> + <a href="layout.html#navbar">Navbar</a> + </li> + </ul> </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-4"> - Components - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="components.html#accordions">Accordions</a> - </li> - <li class="menu-item"> - <a href="components.html#autocomplete">Autocomplete</a> - </li> - <li class="menu-item"> - <a href="components.html#avatars">Avatars</a> - </li> - <li class="menu-item"> - <a href="components.html#badges">Badges</a> - </li> - <li class="menu-item"> - <a href="components.html#bars">Bars</a> - </li> - <li class="menu-item"> - <a href="components.html#breadcrumbs">Breadcrumbs</a> - </li> - <li class="menu-item"> - <a href="components.html#cards">Cards</a> - </li> - <li class="menu-item"> - <a href="components.html#chips">Chips</a> - </li> - <li class="menu-item"> - <a href="components.html#empty">Empty states</a> - </li> - <li class="menu-item"> - <a href="components.html#menus">Menus</a> - </li> - <li class="menu-item"> - <a href="components.html#modals">Modals</a> - </li> - <li class="menu-item"> - <a href="components.html#navs">Navs</a> - </li> - <li class="menu-item"> - <a href="components.html#pagination">Pagination</a> - </li> - <li class="menu-item"> - <a href="components.html#panels">Panels</a> - </li> - <li class="menu-item"> - <a href="components.html#popovers">Popovers</a> - </li> - <li class="menu-item"> - <a href="components.html#steps">Steps</a> - </li> - <li class="menu-item"> - <a href="components.html#tabs">Tabs</a> - </li> - <li class="menu-item"> - <a href="components.html#tiles">Tiles</a> - </li> - <li class="menu-item"> - <a href="components.html#toasts">Toasts</a> - </li> - <li class="menu-item"> - <a href="components.html#tooltips">Tooltips</a> - </li> - </ul> - </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-4"> + Components + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="components.html#accordions">Accordions</a> + </li> + <li class="menu-item"> + <a href="components.html#autocomplete">Autocomplete</a> + </li> + <li class="menu-item"> + <a href="components.html#avatars">Avatars</a> + </li> + <li class="menu-item"> + <a href="components.html#badges">Badges</a> + </li> + <li class="menu-item"> + <a href="components.html#bars">Bars</a> + </li> + <li class="menu-item"> + <a href="components.html#breadcrumbs">Breadcrumbs</a> + </li> + <li class="menu-item"> + <a href="components.html#cards">Cards</a> + </li> + <li class="menu-item"> + <a href="components.html#chips">Chips</a> + </li> + <li class="menu-item"> + <a href="components.html#empty">Empty states</a> + </li> + <li class="menu-item"> + <a href="components.html#menus">Menus</a> + </li> + <li class="menu-item"> + <a href="components.html#modals">Modals</a> + </li> + <li class="menu-item"> + <a href="components.html#navs">Navs</a> + </li> + <li class="menu-item"> + <a href="components.html#pagination">Pagination</a> + </li> + <li class="menu-item"> + <a href="components.html#panels">Panels</a> + </li> + <li class="menu-item"> + <a href="components.html#popovers">Popovers</a> + </li> + <li class="menu-item"> + <a href="components.html#steps">Steps</a> + </li> + <li class="menu-item"> + <a href="components.html#tabs">Tabs</a> + </li> + <li class="menu-item"> + <a href="components.html#tiles">Tiles</a> + </li> + <li class="menu-item"> + <a href="components.html#toasts">Toasts</a> + </li> + <li class="menu-item"> + <a href="components.html#tooltips">Tooltips</a> + </li> + </ul> </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-5"> - Utilities - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="utilities.html#colors">Colors</a> - </li> - <li class="menu-item"> - <a href="utilities.html#cursors">Cursors</a> - </li> - <li class="menu-item"> - <a href="utilities.html#display">Display</a> - </li> - <li class="menu-item"> - <a href="utilities.html#divider">Divider</a> - </li> - <li class="menu-item"> - <a href="utilities.html#loading">Loading</a> - </li> - <li class="menu-item"> - <a href="utilities.html#position">Position</a> - </li> - <li class="menu-item"> - <a href="utilities.html#shapes">Shapes</a> - </li> - <li class="menu-item"> - <a href="utilities.html#text">Text</a> - </li> - </ul> - </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-5"> + Utilities + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="utilities.html#colors">Colors</a> + </li> + <li class="menu-item"> + <a href="utilities.html#cursors">Cursors</a> + </li> + <li class="menu-item"> + <a href="utilities.html#display">Display</a> + </li> + <li class="menu-item"> + <a href="utilities.html#divider">Divider</a> + </li> + <li class="menu-item"> + <a href="utilities.html#loading">Loading</a> + </li> + <li class="menu-item"> + <a href="utilities.html#position">Position</a> + </li> + <li class="menu-item"> + <a href="utilities.html#shapes">Shapes</a> + </li> + <li class="menu-item"> + <a href="utilities.html#text">Text</a> + </li> + </ul> </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-6"> - Experimentals - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="experimentals.html#calendars">Calendars</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#carousels">Carousels</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#comparison">Comparison sliders</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#filters">Filters</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#meters">Meters</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#off-canvas">Off-canvas</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#parallax">Parallax</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#progress">Progress</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#sliders">Sliders</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#timelines">Timelines</a> - </li> - </ul> - </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-6"> + Experimentals + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="experimentals.html#calendars">Calendars</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#carousels">Carousels</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#comparison">Comparison sliders</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#filters">Filters</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#meters">Meters</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#off-canvas">Off-canvas</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#parallax">Parallax</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#progress">Progress</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#sliders">Sliders</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#timelines">Timelines</a> + </li> + </ul> </div> </div> </div> </div> - <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> - <div class="s-navbar"> - <div class="menu-btn"> - <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a> - </div> - <div class="float-btn"> - <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> - </div> + </div> + + <a class="off-canvas-overlay" href="#close"></a> + + <div id="content" class="docs-content off-canvas-content"> + <div id="elements" class="container"> + <h3 class="s-title"><a href="#elements" class="anchor" aria-hidden="true">#</a>Elements</h3> </div> - <div id="content" class="s-content"> - <div id="elements" class="container"> - <h3 class="s-title"><a href="#elements" class="anchor" aria-hidden="true">#</a>Elements</h3> - </div> - - <div class="container"> - <div class="docs-ad"> - <div class="hide-md"> - <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> - <!-- GitHub-lg --> - <ins class="adsbygoogle" - style="display:inline-block;width:728px;height:90px" - data-ad-client="ca-pub-2225124559530218" - data-ad-slot="9894180784"></ins> - <script> - (adsbygoogle = window.adsbygoogle || []).push({}); - </script> - </div> - <div class="show-md"> - <!-- GitHub-sm --> - <ins class="adsbygoogle" - style="display:inline-block;width:300px;height:250px" - data-ad-client="ca-pub-2225124559530218" - data-ad-slot="9278881734"></ins> - <script> - (adsbygoogle = window.adsbygoogle || []).push({}); - </script> - </div> + <div class="container"> + <div class="docs-ad"> + <div class="hide-md"> + <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <!-- GitHub-lg --> + <ins class="adsbygoogle" + style="display:inline-block;width:728px;height:90px" + data-ad-client="ca-pub-2225124559530218" + data-ad-slot="9894180784"></ins> + <script> + (adsbygoogle = window.adsbygoogle || []).push({}); + </script> + </div> + <div class="show-md"> + <!-- GitHub-sm --> + <ins class="adsbygoogle" + style="display:inline-block;width:300px;height:250px" + data-ad-client="ca-pub-2225124559530218" + data-ad-slot="9278881734"></ins> + <script> + (adsbygoogle = window.adsbygoogle || []).push({}); + </script> </div> </div> + </div> - <div id="typography" class="container"> - <h3 class="s-title"><a href="#typography" class="anchor" aria-hidden="true">#</a>Typography</h3> - <div class="docs-note"> - <p>Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p> + <div id="typography" class="container"> + <h3 class="s-title"><a href="#typography" class="anchor" aria-hidden="true">#</a>Typography</h3> + <div class="docs-note"> + <p>Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p> + </div> + <h4 id="typography-headings" class="s-subtitle">Headings</h4> + <div class="columns"> + <div class="column col-12"> + <h1>H1 Heading <small class="label">40px</small></h1> </div> - <h4 id="typography-headings" class="s-subtitle">Headings</h4> - <div class="columns"> - <div class="column col-12"> - <h1>H1 Heading <small class="label">40px</small></h1> - </div> - <div class="column col-12"> - <h2>H2 Heading <small class="label">32px</small></h2> - </div> - <div class="column col-12"> - <h3>H3 Heading <small class="label">28px</small></h3> - </div> - <div class="column col-12"> - <h4>H4 Heading <small class="label">24px</small></h4> - </div> - <div class="column col-12"> - <h5>H5 Heading <small class="label">20px</small></h5> - </div> - <div class="column col-12"> - <h6>H6 Heading <small class="label">16px</small></h6> - </div> + <div class="column col-12"> + <h2>H2 Heading <small class="label">32px</small></h2> + </div> + <div class="column col-12"> + <h3>H3 Heading <small class="label">28px</small></h3> + </div> + <div class="column col-12"> + <h4>H4 Heading <small class="label">24px</small></h4> + </div> + <div class="column col-12"> + <h5>H5 Heading <small class="label">20px</small></h5> + </div> + <div class="column col-12"> + <h6>H6 Heading <small class="label">16px</small></h6> </div> + </div> <!-- headings --> <pre class="code" data-lang="HTML"><code><<span class="tag">h1</span>>H1 Heading<<span class="tag">/h1</span>> @@ -322,111 +322,111 @@ <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"h1"</span>>H1 Heading<<span class="tag">/span</span>> </code></pre> - <h4 id="typography-paragraphs" class="s-subtitle">Paragraphs</h4> - <div class="docs-note"> - <p>Lorem ipsum dolor sit amet, consectetur <a href="#typography">adipiscing elit. Praesent risus leo, dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> - <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> - </div> + <h4 id="typography-paragraphs" class="s-subtitle">Paragraphs</h4> + <div class="docs-note"> + <p>Lorem ipsum dolor sit amet, consectetur <a href="#typography">adipiscing elit. Praesent risus leo, dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> + <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> + </div> <!-- paragraphs --> <pre class="code" data-lang="HTML"><code><<span class="tag">p</span>>Lorem ipsum dolor sit amet, ...<<span class="tag">/p</span>> <<span class="tag">p</span>>...<<span class="tag">/p</span>> </code></pre> - <h4 id="typography-semantic-text" class="s-subtitle">Semantic text elements</h4> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <abbr title="Internationalization">I18N</abbr> - <code class="ml-2"><abbr></code> - </div> - <div class="column col-6 col-xs-12"> - <strong>Bold</strong> - <code class="ml-2"><strong></code> <code><b></code> - </div> - <div class="column col-6 col-xs-12"> - <cite>Citation</cite> - <code class="ml-2"><cite></code> - </div> - <div class="column col-6 col-xs-12"> - <code>Hello World!</code> - <code class="ml-2"><code></code> - </div> - <div class="column col-6 col-xs-12"> - <del>Deleted</del> - <code class="ml-2"><del></code> - </div> - <div class="column col-6 col-xs-12"> - <em>Emphasis</em> - <code class="ml-2"><em></code> - </div> - <div class="column col-6 col-xs-12"> - <i>Italic</i> - <code class="ml-2"><i></code> - </div> - <div class="column col-6 col-xs-12"> - <ins>Inserted</ins> - <code class="ml-2"><ins></code> - </div> - <div class="column col-6 col-xs-12"> - <kbd>Ctrl + S</kbd> - <code class="ml-2"><kbd></code> - </div> - <div class="column col-6 col-xs-12"> - <mark>Highlighted</mark> - <code class="ml-2"><mark></code> - </div> - <div class="column col-6 col-xs-12"> - <ruby> - 漢 <rt>kan</rt> - 字 <rt>ji</rt> - </ruby> - <code class="ml-2"><ruby></code> - </div> - <div class="column col-6 col-xs-12"> - <s>Strikethrough</s> - <code class="ml-2"><s></code> - </div> - <div class="column col-6 col-xs-12"> - <samp>Sample</samp> - <code class="ml-2"><samp></code> - </div> - <div class="column col-6 col-xs-12"> - Text <sub>Subscripted</sub> - <code class="ml-2"><sub></code> - </div> - <div class="column col-6 col-xs-12"> - Text <sup>Superscripted</sup> - <code class="ml-2"><sup></code> - </div> - <div class="column col-6 col-xs-12"> - <time>20:00</time> - <code class="ml-2"><time></code> - </div> - <div class="column col-6 col-xs-12"> - <u>Underline</u> - <code class="ml-2"><u></code> - </div> - <div class="column col-6 col-xs-12"> - <var>x</var> = <var>y</var> + 2 - <code class="ml-2"><var></code> - </div> + <h4 id="typography-semantic-text" class="s-subtitle">Semantic text elements</h4> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <abbr title="Internationalization">I18N</abbr> + <code class="ml-2"><abbr></code> </div> - - <h4 id="typography-east-asian" class="s-subtitle">Optimized for east asian fonts</h4> - <h5><small lang="zh-Hans">你好</small>, <small lang="ja">こんにちは</small>, <small lang="ko">안녕하세요</small></h5> - <div class="docs-note"> - <p class="h6">Chinese (Simplified)</p> - <p lang="zh-Hans">革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。</p> - <p class="h6">Chinese (Tranditional)</p> - <p lang="zh-Hant">山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」</p> - <p class="h6">Japanese</p> - <p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへに風の前の塵に同じ。</p> - <p class="h6">Korean</p> - <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.</p> + <div class="column col-6 col-xs-12"> + <strong>Bold</strong> + <code class="ml-2"><strong></code> <code><b></code> + </div> + <div class="column col-6 col-xs-12"> + <cite>Citation</cite> + <code class="ml-2"><cite></code> + </div> + <div class="column col-6 col-xs-12"> + <code>Hello World!</code> + <code class="ml-2"><code></code> + </div> + <div class="column col-6 col-xs-12"> + <del>Deleted</del> + <code class="ml-2"><del></code> + </div> + <div class="column col-6 col-xs-12"> + <em>Emphasis</em> + <code class="ml-2"><em></code> + </div> + <div class="column col-6 col-xs-12"> + <i>Italic</i> + <code class="ml-2"><i></code> + </div> + <div class="column col-6 col-xs-12"> + <ins>Inserted</ins> + <code class="ml-2"><ins></code> + </div> + <div class="column col-6 col-xs-12"> + <kbd>Ctrl + S</kbd> + <code class="ml-2"><kbd></code> + </div> + <div class="column col-6 col-xs-12"> + <mark>Highlighted</mark> + <code class="ml-2"><mark></code> + </div> + <div class="column col-6 col-xs-12"> + <ruby> + 漢 <rt>kan</rt> + 字 <rt>ji</rt> + </ruby> + <code class="ml-2"><ruby></code> + </div> + <div class="column col-6 col-xs-12"> + <s>Strikethrough</s> + <code class="ml-2"><s></code> </div> - <div class="docs-note"> - <p>Use the <code>lang</code> attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support. </p> + <div class="column col-6 col-xs-12"> + <samp>Sample</samp> + <code class="ml-2"><samp></code> </div> + <div class="column col-6 col-xs-12"> + Text <sub>Subscripted</sub> + <code class="ml-2"><sub></code> + </div> + <div class="column col-6 col-xs-12"> + Text <sup>Superscripted</sup> + <code class="ml-2"><sup></code> + </div> + <div class="column col-6 col-xs-12"> + <time>20:00</time> + <code class="ml-2"><time></code> + </div> + <div class="column col-6 col-xs-12"> + <u>Underline</u> + <code class="ml-2"><u></code> + </div> + <div class="column col-6 col-xs-12"> + <var>x</var> = <var>y</var> + 2 + <code class="ml-2"><var></code> + </div> + </div> + + <h4 id="typography-east-asian" class="s-subtitle">Optimized for east asian fonts</h4> + <h5><small lang="zh-Hans">你好</small>, <small lang="ja">こんにちは</small>, <small lang="ko">안녕하세요</small></h5> + <div class="docs-note"> + <p class="h6">Chinese (Simplified)</p> + <p lang="zh-Hans">革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。</p> + <p class="h6">Chinese (Tranditional)</p> + <p lang="zh-Hant">山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」</p> + <p class="h6">Japanese</p> + <p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへに風の前の塵に同じ。</p> + <p class="h6">Korean</p> + <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.</p> + </div> + <div class="docs-note"> + <p>Use the <code>lang</code> attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support. </p> + </div> <!-- east asian --> <pre class="code" data-lang="HTML"><code><<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">"zh-Hans"</span>>革命不是请客吃饭，不是做文章……<<span class="tag">/p</span>> @@ -434,23 +434,23 @@ <<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">"ko"</span>>나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……<<span class="tag">/p</span>> </code></pre> - <div class="docs-note"> - <p>And you can use the <code>cjk</code> class or the <code>lang</code> attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability. </p> - </div> - <div class="docs-note"> - <p lang="ja"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。</p> - <p lang="ja"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。</p> - </div> + <div class="docs-note"> + <p>And you can use the <code>cjk</code> class or the <code>lang</code> attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability. </p> + </div> + <div class="docs-note"> + <p lang="ja"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。</p> + <p lang="ja"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。</p> + </div> <!-- east asian --> <pre class="code" data-lang="HTML"><code><<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"cjk"</span>><<span class="tag">u</span>>祇園<<span class="tag">/u</span>><<span class="tag">u</span>>精舎<<span class="tag">/u</span>>の鐘の声、諸行無常の響きあり。……<<span class="tag">/p</span>> <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"cjk"</span>><<span class="tag">del</span>>祇園<<span class="tag">/del</span>><<span class="tag">del</span>>精舎<<span class="tag">/del</span>>の鐘の声、諸行無常の響きあり。……<<span class="tag">/p</span>> </code></pre> - <h4 id="typography-fonts" class="s-subtitle">Fonts</h4> - <div class="docs-note"> - <p>Spectre sets the most common and best <code>font-family</code> for each OS with fallback support in old systems. There are also fonts targeted East Asian typography.</p> - </div> + <h4 id="typography-fonts" class="s-subtitle">Fonts</h4> + <div class="docs-note"> + <p>Spectre sets the most common and best <code>font-family</code> for each OS with fallback support in old systems. There are also fonts targeted East Asian typography.</p> + </div> <!-- fonts --> <pre class="code"><code><span class="com"><!-- Western typography targeted --></span> @@ -466,11 +466,11 @@ <span class="atn">font-family</span>: <span class="atv">-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif</span>; </code></pre> - <h4 id="typography-blockquote" class="s-subtitle">Blockquote</h4> - <blockquote> - <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p> - <cite>- Bill Gates</cite> - </blockquote> + <h4 id="typography-blockquote" class="s-subtitle">Blockquote</h4> + <blockquote> + <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p> + <cite>- Bill Gates</cite> + </blockquote> <!-- blockquote --> <pre class="code" data-lang="HTML"><code><<span class="tag">blockquote</span>> @@ -479,45 +479,45 @@ <<span class="tag">/blockquote</span>> </code></pre> - <h4 id="typography-lists" class="s-subtitle">Lists</h4> - <div class="columns"> - <div class="column col-4 col-xs-12"> - <ul class="list"> - <li>list item 1</li> - <li>list item 2 - <ul> - <li>list item 2.1</li> - <li>list item 2.2</li> - <li>list item 2.3</li> - </ul> - </li> - <li>list item 3</li> - </ul> - </div> - <div class="column col-4 col-xs-12"> - <ol class="list"> - <li>list item 1</li> - <li>list item 2 - <ol> - <li>list item 2.1</li> - <li>list item 2.2</li> - <li>list item 2.3</li> - </ol> - </li> - <li>list item 3</li> - </ol> - </div> - <div class="column col-4 col-xs-12"> - <dl class="list"> - <dt>description list term 1</dt> - <dd>description list description 1</dd> - <dt>description list term 2</dt> - <dd>description list description 2</dd> - <dt>description list term 3</dt> - <dd>description list description 3</dd> - </dl> - </div> + <h4 id="typography-lists" class="s-subtitle">Lists</h4> + <div class="columns"> + <div class="column col-4 col-xs-12"> + <ul class="list"> + <li>list item 1</li> + <li>list item 2 + <ul> + <li>list item 2.1</li> + <li>list item 2.2</li> + <li>list item 2.3</li> + </ul> + </li> + <li>list item 3</li> + </ul> + </div> + <div class="column col-4 col-xs-12"> + <ol class="list"> + <li>list item 1</li> + <li>list item 2 + <ol> + <li>list item 2.1</li> + <li>list item 2.2</li> + <li>list item 2.3</li> + </ol> + </li> + <li>list item 3</li> + </ol> + </div> + <div class="column col-4 col-xs-12"> + <dl class="list"> + <dt>description list term 1</dt> + <dd>description list description 1</dd> + <dt>description list term 2</dt> + <dd>description list description 2</dd> + <dt>description list term 3</dt> + <dd>description list description 3</dd> + </dl> </div> + </div> <!-- lists --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- unordered list --></span> @@ -540,48 +540,48 @@ <<span class="tag">/dl</span>> </code></pre> - </div> + </div> - <div id="tables" class="container"> - <h3 class="s-title"><a href="#tables" class="anchor" aria-hidden="true">#</a>Tables</h3> - <div class="docs-note"> - <p>Tables include default styles for tables and data sets.</p> - </div> - <table class="table table-striped"> - <thead> - <tr> - <th>Name</th> - <th>Genre</th> - <th>Release date</th> - </tr> - </thead> - <tbody> - <tr> - <td>The Shawshank Redemption</td> - <td>Crime, Drama</td> - <td>14 October 1994</td> - </tr> - <tr> - <td>The Godfather</td> - <td>Crime, Drama</td> - <td>24 March 1972</td> - </tr> - <tr> - <td>Schindler's List</td> - <td>Biography, Drama, History</td> - <td>4 February 1994</td> - </tr> - <tr> - <td>Se7en</td> - <td>Crime, Drama, Mystery</td> - <td>22 September 1995</td> - </tr> - </tbody> - </table> - <div class="docs-note"> - <p>Add the <code>table</code> class to any <table> element. The class will add padding, border and emphasized table header. Use the <code>table-striped</code> class to <table> to add zebra striped style. For hoverable table rows, you can add the <code>table-hover</code> class to enable hover style. </p> - <p>Use the <code>active</code> class to make <tr> element highlighted. </p> - </div> + <div id="tables" class="container"> + <h3 class="s-title"><a href="#tables" class="anchor" aria-hidden="true">#</a>Tables</h3> + <div class="docs-note"> + <p>Tables include default styles for tables and data sets.</p> + </div> + <table class="table table-striped"> + <thead> + <tr> + <th>Name</th> + <th>Genre</th> + <th>Release date</th> + </tr> + </thead> + <tbody> + <tr> + <td>The Shawshank Redemption</td> + <td>Crime, Drama</td> + <td>14 October 1994</td> + </tr> + <tr> + <td>The Godfather</td> + <td>Crime, Drama</td> + <td>24 March 1972</td> + </tr> + <tr> + <td>Schindler's List</td> + <td>Biography, Drama, History</td> + <td>4 February 1994</td> + </tr> + <tr> + <td>Se7en</td> + <td>Crime, Drama, Mystery</td> + <td>22 September 1995</td> + </tr> + </tbody> + </table> + <div class="docs-note"> + <p>Add the <code>table</code> class to any <table> element. The class will add padding, border and emphasized table header. Use the <code>table-striped</code> class to <table> to add zebra striped style. For hoverable table rows, you can add the <code>table-hover</code> class to enable hover style. </p> + <p>Use the <code>active</code> class to make <tr> element highlighted. </p> + </div> <!-- tables --> <pre class="code" data-lang="HTML"><code><<span class="tag">table</span> <span class="atn">class</span>=<span class="atv">"table table-striped table-hover"</span>> @@ -602,24 +602,24 @@ <<span class="tag">/table</span>> </code></pre> - </div> + </div> - <div id="buttons" class="container"> - <h3 class="s-title"><a href="#buttons" class="anchor" aria-hidden="true">#</a>Buttons</h3> - <div class="docs-note"> - <p>Buttons include simple button styles for actions in different types and sizes. </p> - </div> - <div class="columns"> - <div class="column col-xs-12"> - <button class="btn">default button</button> - <button class="btn btn-primary">primary button</button> - <button class="btn btn-link">link button</button> - </div> + <div id="buttons" class="container"> + <h3 class="s-title"><a href="#buttons" class="anchor" aria-hidden="true">#</a>Buttons</h3> + <div class="docs-note"> + <p>Buttons include simple button styles for actions in different types and sizes. </p> + </div> + <div class="columns"> + <div class="column col-xs-12"> + <button class="btn">default button</button> + <button class="btn btn-primary">primary button</button> + <button class="btn btn-link">link button</button> </div> + </div> - <div class="docs-note"> - <p>Add the <code>btn</code> class to <a>, <input> or <button> elements for a default button. There are classes <code>btn-primary</code> and <code>btn-link</code> for predefined primary and link buttons. </p> - </div> + <div class="docs-note"> + <p>Add the <code>btn</code> class to <a>, <input> or <button> elements for a default button. There are classes <code>btn-primary</code> and <code>btn-link</code> for predefined primary and link buttons. </p> + </div> <!-- buttons --> <pre class="code" data-lang="HTML"><code><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>default button<<span class="tag">/button</span>> @@ -627,24 +627,24 @@ <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>link button<<span class="tag">/button</span>> </code></pre> - <h4 id="buttons-sizes" class="s-subtitle">Button sizes</h4> - <div class="columns"> - <div class="column col-12"> - <button class="btn btn-primary btn-lg">large <i class="icon icon-arrow-down"></i></button> - <button class="btn btn-primary btn-lg">large button</button> - </div> - <div class="column col-12"> - <button class="btn btn-primary">normal <i class="icon icon-arrow-down"></i></button> - <button class="btn btn-primary">normal button</button> - </div> - <div class="column col-12"> - <button class="btn btn-primary btn-sm">small <i class="icon icon-arrow-down"></i></button> - <button class="btn btn-primary btn-sm">small button</button> - </div> + <h4 id="buttons-sizes" class="s-subtitle">Button sizes</h4> + <div class="columns"> + <div class="column col-12"> + <button class="btn btn-primary btn-lg">large <i class="icon icon-arrow-down"></i></button> + <button class="btn btn-primary btn-lg">large button</button> </div> - <div class="docs-note"> - <p>Add the <code>btn-sm</code> or <code>btn-lg</code> class for small or large button size. Also, you can add the <code>btn-block</code> class for a full-width button. </p> + <div class="column col-12"> + <button class="btn btn-primary">normal <i class="icon icon-arrow-down"></i></button> + <button class="btn btn-primary">normal button</button> </div> + <div class="column col-12"> + <button class="btn btn-primary btn-sm">small <i class="icon icon-arrow-down"></i></button> + <button class="btn btn-primary btn-sm">small button</button> + </div> + </div> + <div class="docs-note"> + <p>Add the <code>btn-sm</code> or <code>btn-lg</code> class for small or large button size. Also, you can add the <code>btn-block</code> class for a full-width button. </p> + </div> <!-- buttons --> <pre class="code" data-lang="HTML"><code><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-lg"</span>>large button<<span class="tag">/button</span>> @@ -657,41 +657,41 @@ <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-sm"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>> small<<span class="tag">/button</span>> </code></pre> - <div class="docs-note"> - <p>Please note that you could use the <code>btn-action</code> class for a square button, or add another <code>circle</code> class for a round button, which is often used as a Float Action Button (FAB).</p> - </div> + <div class="docs-note"> + <p>Please note that you could use the <code>btn-action</code> class for a square button, or add another <code>circle</code> class for a round button, which is often used as a Float Action Button (FAB).</p> + </div> - <div class="columns"> - <div class="column col-xs-12"> - <button class="btn btn-action btn-primary btn-lg"><i class="icon icon-menu"></i></button> - <button class="btn btn-action btn-primary"><i class="icon icon-menu"></i></button> - <button class="btn btn-action btn-primary btn-sm"><i class="icon icon-menu"></i></button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-action btn-primary btn-lg circle"><i class="icon icon-arrow-up"></i></button> - <button class="btn btn-action btn-primary circle"><i class="icon icon-arrow-up"></i></button> - <button class="btn btn-action btn-primary btn-sm circle"><i class="icon icon-arrow-up"></i></button> - </div> + <div class="columns"> + <div class="column col-xs-12"> + <button class="btn btn-action btn-primary btn-lg"><i class="icon icon-menu"></i></button> + <button class="btn btn-action btn-primary"><i class="icon icon-menu"></i></button> + <button class="btn btn-action btn-primary btn-sm"><i class="icon icon-menu"></i></button> </div> + <div class="column col-xs-12"> + <button class="btn btn-action btn-primary btn-lg circle"><i class="icon icon-arrow-up"></i></button> + <button class="btn btn-action btn-primary circle"><i class="icon icon-arrow-up"></i></button> + <button class="btn btn-action btn-primary btn-sm circle"><i class="icon icon-arrow-up"></i></button> + </div> + </div> <!-- buttons --> <pre class="code" data-lang="HTML"><code><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-action"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>><<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-action circle"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>><<span class="tag">/button</span>> </code></pre> - <h4 id="buttons-states" class="s-subtitle">Button states</h4> + <h4 id="buttons-states" class="s-subtitle">Button states</h4> - <div class="docs-note"> - <p>Add the <code>active</code> class for active button state style.</p> - </div> + <div class="docs-note"> + <p>Add the <code>active</code> class for active button state style.</p> + </div> - <div class="columns"> - <div class="column col-xs-12"> - <button class="btn active">default active</button> - <button class="btn btn-primary active">primary active</button> - <button class="btn btn-link active">link active</button> - </div> + <div class="columns"> + <div class="column col-xs-12"> + <button class="btn active">default active</button> + <button class="btn btn-primary active">primary active</button> + <button class="btn btn-link active">link active</button> </div> + </div> <!-- buttons --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- buttons with disabled state --></span> @@ -699,17 +699,17 @@ <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span> <span class="atn">disabled</span> <span class="atn">tabindex</span>=<span class="atv">"-1"</span>>disabled button<<span class="tag">/button</span>> </code></pre> - <div class="docs-note"> - <p>Add the <code>disabled</code> class or the <code>disabled</code> attribute for disabled button state style.</p> - </div> + <div class="docs-note"> + <p>Add the <code>disabled</code> class or the <code>disabled</code> attribute for disabled button state style.</p> + </div> - <div class="columns"> - <div class="column col-xs-12"> - <button class="btn disabled" tabindex="-1">default disabled</button> - <button class="btn btn-primary" disabled tabindex="-1">primary disabled</button> - <button class="btn btn-link" disabled tabindex="-1">link disabled</button> - </div> + <div class="columns"> + <div class="column col-xs-12"> + <button class="btn disabled" tabindex="-1">default disabled</button> + <button class="btn btn-primary" disabled tabindex="-1">primary disabled</button> + <button class="btn btn-link" disabled tabindex="-1">link disabled</button> </div> + </div> <!-- buttons --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- buttons with disabled state --></span> @@ -717,59 +717,59 @@ <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span> <span class="atn">disabled</span> <span class="atn">tabindex</span>=<span class="atv">"-1"</span>>disabled button<<span class="tag">/button</span>> </code></pre> - <div class="docs-note"> - <p>A button with the <code>loading</code> class can show loading indicator.</p> - </div> + <div class="docs-note"> + <p>A button with the <code>loading</code> class can show loading indicator.</p> + </div> - <div class="columns"> - <div class="column col-xs-12"> - <button class="btn loading">default button</button> - <button class="btn btn-primary loading">primary button</button> - <button class="btn btn-link loading">link button</button> - </div> + <div class="columns"> + <div class="column col-xs-12"> + <button class="btn loading">default button</button> + <button class="btn btn-primary loading">primary button</button> + <button class="btn btn-link loading">link button</button> </div> + </div> <!-- buttons --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- a button with loading state --></span> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn loading"</span>>button<<span class="tag">/button</span>> </code></pre> - <h4 id="buttons-groups" class="s-subtitle">Button groups</h4> - <div class="columns"> - <div class="column col-md-12"> - <div class="btn-group"> - <button class="btn">first button</button> - <button class="btn">second button</button> - <button class="btn">third button</button> - </div> - </div> - <div class="column col-md-12"> - <div class="btn-group btn-group-block"> - <button class="btn btn-primary">first button</button> - <button class="btn btn-primary">second button</button> - <button class="btn btn-primary">third button</button> - </div> + <h4 id="buttons-groups" class="s-subtitle">Button groups</h4> + <div class="columns"> + <div class="column col-md-12"> + <div class="btn-group"> + <button class="btn">first button</button> + <button class="btn">second button</button> + <button class="btn">third button</button> </div> </div> - <div class="columns"> - <div class="column col-md-12"> - <div class="btn-group"> - <button class="btn btn-sm active">first button</button> - <button class="btn btn-sm">second button</button> - <button class="btn btn-sm">third button</button> - </div> + <div class="column col-md-12"> + <div class="btn-group btn-group-block"> + <button class="btn btn-primary">first button</button> + <button class="btn btn-primary">second button</button> + <button class="btn btn-primary">third button</button> </div> - <div class="column col-md-12"> - <div class="btn-group btn-group-block"> - <button class="btn btn-primary btn-sm active">first button</button> - <button class="btn btn-primary btn-sm">second button</button> - <button class="btn btn-primary btn-sm">third button</button> - </div> + </div> + </div> + <div class="columns"> + <div class="column col-md-12"> + <div class="btn-group"> + <button class="btn btn-sm active">first button</button> + <button class="btn btn-sm">second button</button> + <button class="btn btn-sm">third button</button> </div> </div> - <div class="docs-note"> - <p>If you want to use buttons as a group, add the <code>btn-group</code> class to the container. You can add the <code>btn-group-block</code> class for a full-width button group.</p> + <div class="column col-md-12"> + <div class="btn-group btn-group-block"> + <button class="btn btn-primary btn-sm active">first button</button> + <button class="btn btn-primary btn-sm">second button</button> + <button class="btn btn-primary btn-sm">third button</button> + </div> </div> + </div> + <div class="docs-note"> + <p>If you want to use buttons as a group, add the <code>btn-group</code> class to the container. You can add the <code>btn-group-block</code> class for a full-width button group.</p> + </div> <!-- button groups --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"btn-group btn-group-block"</span>> @@ -779,25 +779,25 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="forms" class="container"> - <h3 class="s-title"><a href="#forms" class="anchor" aria-hidden="true">#</a>Forms</h3> - <div class="docs-note"> - <p>Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. </p> - </div> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="form-group"> - <label class="form-label" for="input-example-1">Name</label> - <input class="form-input" type="text" id="input-example-1" placeholder="Name"> - </div> - <div class="form-group"> - <label class="form-label" for="input-example-2">Email</label> - <input class="form-input" type="email" id="input-example-2" placeholder="Email"> - </div> + <div id="forms" class="container"> + <h3 class="s-title"><a href="#forms" class="anchor" aria-hidden="true">#</a>Forms</h3> + <div class="docs-note"> + <p>Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. </p> + </div> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <div class="form-group"> + <label class="form-label" for="input-example-1">Name</label> + <input class="form-input" type="text" id="input-example-1" placeholder="Name"> + </div> + <div class="form-group"> + <label class="form-label" for="input-example-2">Email</label> + <input class="form-input" type="email" id="input-example-2" placeholder="Email"> </div> </div> + </div> <pre class="code" data-lang="HTML"><code><span class="com"><!-- form input control --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> @@ -806,14 +806,14 @@ <<span class="tag">/div</span>> </code></pre> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="form-group"> - <label class="form-label" for="input-example-3">Message</label> - <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea> - </div> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <div class="form-group"> + <label class="form-label" for="input-example-3">Message</label> + <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea> </div> </div> + </div> <pre class="code" data-lang="HTML"><code><span class="com"><!-- form textarea control --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> @@ -822,26 +822,26 @@ <<span class="tag">/div</span>> </code></pre> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="form-group"> - <select class="form-select"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </div> - <div class="form-group"> - <select class="form-select" multiple> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </div> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <div class="form-group"> + <select class="form-select"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + </div> + <div class="form-group"> + <select class="form-select" multiple> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> </div> </div> + </div> <pre class="code" data-lang="HTML"><code><span class="com"><!-- form select control --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> @@ -854,23 +854,23 @@ <<span class="tag">/div</span>> </code></pre> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <form> - <div class="form-group"> - <label class="form-label">Gender</label> - <label class="form-radio"> - <input type="radio" name="gender" checked> - <i class="form-icon"></i> Male - </label> - <label class="form-radio"> - <input type="radio" name="gender"> - <i class="form-icon"></i> Female - </label> - </div> - </form> - </div> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <form> + <div class="form-group"> + <label class="form-label">Gender</label> + <label class="form-radio"> + <input type="radio" name="gender" checked> + <i class="form-icon"></i> Male + </label> + <label class="form-radio"> + <input type="radio" name="gender"> + <i class="form-icon"></i> Female + </label> + </div> + </form> </div> + </div> <pre class="code" data-lang="HTML"><code><span class="com"><!-- form radio control --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> @@ -886,22 +886,22 @@ <<span class="tag">/div</span>> </code></pre> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="form-group"> - <label class="form-switch"> - <input type="checkbox"> - <i class="form-icon"></i> Send me emails with news and tips - </label> - </div> - <div class="form-group"> - <label class="form-switch"> - <input type="checkbox" checked> - <i class="form-icon"></i> Send me emails with news and tips - </label> - </div> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <div class="form-group"> + <label class="form-switch"> + <input type="checkbox"> + <i class="form-icon"></i> Send me emails with news and tips + </label> + </div> + <div class="form-group"> + <label class="form-switch"> + <input type="checkbox" checked> + <i class="form-icon"></i> Send me emails with news and tips + </label> </div> </div> + </div> <pre class="code" data-lang="HTML"><code><span class="com"><!-- form switch control --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> @@ -912,22 +912,22 @@ <<span class="tag">/div</span>> </code></pre> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="form-group"> - <label class="form-checkbox"> - <input type="checkbox"> - <i class="form-icon"></i> Remember me - </label> - </div> - <div class="form-group"> - <label class="form-checkbox"> - <input type="checkbox" checked> - <i class="form-icon"></i> Remember me - </label> - </div> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <div class="form-group"> + <label class="form-checkbox"> + <input type="checkbox"> + <i class="form-icon"></i> Remember me + </label> + </div> + <div class="form-group"> + <label class="form-checkbox"> + <input type="checkbox" checked> + <i class="form-icon"></i> Remember me + </label> </div> </div> + </div> <pre class="code" data-lang="HTML"><code><span class="com"><!-- form checkbox control --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> @@ -938,96 +938,96 @@ <<span class="tag">/div</span>> </code></pre> - <div class="docs-note"> - <p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</p> - </div> + <div class="docs-note"> + <p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</p> + </div> - <h4 id="forms-horizontal" class="s-subtitle">Horizontal forms</h4> - <div class="docs-note"> - <p>If you want to have a horizontal form, add the <code>form-horizontal</code> class to the <form> container. And add the <code>col-[1-12]</code> class to the child elements for form row layout. </p> - </div> - <div class="columns"> - <div class="column col-9 col-sm-12"> - <form class="form-horizontal" action="#forms"> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-4">Name</label> - </div> - <div class="col-9"> - <input class="form-input" type="text" id="input-example-4" placeholder="Name"> - </div> + <h4 id="forms-horizontal" class="s-subtitle">Horizontal forms</h4> + <div class="docs-note"> + <p>If you want to have a horizontal form, add the <code>form-horizontal</code> class to the <form> container. And add the <code>col-[1-12]</code> class to the child elements for form row layout. </p> + </div> + <div class="columns"> + <div class="column col-9 col-sm-12"> + <form class="form-horizontal" action="#forms"> + <div class="form-group"> + <div class="col-3"> + <label class="form-label" for="input-example-4">Name</label> </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-5">Email</label> - </div> - <div class="col-9"> - <input class="form-input" type="email" id="input-example-5" placeholder="Email"> - </div> + <div class="col-9"> + <input class="form-input" type="text" id="input-example-4" placeholder="Name"> </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label">Gender</label> - </div> - <div class="col-9"> - <label class="form-radio"> - <input type="radio" name="gender"> - <i class="form-icon"></i> Male - </label> - <label class="form-radio"> - <input type="radio" name="gender" checked> - <i class="form-icon"></i> Female - </label> - </div> + </div> + <div class="form-group"> + <div class="col-3"> + <label class="form-label" for="input-example-5">Email</label> </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label">Source</label> - </div> - <div class="col-9"> - <select class="form-select" multiple> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </div> + <div class="col-9"> + <input class="form-input" type="email" id="input-example-5" placeholder="Email"> </div> - <div class="form-group"> - <div class="col-3"></div> - <div class="col-9"> - <label class="form-switch"> - <input type="checkbox"> - <i class="form-icon"></i> Send me emails with news and tips - </label> - </div> + </div> + <div class="form-group"> + <div class="col-3"> + <label class="form-label">Gender</label> </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-6">Message</label> - </div> - <div class="col-9"> - <textarea class="form-input" id="input-example-6" placeholder="Textarea" rows="3"></textarea> - </div> + <div class="col-9"> + <label class="form-radio"> + <input type="radio" name="gender"> + <i class="form-icon"></i> Male + </label> + <label class="form-radio"> + <input type="radio" name="gender" checked> + <i class="form-icon"></i> Female + </label> </div> - <div class="form-group"> - <div class="col-3"></div> - <div class="col-9"> - <label class="form-checkbox"> - <input type="checkbox"> - <i class="form-icon"></i> Remember me - </label> - </div> + </div> + <div class="form-group"> + <div class="col-3"> + <label class="form-label">Source</label> </div> - <div class="form-group"> - <div class="col-3"></div> - <div class="col-9"> - <button class="btn btn-primary" type="submit">Submit</button> - <button class="btn btn-link" type="reset">Cancel</button> - </div> + <div class="col-9"> + <select class="form-select" multiple> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> </div> - </form> - </div> + </div> + <div class="form-group"> + <div class="col-3"></div> + <div class="col-9"> + <label class="form-switch"> + <input type="checkbox"> + <i class="form-icon"></i> Send me emails with news and tips + </label> + </div> + </div> + <div class="form-group"> + <div class="col-3"> + <label class="form-label" for="input-example-6">Message</label> + </div> + <div class="col-9"> + <textarea class="form-input" id="input-example-6" placeholder="Textarea" rows="3"></textarea> + </div> + </div> + <div class="form-group"> + <div class="col-3"></div> + <div class="col-9"> + <label class="form-checkbox"> + <input type="checkbox"> + <i class="form-icon"></i> Remember me + </label> + </div> + </div> + <div class="form-group"> + <div class="col-3"></div> + <div class="col-9"> + <button class="btn btn-primary" type="submit">Submit</button> + <button class="btn btn-link" type="reset">Cancel</button> + </div> + </div> + </form> </div> + </div> <!-- forms --> <pre class="code" data-lang="HTML"><code><<span class="tag">form</span> <span class="atn">class</span>=<span class="atv">"form-horizontal"</span>> @@ -1043,88 +1043,88 @@ <<span class="tag">/form</span>> </code></pre> - <h4 id="forms-sizes" class="s-subtitle">Form sizes</h4> - <div class="docs-note"> - <p>For smaller or larger input and select controls, you could add the <code>input-sm</code>/<code>input-lg</code>, <code>select-sm</code>/<code>select-lg</code> and <code>label-sm</code>/<code>label-lg</code> classes to the elements.</p> + <h4 id="forms-sizes" class="s-subtitle">Form sizes</h4> + <div class="docs-note"> + <p>For smaller or larger input and select controls, you could add the <code>input-sm</code>/<code>input-lg</code>, <code>select-sm</code>/<code>select-lg</code> and <code>label-sm</code>/<code>label-lg</code> classes to the elements.</p> + </div> + <div class="columns"> + <div class="column col-4 col-xs-12"> + <label class="form-label label-sm">Label</label> </div> - <div class="columns"> - <div class="column col-4 col-xs-12"> - <label class="form-label label-sm">Label</label> - </div> - <div class="column col-4 col-xs-12"> + <div class="column col-4 col-xs-12"> + <input class="form-input input-sm" type="text" placeholder="Name"> + </div> + <div class="column col-4 col-xs-12"> + <select class="form-select select-sm"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + </div> + </div> + <div class="columns"> + <div class="column col-4 col-xs-12"> + <label class="form-label label-lg">Label</label> + </div> + <div class="column col-4 col-xs-12"> + <input class="form-input input-lg" type="text" placeholder="Name"> + </div> + <div class="column col-4 col-xs-12"> + <select class="form-select select-lg"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + </div> + </div> + + <h4 id="forms-icons" class="s-subtitle">Form icons</h4> + <div class="docs-note"> + <p>Spectre Form components has <a href="#icons">Spectre Icons</a> support.</p> + <p>Add a wrapper with the <code>has-icon-left</code>/<code>has-icon-right</code> class to <input> element. And add the icon with <code>form-icon</code> class next to the <input>.</p> + </div> + <div class="columns"> + <div class="column col-4 col-xs-12"> + <div class="has-icon-left"> <input class="form-input input-sm" type="text" placeholder="Name"> - </div> - <div class="column col-4 col-xs-12"> - <select class="form-select select-sm"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> + <i class="form-icon icon icon-arrow-right"></i> </div> </div> - <div class="columns"> - <div class="column col-4 col-xs-12"> - <label class="form-label label-lg">Label</label> + <div class="column col-4 col-xs-12"> + <div class="has-icon-left tooltip" data-tooltip="Lorem ipsum dolor sit amet"> + <input class="form-input" type="text" placeholder="Name"> + <i class="form-icon icon icon-arrow-right"></i> </div> - <div class="column col-4 col-xs-12"> + </div> + <div class="column col-4 col-xs-12"> + <div class="has-icon-left"> <input class="form-input input-lg" type="text" placeholder="Name"> + <i class="form-icon icon icon-arrow-right"></i> </div> - <div class="column col-4 col-xs-12"> - <select class="form-select select-lg"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </div> - </div> - - <h4 id="forms-icons" class="s-subtitle">Form icons</h4> - <div class="docs-note"> - <p>Spectre Form components has <a href="#icons">Spectre Icons</a> support.</p> - <p>Add a wrapper with the <code>has-icon-left</code>/<code>has-icon-right</code> class to <input> element. And add the icon with <code>form-icon</code> class next to the <input>.</p> </div> - <div class="columns"> - <div class="column col-4 col-xs-12"> - <div class="has-icon-left"> - <input class="form-input input-sm" type="text" placeholder="Name"> - <i class="form-icon icon icon-arrow-right"></i> - </div> - </div> - <div class="column col-4 col-xs-12"> - <div class="has-icon-left tooltip" data-tooltip="Lorem ipsum dolor sit amet"> - <input class="form-input" type="text" placeholder="Name"> - <i class="form-icon icon icon-arrow-right"></i> - </div> - </div> - <div class="column col-4 col-xs-12"> - <div class="has-icon-left"> - <input class="form-input input-lg" type="text" placeholder="Name"> - <i class="form-icon icon icon-arrow-right"></i> - </div> + </div> + <div class="columns"> + <div class="column col-4 col-xs-12"> + <div class="has-icon-right"> + <input class="form-input input-sm" type="text" placeholder="Name"> + <i class="form-icon icon icon-check"></i> </div> </div> - <div class="columns"> - <div class="column col-4 col-xs-12"> - <div class="has-icon-right"> - <input class="form-input input-sm" type="text" placeholder="Name"> - <i class="form-icon icon icon-check"></i> - </div> - </div> - <div class="column col-4 col-xs-12"> - <div class="has-icon-right"> - <input class="form-input" type="text" placeholder="Name"> - <i class="form-icon icon icon-check"></i> - </div> + <div class="column col-4 col-xs-12"> + <div class="has-icon-right"> + <input class="form-input" type="text" placeholder="Name"> + <i class="form-icon icon icon-check"></i> </div> - <div class="column col-4 col-xs-12"> - <div class="has-icon-right"> - <input class="form-input input-lg" type="text" placeholder="Name"> - <i class="form-icon icon icon-check"></i> - </div> + </div> + <div class="column col-4 col-xs-12"> + <div class="has-icon-right"> + <input class="form-input input-lg" type="text" placeholder="Name"> + <i class="form-icon icon icon-check"></i> </div> </div> + </div> <!-- form icons --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- form input with Spectre icon --></span> @@ -1134,30 +1134,30 @@ <<span class="tag">/div</span>> </code></pre> - <div class="docs-note"> - <p>You can use the <code>loading</code> class for loading or posting state.</p> - </div> + <div class="docs-note"> + <p>You can use the <code>loading</code> class for loading or posting state.</p> + </div> - <div class="columns"> - <div class="column col-4 col-xs-12"> - <div class="has-icon-right"> - <input class="form-input input-sm" type="text" placeholder="Name"> - <i class="form-icon loading"></i> - </div> + <div class="columns"> + <div class="column col-4 col-xs-12"> + <div class="has-icon-right"> + <input class="form-input input-sm" type="text" placeholder="Name"> + <i class="form-icon loading"></i> </div> - <div class="column col-4 col-xs-12"> - <div class="has-icon-right"> - <input class="form-input" type="text" placeholder="Name"> - <i class="form-icon loading"></i> - </div> + </div> + <div class="column col-4 col-xs-12"> + <div class="has-icon-right"> + <input class="form-input" type="text" placeholder="Name"> + <i class="form-icon loading"></i> </div> - <div class="column col-4 col-xs-12"> - <div class="has-icon-right"> - <input class="form-input input-lg" type="text" placeholder="Name"> - <i class="form-icon loading"></i> - </div> + </div> + <div class="column col-4 col-xs-12"> + <div class="has-icon-right"> + <input class="form-input input-lg" type="text" placeholder="Name"> + <i class="form-icon loading"></i> </div> </div> + </div> <pre class="code" data-lang="HTML"><code><span class="com"><!-- form input with loading icon --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"has-icon-right"</span>> @@ -1166,147 +1166,147 @@ <<span class="tag">/div</span>> </code></pre> - <h4 id="forms-input" class="s-subtitle">Input types</h4> - <div class="columns"> - <div class="column col-9 col-sm-12"> - <form class="form-horizontal" action="#forms"> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-8">Email</label> - </div> - <div class="col-9"> - <input class="form-input" type="email" id="input-example-8" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$"> - </div> + <h4 id="forms-input" class="s-subtitle">Input types</h4> + <div class="columns"> + <div class="column col-9 col-sm-12"> + <form class="form-horizontal" action="#forms"> + <div class="form-group"> + <div class="col-3"> + <label class="form-label" for="input-example-8">Email</label> </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-9">URL</label> - </div> - <div class="col-9"> - <input class="form-input" type="url" id="input-example-9" placeholder="URL" value="https://github.com/picturepan2/spectre"> - </div> + <div class="col-9"> + <input class="form-input" type="email" id="input-example-8" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$"> </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-10">Search</label> - </div> - <div class="col-9"> - <input class="form-input" type="search" id="input-example-10" placeholder="Search"> - </div> + </div> + <div class="form-group"> + <div class="col-3"> + <label class="form-label" for="input-example-9">URL</label> </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-11">Tel</label> - </div> - <div class="col-9"> - <input class="form-input" type="tel" id="input-example-11" placeholder="Tel" value="1-(888)-888-8888"> - </div> + <div class="col-9"> + <input class="form-input" type="url" id="input-example-9" placeholder="URL" value="https://github.com/picturepan2/spectre"> </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-12">Password</label> - </div> - <div class="col-9"> - <input class="form-input" type="password" id="input-example-12" placeholder="Password" value="123456789"> - </div> + </div> + <div class="form-group"> + <div class="col-3"> + <label class="form-label" for="input-example-10">Search</label> </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-13">Number</label> - </div> - <div class="col-9"> - <input class="form-input" type="number" id="input-example-13" placeholder="00" value="66"> - </div> + <div class="col-9"> + <input class="form-input" type="search" id="input-example-10" placeholder="Search"> </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-14">Date</label> - </div> - <div class="col-9"> - <input class="form-input" type="date" id="input-example-14" value="2016-12-31"> - </div> + </div> + <div class="form-group"> + <div class="col-3"> + <label class="form-label" for="input-example-11">Tel</label> </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-15">Color</label> - </div> - <div class="col-9"> - <input class="form-input" type="color" id="input-example-15" value="#5755d9"> - </div> + <div class="col-9"> + <input class="form-input" type="tel" id="input-example-11" placeholder="Tel" value="1-(888)-888-8888"> </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-16">File</label> - </div> - <div class="col-9"> - <input class="form-input" type="file" id="input-example-16"> - </div> + </div> + <div class="form-group"> + <div class="col-3"> + <label class="form-label" for="input-example-12">Password</label> + </div> + <div class="col-9"> + <input class="form-input" type="password" id="input-example-12" placeholder="Password" value="123456789"> </div> - </form> - </div> - </div> - - <h4 id="forms-input-groups" class="s-subtitle">Input groups</h4> - <div class="columns"> - <div class="column col-xs-12"> - <div class="input-group"> - <input type="text" class="form-input input-sm" placeholder="username"> - <select class="form-select select-sm"> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> </div> - </div> - <div class="column col-xs-12"> - <div class="input-group"> - <span class="input-group-addon addon-sm">slack.com/</span> - <input type="text" class="form-input input-sm" placeholder="site name"> - <button class="btn btn-primary input-group-btn btn-sm">Submit</button> + <div class="form-group"> + <div class="col-3"> + <label class="form-label" for="input-example-13">Number</label> + </div> + <div class="col-9"> + <input class="form-input" type="number" id="input-example-13" placeholder="00" value="66"> + </div> </div> + <div class="form-group"> + <div class="col-3"> + <label class="form-label" for="input-example-14">Date</label> + </div> + <div class="col-9"> + <input class="form-input" type="date" id="input-example-14" value="2016-12-31"> + </div> + </div> + <div class="form-group"> + <div class="col-3"> + <label class="form-label" for="input-example-15">Color</label> + </div> + <div class="col-9"> + <input class="form-input" type="color" id="input-example-15" value="#5755d9"> + </div> + </div> + <div class="form-group"> + <div class="col-3"> + <label class="form-label" for="input-example-16">File</label> + </div> + <div class="col-9"> + <input class="form-input" type="file" id="input-example-16"> + </div> + </div> + </form> + </div> + </div> + + <h4 id="forms-input-groups" class="s-subtitle">Input groups</h4> + <div class="columns"> + <div class="column col-xs-12"> + <div class="input-group"> + <input type="text" class="form-input input-sm" placeholder="username"> + <select class="form-select select-sm"> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> </div> </div> - <div class="columns"> - <div class="column col-xs-12"> - <div class="input-group"> - <input type="text" class="form-input" placeholder="username"> - <select class="form-select"> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </div> + <div class="column col-xs-12"> + <div class="input-group"> + <span class="input-group-addon addon-sm">slack.com/</span> + <input type="text" class="form-input input-sm" placeholder="site name"> + <button class="btn btn-primary input-group-btn btn-sm">Submit</button> </div> - <div class="column col-xs-12"> - <div class="input-group"> - <span class="input-group-addon">slack.com/</span> - <input type="text" class="form-input" placeholder="site name"> - <button class="btn btn-primary input-group-btn">Submit</button> - </div> + </div> + </div> + <div class="columns"> + <div class="column col-xs-12"> + <div class="input-group"> + <input type="text" class="form-input" placeholder="username"> + <select class="form-select"> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> </div> </div> - <div class="columns"> - <div class="column col-xs-12"> - <div class="input-group"> - <input type="text" class="form-input input-lg" placeholder="username"> - <select class="form-select select-lg"> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </div> + <div class="column col-xs-12"> + <div class="input-group"> + <span class="input-group-addon">slack.com/</span> + <input type="text" class="form-input" placeholder="site name"> + <button class="btn btn-primary input-group-btn">Submit</button> </div> - <div class="column col-xs-12"> - <div class="input-group"> - <span class="input-group-addon addon-lg">slack.com/</span> - <input type="text" class="form-input input-lg" placeholder="site name"> - <button class="btn btn-primary input-group-btn btn-lg">Submit</button> - </div> + </div> + </div> + <div class="columns"> + <div class="column col-xs-12"> + <div class="input-group"> + <input type="text" class="form-input input-lg" placeholder="username"> + <select class="form-select select-lg"> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> </div> </div> - <div class="docs-note"> - <p>If you want to attach text and button along with an input, add the <code>input-group</code> class to the input container. And add the <code>input-group-addon</code> class to the text element and <code>input-group-btn</code> to the button element.</p> + <div class="column col-xs-12"> + <div class="input-group"> + <span class="input-group-addon addon-lg">slack.com/</span> + <input type="text" class="form-input input-lg" placeholder="site name"> + <button class="btn btn-primary input-group-btn btn-lg">Submit</button> + </div> </div> + </div> + <div class="docs-note"> + <p>If you want to attach text and button along with an input, add the <code>input-group</code> class to the input container. And add the <code>input-group-addon</code> class to the text element and <code>input-group-btn</code> to the button element.</p> + </div> <!-- input groups --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- normal input group --></span> @@ -1329,78 +1329,78 @@ <<span class="tag">/div</span>> </code></pre> - <h4 id="forms-validation" class="s-subtitle">Form validation styles</h4> - <div class="docs-note"> - <p>To use form validation styles, add <code>is-success</code> or <code>is-error</code> class to the controls or add <code>has-success</code> or <code>has-error</code> class to parent elements. You can use the <code>form-input-hint</code> class to provide form validation success and error messages.</p> - </div> - <div class="columns"> - <div class="column col-9 col-sm-12"> - <fieldset> - <legend>Input</legend> - <div class="form-group"> - <label class="form-label" for="input-example-17">Name</label> - <input class="form-input is-success" type="text" id="input-example-17" placeholder="Name"> - <p class="form-input-hint">The name is valid.</p> - </div> - <div class="form-group has-error"> - <label class="form-label" for="input-example-18">Password</label> - <input class="form-input" type="password" id="input-example-18" placeholder="Password"> - <p class="form-input-hint">Passwords must have at least 8 characters.</p> - </div> - <div class="form-group"> - <label class="form-label" for="input-example-21">Email</label> - <input class="form-input" type="text" id="input-example-21" placeholder="Email" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$"> - <p class="form-input-hint">The Email address is unavailable.</p> - </div> - </fieldset> - <fieldset> - <legend>Select</legend> - <div class="form-group"> - <select class="form-select is-error"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - <p class="form-input-hint">The option is invalid.</p> - </div> - <div class="form-group has-success"> - <select class="form-select"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - <p class="form-input-hint">The option is available.</p> - </div> - </fieldset> - <fieldset> - <legend>Checkbox, Radio and Switch (Error state only)</legend> - <div class="form-group"> - <label class="form-checkbox is-error"> - <input type="checkbox" checked> - <i class="form-icon"></i> I'm not a robot. - </label> - </div> - <div class="form-group has-error"> - <label class="form-radio"> - <input type="radio" name="gender" checked> - <i class="form-icon"></i> Male - </label> - <label class="form-radio"> - <input type="radio" name="gender"> - <i class="form-icon"></i> Female - </label> - </div> - <div class="form-group"> - <label class="form-switch is-error"> - <input type="checkbox" checked> - <i class="form-icon"></i> Send me emails with news and tips - </label> - </div> - </fieldset> - </div> + <h4 id="forms-validation" class="s-subtitle">Form validation styles</h4> + <div class="docs-note"> + <p>To use form validation styles, add <code>is-success</code> or <code>is-error</code> class to the controls or add <code>has-success</code> or <code>has-error</code> class to parent elements. You can use the <code>form-input-hint</code> class to provide form validation success and error messages.</p> + </div> + <div class="columns"> + <div class="column col-9 col-sm-12"> + <fieldset> + <legend>Input</legend> + <div class="form-group"> + <label class="form-label" for="input-example-17">Name</label> + <input class="form-input is-success" type="text" id="input-example-17" placeholder="Name"> + <p class="form-input-hint">The name is valid.</p> + </div> + <div class="form-group has-error"> + <label class="form-label" for="input-example-18">Password</label> + <input class="form-input" type="password" id="input-example-18" placeholder="Password"> + <p class="form-input-hint">Passwords must have at least 8 characters.</p> + </div> + <div class="form-group"> + <label class="form-label" for="input-example-21">Email</label> + <input class="form-input" type="text" id="input-example-21" placeholder="Email" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$"> + <p class="form-input-hint">The Email address is unavailable.</p> + </div> + </fieldset> + <fieldset> + <legend>Select</legend> + <div class="form-group"> + <select class="form-select is-error"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + <p class="form-input-hint">The option is invalid.</p> + </div> + <div class="form-group has-success"> + <select class="form-select"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + <p class="form-input-hint">The option is available.</p> + </div> + </fieldset> + <fieldset> + <legend>Checkbox, Radio and Switch (Error state only)</legend> + <div class="form-group"> + <label class="form-checkbox is-error"> + <input type="checkbox" checked> + <i class="form-icon"></i> I'm not a robot. + </label> + </div> + <div class="form-group has-error"> + <label class="form-radio"> + <input type="radio" name="gender" checked> + <i class="form-icon"></i> Male + </label> + <label class="form-radio"> + <input type="radio" name="gender"> + <i class="form-icon"></i> Female + </label> + </div> + <div class="form-group"> + <label class="form-switch is-error"> + <input type="checkbox" checked> + <i class="form-icon"></i> Send me emails with news and tips + </label> + </div> + </fieldset> </div> + </div> <!-- forms --> <pre class="code" data-lang="HTML"><code><<span class="tag">form</span>> @@ -1428,376 +1428,376 @@ <<span class="tag">/form</span>> </code></pre> - <h4 id="forms-disabled" class="s-subtitle">Form disabled styles</h4> - <div class="docs-note"> - <p>Add the <code>disabled</code> attribute to the element or <fieldset> for a disabled form components style.</p> - </div> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <form action="#forms"> - <fieldset disabled> - <div class="form-group"> - <label class="form-label" for="input-example-19">Name</label> - <input class="form-input" type="text" id="input-example-19" placeholder="Name"> - </div> - <div class="form-group"> - <label class="form-label">Gender</label> - <label class="form-radio"> - <input type="radio" name="gender" disabled> - <i class="form-icon"></i> Male - </label> - <label class="form-radio"> - <input type="radio" name="gender" disabled> - <i class="form-icon"></i> Female - </label> - </div> - <div class="form-group"> - <select class="form-select" disabled> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </div> - <div class="form-group"> - <label class="form-switch"> - <input type="checkbox" disabled> - <i class="form-icon"></i> Send me emails with news and tips - </label> - </div> - <div class="form-group"> - <label class="form-label" for="input-example-20">Message</label> - <textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled></textarea> - </div> - <div class="form-group"> - <label class="form-checkbox"> - <input type="checkbox" disabled> - <i class="form-icon"></i> Remember me - </label> - </div> - </fieldset> - </form> - </div> + <h4 id="forms-disabled" class="s-subtitle">Form disabled styles</h4> + <div class="docs-note"> + <p>Add the <code>disabled</code> attribute to the element or <fieldset> for a disabled form components style.</p> + </div> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <form action="#forms"> + <fieldset disabled> + <div class="form-group"> + <label class="form-label" for="input-example-19">Name</label> + <input class="form-input" type="text" id="input-example-19" placeholder="Name"> + </div> + <div class="form-group"> + <label class="form-label">Gender</label> + <label class="form-radio"> + <input type="radio" name="gender" disabled> + <i class="form-icon"></i> Male + </label> + <label class="form-radio"> + <input type="radio" name="gender" disabled> + <i class="form-icon"></i> Female + </label> + </div> + <div class="form-group"> + <select class="form-select" disabled> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + </div> + <div class="form-group"> + <label class="form-switch"> + <input type="checkbox" disabled> + <i class="form-icon"></i> Send me emails with news and tips + </label> + </div> + <div class="form-group"> + <label class="form-label" for="input-example-20">Message</label> + <textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled></textarea> + </div> + <div class="form-group"> + <label class="form-checkbox"> + <input type="checkbox" disabled> + <i class="form-icon"></i> Remember me + </label> + </div> + </fieldset> + </form> </div> </div> + </div> - <div id="icons" class="container"> - <h3 class="s-title"><a href="#icons" class="anchor" aria-hidden="true">#</a>Icons <small class="label">experimental</small></h3> - <div class="docs-note"> - <p>Icons are single-element, responsive and pure CSS icons. You can include <code>spectre-icons.css</code> located in the <code>dist</code> folder to your web <head> to have these CSS icons.</p> - </div> - <h4 id="icons-navigation" class="s-subtitle">Navigation icons</h4> - <div class="columns"> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-arrow-up"></i> - </button> - <p>icon-arrow-up</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-arrow-right"></i> - </button> - <p>icon-arrow-right</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-arrow-down"></i> - </button> - <p>icon-arrow-down</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-arrow-left"></i> - </button> - <p>icon-arrow-left</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-upward"></i> - </button> - <p>icon-upward</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-forward"></i> - </button> - <p>icon-forward</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-downward"></i> - </button> - <p>icon-downward</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-back"></i> - </button> - <p>icon-back</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-caret"></i> - </button> - <p>icon-caret</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-menu"></i> - </button> - <p>icon-menu</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-apps"></i> - </button> - <p>icon-apps</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-more-horiz"></i> - </button> - <p>icon-more-horiz</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-more-vert"></i> - </button> - <p>icon-more-vert</p> - </div> + <div id="icons" class="container"> + <h3 class="s-title"><a href="#icons" class="anchor" aria-hidden="true">#</a>Icons <small class="label">experimental</small></h3> + <div class="docs-note"> + <p>Icons are single-element, responsive and pure CSS icons. You can include <code>spectre-icons.css</code> located in the <code>dist</code> folder to your web <head> to have these CSS icons.</p> + </div> + <h4 id="icons-navigation" class="s-subtitle">Navigation icons</h4> + <div class="columns"> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-arrow-up"></i> + </button> + <p>icon-arrow-up</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-arrow-right"></i> + </button> + <p>icon-arrow-right</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-arrow-down"></i> + </button> + <p>icon-arrow-down</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-arrow-left"></i> + </button> + <p>icon-arrow-left</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-upward"></i> + </button> + <p>icon-upward</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-forward"></i> + </button> + <p>icon-forward</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-downward"></i> + </button> + <p>icon-downward</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-back"></i> + </button> + <p>icon-back</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-caret"></i> + </button> + <p>icon-caret</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-menu"></i> + </button> + <p>icon-menu</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-apps"></i> + </button> + <p>icon-apps</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-more-horiz"></i> + </button> + <p>icon-more-horiz</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-more-vert"></i> + </button> + <p>icon-more-vert</p> </div> - <h4 id="icons-action" class="s-subtitle">Action icons</h4> - <div class="columns"> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-resize-horiz"></i> - </button> - <p>icon-resize-horiz</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-resize-vert"></i> - </button> - <p>icon-resize-vert</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-plus"></i> - </button> - <p>icon-plus</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-minus"></i> - </button> - <p>icon-minus</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-cross"></i> - </button> - <p>icon-cross</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-check"></i> - </button> - <p>icon-check</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-stop"></i> - </button> - <p>icon-stop</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-shutdown"></i> - </button> - <p>icon-shutdown</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-refresh"></i> - </button> - <p>icon-refresh</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-search"></i> - </button> - <p>icon-search</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-flag"></i> - </button> - <p>icon-flag</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-bookmark"></i> - </button> - <p>icon-bookmark</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-edit"></i> - </button> - <p>icon-edit</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-delete"></i> - </button> - <p>icon-delete</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-share"></i> - </button> - <p>icon-share</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-download"></i> - </button> - <p>icon-download</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-upload"></i> - </button> - <p>icon-upload</p> - </div> + </div> + <h4 id="icons-action" class="s-subtitle">Action icons</h4> + <div class="columns"> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-resize-horiz"></i> + </button> + <p>icon-resize-horiz</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-resize-vert"></i> + </button> + <p>icon-resize-vert</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-plus"></i> + </button> + <p>icon-plus</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-minus"></i> + </button> + <p>icon-minus</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-cross"></i> + </button> + <p>icon-cross</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-check"></i> + </button> + <p>icon-check</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-stop"></i> + </button> + <p>icon-stop</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-shutdown"></i> + </button> + <p>icon-shutdown</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-refresh"></i> + </button> + <p>icon-refresh</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-search"></i> + </button> + <p>icon-search</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-flag"></i> + </button> + <p>icon-flag</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-bookmark"></i> + </button> + <p>icon-bookmark</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-edit"></i> + </button> + <p>icon-edit</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-delete"></i> + </button> + <p>icon-delete</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-share"></i> + </button> + <p>icon-share</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-download"></i> + </button> + <p>icon-download</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-upload"></i> + </button> + <p>icon-upload</p> </div> - <h4 id="icons-object" class="s-subtitle">Object icons</h4> - <div class="columns"> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-mail"></i> - </button> - <p>icon-mail</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-people"></i> - </button> - <p>icon-people</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-message"></i> - </button> - <p>icon-message</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-photo"></i> - </button> - <p>icon-photo</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-time"></i> - </button> - <p>icon-time</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-location"></i> - </button> - <p>icon-location</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-link"></i> - </button> - <p>icon-link</p> - </div> - <div class="column col-3 col-md-6"> - <button class="btn btn-primary btn-action btn-lg"> - <i class="icon icon-emoji"></i> - </button> - <p>icon-emoji</p> - </div> + </div> + <h4 id="icons-object" class="s-subtitle">Object icons</h4> + <div class="columns"> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-mail"></i> + </button> + <p>icon-mail</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-people"></i> + </button> + <p>icon-people</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-message"></i> + </button> + <p>icon-message</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-photo"></i> + </button> + <p>icon-photo</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-time"></i> + </button> + <p>icon-time</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-location"></i> + </button> + <p>icon-location</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-link"></i> + </button> + <p>icon-link</p> + </div> + <div class="column col-3 col-md-6"> + <button class="btn btn-primary btn-action btn-lg"> + <i class="icon icon-emoji"></i> + </button> + <p>icon-emoji</p> </div> + </div> <!-- icons --> <pre class="code" data-lang="HTML"><code><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-menu"</span>><<span class="tag">/i</span>> </code></pre> - <h4 id="icons-sizes" class="s-subtitle">Icon sizes</h4> - <div class="docs-note"> - <p>Use <code>icon-2x</code>, <code>icon-3x</code> and <code>icon-4x</code> classes to increase icon sizes. You can set <code>font-size</code> to have different icon sizes.</p> + <h4 id="icons-sizes" class="s-subtitle">Icon sizes</h4> + <div class="docs-note"> + <p>Use <code>icon-2x</code>, <code>icon-3x</code> and <code>icon-4x</code> classes to increase icon sizes. You can set <code>font-size</code> to have different icon sizes.</p> + </div> + <div class="columns"> + <div class="column col-3 col-md-6"> + <p><i class="icon icon-2x icon-mail"></i></p> + <p>icon-2x (32px)</p> </div> - <div class="columns"> - <div class="column col-3 col-md-6"> - <p><i class="icon icon-2x icon-mail"></i></p> - <p>icon-2x (32px)</p> - </div> - <div class="column col-3 col-md-6"> - <p><i class="icon icon-3x icon-mail"></i></p> - <p>icon-3x (48px)</p> - </div> - <div class="column col-3 col-md-6"> - <p><i class="icon icon-4x icon-mail"></i></p> - <p>icon-4x (64px)</p> - </div> + <div class="column col-3 col-md-6"> + <p><i class="icon icon-3x icon-mail"></i></p> + <p>icon-3x (48px)</p> </div> + <div class="column col-3 col-md-6"> + <p><i class="icon icon-4x icon-mail"></i></p> + <p>icon-4x (64px)</p> + </div> + </div> <!-- icons --> <pre class="code" data-lang="HTML"><code><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-2x icon-mail"</span>><<span class="tag">/i</span>> </code></pre> - </div> + </div> - <div id="labels" class="container"> - <h3 class="s-title"><a href="#labels" class="anchor" aria-hidden="true">#</a>Labels</h3> - <div class="docs-note"> - <p>Labels are formatted text tags for highlighted, informative information.</p> - </div> - <div class="columns"> - <div class="column"> - <span class="label">default label</span> - <span class="label label-primary">primary label</span> - <span class="label label-secondary">secondary label</span> - <span class="label label-success">success label</span> - <span class="label label-warning">warning label</span> - <span class="label label-error">error label</span> - </div> - </div> - <div class="docs-note"> - <p>Add the <code>label</code> class to <span> or <small> elements. You can add another class <code>label-primary</code>, <code>label-secondary</code>, <code>label-success</code>, <code>label-warning</code> and <code>label-error</code> for colored labels.</p> - </div> - <div class="columns"> - <div class="column"> - <span class="label label-rounded">default label</span> - <span class="label label-rounded label-primary">primary label</span> - <span class="label label-rounded label-secondary">secondary label</span> - <span class="label label-rounded label-success">success label</span> - <span class="label label-rounded label-warning">warning label</span> - <span class="label label-rounded label-error">error label</span> - </div> + <div id="labels" class="container"> + <h3 class="s-title"><a href="#labels" class="anchor" aria-hidden="true">#</a>Labels</h3> + <div class="docs-note"> + <p>Labels are formatted text tags for highlighted, informative information.</p> + </div> + <div class="columns"> + <div class="column"> + <span class="label">default label</span> + <span class="label label-primary">primary label</span> + <span class="label label-secondary">secondary label</span> + <span class="label label-success">success label</span> + <span class="label label-warning">warning label</span> + <span class="label label-error">error label</span> </div> - <div class="docs-note"> - <p>Add the <code>label-rounded</code> class to have rounded labels.</p> + </div> + <div class="docs-note"> + <p>Add the <code>label</code> class to <span> or <small> elements. You can add another class <code>label-primary</code>, <code>label-secondary</code>, <code>label-success</code>, <code>label-warning</code> and <code>label-error</code> for colored labels.</p> + </div> + <div class="columns"> + <div class="column"> + <span class="label label-rounded">default label</span> + <span class="label label-rounded label-primary">primary label</span> + <span class="label label-rounded label-secondary">secondary label</span> + <span class="label label-rounded label-success">success label</span> + <span class="label label-rounded label-warning">warning label</span> + <span class="label label-rounded label-error">error label</span> </div> + </div> + <div class="docs-note"> + <p>Add the <code>label-rounded</code> class to have rounded labels.</p> + </div> <!-- labels --> <pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"label"</span>>default label<<span class="tag">/span</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"label label-primary"</span>>primary label<<span class="tag">/span</span>> </code></pre> - </div> + </div> - <div id="codes" class="container"> - <h3 class="s-title"><a href="#codes" class="anchor" aria-hidden="true">#</a>Codes</h3> - <div class="docs-note"> - <p>Codes are inline and multiline code snippets.</p> - <p>For inline code, you can use the element <code><code></code>. For multiline code snippet blocks, you can use <pre> with the <code>code</code> class as a container, and add <code> inside it. The <code>data-lang</code> attribute is rendered as the language name in the top right.</p> - </div> + <div id="codes" class="container"> + <h3 class="s-title"><a href="#codes" class="anchor" aria-hidden="true">#</a>Codes</h3> + <div class="docs-note"> + <p>Codes are inline and multiline code snippets.</p> + <p>For inline code, you can use the element <code><code></code>. For multiline code snippet blocks, you can use <pre> with the <code>code</code> class as a container, and add <code> inside it. The <code>data-lang</code> attribute is rendered as the language name in the top right.</p> + </div> <pre class="code" data-lang="HTML"><code><span class="com"><!-- code snippets --></span> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>> @@ -1813,57 +1813,57 @@ <<span class="tag">/code</span>><<span class="tag">/pre</span>> </code></pre> - </div> + </div> - <div id="media" class="container"> - <h3 class="s-title"><a href="#media" class="anchor" aria-hidden="true">#</a>Media</h3> - <div class="docs-note"> - <p>Media includes responsive images, figures and video classes. </p> - </div> - <h4 id="media-images" class="s-subtitle">Images</h4> - <div class="docs-note"> - <p>Add the <code>img-responsive</code> class to <img> elements. The images will scale with the parent sizes.</p> - </div> - <div class="columns"> - <div class="column col-12"> - <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS El Capitan Wallpaper"> - </div> + <div id="media" class="container"> + <h3 class="s-title"><a href="#media" class="anchor" aria-hidden="true">#</a>Media</h3> + <div class="docs-note"> + <p>Media includes responsive images, figures and video classes. </p> + </div> + <h4 id="media-images" class="s-subtitle">Images</h4> + <div class="docs-note"> + <p>Add the <code>img-responsive</code> class to <img> elements. The images will scale with the parent sizes.</p> + </div> + <div class="columns"> + <div class="column col-12"> + <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS El Capitan Wallpaper"> </div> + </div> - <div class="docs-note"> - <p>Add the <code>img-fit-contain</code> or <code>img-fit-cover</code> class to <img> or <video> elements. The media will crop itself to fit inside the element (and you don't need another container). This feature can replace the background image trick. Microsoft Edge support is <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/" target="_blank">in preview</a>.</p> - </div> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <figure class="figure"> - <img src="img/osx-yosemite.jpg" class="img-fit-contain rounded" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;"> - <figcaption class="figure-caption text-center">img-fit-contain</figcaption> - </figure> - </div> - <div class="column col-6 col-xs-12"> - <figure class="figure"> - <img src="img/osx-yosemite-2.jpg" class="img-fit-cover rounded" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;"> - <figcaption class="figure-caption text-center">img-fit-cover</figcaption> - </figure> - </div> + <div class="docs-note"> + <p>Add the <code>img-fit-contain</code> or <code>img-fit-cover</code> class to <img> or <video> elements. The media will crop itself to fit inside the element (and you don't need another container). This feature can replace the background image trick. Microsoft Edge support is <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/" target="_blank">in preview</a>.</p> + </div> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <figure class="figure"> + <img src="img/osx-yosemite.jpg" class="img-fit-contain rounded" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;"> + <figcaption class="figure-caption text-center">img-fit-contain</figcaption> + </figure> + </div> + <div class="column col-6 col-xs-12"> + <figure class="figure"> + <img src="img/osx-yosemite-2.jpg" class="img-fit-cover rounded" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;"> + <figcaption class="figure-caption text-center">img-fit-cover</figcaption> + </figure> </div> + </div> <pre class="code" data-lang="HTML"><code><<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-fit-contain ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-fit-cover ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> </code></pre> - <div class="docs-note"> - <p>You can use the element <figure> for an image with a caption. Add the <code>figure</code> class to <figure> element. The images with the <code>img-responsive</code> class will be responsive. And the included class <code>figure-caption</code> will provide basic style for caption. Also, you can use <code>text-left</code>, <code>text-center</code> and <code>text-right</code> for caption alignment. </p> - </div> - <div class="columns"> - <div class="column col-12"> - <figure class="figure"> - <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper"> - <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption> - </figure> - </div> + <div class="docs-note"> + <p>You can use the element <figure> for an image with a caption. Add the <code>figure</code> class to <figure> element. The images with the <code>img-responsive</code> class will be responsive. And the included class <code>figure-caption</code> will provide basic style for caption. Also, you can use <code>text-left</code>, <code>text-center</code> and <code>text-right</code> for caption alignment. </p> + </div> + <div class="columns"> + <div class="column col-12"> + <figure class="figure"> + <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper"> + <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption> + </figure> </div> + </div> <pre class="code" data-lang="HTML"><code><<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"figure"</span>> <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-yosemite-2.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> @@ -1871,21 +1871,21 @@ <<span class="tag">/figure</span>> </code></pre> - <h4 id="media-video" class="s-subtitle">Video</h4> - <div class="docs-note"> - <p>For responsive video, add a container with the <code>video-responsive</code> class. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add <code>video-responsive-4-3</code> for 4:3 ratio video container or <code>video-responsive-1-1</code> for 1:1 ratio.</p> - </div> - <div class="columns"> - <div class="column col-12"> - <div class="video-responsive"> - <iframe width="560" height="315" src="https://www.youtube.com/embed/BzMLA8YIgG0" allowfullscreen></iframe> - </div> + <h4 id="media-video" class="s-subtitle">Video</h4> + <div class="docs-note"> + <p>For responsive video, add a container with the <code>video-responsive</code> class. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add <code>video-responsive-4-3</code> for 4:3 ratio video container or <code>video-responsive-1-1</code> for 1:1 ratio.</p> + </div> + <div class="columns"> + <div class="column col-12"> + <div class="video-responsive"> + <iframe width="560" height="315" src="https://www.youtube.com/embed/BzMLA8YIgG0" allowfullscreen></iframe> </div> </div> + </div> - <div class="docs-note"> - <p>For responsive <code>video</code> elements, you can add the <code>video-responsive</code> class directly to the <code>video</code>.</p> - </div> + <div class="docs-note"> + <p>For responsive <code>video</code> elements, you can add the <code>video-responsive</code> class directly to the <code>video</code>.</p> + </div> <!-- media --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"video-responsive video-responsive-4-3"</span>> @@ -1895,14 +1895,13 @@ <<span class="tag">video</span> <span class="atn">class</span>=<span class="atv">"video-responsive"</span> <span class="atn">src</span>=<span class="atv">"..."</span>>...<<span class="tag">/video</span>> </code></pre> - </div> + </div> - <footer class="s-footer"> - <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p> - <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> - </footer> + <footer class="docs-footer"> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p> + <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> + </footer> - </div> </div> </div> diff --git a/docs/experimentals.html b/docs/experimentals.html index dc3b15d..e24a8f8 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -8,539 +8,538 @@ <meta name="author" content="https://github.com/picturepan2/"> <title>Experimentals - Spectre.css CSS Framework</title> <link rel="stylesheet" href="dist/spectre.css"> - <link rel="stylesheet" href="dist/spectre-exp.css"> <link rel="stylesheet" href="dist/spectre-icons.css"> + <link rel="stylesheet" href="dist/spectre-exp.css"> <link rel="stylesheet" href="css/docs.css"> </head> <body> - <div class="s-container container"> - <div class="columns"> - <div id="sidebar" class="s-sidebar"> - <div class="s-brand"> - <a href="index.html" class="s-logo"> - <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>Spectre.css</h2> - </a> - </div> - <div class="s-nav"> - <div class="accordion-container"> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-1"> - Getting started - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="getting-started.html#introduction">Introduction</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#installation">Installation</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#custom">Custom version</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#browsers">Browser support</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#whatsnew">What's new</a> - </li> - </ul> - </div> + <div class="docs-container off-canvas"> + <div class="docs-navbar"> + <a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"> + <i class="icon icon-menu"></i> + </a> + <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> + </div> + + <div id="sidebar" class="docs-sidebar off-canvas-sidebar"> + <div class="docs-brand"> + <a href="index.html" class="docs-logo"> + <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> + <h2>Spectre.css</h2> + </a> + </div> + <div class="docs-nav"> + <div class="accordion-container"> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-1"> + Getting started + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="getting-started.html#introduction">Introduction</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#installation">Installation</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#custom">Custom version</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#browsers">Browser support</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#whatsnew">What's new</a> + </li> + </ul> </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-2"> - Elements - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="elements.html#typography">Typography</a> - </li> - <li class="menu-item"> - <a href="elements.html#tables">Tables</a> - </li> - <li class="menu-item"> - <a href="elements.html#buttons">Buttons</a> - </li> - <li class="menu-item"> - <a href="elements.html#forms">Forms</a> - </li> - <li class="menu-item"> - <a href="elements.html#icons">Icons</a> - </li> - <li class="menu-item"> - <a href="elements.html#labels">Labels</a> - </li> - <li class="menu-item"> - <a href="elements.html#codes">Codes</a> - </li> - <li class="menu-item"> - <a href="elements.html#media">Media</a> - </li> - </ul> - </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-2"> + Elements + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="elements.html#typography">Typography</a> + </li> + <li class="menu-item"> + <a href="elements.html#tables">Tables</a> + </li> + <li class="menu-item"> + <a href="elements.html#buttons">Buttons</a> + </li> + <li class="menu-item"> + <a href="elements.html#forms">Forms</a> + </li> + <li class="menu-item"> + <a href="elements.html#icons">Icons</a> + </li> + <li class="menu-item"> + <a href="elements.html#labels">Labels</a> + </li> + <li class="menu-item"> + <a href="elements.html#codes">Codes</a> + </li> + <li class="menu-item"> + <a href="elements.html#media">Media</a> + </li> + </ul> </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-3"> - Layout - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="layout.html#grid">Flexbox grid</a> - </li> - <li class="menu-item"> - <a href="layout.html#responsive">Responsive</a> - </li> - <li class="menu-item"> - <a href="layout.html#navbar">Navbar</a> - </li> - </ul> - </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-3"> + Layout + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="layout.html#grid">Flexbox grid</a> + </li> + <li class="menu-item"> + <a href="layout.html#responsive">Responsive</a> + </li> + <li class="menu-item"> + <a href="layout.html#navbar">Navbar</a> + </li> + </ul> </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-4"> - Components - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="components.html#accordions">Accordions</a> - </li> - <li class="menu-item"> - <a href="components.html#autocomplete">Autocomplete</a> - </li> - <li class="menu-item"> - <a href="components.html#avatars">Avatars</a> - </li> - <li class="menu-item"> - <a href="components.html#badges">Badges</a> - </li> - <li class="menu-item"> - <a href="components.html#bars">Bars</a> - </li> - <li class="menu-item"> - <a href="components.html#breadcrumbs">Breadcrumbs</a> - </li> - <li class="menu-item"> - <a href="components.html#cards">Cards</a> - </li> - <li class="menu-item"> - <a href="components.html#chips">Chips</a> - </li> - <li class="menu-item"> - <a href="components.html#empty">Empty states</a> - </li> - <li class="menu-item"> - <a href="components.html#menus">Menus</a> - </li> - <li class="menu-item"> - <a href="components.html#modals">Modals</a> - </li> - <li class="menu-item"> - <a href="components.html#navs">Navs</a> - </li> - <li class="menu-item"> - <a href="components.html#pagination">Pagination</a> - </li> - <li class="menu-item"> - <a href="components.html#panels">Panels</a> - </li> - <li class="menu-item"> - <a href="components.html#popovers">Popovers</a> - </li> - <li class="menu-item"> - <a href="components.html#steps">Steps</a> - </li> - <li class="menu-item"> - <a href="components.html#tabs">Tabs</a> - </li> - <li class="menu-item"> - <a href="components.html#tiles">Tiles</a> - </li> - <li class="menu-item"> - <a href="components.html#toasts">Toasts</a> - </li> - <li class="menu-item"> - <a href="components.html#tooltips">Tooltips</a> - </li> - </ul> - </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-4"> + Components + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="components.html#accordions">Accordions</a> + </li> + <li class="menu-item"> + <a href="components.html#autocomplete">Autocomplete</a> + </li> + <li class="menu-item"> + <a href="components.html#avatars">Avatars</a> + </li> + <li class="menu-item"> + <a href="components.html#badges">Badges</a> + </li> + <li class="menu-item"> + <a href="components.html#bars">Bars</a> + </li> + <li class="menu-item"> + <a href="components.html#breadcrumbs">Breadcrumbs</a> + </li> + <li class="menu-item"> + <a href="components.html#cards">Cards</a> + </li> + <li class="menu-item"> + <a href="components.html#chips">Chips</a> + </li> + <li class="menu-item"> + <a href="components.html#empty">Empty states</a> + </li> + <li class="menu-item"> + <a href="components.html#menus">Menus</a> + </li> + <li class="menu-item"> + <a href="components.html#modals">Modals</a> + </li> + <li class="menu-item"> + <a href="components.html#navs">Navs</a> + </li> + <li class="menu-item"> + <a href="components.html#pagination">Pagination</a> + </li> + <li class="menu-item"> + <a href="components.html#panels">Panels</a> + </li> + <li class="menu-item"> + <a href="components.html#popovers">Popovers</a> + </li> + <li class="menu-item"> + <a href="components.html#steps">Steps</a> + </li> + <li class="menu-item"> + <a href="components.html#tabs">Tabs</a> + </li> + <li class="menu-item"> + <a href="components.html#tiles">Tiles</a> + </li> + <li class="menu-item"> + <a href="components.html#toasts">Toasts</a> + </li> + <li class="menu-item"> + <a href="components.html#tooltips">Tooltips</a> + </li> + </ul> </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-5"> - Utilities - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="utilities.html#colors">Colors</a> - </li> - <li class="menu-item"> - <a href="utilities.html#cursors">Cursors</a> - </li> - <li class="menu-item"> - <a href="utilities.html#display">Display</a> - </li> - <li class="menu-item"> - <a href="utilities.html#divider">Divider</a> - </li> - <li class="menu-item"> - <a href="utilities.html#loading">Loading</a> - </li> - <li class="menu-item"> - <a href="utilities.html#position">Position</a> - </li> - <li class="menu-item"> - <a href="utilities.html#shapes">Shapes</a> - </li> - <li class="menu-item"> - <a href="utilities.html#text">Text</a> - </li> - </ul> - </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-5"> + Utilities + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="utilities.html#colors">Colors</a> + </li> + <li class="menu-item"> + <a href="utilities.html#cursors">Cursors</a> + </li> + <li class="menu-item"> + <a href="utilities.html#display">Display</a> + </li> + <li class="menu-item"> + <a href="utilities.html#divider">Divider</a> + </li> + <li class="menu-item"> + <a href="utilities.html#loading">Loading</a> + </li> + <li class="menu-item"> + <a href="utilities.html#position">Position</a> + </li> + <li class="menu-item"> + <a href="utilities.html#shapes">Shapes</a> + </li> + <li class="menu-item"> + <a href="utilities.html#text">Text</a> + </li> + </ul> </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden checked> - <label class="accordion-header c-hand" for="docs-accordion-6"> - Experimentals - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="experimentals.html#calendars">Calendars</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#carousels">Carousels</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#comparison">Comparison sliders</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#filters">Filters</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#meters">Meters</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#off-canvas">Off-canvas</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#parallax">Parallax</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#progress">Progress</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#sliders">Sliders</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#timelines">Timelines</a> - </li> - </ul> - </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden checked> + <label class="accordion-header c-hand" for="docs-accordion-6"> + Experimentals + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="experimentals.html#calendars">Calendars</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#carousels">Carousels</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#comparison">Comparison sliders</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#filters">Filters</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#meters">Meters</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#off-canvas">Off-canvas</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#parallax">Parallax</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#progress">Progress</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#sliders">Sliders</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#timelines">Timelines</a> + </li> + </ul> </div> </div> </div> </div> - <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> - <div class="s-navbar"> - <div class="menu-btn"> - <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a> - </div> - <div class="float-btn"> - <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> + </div> + + <a class="off-canvas-overlay" href="#close"></a> + + <div id="content" class="docs-content off-canvas-content"> + <div id="experimentals" class="container"> + <h3 class="s-title"><a href="#experimentals" class="anchor" aria-hidden="true">#</a>Experimentals</h3> + <div class="docs-note"> + <p>The Experimentals include experimental elements and features, mostly are not yet ready for wide use. These elements and components are limited inside <code>spectre-exp.less</code> before browsers fully support them. Sometimes, there are some specific browsers targeted components.</p> </div> </div> - <div id="content" class="s-content"> - <div id="experimentals" class="container"> - <h3 class="s-title"><a href="#experimentals" class="anchor" aria-hidden="true">#</a>Experimentals</h3> - <div class="docs-note"> - <p>The Experimentals include experimental elements and features, mostly are not yet ready for wide use. These elements and components are limited inside <code>spectre-exp.less</code> before browsers fully support them. Sometimes, there are some specific browsers targeted components.</p> + <div class="container"> + <div class="docs-ad"> + <div class="hide-md"> + <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <!-- GitHub-lg --> + <ins class="adsbygoogle" + style="display:inline-block;width:728px;height:90px" + data-ad-client="ca-pub-2225124559530218" + data-ad-slot="9894180784"></ins> + <script> + (adsbygoogle = window.adsbygoogle || []).push({}); + </script> </div> - </div> - - <div class="container"> - <div class="docs-ad"> - <div class="hide-md"> - <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> - <!-- GitHub-lg --> - <ins class="adsbygoogle" - style="display:inline-block;width:728px;height:90px" - data-ad-client="ca-pub-2225124559530218" - data-ad-slot="9894180784"></ins> - <script> - (adsbygoogle = window.adsbygoogle || []).push({}); - </script> - </div> - <div class="show-md"> - <!-- GitHub-sm --> - <ins class="adsbygoogle" - style="display:inline-block;width:300px;height:250px" - data-ad-client="ca-pub-2225124559530218" - data-ad-slot="9278881734"></ins> - <script> - (adsbygoogle = window.adsbygoogle || []).push({}); - </script> - </div> + <div class="show-md"> + <!-- GitHub-sm --> + <ins class="adsbygoogle" + style="display:inline-block;width:300px;height:250px" + data-ad-client="ca-pub-2225124559530218" + data-ad-slot="9278881734"></ins> + <script> + (adsbygoogle = window.adsbygoogle || []).push({}); + </script> </div> </div> + </div> - <div id="calendars" class="container"> - <h3 class="s-title"><a href="#calendars" class="anchor" aria-hidden="true">#</a>Calendars</h3> - <div class="docs-note"> - <p>Calendars are designed for date or date range picker and events display. It is made with flex layout.</p> - </div> - <div class="columns"> - <div class="column col-4 col-md-12"> - <div class="calendar"> - <div class="calendar-nav navbar"> - <button class="btn btn-action btn-link btn-lg"> - <i class="icon icon-arrow-left"></i> - </button> - <div class="navbar-primary">March 2017</div> - <button class="btn btn-action btn-link btn-lg"> - <i class="icon icon-arrow-right"></i> - </button> + <div id="calendars" class="container"> + <h3 class="s-title"><a href="#calendars" class="anchor" aria-hidden="true">#</a>Calendars</h3> + <div class="docs-note"> + <p>Calendars are designed for date or date range picker and events display. It is made with flex layout.</p> + </div> + <div class="columns"> + <div class="column col-4 col-md-12"> + <div class="calendar"> + <div class="calendar-nav navbar"> + <button class="btn btn-action btn-link btn-lg"> + <i class="icon icon-arrow-left"></i> + </button> + <div class="navbar-primary">March 2017</div> + <button class="btn btn-action btn-link btn-lg"> + <i class="icon icon-arrow-right"></i> + </button> + </div> + <div class="calendar-container"> + <div class="calendar-header"> + <div class="calendar-date">Sun</div> + <div class="calendar-date">Mon</div> + <div class="calendar-date">Tue</div> + <div class="calendar-date">Wed</div> + <div class="calendar-date">Thu</div> + <div class="calendar-date">Fri</div> + <div class="calendar-date">Sat</div> </div> - <div class="calendar-container"> - <div class="calendar-header"> - <div class="calendar-date">Sun</div> - <div class="calendar-date">Mon</div> - <div class="calendar-date">Tue</div> - <div class="calendar-date">Wed</div> - <div class="calendar-date">Thu</div> - <div class="calendar-date">Fri</div> - <div class="calendar-date">Sat</div> - </div> - <div class="calendar-body"> - <div class="calendar-date prev-month disabled"><button class="date-item">26</button></div> - <div class="calendar-date prev-month disabled"><button class="date-item">27</button></div> - <div class="calendar-date prev-month disabled"><button class="date-item">28</button></div> - <div class="calendar-date current-month"><button class="date-item">1</button></div> - <div class="calendar-date current-month"><button class="date-item">2</button></div> - <div class="calendar-date current-month"><button class="date-item">3</button></div> - <div class="calendar-date current-month tooltip" data-tooltip="Today"><button class="date-item date-today">4</button></div> - <div class="calendar-date current-month tooltip" data-tooltip="Not available"><button class="date-item" disabled>5</button></div> - <div class="calendar-date current-month"><button class="date-item">6</button></div> - <div class="calendar-date current-month"><button class="date-item">7</button></div> - <div class="calendar-date current-month tooltip" data-tooltip="You have appointments"><button class="date-item badge">8</button></div> - <div class="calendar-date current-month"><button class="date-item">9</button></div> - <div class="calendar-date current-month"><button class="date-item">10</button></div> - <div class="calendar-date current-month"><button class="date-item">11</button></div> - <div class="calendar-date current-month"><button class="date-item">12</button></div> - <div class="calendar-date current-month"><button class="date-item">13</button></div> - <div class="calendar-date current-month"><button class="date-item">14</button></div> - <div class="calendar-date current-month"><button class="date-item">15</button></div> - <div class="calendar-date current-month calendar-range range-start"><button class="date-item active">16</button></div> - <div class="calendar-date current-month calendar-range"><button class="date-item">17</button></div> - <div class="calendar-date current-month calendar-range"><button class="date-item">18</button></div> - <div class="calendar-date current-month calendar-range"><button class="date-item">19</button></div> - <div class="calendar-date current-month calendar-range range-end"><button class="date-item active">20</button></div> - <div class="calendar-date current-month"><button class="date-item">21</button></div> - <div class="calendar-date current-month"><button class="date-item">22</button></div> - <div class="calendar-date current-month"><button class="date-item">23</button></div> - <div class="calendar-date current-month"><button class="date-item">24</button></div> - <div class="calendar-date current-month"><button class="date-item">25</button></div> - <div class="calendar-date current-month"><button class="date-item">26</button></div> - <div class="calendar-date current-month"><button class="date-item">27</button></div> - <div class="calendar-date current-month"><button class="date-item">28</button></div> - <div class="calendar-date current-month"><button class="date-item">29</button></div> - <div class="calendar-date current-month"><button class="date-item">30</button></div> - <div class="calendar-date current-month"><button class="date-item">31</button></div> - <div class="calendar-date next-month disabled"><button class="date-item">1</button></div> - </div> + <div class="calendar-body"> + <div class="calendar-date prev-month disabled"><button class="date-item">26</button></div> + <div class="calendar-date prev-month disabled"><button class="date-item">27</button></div> + <div class="calendar-date prev-month disabled"><button class="date-item">28</button></div> + <div class="calendar-date current-month"><button class="date-item">1</button></div> + <div class="calendar-date current-month"><button class="date-item">2</button></div> + <div class="calendar-date current-month"><button class="date-item">3</button></div> + <div class="calendar-date current-month tooltip" data-tooltip="Today"><button class="date-item date-today">4</button></div> + <div class="calendar-date current-month tooltip" data-tooltip="Not available"><button class="date-item" disabled>5</button></div> + <div class="calendar-date current-month"><button class="date-item">6</button></div> + <div class="calendar-date current-month"><button class="date-item">7</button></div> + <div class="calendar-date current-month tooltip" data-tooltip="You have appointments"><button class="date-item badge">8</button></div> + <div class="calendar-date current-month"><button class="date-item">9</button></div> + <div class="calendar-date current-month"><button class="date-item">10</button></div> + <div class="calendar-date current-month"><button class="date-item">11</button></div> + <div class="calendar-date current-month"><button class="date-item">12</button></div> + <div class="calendar-date current-month"><button class="date-item">13</button></div> + <div class="calendar-date current-month"><button class="date-item">14</button></div> + <div class="calendar-date current-month"><button class="date-item">15</button></div> + <div class="calendar-date current-month calendar-range range-start"><button class="date-item active">16</button></div> + <div class="calendar-date current-month calendar-range"><button class="date-item">17</button></div> + <div class="calendar-date current-month calendar-range"><button class="date-item">18</button></div> + <div class="calendar-date current-month calendar-range"><button class="date-item">19</button></div> + <div class="calendar-date current-month calendar-range range-end"><button class="date-item active">20</button></div> + <div class="calendar-date current-month"><button class="date-item">21</button></div> + <div class="calendar-date current-month"><button class="date-item">22</button></div> + <div class="calendar-date current-month"><button class="date-item">23</button></div> + <div class="calendar-date current-month"><button class="date-item">24</button></div> + <div class="calendar-date current-month"><button class="date-item">25</button></div> + <div class="calendar-date current-month"><button class="date-item">26</button></div> + <div class="calendar-date current-month"><button class="date-item">27</button></div> + <div class="calendar-date current-month"><button class="date-item">28</button></div> + <div class="calendar-date current-month"><button class="date-item">29</button></div> + <div class="calendar-date current-month"><button class="date-item">30</button></div> + <div class="calendar-date current-month"><button class="date-item">31</button></div> + <div class="calendar-date next-month disabled"><button class="date-item">1</button></div> </div> </div> </div> </div> + </div> - <h4 id="calendars-sizes" class="s-subtitle">Calendars sizes</h4> - <div class="columns"> - <div class="column col-12"> - <div class="calendar calendar-lg"> - <div class="calendar-nav navbar"> - <button class="btn btn-action btn-link btn-lg"> - <i class="icon icon-arrow-left"></i> - </button> - <div class="navbar-primary">March 2017</div> - <button class="btn btn-action btn-link btn-lg"> - <i class="icon icon-arrow-right"></i> - </button> + <h4 id="calendars-sizes" class="s-subtitle">Calendars sizes</h4> + <div class="columns"> + <div class="column col-12"> + <div class="calendar calendar-lg"> + <div class="calendar-nav navbar"> + <button class="btn btn-action btn-link btn-lg"> + <i class="icon icon-arrow-left"></i> + </button> + <div class="navbar-primary">March 2017</div> + <button class="btn btn-action btn-link btn-lg"> + <i class="icon icon-arrow-right"></i> + </button> + </div> + <div class="calendar-container"> + <div class="calendar-header"> + <div class="calendar-date">Sun</div> + <div class="calendar-date">Mon</div> + <div class="calendar-date">Tue</div> + <div class="calendar-date">Wed</div> + <div class="calendar-date">Thu</div> + <div class="calendar-date">Fri</div> + <div class="calendar-date">Sat</div> </div> - <div class="calendar-container"> - <div class="calendar-header"> - <div class="calendar-date">Sun</div> - <div class="calendar-date">Mon</div> - <div class="calendar-date">Tue</div> - <div class="calendar-date">Wed</div> - <div class="calendar-date">Thu</div> - <div class="calendar-date">Fri</div> - <div class="calendar-date">Sat</div> - </div> - <div class="calendar-body"> - <div class="calendar-date prev-month disabled"><button class="date-item">26</button></div> - <div class="calendar-date prev-month disabled"> - <button class="date-item">27</button> - <div class="calendar-events"> - <a class="calendar-event" href="#calendars" style="background:#e85600;color:#fff;">Zhonghe Festival</a> - </div> + <div class="calendar-body"> + <div class="calendar-date prev-month disabled"><button class="date-item">26</button></div> + <div class="calendar-date prev-month disabled"> + <button class="date-item">27</button> + <div class="calendar-events"> + <a class="calendar-event" href="#calendars" style="background:#e85600;color:#fff;">Zhonghe Festival</a> </div> - <div class="calendar-date prev-month disabled"><button class="date-item">28</button></div> - <div class="calendar-date current-month"><button class="date-item">1</button></div> - <div class="calendar-date current-month"><button class="date-item">2</button></div> - <div class="calendar-date current-month"><button class="date-item">3</button></div> - <div class="calendar-date current-month tooltip" data-tooltip="Today"><button class="date-item date-today">4</button></div> - <div class="calendar-date current-month"><button class="date-item" disabled>5</button></div> - <div class="calendar-date current-month"><button class="date-item">6</button></div> - <div class="calendar-date current-month"><button class="date-item">7</button></div> - <div class="calendar-date current-month tooltip" data-tooltip="You have appointments"> - <button class="date-item badge">8</button> - <div class="calendar-events"> - <a class="calendar-event" href="#calendars" style="background:#5755d9;color:#fff;">Product launch event</a> - <a class="calendar-event" href="#calendars" style="background:#5755d9;color:#fff;">Lunch</a> - <a class="calendar-event" href="#calendars" style="background:#e85600;color:#fff;">International Women's Day</a> - </div> + </div> + <div class="calendar-date prev-month disabled"><button class="date-item">28</button></div> + <div class="calendar-date current-month"><button class="date-item">1</button></div> + <div class="calendar-date current-month"><button class="date-item">2</button></div> + <div class="calendar-date current-month"><button class="date-item">3</button></div> + <div class="calendar-date current-month tooltip" data-tooltip="Today"><button class="date-item date-today">4</button></div> + <div class="calendar-date current-month"><button class="date-item" disabled>5</button></div> + <div class="calendar-date current-month"><button class="date-item">6</button></div> + <div class="calendar-date current-month"><button class="date-item">7</button></div> + <div class="calendar-date current-month tooltip" data-tooltip="You have appointments"> + <button class="date-item badge">8</button> + <div class="calendar-events"> + <a class="calendar-event" href="#calendars" style="background:#5755d9;color:#fff;">Product launch event</a> + <a class="calendar-event" href="#calendars" style="background:#5755d9;color:#fff;">Lunch</a> + <a class="calendar-event" href="#calendars" style="background:#e85600;color:#fff;">International Women's Day</a> </div> - <div class="calendar-date current-month"><button class="date-item">9</button></div> - <div class="calendar-date current-month"><button class="date-item">10</button></div> - <div class="calendar-date current-month"><button class="date-item">11</button></div> - <div class="calendar-date current-month"> - <button class="date-item">12</button> - <div class="calendar-events"> - <a class="calendar-event" href="#calendars" style="background:#e85600;color:#fff;">Arbor Day</a> - </div> + </div> + <div class="calendar-date current-month"><button class="date-item">9</button></div> + <div class="calendar-date current-month"><button class="date-item">10</button></div> + <div class="calendar-date current-month"><button class="date-item">11</button></div> + <div class="calendar-date current-month"> + <button class="date-item">12</button> + <div class="calendar-events"> + <a class="calendar-event" href="#calendars" style="background:#e85600;color:#fff;">Arbor Day</a> </div> - <div class="calendar-date current-month"><button class="date-item">13</button></div> - <div class="calendar-date current-month"><button class="date-item">14</button></div> - <div class="calendar-date current-month"><button class="date-item">15</button></div> - <div class="calendar-date current-month calendar-range range-start"><button class="date-item active">16</button></div> - <div class="calendar-date current-month calendar-range"><button class="date-item">17</button></div> - <div class="calendar-date current-month calendar-range"><button class="date-item">18</button></div> - <div class="calendar-date current-month calendar-range"><button class="date-item">19</button></div> - <div class="calendar-date current-month calendar-range range-end"> - <button class="date-item active">20</button> - <div class="calendar-events"> - <a class="calendar-event" href="#calendars" style="background:#32b643;color:#fff;">Spring Equinox</a> - </div> + </div> + <div class="calendar-date current-month"><button class="date-item">13</button></div> + <div class="calendar-date current-month"><button class="date-item">14</button></div> + <div class="calendar-date current-month"><button class="date-item">15</button></div> + <div class="calendar-date current-month calendar-range range-start"><button class="date-item active">16</button></div> + <div class="calendar-date current-month calendar-range"><button class="date-item">17</button></div> + <div class="calendar-date current-month calendar-range"><button class="date-item">18</button></div> + <div class="calendar-date current-month calendar-range"><button class="date-item">19</button></div> + <div class="calendar-date current-month calendar-range range-end"> + <button class="date-item active">20</button> + <div class="calendar-events"> + <a class="calendar-event" href="#calendars" style="background:#32b643;color:#fff;">Spring Equinox</a> </div> - <div class="calendar-date current-month"><button class="date-item">21</button></div> - <div class="calendar-date current-month"><button class="date-item">22</button></div> - <div class="calendar-date current-month"><button class="date-item">23</button></div> - <div class="calendar-date current-month"><button class="date-item">24</button></div> - <div class="calendar-date current-month"><button class="date-item">25</button></div> - <div class="calendar-date current-month"><button class="date-item">26</button></div> - <div class="calendar-date current-month"><button class="date-item">27</button></div> - <div class="calendar-date current-month"><button class="date-item">28</button></div> - <div class="calendar-date current-month"><button class="date-item">29</button></div> - <div class="calendar-date current-month"><button class="date-item">30</button></div> - <div class="calendar-date current-month"><button class="date-item">31</button></div> - <div class="calendar-date next-month disabled"> - <button class="date-item">1</button> - <div class="calendar-events"> - <a class="calendar-event" href="#calendars" style="background:#e85600;color:#fff;">April Fools' Day</a> - </div> + </div> + <div class="calendar-date current-month"><button class="date-item">21</button></div> + <div class="calendar-date current-month"><button class="date-item">22</button></div> + <div class="calendar-date current-month"><button class="date-item">23</button></div> + <div class="calendar-date current-month"><button class="date-item">24</button></div> + <div class="calendar-date current-month"><button class="date-item">25</button></div> + <div class="calendar-date current-month"><button class="date-item">26</button></div> + <div class="calendar-date current-month"><button class="date-item">27</button></div> + <div class="calendar-date current-month"><button class="date-item">28</button></div> + <div class="calendar-date current-month"><button class="date-item">29</button></div> + <div class="calendar-date current-month"><button class="date-item">30</button></div> + <div class="calendar-date current-month"><button class="date-item">31</button></div> + <div class="calendar-date next-month disabled"> + <button class="date-item">1</button> + <div class="calendar-events"> + <a class="calendar-event" href="#calendars" style="background:#e85600;color:#fff;">April Fools' Day</a> </div> </div> </div> </div> </div> </div> - </div> - <div id="carousels" class="container"> - <h3 class="s-title"><a href="#carousels" class="anchor" aria-hidden="true">#</a>Carousels</h3> - <div class="docs-note"> - <p>Carousels are slideshows for cycling images. It is built in pure CSS.</p> - </div> - <div class="columns"> - <div class="column col-12"> - <div class="carousel"> - <input type="radio" id="slide-1" name="carousel-radio" hidden class="carousel-locator" checked> - <input type="radio" id="slide-2" name="carousel-radio" hidden class="carousel-locator"> - <input type="radio" id="slide-3" name="carousel-radio" hidden class="carousel-locator"> - <input type="radio" id="slide-4" name="carousel-radio" hidden class="carousel-locator"> - <div class="carousel-container"> - <figure class="carousel-item"> - <label class="item-prev btn btn-action btn-lg" for="slide-4"> - <i class="icon icon-arrow-left"></i> - </label> - <label class="item-next btn btn-action btn-lg" for="slide-2"> - <i class="icon icon-arrow-right"></i> - </label> - <img src="img/osx-yosemite.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper"> - </figure> - - <figure class="carousel-item"> - <label class="item-prev btn btn-action btn-lg" for="slide-1"> - <i class="icon icon-arrow-left"></i> - </label> - <label class="item-next btn btn-action btn-lg" for="slide-3"> - <i class="icon icon-arrow-right"></i> - </label> - <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper"> - </figure> - - <figure class="carousel-item"> - <label class="item-prev btn btn-action btn-lg" for="slide-2"> - <i class="icon icon-arrow-left"></i> - </label> - <label class="item-next btn btn-action btn-lg" for="slide-4"> - <i class="icon icon-arrow-right"></i> - </label> - <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper"> - </figure> - - <figure class="carousel-item"> - <label class="item-prev btn btn-action btn-lg" for="slide-3"> - <i class="icon icon-arrow-left"></i> - </label> - <label class="item-next btn btn-action btn-lg" for="slide-1"> - <i class="icon icon-arrow-right"></i> - </label> - <img src="img/osx-el-capitan-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper"> - </figure> - </div> - <div class="carousel-nav"> - <label class="nav-item text-hide c-hand" for="slide-1">1</label> - <label class="nav-item text-hide c-hand" for="slide-2">2</label> - <label class="nav-item text-hide c-hand" for="slide-3">3</label> - <label class="nav-item text-hide c-hand" for="slide-4">4</label> - </div> - </div> - </div> - </div> + </div> + <div id="carousels" class="container"> + <h3 class="s-title"><a href="#carousels" class="anchor" aria-hidden="true">#</a>Carousels</h3> + <div class="docs-note"> + <p>Carousels are slideshows for cycling images. It is built in pure CSS.</p> </div> + <div class="columns"> + <div class="column col-12"> + <div class="carousel"> + <input type="radio" id="slide-1" name="carousel-radio" hidden class="carousel-locator" checked> + <input type="radio" id="slide-2" name="carousel-radio" hidden class="carousel-locator"> + <input type="radio" id="slide-3" name="carousel-radio" hidden class="carousel-locator"> + <input type="radio" id="slide-4" name="carousel-radio" hidden class="carousel-locator"> + <div class="carousel-container"> + <figure class="carousel-item"> + <label class="item-prev btn btn-action btn-lg" for="slide-4"> + <i class="icon icon-arrow-left"></i> + </label> + <label class="item-next btn btn-action btn-lg" for="slide-2"> + <i class="icon icon-arrow-right"></i> + </label> + <img src="img/osx-yosemite.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper"> + </figure> - <div id="comparison" class="container"> - <h3 class="s-title"><a href="#comparison" class="anchor" aria-hidden="true">#</a>Comparison Sliders</h3> - <div class="docs-note"> - <p>Comparison Sliders are sliders for comparing two images. It is built in pure CSS.</p> - </div> - <div class="columns"> - <div class="column col-12"> - <div class="comparison-slider"> - <figure class="comparison-before"> - <img src="img/macos-sierra-2.jpg" class="rounded" alt="macOS Sierra Wallpaper"> - <div class="comparison-label">Before</div> + <figure class="carousel-item"> + <label class="item-prev btn btn-action btn-lg" for="slide-1"> + <i class="icon icon-arrow-left"></i> + </label> + <label class="item-next btn btn-action btn-lg" for="slide-3"> + <i class="icon icon-arrow-right"></i> + </label> + <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper"> </figure> - <figure class="comparison-after"> - <img src="img/macos-sierra-2.jpg" class="filter-grayscale rounded" alt="macOS Sierra Wallpaper"> - <div class="comparison-label">After</div> - <textarea class="comparison-resizer" readonly></textarea> + + <figure class="carousel-item"> + <label class="item-prev btn btn-action btn-lg" for="slide-2"> + <i class="icon icon-arrow-left"></i> + </label> + <label class="item-next btn btn-action btn-lg" for="slide-4"> + <i class="icon icon-arrow-right"></i> + </label> + <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper"> + </figure> + + <figure class="carousel-item"> + <label class="item-prev btn btn-action btn-lg" for="slide-3"> + <i class="icon icon-arrow-left"></i> + </label> + <label class="item-next btn btn-action btn-lg" for="slide-1"> + <i class="icon icon-arrow-right"></i> + </label> + <img src="img/osx-el-capitan-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper"> </figure> </div> + <div class="carousel-nav"> + <label class="nav-item text-hide c-hand" for="slide-1">1</label> + <label class="nav-item text-hide c-hand" for="slide-2">2</label> + <label class="nav-item text-hide c-hand" for="slide-3">3</label> + <label class="nav-item text-hide c-hand" for="slide-4">4</label> + </div> </div> </div> + </div> + + </div> + + <div id="comparison" class="container"> + <h3 class="s-title"><a href="#comparison" class="anchor" aria-hidden="true">#</a>Comparison Sliders</h3> + <div class="docs-note"> + <p>Comparison Sliders are sliders for comparing two images. It is built in pure CSS.</p> + </div> + <div class="columns"> + <div class="column col-12"> + <div class="comparison-slider"> + <figure class="comparison-before"> + <img src="img/macos-sierra-2.jpg" class="rounded" alt="macOS Sierra Wallpaper"> + <div class="comparison-label">Before</div> + </figure> + <figure class="comparison-after"> + <img src="img/macos-sierra-2.jpg" class="filter-grayscale rounded" alt="macOS Sierra Wallpaper"> + <div class="comparison-label">After</div> + <textarea class="comparison-resizer" readonly></textarea> + </figure> + </div> + </div> + </div> <!-- comparison sliders --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"comparison-slider"</span>> @@ -557,133 +556,133 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="filters" class="container"> - <h3 class="s-title"><a href="#filters" class="anchor" aria-hidden="true">#</a>Filters</h3> - <div class="docs-note"> - <p>Filters are CSS only content filters.</p> - </div> - <div class="columns"> - <div class="column col-12"> - <div class="filter"> - <input type="radio" id="tag-0" class="filter-tag" name="filter-radio" hidden checked> - <input type="radio" id="tag-1" class="filter-tag" name="filter-radio" hidden> - <input type="radio" id="tag-2" class="filter-tag" name="filter-radio" hidden> - <input type="radio" id="tag-3" class="filter-tag" name="filter-radio" hidden> - <input type="radio" id="tag-4" class="filter-tag" name="filter-radio" hidden> - - <div class="filter-nav"> - <label class="chip" for="tag-0">All</label> - <label class="chip" for="tag-1">Action</label> - <label class="chip" for="tag-2">Roleplaying</label> - <label class="chip" for="tag-3">Shooter</label> - <label class="chip" for="tag-4">Sports</label> - </div> - <div class="filter-body columns"> - <div class="column col-4 filter-item" data-tag="tag-2"> - <div class="card"> - <div class="card-header"> - <div class="card-title">Fallout 4</div> - <div class="card-subtitle">Roleplaying</div> - </div> + <div id="filters" class="container"> + <h3 class="s-title"><a href="#filters" class="anchor" aria-hidden="true">#</a>Filters</h3> + <div class="docs-note"> + <p>Filters are CSS only content filters.</p> + </div> + <div class="columns"> + <div class="column col-12"> + <div class="filter"> + <input type="radio" id="tag-0" class="filter-tag" name="filter-radio" hidden checked> + <input type="radio" id="tag-1" class="filter-tag" name="filter-radio" hidden> + <input type="radio" id="tag-2" class="filter-tag" name="filter-radio" hidden> + <input type="radio" id="tag-3" class="filter-tag" name="filter-radio" hidden> + <input type="radio" id="tag-4" class="filter-tag" name="filter-radio" hidden> + + <div class="filter-nav"> + <label class="chip" for="tag-0">All</label> + <label class="chip" for="tag-1">Action</label> + <label class="chip" for="tag-2">Roleplaying</label> + <label class="chip" for="tag-3">Shooter</label> + <label class="chip" for="tag-4">Sports</label> + </div> + <div class="filter-body columns"> + <div class="column col-4 filter-item" data-tag="tag-2"> + <div class="card"> + <div class="card-header"> + <div class="card-title">Fallout 4</div> + <div class="card-subtitle">Roleplaying</div> </div> </div> - <div class="column col-4 filter-item" data-tag="tag-3"> - <div class="card"> - <div class="card-header"> - <div class="card-title">Halo 5</div> - <div class="card-subtitle">Shooter</div> - </div> + </div> + <div class="column col-4 filter-item" data-tag="tag-3"> + <div class="card"> + <div class="card-header"> + <div class="card-title">Halo 5</div> + <div class="card-subtitle">Shooter</div> </div> </div> - <div class="column col-4 filter-item" data-tag="tag-1"> - <div class="card"> - <div class="card-header"> - <div class="card-title">Quantum Break</div> - <div class="card-subtitle">Action</div> - </div> + </div> + <div class="column col-4 filter-item" data-tag="tag-1"> + <div class="card"> + <div class="card-header"> + <div class="card-title">Quantum Break</div> + <div class="card-subtitle">Action</div> </div> </div> - <div class="column col-4 filter-item" data-tag="tag-4"> - <div class="card"> - <div class="card-header"> - <div class="card-title">Forza Horizon 3</div> - <div class="card-subtitle">Sports</div> - </div> + </div> + <div class="column col-4 filter-item" data-tag="tag-4"> + <div class="card"> + <div class="card-header"> + <div class="card-title">Forza Horizon 3</div> + <div class="card-subtitle">Sports</div> </div> </div> - <div class="column col-4 filter-item" data-tag="tag-2"> - <div class="card"> - <div class="card-header"> - <div class="card-title">Final Fantasy XV</div> - <div class="card-subtitle">Roleplaying</div> - </div> + </div> + <div class="column col-4 filter-item" data-tag="tag-2"> + <div class="card"> + <div class="card-header"> + <div class="card-title">Final Fantasy XV</div> + <div class="card-subtitle">Roleplaying</div> </div> </div> - <div class="column col-4 filter-item" data-tag="tag-4"> - <div class="card"> - <div class="card-header"> - <div class="card-title">NBA 2K17</div> - <div class="card-subtitle">Sports</div> - </div> + </div> + <div class="column col-4 filter-item" data-tag="tag-4"> + <div class="card"> + <div class="card-header"> + <div class="card-title">NBA 2K17</div> + <div class="card-subtitle">Sports</div> </div> </div> - <div class="column col-4 filter-item" data-tag="tag-3"> - <div class="card"> - <div class="card-header"> - <div class="card-title">Battlefield 1</div> - <div class="card-subtitle">Shooter</div> - </div> + </div> + <div class="column col-4 filter-item" data-tag="tag-3"> + <div class="card"> + <div class="card-header"> + <div class="card-title">Battlefield 1</div> + <div class="card-subtitle">Shooter</div> </div> </div> - <div class="column col-4 filter-item" data-tag="tag-1"> - <div class="card"> - <div class="card-header"> - <div class="card-title">GTA V</div> - <div class="card-subtitle">Action</div> - </div> + </div> + <div class="column col-4 filter-item" data-tag="tag-1"> + <div class="card"> + <div class="card-header"> + <div class="card-title">GTA V</div> + <div class="card-subtitle">Action</div> </div> </div> - <div class="column col-4 filter-item" data-tag="tag-4"> - <div class="card"> - <div class="card-header"> - <div class="card-title">FIFA 17</div> - <div class="card-subtitle">Sports</div> - </div> + </div> + <div class="column col-4 filter-item" data-tag="tag-4"> + <div class="card"> + <div class="card-header"> + <div class="card-title">FIFA 17</div> + <div class="card-subtitle">Sports</div> </div> </div> - <div class="column col-4 filter-item" data-tag="tag-3"> - <div class="card"> - <div class="card-header"> - <div class="card-title">Overwatch</div> - <div class="card-subtitle">Shooter</div> - </div> + </div> + <div class="column col-4 filter-item" data-tag="tag-3"> + <div class="card"> + <div class="card-header"> + <div class="card-title">Overwatch</div> + <div class="card-subtitle">Shooter</div> </div> </div> - <div class="column col-4 filter-item" data-tag="tag-3"> - <div class="card"> - <div class="card-header"> - <div class="card-title">Titanfall 2</div> - <div class="card-subtitle">Shooter</div> - </div> + </div> + <div class="column col-4 filter-item" data-tag="tag-3"> + <div class="card"> + <div class="card-header"> + <div class="card-title">Titanfall 2</div> + <div class="card-subtitle">Shooter</div> </div> </div> - <div class="column col-4 filter-item" data-tag="tag-3"> - <div class="card"> - <div class="card-header"> - <div class="card-title">Gears of Wars 4</div> - <div class="card-subtitle">Shooter</div> - </div> + </div> + <div class="column col-4 filter-item" data-tag="tag-3"> + <div class="card"> + <div class="card-header"> + <div class="card-title">Gears of Wars 4</div> + <div class="card-subtitle">Shooter</div> </div> </div> </div> </div> </div> </div> - <div class="docs-note"> - <p>Filters use <code>tag-1</code> to <code>tag-8</code> to flag different tags. <code>tag-0</code> is reserved for clearing filter (or showing all). You can overwrite <code>$filter-number</code> in <code>_filters.scss</code> to have more filters.</p> - </div> + </div> + <div class="docs-note"> + <p>Filters use <code>tag-1</code> to <code>tag-8</code> to flag different tags. <code>tag-0</code> is reserved for clearing filter (or showing all). You can overwrite <code>$filter-number</code> in <code>_filters.scss</code> to have more filters.</p> + </div> <!-- filters --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter"</span>> @@ -709,30 +708,30 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="meters" class="container"> - <h3 class="s-title"><a href="#meters" class="anchor" aria-hidden="true">#</a>Meters</h3> - <div class="docs-note"> - <p>Meters represent the value within the known range.</p> + <div id="meters" class="container"> + <h3 class="s-title"><a href="#meters" class="anchor" aria-hidden="true">#</a>Meters</h3> + <div class="docs-note"> + <p>Meters represent the value within the known range.</p> + </div> + <div class="columns"> + <div class="column col-3 col-xs-12"> + <meter class="meter" value="20" min="0" max="100"></meter> </div> - <div class="columns"> - <div class="column col-3 col-xs-12"> - <meter class="meter" value="20" min="0" max="100"></meter> - </div> - <div class="column col-3 col-xs-12"> - <meter class="meter" value="60" min="0" low="30" optimum="60" high="80" max="100"></meter> - </div> - <div class="column col-3 col-xs-12"> - <meter class="meter" value="85" min="0" low="30" high="80" max="100"></meter> - </div> - <div class="column col-3 col-xs-12"> - <meter class="meter" value="20" min="0" low="30" optimum="90" high="80" max="100"></meter> - </div> + <div class="column col-3 col-xs-12"> + <meter class="meter" value="60" min="0" low="30" optimum="60" high="80" max="100"></meter> + </div> + <div class="column col-3 col-xs-12"> + <meter class="meter" value="85" min="0" low="30" high="80" max="100"></meter> </div> - <div class="docs-note"> - <p></p> + <div class="column col-3 col-xs-12"> + <meter class="meter" value="20" min="0" low="30" optimum="90" high="80" max="100"></meter> </div> + </div> + <div class="docs-note"> + <p></p> + </div> <!-- meters --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- Meter is green when low < value < high --></span> @@ -744,40 +743,40 @@ <<span class="tag">meter</span> <span class="atn">class</span>=<span class="atv">"meter"</span> <span class="atn">value</span>=<span class="atv">"20"</span> <span class="atn">optimum</span>=<span class="atv">"90"</span> <span class="atn">min</span>=<span class="atv">"0"</span> <span class="atn">max</span>=<span class="atv">"100"</span> <span class="atn">low</span>=<span class="atv">"30"</span> <span class="atn">high</span>=<span class="atv">"80"</span>><<span class="tag">/meter</span>> </code></pre> - </div> + </div> - <div id="off-canvas" class="container"> - <h3 class="s-title"><a href="#off-canvas" class="anchor" aria-hidden="true">#</a>Off-canvas</h3> - <div class="docs-note"> - <p>The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS. </p> - <p>By default, the off-canvas menu is collapsed when the window width is smaller than or equal to <strong>960px</strong>.</p> - </div> - <div class="columns"> - <div class="column"> - <div class="off-canvas"> - <input type="checkbox" class="off-canvas-checkbox" id="sidebar-checkbox" name="sidebar-checkbox" hidden> - <label class="off-canvas-toggle btn btn-primary btn-lg" for="sidebar-checkbox"> - <i class="icon icon-menu"></i> - </label> - <div class="off-canvas-sidebar flex-centered"> - <span>Sidebar</span> - </div> - <div class="off-canvas-content"> - <div class="content"> - <h4>Lorem ipsum</h4> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> - <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> - <h4>Cupcake ipsum</h4> - <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p> - <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p> - <h4>Candy ipsum</h4> - <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p> - <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p> - </div> + <div id="off-canvas" class="container"> + <h3 class="s-title"><a href="#off-canvas" class="anchor" aria-hidden="true">#</a>Off-canvas</h3> + <div class="docs-note"> + <p>The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS. </p> + <p>By default, the off-canvas menu is collapsed when the window width is smaller than or equal to <strong>960px</strong>.</p> + </div> + <div class="columns"> + <div class="column"> + <div class="off-canvas"> + <input type="checkbox" class="off-canvas-checkbox" id="sidebar-checkbox" name="sidebar-checkbox" hidden> + <label class="off-canvas-toggle btn btn-primary btn-lg" for="sidebar-checkbox"> + <i class="icon icon-menu"></i> + </label> + <div class="off-canvas-sidebar flex-centered"> + <span>Sidebar</span> + </div> + <div class="off-canvas-content"> + <div class="content"> + <h4>Lorem ipsum</h4> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> + <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> + <h4>Cupcake ipsum</h4> + <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p> + <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p> + <h4>Candy ipsum</h4> + <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p> + <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p> </div> </div> </div> </div> + </div> <!-- off-canvas --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"off-canvas"</span>> @@ -790,37 +789,37 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"off-canvas-sidebar"</span>> <span class="com"><!-- off-screen sidebar --></span> <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"off-canvas-body"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"off-canvas-content"</span>> <span class="com"><!-- off-screen content --></span> <<span class="tag">/div</span>> <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="parallax" class="container"> - <h3 class="s-title"><a href="#parallax" class="anchor" aria-hidden="true">#</a>Parallax</h3> - <div class="docs-note"> - <p>The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p> - </div> - <div class="columns"> - <div class="column col-sm-12 col-8 col-mx-auto"> - <div class="parallax"> - <div class="parallax-top-left"></div> - <div class="parallax-top-right"></div> - <div class="parallax-bottom-left"></div> - <div class="parallax-bottom-right"></div> - <div class="parallax-content"> - <div class="parallax-front"> - <h2>tvOS parallax demo</h2> - </div> - <div class="parallax-back"> - <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper"> - </div> + <div id="parallax" class="container"> + <h3 class="s-title"><a href="#parallax" class="anchor" aria-hidden="true">#</a>Parallax</h3> + <div class="docs-note"> + <p>The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p> + </div> + <div class="columns"> + <div class="column col-sm-12 col-8 col-mx-auto"> + <div class="parallax"> + <div class="parallax-top-left"></div> + <div class="parallax-top-right"></div> + <div class="parallax-bottom-left"></div> + <div class="parallax-bottom-right"></div> + <div class="parallax-content"> + <div class="parallax-front"> + <h2>tvOS parallax demo</h2> + </div> + <div class="parallax-back"> + <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper"> </div> </div> </div> </div> + </div> <!-- parallax --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"parallax"</span>> @@ -839,121 +838,121 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="progress" class="container"> - <h3 class="s-title"><a href="#progress" class="anchor" aria-hidden="true">#</a>Progress</h3> - <div class="docs-note"> - <p>The Progress indicates the progress completion of a task.</p> + <div id="progress" class="container"> + <h3 class="s-title"><a href="#progress" class="anchor" aria-hidden="true">#</a>Progress</h3> + <div class="docs-note"> + <p>The Progress indicates the progress completion of a task.</p> + </div> + <div class="columns"> + <div class="column col-3 col-xs-12"> + <progress class="progress" value="75" max="100"></progress> </div> - <div class="columns"> - <div class="column col-3 col-xs-12"> - <progress class="progress" value="75" max="100"></progress> - </div> - <div class="column col-3 col-xs-12"> - <progress class="progress" value="50" max="100"></progress> - </div> - <div class="column col-3 col-xs-12"> - <progress class="progress" value="25" max="100"></progress> - </div> - <div class="column col-3 col-xs-12"> - <progress class="progress" max="100"></progress> - </div> + <div class="column col-3 col-xs-12"> + <progress class="progress" value="50" max="100"></progress> + </div> + <div class="column col-3 col-xs-12"> + <progress class="progress" value="25" max="100"></progress> </div> + <div class="column col-3 col-xs-12"> + <progress class="progress" max="100"></progress> + </div> + </div> <!-- progress --> <pre class="code" data-lang="HTML"><code><<span class="tag">progress</span> <span class="atn">class</span>=<span class="atv">"progress"</span> <span class="atn">value</span>=<span class="atv">"25"</span> <span class="atn">max</span>=<span class="atv">"100"</span>><<span class="tag">/progress</span>> <<span class="tag">progress</span> <span class="atn">class</span>=<span class="atv">"progress"</span> <span class="atn">max</span>=<span class="atv">"100"</span>><<span class="tag">/progress</span>> </code></pre> - </div> + </div> - <div id="sliders" class="container"> - <h3 class="s-title"><a href="#sliders" class="anchor" aria-hidden="true">#</a>Sliders</h3> - <div class="docs-note"> - <p>Sliders are for selecting values from ranges.</p> + <div id="sliders" class="container"> + <h3 class="s-title"><a href="#sliders" class="anchor" aria-hidden="true">#</a>Sliders</h3> + <div class="docs-note"> + <p>Sliders are for selecting values from ranges.</p> + </div> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <input class="slider tooltip" data-tooltip="50" type="range" min="0" max="100" value="50"> </div> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <input class="slider tooltip" data-tooltip="50" type="range" min="0" max="100" value="50"> - </div> - <div class="column col-6 col-xs-12"> - <input class="slider" type="range" min="0" max="100" value="50" disabled> - </div> + <div class="column col-6 col-xs-12"> + <input class="slider" type="range" min="0" max="100" value="50" disabled> </div> + </div> <!-- sliders --> <pre class="code" data-lang="HTML"><code><<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"slider"</span> <span class="atn">type</span>=<span class="atv">"range"</span> <span class="atn">min</span>=<span class="atv">"0"</span> <span class="atn">max</span>=<span class="atv">"100"</span> <span class="atn">value</span>=<span class="atv">"50"</span> <span class="tag">/</span>> </code></pre> - </div> + </div> - <div id="timelines" class="container"> - <h3 class="s-title"><a href="#timelines" class="anchor" aria-hidden="true">#</a>Timelines</h3> - <div class="docs-note"> - <p>Timelines are ordered sequences of activities.</p> - </div> - <div class="columns"> - <div class="column col-9 col-sm-12"> - <div class="timeline"> - <div class="timeline-item" id="timeline-example-1"> - <div class="timeline-left"> - <a href="#timeline-example-1" class="timeline-icon tooltip" data-tooltip="March 2016"></a> - </div> - <div class="timeline-content"> - <div class="tile"> - <div class="tile-content"> - <p class="tile-subtitle">March 2016</p> - <p class="tile-title">Initial commit</p> - </div> + <div id="timelines" class="container"> + <h3 class="s-title"><a href="#timelines" class="anchor" aria-hidden="true">#</a>Timelines</h3> + <div class="docs-note"> + <p>Timelines are ordered sequences of activities.</p> + </div> + <div class="columns"> + <div class="column col-9 col-sm-12"> + <div class="timeline"> + <div class="timeline-item" id="timeline-example-1"> + <div class="timeline-left"> + <a href="#timeline-example-1" class="timeline-icon tooltip" data-tooltip="March 2016"></a> + </div> + <div class="timeline-content"> + <div class="tile"> + <div class="tile-content"> + <p class="tile-subtitle">March 2016</p> + <p class="tile-title">Initial commit</p> </div> </div> </div> - <div class="timeline-item" id="timeline-example-2"> - <div class="timeline-left"> - <a href="#timeline-example-2" class="timeline-icon icon-lg tooltip" data-tooltip="February 2017"> - <i class="icon icon-check"></i> - </a> - </div> - <div class="timeline-content"> - <div class="tile"> - <div class="tile-content"> - <p class="tile-subtitle">February 2017</p> - <p class="tile-title">New Documents experience</p> - <p class="tile-title"><a href="components.html#bars">Bars</a>: represent the progress of a task</p> - <p class="tile-title"><a href="components.html#steps">Steps</a>: progress indicators of a sequence of task steps</p> - <p class="tile-title"><a href="components.html#tiles">Tiles</a>: repeatable or embeddable information blocks</p> - </div> - <div class="tile-action"> - <button class="btn">View</button> - </div> + </div> + <div class="timeline-item" id="timeline-example-2"> + <div class="timeline-left"> + <a href="#timeline-example-2" class="timeline-icon icon-lg tooltip" data-tooltip="February 2017"> + <i class="icon icon-check"></i> + </a> + </div> + <div class="timeline-content"> + <div class="tile"> + <div class="tile-content"> + <p class="tile-subtitle">February 2017</p> + <p class="tile-title">New Documents experience</p> + <p class="tile-title"><a href="components.html#bars">Bars</a>: represent the progress of a task</p> + <p class="tile-title"><a href="components.html#steps">Steps</a>: progress indicators of a sequence of task steps</p> + <p class="tile-title"><a href="components.html#tiles">Tiles</a>: repeatable or embeddable information blocks</p> + </div> + <div class="tile-action"> + <button class="btn">View</button> </div> </div> </div> - <div class="timeline-item" id="timeline-example-3"> - <div class="timeline-left"> - <a href="#timeline-example-3" class="timeline-icon icon-lg tooltip" data-tooltip="March 2017"> - <i class="icon icon-check"></i> - </a> - </div> - <div class="timeline-content"> - <div class="tile"> - <div class="tile-content"> - <p class="tile-subtitle">March 2017</p> - <p class="tile-title"><a href="elements.html#icons">Icons</a>: single-element, responsive and pure CSS icons</p> - <p class="tile-title"><a href="components.html#popovers">Popovers</a>: small overlay content containers</p> - <p class="tile-title"><a href="experimentals.html#calendars">Calendars</a>: date or date range picker and events display</p> - <p class="tile-title"><a href="experimentals.html#carousels">Carousels</a>: slideshows for cycling images</p> - </div> - <div class="tile-action"> - <button class="btn">View</button> - </div> + </div> + <div class="timeline-item" id="timeline-example-3"> + <div class="timeline-left"> + <a href="#timeline-example-3" class="timeline-icon icon-lg tooltip" data-tooltip="March 2017"> + <i class="icon icon-check"></i> + </a> + </div> + <div class="timeline-content"> + <div class="tile"> + <div class="tile-content"> + <p class="tile-subtitle">March 2017</p> + <p class="tile-title"><a href="elements.html#icons">Icons</a>: single-element, responsive and pure CSS icons</p> + <p class="tile-title"><a href="components.html#popovers">Popovers</a>: small overlay content containers</p> + <p class="tile-title"><a href="experimentals.html#calendars">Calendars</a>: date or date range picker and events display</p> + <p class="tile-title"><a href="experimentals.html#carousels">Carousels</a>: slideshows for cycling images</p> + </div> + <div class="tile-action"> + <button class="btn">View</button> </div> </div> </div> </div> </div> </div> + </div> <!-- timelines --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"timeline"</span>> @@ -980,14 +979,13 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <footer class="s-footer"> - <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p> - <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> - </footer> + <footer class="docs-footer"> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p> + <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> + </footer> - </div> </div> </div> diff --git a/docs/getting-started.html b/docs/getting-started.html index a688115..7b6e6ed 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -9,301 +9,301 @@ <title>Getting started - Spectre.css CSS Framework</title> <link rel="stylesheet" href="dist/spectre.css"> <link rel="stylesheet" href="dist/spectre-icons.css"> + <link rel="stylesheet" href="dist/spectre-exp.css"> <link rel="stylesheet" href="css/docs.css"> </head> <body> - <div class="s-container container"> - <div class="columns"> - <div id="sidebar" class="s-sidebar"> - <div class="s-brand"> - <a href="index.html" class="s-logo"> - <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>Spectre.css</h2> - </a> - </div> - <div class="s-nav"> - <div class="accordion-container"> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden checked> - <label class="accordion-header c-hand" for="docs-accordion-1"> - Getting started - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="getting-started.html#introduction">Introduction</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#installation">Installation</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#custom">Custom version</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#browsers">Browser support</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#whatsnew">What's new</a> - </li> - </ul> - </div> + <div class="docs-container off-canvas"> + <div class="docs-navbar"> + <a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"> + <i class="icon icon-menu"></i> + </a> + <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> + </div> + + <div id="sidebar" class="docs-sidebar off-canvas-sidebar"> + <div class="docs-brand"> + <a href="index.html" class="docs-logo"> + <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> + <h2>Spectre.css</h2> + </a> + </div> + <div class="docs-nav"> + <div class="accordion-container"> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden checked> + <label class="accordion-header c-hand" for="docs-accordion-1"> + Getting started + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="getting-started.html#introduction">Introduction</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#installation">Installation</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#custom">Custom version</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#browsers">Browser support</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#whatsnew">What's new</a> + </li> + </ul> </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-2"> - Elements - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="elements.html#typography">Typography</a> - </li> - <li class="menu-item"> - <a href="elements.html#tables">Tables</a> - </li> - <li class="menu-item"> - <a href="elements.html#buttons">Buttons</a> - </li> - <li class="menu-item"> - <a href="elements.html#forms">Forms</a> - </li> - <li class="menu-item"> - <a href="elements.html#icons">Icons</a> - </li> - <li class="menu-item"> - <a href="elements.html#labels">Labels</a> - </li> - <li class="menu-item"> - <a href="elements.html#codes">Codes</a> - </li> - <li class="menu-item"> - <a href="elements.html#media">Media</a> - </li> - </ul> - </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-2"> + Elements + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="elements.html#typography">Typography</a> + </li> + <li class="menu-item"> + <a href="elements.html#tables">Tables</a> + </li> + <li class="menu-item"> + <a href="elements.html#buttons">Buttons</a> + </li> + <li class="menu-item"> + <a href="elements.html#forms">Forms</a> + </li> + <li class="menu-item"> + <a href="elements.html#icons">Icons</a> + </li> + <li class="menu-item"> + <a href="elements.html#labels">Labels</a> + </li> + <li class="menu-item"> + <a href="elements.html#codes">Codes</a> + </li> + <li class="menu-item"> + <a href="elements.html#media">Media</a> + </li> + </ul> </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-3"> - Layout - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="layout.html#grid">Flexbox grid</a> - </li> - <li class="menu-item"> - <a href="layout.html#responsive">Responsive</a> - </li> - <li class="menu-item"> - <a href="layout.html#navbar">Navbar</a> - </li> - </ul> - </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-3"> + Layout + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="layout.html#grid">Flexbox grid</a> + </li> + <li class="menu-item"> + <a href="layout.html#responsive">Responsive</a> + </li> + <li class="menu-item"> + <a href="layout.html#navbar">Navbar</a> + </li> + </ul> </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-4"> - Components - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="components.html#accordions">Accordions</a> - </li> - <li class="menu-item"> - <a href="components.html#autocomplete">Autocomplete</a> - </li> - <li class="menu-item"> - <a href="components.html#avatars">Avatars</a> - </li> - <li class="menu-item"> - <a href="components.html#badges">Badges</a> - </li> - <li class="menu-item"> - <a href="components.html#bars">Bars</a> - </li> - <li class="menu-item"> - <a href="components.html#breadcrumbs">Breadcrumbs</a> - </li> - <li class="menu-item"> - <a href="components.html#cards">Cards</a> - </li> - <li class="menu-item"> - <a href="components.html#chips">Chips</a> - </li> - <li class="menu-item"> - <a href="components.html#empty">Empty states</a> - </li> - <li class="menu-item"> - <a href="components.html#menus">Menus</a> - </li> - <li class="menu-item"> - <a href="components.html#modals">Modals</a> - </li> - <li class="menu-item"> - <a href="components.html#navs">Navs</a> - </li> - <li class="menu-item"> - <a href="components.html#pagination">Pagination</a> - </li> - <li class="menu-item"> - <a href="components.html#panels">Panels</a> - </li> - <li class="menu-item"> - <a href="components.html#popovers">Popovers</a> - </li> - <li class="menu-item"> - <a href="components.html#steps">Steps</a> - </li> - <li class="menu-item"> - <a href="components.html#tabs">Tabs</a> - </li> - <li class="menu-item"> - <a href="components.html#tiles">Tiles</a> - </li> - <li class="menu-item"> - <a href="components.html#toasts">Toasts</a> - </li> - <li class="menu-item"> - <a href="components.html#tooltips">Tooltips</a> - </li> - </ul> - </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-4"> + Components + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="components.html#accordions">Accordions</a> + </li> + <li class="menu-item"> + <a href="components.html#autocomplete">Autocomplete</a> + </li> + <li class="menu-item"> + <a href="components.html#avatars">Avatars</a> + </li> + <li class="menu-item"> + <a href="components.html#badges">Badges</a> + </li> + <li class="menu-item"> + <a href="components.html#bars">Bars</a> + </li> + <li class="menu-item"> + <a href="components.html#breadcrumbs">Breadcrumbs</a> + </li> + <li class="menu-item"> + <a href="components.html#cards">Cards</a> + </li> + <li class="menu-item"> + <a href="components.html#chips">Chips</a> + </li> + <li class="menu-item"> + <a href="components.html#empty">Empty states</a> + </li> + <li class="menu-item"> + <a href="components.html#menus">Menus</a> + </li> + <li class="menu-item"> + <a href="components.html#modals">Modals</a> + </li> + <li class="menu-item"> + <a href="components.html#navs">Navs</a> + </li> + <li class="menu-item"> + <a href="components.html#pagination">Pagination</a> + </li> + <li class="menu-item"> + <a href="components.html#panels">Panels</a> + </li> + <li class="menu-item"> + <a href="components.html#popovers">Popovers</a> + </li> + <li class="menu-item"> + <a href="components.html#steps">Steps</a> + </li> + <li class="menu-item"> + <a href="components.html#tabs">Tabs</a> + </li> + <li class="menu-item"> + <a href="components.html#tiles">Tiles</a> + </li> + <li class="menu-item"> + <a href="components.html#toasts">Toasts</a> + </li> + <li class="menu-item"> + <a href="components.html#tooltips">Tooltips</a> + </li> + </ul> </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-5"> - Utilities - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="utilities.html#colors">Colors</a> - </li> - <li class="menu-item"> - <a href="utilities.html#cursors">Cursors</a> - </li> - <li class="menu-item"> - <a href="utilities.html#display">Display</a> - </li> - <li class="menu-item"> - <a href="utilities.html#divider">Divider</a> - </li> - <li class="menu-item"> - <a href="utilities.html#loading">Loading</a> - </li> - <li class="menu-item"> - <a href="utilities.html#position">Position</a> - </li> - <li class="menu-item"> - <a href="utilities.html#shapes">Shapes</a> - </li> - <li class="menu-item"> - <a href="utilities.html#text">Text</a> - </li> - </ul> - </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-5"> + Utilities + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="utilities.html#colors">Colors</a> + </li> + <li class="menu-item"> + <a href="utilities.html#cursors">Cursors</a> + </li> + <li class="menu-item"> + <a href="utilities.html#display">Display</a> + </li> + <li class="menu-item"> + <a href="utilities.html#divider">Divider</a> + </li> + <li class="menu-item"> + <a href="utilities.html#loading">Loading</a> + </li> + <li class="menu-item"> + <a href="utilities.html#position">Position</a> + </li> + <li class="menu-item"> + <a href="utilities.html#shapes">Shapes</a> + </li> + <li class="menu-item"> + <a href="utilities.html#text">Text</a> + </li> + </ul> </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-6"> - Experimentals - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="experimentals.html#calendars">Calendars</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#carousels">Carousels</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#comparison">Comparison sliders</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#filters">Filters</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#meters">Meters</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#off-canvas">Off-canvas</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#parallax">Parallax</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#progress">Progress</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#sliders">Sliders</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#timelines">Timelines</a> - </li> - </ul> - </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-6"> + Experimentals + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="experimentals.html#calendars">Calendars</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#carousels">Carousels</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#comparison">Comparison sliders</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#filters">Filters</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#meters">Meters</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#off-canvas">Off-canvas</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#parallax">Parallax</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#progress">Progress</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#sliders">Sliders</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#timelines">Timelines</a> + </li> + </ul> </div> </div> </div> </div> - <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> - <div class="s-navbar"> - <div class="menu-btn"> - <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a> - </div> - <div class="float-btn"> - <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> + </div> + + <a class="off-canvas-overlay" href="#close"></a> + + <div id="content" class="docs-content off-canvas-content"> + <div id="introduction" class="container"> + <h3 class="s-title"><a href="#introduction" class="anchor" aria-hidden="true">#</a>Introduction</h3> + <div class="docs-note"> + <p><strong>Spectre.css</strong> is a lightweight, responsive and modern CSS framework for faster and extensible development.</p> + <p>Spectre provides basic styles for typography and elements, flexbox based responsive layout system, CSS components and utilities with best practice coding and consistent design language.</p> </div> </div> - <div id="content" class="s-content"> - <div id="introduction" class="container"> - <h3 class="s-title"><a href="#introduction" class="anchor" aria-hidden="true">#</a>Introduction</h3> - <div class="docs-note"> - <p><strong>Spectre.css</strong> is a lightweight, responsive and modern CSS framework for faster and extensible development.</p> - <p>Spectre provides basic styles for typography and elements, flexbox based responsive layout system, CSS components and utilities with best practice coding and consistent design language.</p> + <div class="container"> + <div class="docs-ad"> + <div class="hide-md"> + <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <!-- GitHub-lg --> + <ins class="adsbygoogle" + style="display:inline-block;width:728px;height:90px" + data-ad-client="ca-pub-2225124559530218" + data-ad-slot="9894180784"></ins> + <script> + (adsbygoogle = window.adsbygoogle || []).push({}); + </script> </div> - </div> - - <div class="container"> - <div class="docs-ad"> - <div class="hide-md"> - <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> - <!-- GitHub-lg --> - <ins class="adsbygoogle" - style="display:inline-block;width:728px;height:90px" - data-ad-client="ca-pub-2225124559530218" - data-ad-slot="9894180784"></ins> - <script> - (adsbygoogle = window.adsbygoogle || []).push({}); - </script> - </div> - <div class="show-md"> - <!-- GitHub-sm --> - <ins class="adsbygoogle" - style="display:inline-block;width:300px;height:250px" - data-ad-client="ca-pub-2225124559530218" - data-ad-slot="9278881734"></ins> - <script> - (adsbygoogle = window.adsbygoogle || []).push({}); - </script> - </div> + <div class="show-md"> + <!-- GitHub-sm --> + <ins class="adsbygoogle" + style="display:inline-block;width:300px;height:250px" + data-ad-client="ca-pub-2225124559530218" + data-ad-slot="9278881734"></ins> + <script> + (adsbygoogle = window.adsbygoogle || []).push({}); + </script> </div> </div> + </div> - <div id="installation" class="container"> - <h3 class="s-title"><a href="#installation" class="anchor" aria-hidden="true">#</a>Installation</h3> - <div class="docs-note"> - <p>There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use package managers.</p> - </div> - <div class="docs-note"> - <p class="h5">Install manually</p> - <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/releases" target="_blank">Spectre CSS file</a> (core ~10KB min+gzip):</p> - <p><a href="https://github.com/picturepan2/spectre/releases" target="_blank" class="btn btn-primary">Download Spectre.css</a></p> - <p>Include <code>spectre.css</code> located in <strong>/docs/dist</strong> in your website or Web app <head>. Also, you can add <code>spectre-icons.css</code> and <code>spectre-exp.css</code> accordingly.</p> - </div> + <div id="installation" class="container"> + <h3 class="s-title"><a href="#installation" class="anchor" aria-hidden="true">#</a>Installation</h3> + <div class="docs-note"> + <p>There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use package managers.</p> + </div> + <div class="docs-note"> + <p class="h5">Install manually</p> + <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/releases" target="_blank">Spectre CSS file</a> (core ~10KB min+gzip):</p> + <p><a href="https://github.com/picturepan2/spectre/releases" target="_blank" class="btn btn-primary">Download Spectre.css</a></p> + <p>Include <code>spectre.css</code> located in <strong>/docs/dist</strong> in your website or Web app <head>. Also, you can add <code>spectre-icons.css</code> and <code>spectre-exp.css</code> accordingly.</p> + </div> <!-- install manually --> <pre class="code" data-lang="HTML"><code><<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">"stylesheet"</span> <span class="atn">href</span>=<span class="atv">"spectre.min.css"</span>> @@ -311,10 +311,10 @@ <<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">"stylesheet"</span> <span class="atn">href</span>=<span class="atv">"spectre-icons.min.css"</span>> </code></pre> - <div class="docs-note"> - <p class="h5">Install from CDN</p> - <p>Alternatively, you can use the <a href="https://unpkg.com/" target="_blank">unpkg</a> or <a href="https://cdnjs.com/libraries/spectre.css" target="_blank">cdnjs</a> CDN to load compiled Spectre.css.</p> - </div> + <div class="docs-note"> + <p class="h5">Install from CDN</p> + <p>Alternatively, you can use the <a href="https://unpkg.com/" target="_blank">unpkg</a> or <a href="https://cdnjs.com/libraries/spectre.css" target="_blank">cdnjs</a> CDN to load compiled Spectre.css.</p> + </div> <!-- install from CDN --> <pre class="code" data-lang="HTML"><code><<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">"stylesheet"</span> <span class="atn">href</span>=<span class="atv">"https://unpkg.com/spectre.css/dist/spectre.min.css"</span>> @@ -322,65 +322,65 @@ <<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">"stylesheet"</span> <span class="atn">href</span>=<span class="atv">"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"</span>> </code></pre> - <div class="docs-note"> - <p class="h5">Install with NPM</p> - </div> + <div class="docs-note"> + <p class="h5">Install with NPM</p> + </div> <!-- install with npm --> <pre class="code" data-lang="Bash"><code><span class="tag">$</span>npm install <span class="atv">spectre.css</span> --save </code></pre> - <div class="docs-note"> - <p class="h5">Install with Yarn</p> - </div> + <div class="docs-note"> + <p class="h5">Install with Yarn</p> + </div> <!-- install with yarn --> <pre class="code" data-lang="Bash"><code><span class="tag">$</span>yarn add <span class="atv">spectre.css</span> </code></pre> - <div class="docs-note"> - <p class="h5">Install with Bower</p> - </div> + <div class="docs-note"> + <p class="h5">Install with Bower</p> + </div> <!-- install with bower --> <pre class="code" data-lang="Bash"><code><span class="tag">$</span>bower install <span class="atv">spectre.css</span> --save </code></pre> - </div> + </div> - <div id="custom" class="container"> - <h3 class="s-title"><a href="#custom" class="anchor" aria-hidden="true">#</a>Custom version</h3> - <div class="docs-note"> - <p>You can customize your version of Spectre.css by editing SASS files in <code>/src</code> directory or removing unneeded components from <code>.scss</code> source files.</p> - <p><a href="https://github.com/picturepan2/spectre/" target="_blank" class="btn btn-primary">SASS Source Code</a></p> - <p>If you are looking for LESS version of Spectre.css, please switch to <code>LESS</code> branch.</p> - <p><a href="https://github.com/picturepan2/spectre/tree/less" target="_blank" class="btn">LESS Branch</a></p> - </div> - <h4 id="compiling" class="s-subtitle">Compiling CSS</h4> - <div class="docs-note"> - <p>Spectre uses <a href="http://gulpjs.com/" target="_blank">Gulp</a> for compiling CSS. Firstly you need to <a href="https://www.npmjs.com/get-npm" target="_blank">install NPM</a>, which is used to manage Gulp and other dependencies.</p> - <p>Then, you can build the CSS file from the command line:</p> - <ol> - <li>Navigate to the root directory of Spectre.</li> - <li>Run <code>npm install</code>. NPM will install all dev dependencies as listed in package.json.</li> - <li>When completed, run <code>gulp build</code> task to compile SASS to CSS and minify files.</li> - <li>You can find compiled CSS files in <code>/dist</code> directory.</li> - </ol> - <p>All available Gulp tasks:</p> - <ul> - <li><code>gulp build</code> - compile SASS to CSS and minify files (default)</li> - <li><code>gulp docs</code> - compile Docs related files</li> - <li><code>gulp watch</code> - watch file changes and re-compile CSS files</li> - </ul> - </div> - <h4 id="importing" class="s-subtitle">Importing SASS</h4> - <div class="docs-note"> - <p>It is recommended to custom Spectre by importing SASS source files to your projects. In this way, you can keep Spectre up to date without conflicts, since Spectre code and your custom code are separate.</p> - <ul> - <li>First, create your own project and install Spectre via <a href="#installation">NPM or other package managers</a>.</li> - <li>Then create your <code>project-name.scss</code> file in the root folder. You can use <code>project-name.scss</code> to define your variables.</li> - <li>Compile the SASS file to CSS to get the custom version of Spectre.</li> - </ul> + <div id="custom" class="container"> + <h3 class="s-title"><a href="#custom" class="anchor" aria-hidden="true">#</a>Custom version</h3> + <div class="docs-note"> + <p>You can customize your version of Spectre.css by editing SASS files in <code>/src</code> directory or removing unneeded components from <code>.scss</code> source files.</p> + <p><a href="https://github.com/picturepan2/spectre/" target="_blank" class="btn btn-primary">SASS Source Code</a></p> + <p>If you are looking for LESS version of Spectre.css, please switch to <code>LESS</code> branch.</p> + <p><a href="https://github.com/picturepan2/spectre/tree/less" target="_blank" class="btn">LESS Branch</a></p> + </div> + <h4 id="compiling" class="s-subtitle">Compiling CSS</h4> + <div class="docs-note"> + <p>Spectre uses <a href="http://gulpjs.com/" target="_blank">Gulp</a> for compiling CSS. Firstly you need to <a href="https://www.npmjs.com/get-npm" target="_blank">install NPM</a>, which is used to manage Gulp and other dependencies.</p> + <p>Then, you can build the CSS file from the command line:</p> + <ol> + <li>Navigate to the root directory of Spectre.</li> + <li>Run <code>npm install</code>. NPM will install all dev dependencies as listed in package.json.</li> + <li>When completed, run <code>gulp build</code> task to compile SASS to CSS and minify files.</li> + <li>You can find compiled CSS files in <code>/dist</code> directory.</li> + </ol> + <p>All available Gulp tasks:</p> + <ul> + <li><code>gulp build</code> - compile SASS to CSS and minify files (default)</li> + <li><code>gulp docs</code> - compile Docs related files</li> + <li><code>gulp watch</code> - watch file changes and re-compile CSS files</li> + </ul> + </div> + <h4 id="importing" class="s-subtitle">Importing SASS</h4> + <div class="docs-note"> + <p>It is recommended to custom Spectre by importing SASS source files to your projects. In this way, you can keep Spectre up to date without conflicts, since Spectre code and your custom code are separate.</p> + <ul> + <li>First, create your own project and install Spectre via <a href="#installation">NPM or other package managers</a>.</li> + <li>Then create your <code>project-name.scss</code> file in the root folder. You can use <code>project-name.scss</code> to define your variables.</li> + <li>Compile the SASS file to CSS to get the custom version of Spectre.</li> + </ul> <!-- importing --> <pre class="code" data-lang="SASS"><code><span class="com">// Example of project-name.scss</span> @@ -392,7 +392,7 @@ <span class="tag">@import</span> "node_modules/spectre.css/src/spectre"; </code></pre> - <p>Alternatively, you can create custom <code>_variables.scss</code> and import it to <code>project-name.scss</code>. </p> + <p>Alternatively, you can create custom <code>_variables.scss</code> and import it to <code>project-name.scss</code>. </p> <!-- importing --> <pre class="code" data-lang="SASS"><code><span class="com">// Example of project-name.scss</span> @@ -403,9 +403,9 @@ <span class="tag">@import</span> "node_modules/spectre.css/src/forms"; </code></pre> - </div> + </div> - <h4 id="folders" class="s-subtitle">Folder Structure</h4> + <h4 id="folders" class="s-subtitle">Folder Structure</h4> <!-- folder structure --> <pre class="code"><code>spectre/ @@ -448,97 +448,97 @@ └── ... </code></pre> - <h4 id="variables" class="s-subtitle"><a href="#variables" class="anchor" aria-hidden="true">#</a>Variables</h4> - <div class="docs-note"> - <p>Spectre.css is designed with consistent design language. You can use your own variables to create your new or match existing design. All variables in <code>_variables.scss</code> include <code>!default</code> flag. You can redefine the variables to override the values.</p> - </div> - <h5 id="variables-colors" class="s-subtitle">Colors</h5> - <div class="columns"> - <div class="column col-3 col-md-6"> - <div class="docs-color" style="background:#5755d9;color:#fff;"> - <div class="color-title">#5755d9</div> - <div class="color-subtitle">Primary</div> - </div> + <h4 id="variables" class="s-subtitle"><a href="#variables" class="anchor" aria-hidden="true">#</a>Variables</h4> + <div class="docs-note"> + <p>Spectre.css is designed with consistent design language. You can use your own variables to create your new or match existing design. All variables in <code>_variables.scss</code> include <code>!default</code> flag. You can redefine the variables to override the values.</p> + </div> + <h5 id="variables-colors" class="s-subtitle">Colors</h5> + <div class="columns"> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#5755d9;color:#fff;"> + <div class="color-title">#5755d9</div> + <div class="color-subtitle">Primary</div> </div> - <div class="column col-3 col-md-6"> - <div class="docs-color" style="background:#f1f1fc;color:#5755d9;"> - <div class="color-title">#f1f1fc</div> - <div class="color-subtitle">Secondary</div> - </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#f1f1fc;color:#5755d9;"> + <div class="color-title">#f1f1fc</div> + <div class="color-subtitle">Secondary</div> </div> </div> - <div class="columns"> - <div class="column col-3 col-md-6"> - <div class="docs-color" style="background:#32b643;color:#fff;"> - <div class="color-title">#32b643</div> - <div class="color-subtitle">Success</div> - </div> + </div> + <div class="columns"> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#32b643;color:#fff;"> + <div class="color-title">#32b643</div> + <div class="color-subtitle">Success</div> </div> - <div class="column col-3 col-md-6"> - <div class="docs-color" style="background:#ffb700;color:#fff;"> - <div class="color-title">#ffb700</div> - <div class="color-subtitle">Warning</div> - </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#ffb700;color:#fff;"> + <div class="color-title">#ffb700</div> + <div class="color-subtitle">Warning</div> </div> - <div class="column col-3 col-md-6"> - <div class="docs-color" style="background:#e85600;color:#fff;"> - <div class="color-title">#e85600</div> - <div class="color-subtitle">Error</div> - </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#e85600;color:#fff;"> + <div class="color-title">#e85600</div> + <div class="color-subtitle">Error</div> </div> </div> - <div class="columns"> - <div class="column col-3 col-md-6"> - <div class="docs-color" style="background:#454d5d;color:#fff;"> - <div class="color-title">#454d5d</div> - <div class="color-subtitle">Dark</div> - </div> + </div> + <div class="columns"> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#454d5d;color:#fff;"> + <div class="color-title">#454d5d</div> + <div class="color-subtitle">Dark</div> </div> - <div class="column col-3 col-md-6"> - <div class="docs-color" style="background:#727e96;color:#fff;"> - <div class="color-title">#727e96</div> - <div class="color-subtitle">Gray dark</div> - </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#727e96;color:#fff;"> + <div class="color-title">#727e96</div> + <div class="color-subtitle">Gray dark</div> </div> - <div class="column col-3 col-md-6"> - <div class="docs-color" style="background:#acb3c2;color:#fff;"> - <div class="color-title">#acb3c2</div> - <div class="color-subtitle">Gray</div> - </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#acb3c2;color:#fff;"> + <div class="color-title">#acb3c2</div> + <div class="color-subtitle">Gray</div> </div> - <div class="column col-3 col-md-6"> - <div class="docs-color" style="background:#e7e9ed;color:#727e96;"> - <div class="color-title">#e7e9ed</div> - <div class="color-subtitle">Gray light</div> - </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#e7e9ed;color:#727e96;"> + <div class="color-title">#e7e9ed</div> + <div class="color-subtitle">Gray light</div> </div> - <div class="column col-3 col-md-6"> - <div class="docs-color" style="background:#f0f1f4;color:#727e96;"> - <div class="color-title">#f0f1f4</div> - <div class="color-subtitle">Border</div> - </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#f0f1f4;color:#727e96;"> + <div class="color-title">#f0f1f4</div> + <div class="color-subtitle">Border</div> </div> - <div class="column col-3 col-md-6"> - <div class="docs-color" style="background:#f8f9fa;color:#727e96;"> - <div class="color-title">#f8f9fa</div> - <div class="color-subtitle">Background</div> - </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#f8f9fa;color:#727e96;"> + <div class="color-title">#f8f9fa</div> + <div class="color-subtitle">Background</div> </div> - <div class="column col-3 col-md-6"> - <div class="docs-color" style="background:#fff;color:#727e96;"> - <div class="color-title">#fff</div> - <div class="color-subtitle">Light</div> - </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#fff;color:#727e96;"> + <div class="color-title">#fff</div> + <div class="color-subtitle">Light</div> </div> </div> + </div> - <h5 id="variables-buttons" class="s-subtitle">Buttons</h5> - <div class="docs-note"> - <p>There are 2 button variant mixins in <code>_mixins.scss</code> to generate different color variants. </p> - <ul> - <li>@mixin button-variant(<code>$color</code>: $primary-color);</li> - <li>@mixin button-outline-variant(<code>$color</code>: $primary-color);</li> - </ul> + <h5 id="variables-buttons" class="s-subtitle">Buttons</h5> + <div class="docs-note"> + <p>There are 2 button variant mixins in <code>_mixins.scss</code> to generate different color variants. </p> + <ul> + <li>@mixin button-variant(<code>$color</code>: $primary-color);</li> + <li>@mixin button-outline-variant(<code>$color</code>: $primary-color);</li> + </ul> <!-- button variables --> <pre class="code" data-lang="SASS"><code><span class="com"><!-- filled button with the success color --></span> @@ -551,27 +551,28 @@ <span class="tag">@include</span> button-outline-variant(<span class="atv">$success-color</span>); } </code></pre> - </div> - - <h5 id="variables-sizes" class="s-subtitle">Sizes</h5> - <div class="docs-note"> - <p>The default REM (root em) size in Spectre.css is <code>20px</code>. </p> - <p>Please note in the Chinese/Japanese/Korean version, Chrome uses 12px as default minimum font size. That is why Spectre sets rem default html font size to <code>20px</code>, which is relatively easy to calculate. </p> - <p>Spectre uses <code>4px</code> as the unit size. Sizes of components are based on the unit size. </p> - </div> - - <h5 id="variables-custom-prefix" class="s-subtitle">Custom prefix</h5> - <div class="docs-note"> - <p>There is also a way to add custom prefix to all CSS classes. You can use <a href="https://www.npmjs.com/package/gulp-css-prefix" target="_blank">gulp-css-prefix</a> plugin and add a new Gulp task to enable it. </p> - </div> + + </div> + + <h5 id="variables-sizes" class="s-subtitle">Sizes</h5> + <div class="docs-note"> + <p>The default REM (root em) size in Spectre.css is <code>20px</code>. </p> + <p>Please note in the Chinese/Japanese/Korean version, Chrome uses 12px as default minimum font size. That is why Spectre sets rem default html font size to <code>20px</code>, which is relatively easy to calculate. </p> + <p>Spectre uses <code>4px</code> as the unit size. Sizes of components are based on the unit size. </p> + </div> + + <h5 id="variables-custom-prefix" class="s-subtitle">Custom prefix</h5> + <div class="docs-note"> + <p>There is also a way to add custom prefix to all CSS classes. You can use <a href="https://www.npmjs.com/package/gulp-css-prefix" target="_blank">gulp-css-prefix</a> plugin and add a new Gulp task to enable it. </p> + </div> <!-- custom prefix --> <pre class="code"><code><span class="tag">$</span> npm install <span class="atv">gulp-css-prefix</span> </code></pre> - <div class="docs-note"> - <p>To add <code>spectre-</code> to all classes, you can add the Gulp task to <code>gulpfile.js</code> file.</p> - </div> + <div class="docs-note"> + <p>To add <code>spectre-</code> to all classes, you can add the Gulp task to <code>gulpfile.js</code> file.</p> + </div> <!-- custom prefix --> <pre class="code"><code>var cssPrefix = require('<span class="atv">gulp-css-prefix</span>'); @@ -583,114 +584,113 @@ gulp.task('prefix', function() { }); </code></pre> - <div class="docs-note"> - <p>After you compile your version of Spectre in the /dist, run <code>gulp prefix</code> in the directory of Spectre.</p> - </div> + <div class="docs-note"> + <p>After you compile your version of Spectre in the /dist, run <code>gulp prefix</code> in the directory of Spectre.</p> </div> + </div> - <div id="accessibility" class="container"> - <h3 class="s-title"><a href="#accessibility" class="anchor" aria-hidden="true">#</a>Accessibility <small class="label">coming soon</small></h3> - </div> + <div id="accessibility" class="container"> + <h3 class="s-title"><a href="#accessibility" class="anchor" aria-hidden="true">#</a>Accessibility <small class="label">coming soon</small></h3> + </div> - <div id="browsers" class="container"> - <h3 class="s-title"><a href="#browsers" class="anchor" aria-hidden="true">#</a>Browser support</h3> - <div class="docs-note"> - <p>Spectre uses <a href="https://github.com/postcss/autoprefixer" target="_blank">Autoprefixer</a> to make most styles compatible with earlier browsers and <a href="https://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a> for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:</p> - <ul> - <li>Chrome <small class="label label-success">LAST 4</small></li> - <li>Microsoft Edge <small class="label label-success">LAST 4</small></li> - <li>Firefox <small class="label label-success text-uppercase">Extended Support Release</small></li> - <li>Safari <small class="label label-success">LAST 4</small></li> - <li>Opera <small class="label label-success">LAST 4</small></li> - <li>Internet Explorer 10+</li> - </ul> - </div> + <div id="browsers" class="container"> + <h3 class="s-title"><a href="#browsers" class="anchor" aria-hidden="true">#</a>Browser support</h3> + <div class="docs-note"> + <p>Spectre uses <a href="https://github.com/postcss/autoprefixer" target="_blank">Autoprefixer</a> to make most styles compatible with earlier browsers and <a href="https://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a> for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:</p> + <ul> + <li>Chrome <small class="label label-success">LAST 4</small></li> + <li>Microsoft Edge <small class="label label-success">LAST 4</small></li> + <li>Firefox <small class="label label-success text-uppercase">Extended Support Release</small></li> + <li>Safari <small class="label label-success">LAST 4</small></li> + <li>Opera <small class="label label-success">LAST 4</small></li> + <li>Internet Explorer 10+</li> + </ul> </div> + </div> - <div id="whatsnew" class="container"> - <h3 class="s-title"><a href="#whatsnew" class="anchor" aria-hidden="true">#</a>What's new</h3> - <div class="docs-note"> - <p><strong>September 2017</strong></p> - <ul> - <li> - <a href="experimentals.html#off-canvas">Off-canvas</a>: navigation layout that the sidebar can slide in and out of the viewport <small class="label label-primary">NEW</small> - </li> - </ul> - <p><strong>August 2017</strong></p> - <ul> - <li> - <a href="getting-started.html">Switch to SASS</a> <small class="label label-primary">NEW</small> - </li> - <li> - <a href="getting-started.html">New Docs Experience</a> <small class="label label-primary">NEW</small> - </li> - </ul> - <p><strong>April 2017</strong></p> - <ul> - <li> - <a href="components.html#accordions">Accordions</a>: used to toggle sections of content - </li> - <li> - <a href="experimentals.html#filters">Filters</a>: CSS only content filters - </li> - <li> - <a href="experimentals.html#comparison">Comparison Sliders</a>: sliders for comparing two images - </li> - <li> - <a href="experimentals.html#timelines">Timelines</a>: ordered sequences of activities - </li> - </ul> - <p><strong>March 2017</strong></p> - <ul> - <li> - <a href="elements.html#icons">Icons</a>: single-element, responsive and pure CSS icons - </li> - <li> - <a href="components.html#popovers">Popovers</a>: small overlay content containers - </li> - <li> - <a href="layout.html#panels">Panels</a>: flexible view container layout with auto-expand content section - </li> - <li> - <a href="experimentals.html#carousels">Carousels</a>: slideshows for cycling images - </li> - <li> - <a href="experimentals.html#calendars">Calendars</a>: date or date range picker and events display - </li> - </ul> - <p><strong>February 2017</strong></p> - <ul> - <li>New Documents experience</li> - <li> - <a href="components.html#bars">Bars</a>: represent the progress of a task or the value within the known range - </li> - <li> - <a href="components.html#steps">Steps</a>: progress indicators of a sequence of task steps - </li> - <li> - <a href="components.html#tiles">Tiles</a>: repeatable or embeddable information blocks - </li> - <li> - <a href="experimentals.html">Experimentals</a>: experimental elements and features - </li> - <li> - <a href="experimentals.html#meters">Meters</a>, <a href="experimentals.html#parallax">Parallax</a>, <a href="experimentals.html#progress">Progress</a> and <a href="experimentals.html#sliders">Sliders</a> - </li> - </ul> - <p><strong>March 2016</strong></p> - <ul> - <li>Initial commit</li> - </ul> - <p><a href="https://github.com/picturepan2/spectre/releases" target="_blank" class="btn btn-primary">Releases</a></p> - </div> + <div id="whatsnew" class="container"> + <h3 class="s-title"><a href="#whatsnew" class="anchor" aria-hidden="true">#</a>What's new</h3> + <div class="docs-note"> + <p><strong>September 2017</strong></p> + <ul> + <li> + <a href="experimentals.html#off-canvas">Off-canvas</a>: navigation layout that the sidebar can slide in and out of the viewport <small class="label label-primary">NEW</small> + </li> + </ul> + <p><strong>August 2017</strong></p> + <ul> + <li> + <a href="getting-started.html">Switch to SASS</a> <small class="label label-primary">NEW</small> + </li> + <li> + <a href="getting-started.html">New Docs Experience</a> <small class="label label-primary">NEW</small> + </li> + </ul> + <p><strong>April 2017</strong></p> + <ul> + <li> + <a href="components.html#accordions">Accordions</a>: used to toggle sections of content + </li> + <li> + <a href="experimentals.html#filters">Filters</a>: CSS only content filters + </li> + <li> + <a href="experimentals.html#comparison">Comparison Sliders</a>: sliders for comparing two images + </li> + <li> + <a href="experimentals.html#timelines">Timelines</a>: ordered sequences of activities + </li> + </ul> + <p><strong>March 2017</strong></p> + <ul> + <li> + <a href="elements.html#icons">Icons</a>: single-element, responsive and pure CSS icons + </li> + <li> + <a href="components.html#popovers">Popovers</a>: small overlay content containers + </li> + <li> + <a href="layout.html#panels">Panels</a>: flexible view container layout with auto-expand content section + </li> + <li> + <a href="experimentals.html#carousels">Carousels</a>: slideshows for cycling images + </li> + <li> + <a href="experimentals.html#calendars">Calendars</a>: date or date range picker and events display + </li> + </ul> + <p><strong>February 2017</strong></p> + <ul> + <li>New Documents experience</li> + <li> + <a href="components.html#bars">Bars</a>: represent the progress of a task or the value within the known range + </li> + <li> + <a href="components.html#steps">Steps</a>: progress indicators of a sequence of task steps + </li> + <li> + <a href="components.html#tiles">Tiles</a>: repeatable or embeddable information blocks + </li> + <li> + <a href="experimentals.html">Experimentals</a>: experimental elements and features + </li> + <li> + <a href="experimentals.html#meters">Meters</a>, <a href="experimentals.html#parallax">Parallax</a>, <a href="experimentals.html#progress">Progress</a> and <a href="experimentals.html#sliders">Sliders</a> + </li> + </ul> + <p><strong>March 2016</strong></p> + <ul> + <li>Initial commit</li> + </ul> + <p><a href="https://github.com/picturepan2/spectre/releases" target="_blank" class="btn btn-primary">Releases</a></p> </div> + </div> - <footer class="s-footer"> - <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p> - <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> - </footer> + <footer class="docs-footer"> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p> + <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> + </footer> - </div> </div> </div> diff --git a/docs/layout.html b/docs/layout.html index 7b4a801..898a57e 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -9,376 +9,377 @@ <title>Layout - Spectre.css CSS Framework</title> <link rel="stylesheet" href="dist/spectre.css"> <link rel="stylesheet" href="dist/spectre-icons.css"> + <link rel="stylesheet" href="dist/spectre-exp.css"> <link rel="stylesheet" href="css/docs.css"> </head> <body> - <div class="s-container container"> - <div class="columns"> - <div id="sidebar" class="s-sidebar"> - <div class="s-brand"> - <a href="index.html" class="s-logo"> - <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>Spectre.css</h2> - </a> - </div> - <div class="s-nav"> - <div class="accordion-container"> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-1"> - Getting started - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="getting-started.html#introduction">Introduction</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#installation">Installation</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#custom">Custom version</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#browsers">Browser support</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#whatsnew">What's new</a> - </li> - </ul> - </div> - </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-2"> - Elements - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="elements.html#typography">Typography</a> - </li> - <li class="menu-item"> - <a href="elements.html#tables">Tables</a> - </li> - <li class="menu-item"> - <a href="elements.html#buttons">Buttons</a> - </li> - <li class="menu-item"> - <a href="elements.html#forms">Forms</a> - </li> - <li class="menu-item"> - <a href="elements.html#icons">Icons</a> - </li> - <li class="menu-item"> - <a href="elements.html#labels">Labels</a> - </li> - <li class="menu-item"> - <a href="elements.html#codes">Codes</a> - </li> - <li class="menu-item"> - <a href="elements.html#media">Media</a> - </li> - </ul> - </div> - </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden checked> - <label class="accordion-header c-hand" for="docs-accordion-3"> - Layout - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="layout.html#grid">Flexbox grid</a> - </li> - <li class="menu-item"> - <a href="layout.html#responsive">Responsive</a> - </li> - <li class="menu-item"> - <a href="layout.html#navbar">Navbar</a> - </li> - </ul> - </div> - </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-4"> - Components - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="components.html#accordions">Accordions</a> - </li> - <li class="menu-item"> - <a href="components.html#autocomplete">Autocomplete</a> - </li> - <li class="menu-item"> - <a href="components.html#avatars">Avatars</a> - </li> - <li class="menu-item"> - <a href="components.html#badges">Badges</a> - </li> - <li class="menu-item"> - <a href="components.html#bars">Bars</a> - </li> - <li class="menu-item"> - <a href="components.html#breadcrumbs">Breadcrumbs</a> - </li> - <li class="menu-item"> - <a href="components.html#cards">Cards</a> - </li> - <li class="menu-item"> - <a href="components.html#chips">Chips</a> - </li> - <li class="menu-item"> - <a href="components.html#empty">Empty states</a> - </li> - <li class="menu-item"> - <a href="components.html#menus">Menus</a> - </li> - <li class="menu-item"> - <a href="components.html#modals">Modals</a> - </li> - <li class="menu-item"> - <a href="components.html#navs">Navs</a> - </li> - <li class="menu-item"> - <a href="components.html#pagination">Pagination</a> - </li> - <li class="menu-item"> - <a href="components.html#panels">Panels</a> - </li> - <li class="menu-item"> - <a href="components.html#popovers">Popovers</a> - </li> - <li class="menu-item"> - <a href="components.html#steps">Steps</a> - </li> - <li class="menu-item"> - <a href="components.html#tabs">Tabs</a> - </li> - <li class="menu-item"> - <a href="components.html#tiles">Tiles</a> - </li> - <li class="menu-item"> - <a href="components.html#toasts">Toasts</a> - </li> - <li class="menu-item"> - <a href="components.html#tooltips">Tooltips</a> - </li> - </ul> - </div> - </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-5"> - Utilities - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="utilities.html#colors">Colors</a> - </li> - <li class="menu-item"> - <a href="utilities.html#cursors">Cursors</a> - </li> - <li class="menu-item"> - <a href="utilities.html#display">Display</a> - </li> - <li class="menu-item"> - <a href="utilities.html#divider">Divider</a> - </li> - <li class="menu-item"> - <a href="utilities.html#loading">Loading</a> - </li> - <li class="menu-item"> - <a href="utilities.html#position">Position</a> - </li> - <li class="menu-item"> - <a href="utilities.html#shapes">Shapes</a> - </li> - <li class="menu-item"> - <a href="utilities.html#text">Text</a> - </li> - </ul> - </div> - </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-6"> - Experimentals - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="experimentals.html#calendars">Calendars</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#carousels">Carousels</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#comparison">Comparison sliders</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#filters">Filters</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#meters">Meters</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#off-canvas">Off-canvas</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#parallax">Parallax</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#progress">Progress</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#sliders">Sliders</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#timelines">Timelines</a> - </li> - </ul> - </div> + <div class="docs-container off-canvas"> + <div class="docs-navbar"> + <a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"> + <i class="icon icon-menu"></i> + </a> + <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> + </div> + + <div id="sidebar" class="docs-sidebar off-canvas-sidebar"> + <div class="docs-brand"> + <a href="index.html" class="docs-logo"> + <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> + <h2>Spectre.css</h2> + </a> + </div> + <div class="docs-nav"> + <div class="accordion-container"> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-1"> + Getting started + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="getting-started.html#introduction">Introduction</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#installation">Installation</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#custom">Custom version</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#browsers">Browser support</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#whatsnew">What's new</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-2"> + Elements + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="elements.html#typography">Typography</a> + </li> + <li class="menu-item"> + <a href="elements.html#tables">Tables</a> + </li> + <li class="menu-item"> + <a href="elements.html#buttons">Buttons</a> + </li> + <li class="menu-item"> + <a href="elements.html#forms">Forms</a> + </li> + <li class="menu-item"> + <a href="elements.html#icons">Icons</a> + </li> + <li class="menu-item"> + <a href="elements.html#labels">Labels</a> + </li> + <li class="menu-item"> + <a href="elements.html#codes">Codes</a> + </li> + <li class="menu-item"> + <a href="elements.html#media">Media</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden checked> + <label class="accordion-header c-hand" for="docs-accordion-3"> + Layout + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="layout.html#grid">Flexbox grid</a> + </li> + <li class="menu-item"> + <a href="layout.html#responsive">Responsive</a> + </li> + <li class="menu-item"> + <a href="layout.html#navbar">Navbar</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-4"> + Components + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="components.html#accordions">Accordions</a> + </li> + <li class="menu-item"> + <a href="components.html#autocomplete">Autocomplete</a> + </li> + <li class="menu-item"> + <a href="components.html#avatars">Avatars</a> + </li> + <li class="menu-item"> + <a href="components.html#badges">Badges</a> + </li> + <li class="menu-item"> + <a href="components.html#bars">Bars</a> + </li> + <li class="menu-item"> + <a href="components.html#breadcrumbs">Breadcrumbs</a> + </li> + <li class="menu-item"> + <a href="components.html#cards">Cards</a> + </li> + <li class="menu-item"> + <a href="components.html#chips">Chips</a> + </li> + <li class="menu-item"> + <a href="components.html#empty">Empty states</a> + </li> + <li class="menu-item"> + <a href="components.html#menus">Menus</a> + </li> + <li class="menu-item"> + <a href="components.html#modals">Modals</a> + </li> + <li class="menu-item"> + <a href="components.html#navs">Navs</a> + </li> + <li class="menu-item"> + <a href="components.html#pagination">Pagination</a> + </li> + <li class="menu-item"> + <a href="components.html#panels">Panels</a> + </li> + <li class="menu-item"> + <a href="components.html#popovers">Popovers</a> + </li> + <li class="menu-item"> + <a href="components.html#steps">Steps</a> + </li> + <li class="menu-item"> + <a href="components.html#tabs">Tabs</a> + </li> + <li class="menu-item"> + <a href="components.html#tiles">Tiles</a> + </li> + <li class="menu-item"> + <a href="components.html#toasts">Toasts</a> + </li> + <li class="menu-item"> + <a href="components.html#tooltips">Tooltips</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-5"> + Utilities + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="utilities.html#colors">Colors</a> + </li> + <li class="menu-item"> + <a href="utilities.html#cursors">Cursors</a> + </li> + <li class="menu-item"> + <a href="utilities.html#display">Display</a> + </li> + <li class="menu-item"> + <a href="utilities.html#divider">Divider</a> + </li> + <li class="menu-item"> + <a href="utilities.html#loading">Loading</a> + </li> + <li class="menu-item"> + <a href="utilities.html#position">Position</a> + </li> + <li class="menu-item"> + <a href="utilities.html#shapes">Shapes</a> + </li> + <li class="menu-item"> + <a href="utilities.html#text">Text</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-6"> + Experimentals + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="experimentals.html#calendars">Calendars</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#carousels">Carousels</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#comparison">Comparison sliders</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#filters">Filters</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#meters">Meters</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#off-canvas">Off-canvas</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#parallax">Parallax</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#progress">Progress</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#sliders">Sliders</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#timelines">Timelines</a> + </li> + </ul> </div> </div> </div> </div> - <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> - <div class="s-navbar"> - <div class="menu-btn"> - <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a> - </div> - <div class="float-btn"> - <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> + </div> + + <a class="off-canvas-overlay" href="#close"></a> + + <div id="content" class="docs-content off-canvas-content"> + <div id="layout" class="container"> + <h3 class="s-title"><a href="#layout" class="anchor" aria-hidden="true">#</a>Layout</h3> + </div> + + <div class="container"> + <div class="docs-ad"> + <div class="hide-md"> + <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <!-- GitHub-lg --> + <ins class="adsbygoogle" + style="display:inline-block;width:728px;height:90px" + data-ad-client="ca-pub-2225124559530218" + data-ad-slot="9894180784"></ins> + <script> + (adsbygoogle = window.adsbygoogle || []).push({}); + </script> + </div> + <div class="show-md"> + <!-- GitHub-sm --> + <ins class="adsbygoogle" + style="display:inline-block;width:300px;height:250px" + data-ad-client="ca-pub-2225124559530218" + data-ad-slot="9278881734"></ins> + <script> + (adsbygoogle = window.adsbygoogle || []).push({}); + </script> + </div> </div> </div> - <div id="content" class="s-content"> - <div id="layout" class="container"> - <h3 class="s-title"><a href="#layout" class="anchor" aria-hidden="true">#</a>Layout</h3> - </div> - - <div class="container"> - <div class="docs-ad"> - <div class="hide-md"> - <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> - <!-- GitHub-lg --> - <ins class="adsbygoogle" - style="display:inline-block;width:728px;height:90px" - data-ad-client="ca-pub-2225124559530218" - data-ad-slot="9894180784"></ins> - <script> - (adsbygoogle = window.adsbygoogle || []).push({}); - </script> - </div> - <div class="show-md"> - <!-- GitHub-sm --> - <ins class="adsbygoogle" - style="display:inline-block;width:300px;height:250px" - data-ad-client="ca-pub-2225124559530218" - data-ad-slot="9278881734"></ins> - <script> - (adsbygoogle = window.adsbygoogle || []).push({}); - </script> - </div> - </div> + <div id="grid" class="container"> + <h3 class="s-title"><a href="#grid" class="anchor" aria-hidden="true">#</a>Flexbox grid</h3> + <div class="docs-note"> + <p>Layout includes flexbox based responsive grid system with 12 columns. </p> + </div> + <div class="columns"> + <div class="column"> + <div class="bg-primary text-secondary docs-block"></div> </div> - <div id="grid" class="container"> - <h3 class="s-title"><a href="#grid" class="anchor" aria-hidden="true">#</a>Flexbox grid</h3> - <div class="docs-note"> - <p>Layout includes flexbox based responsive grid system with 12 columns. </p> + <div class="column"> + <div class="bg-primary text-secondary docs-block"></div> </div> - <div class="columns"> - <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> - </div> - <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> - </div> - <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> - </div> - <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> - </div> - <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> - </div> - <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> - </div> - <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> - </div> - <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> - </div> - <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> - </div> - <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> - </div> - <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> - </div> - <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> - </div> + <div class="column"> + <div class="bg-primary text-secondary docs-block"></div> </div> - - <div class="columns"> - <div class="column col-12"> - <div class="bg-gray docs-block">col-12 (100%)</div> - </div> + <div class="column"> + <div class="bg-primary text-secondary docs-block"></div> </div> - <div class="columns"> - <div class="column col-9"> - <div class="bg-gray docs-block">col-9 (75%)</div> - </div> + <div class="column"> + <div class="bg-primary text-secondary docs-block"></div> </div> - <div class="columns"> - <div class="column col-6"> - <div class="bg-gray docs-block">col-6 (50%)</div> - </div> + <div class="column"> + <div class="bg-primary text-secondary docs-block"></div> </div> - <div class="columns"> - <div class="column col-3"> - <div class="bg-gray docs-block">col-3 (25%)</div> - </div> + <div class="column"> + <div class="bg-primary text-secondary docs-block"></div> </div> - - <div class="docs-note"> - <p>Add the <code>columns</code> class to a container with the <code>container</code> class. And add any element you want with the <code>column</code> class inside the container. These columns will take up the space equally. You can specific the width of each column by adding class <code>col-[1-12]</code>.</p> - <p>And you can add the <code>col-gapless</code> class to the <code>columns</code> to have gapless columns.</p> + <div class="column"> + <div class="bg-primary text-secondary docs-block"></div> + </div> + <div class="column"> + <div class="bg-primary text-secondary docs-block"></div> + </div> + <div class="column"> + <div class="bg-primary text-secondary docs-block"></div> + </div> + <div class="column"> + <div class="bg-primary text-secondary docs-block"></div> + </div> + <div class="column"> + <div class="bg-primary text-secondary docs-block"></div> </div> + </div> - <div class="columns col-gapless"> - <div class="column col-6"> - <div class="bg-gray docs-block">col-6 (gapless)</div> - </div> - <div class="column col-6"> - <div class="bg-gray docs-block">col-6 (gapless)</div> - </div> + <div class="columns"> + <div class="column col-12"> + <div class="bg-gray docs-block">col-12 (100%)</div> + </div> + </div> + <div class="columns"> + <div class="column col-9"> + <div class="bg-gray docs-block">col-9 (75%)</div> + </div> + </div> + <div class="columns"> + <div class="column col-6"> + <div class="bg-gray docs-block">col-6 (50%)</div> </div> + </div> + <div class="columns"> + <div class="column col-3"> + <div class="bg-gray docs-block">col-3 (25%)</div> + </div> + </div> + + <div class="docs-note"> + <p>Add the <code>columns</code> class to a container with the <code>container</code> class. And add any element you want with the <code>column</code> class inside the container. These columns will take up the space equally. You can specific the width of each column by adding class <code>col-[1-12]</code>.</p> + <p>And you can add the <code>col-gapless</code> class to the <code>columns</code> to have gapless columns.</p> + </div> - <div class="docs-note"> - <p>By default, Spectre grid has multi-line flexbox enabled. You can add the <code>col-oneline</code> class to <code>columns</code> to make all its child columns positioned in the same single row.</p> + <div class="columns col-gapless"> + <div class="column col-6"> + <div class="bg-gray docs-block">col-6 (gapless)</div> </div> + <div class="column col-6"> + <div class="bg-gray docs-block">col-6 (gapless)</div> + </div> + </div> - <div class="columns col-oneline"> - <div class="column col-8"> - <div class="bg-gray docs-block">col-8</div> - </div> - <div class="column col-8"> - <div class="bg-gray docs-block">col-8</div> - </div> + <div class="docs-note"> + <p>By default, Spectre grid has multi-line flexbox enabled. You can add the <code>col-oneline</code> class to <code>columns</code> to make all its child columns positioned in the same single row.</p> + </div> + + <div class="columns col-oneline"> + <div class="column col-8"> + <div class="bg-gray docs-block">col-8</div> + </div> + <div class="column col-8"> + <div class="bg-gray docs-block">col-8</div> </div> + </div> <!-- layout --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"container"</span>> @@ -401,56 +402,56 @@ <<span class="tag">/div</span>> </code></pre> - <h4 id="grid-offset" class="s-subtitle">Grid offset</h4> - <div class="docs-note"> - <p>The Flexbox grid provides margin auto utilities to set offset. There are <code>col-mx-auto</code>, <code>col-ml-auto</code> and <code>col-mr-auto</code> to set margins between columns without using empty columns.</p> - </div> + <h4 id="grid-offset" class="s-subtitle">Grid offset</h4> + <div class="docs-note"> + <p>The Flexbox grid provides margin auto utilities to set offset. There are <code>col-mx-auto</code>, <code>col-ml-auto</code> and <code>col-mr-auto</code> to set margins between columns without using empty columns.</p> + </div> - <div class="columns"> - <div class="column col-2"> - <div class="bg-gray docs-block">col-2</div> - </div> - <div class="column col-4 col-mx-auto"> - <div class="bg-gray docs-block">col-4 col-mx-auto</div> - </div> + <div class="columns"> + <div class="column col-2"> + <div class="bg-gray docs-block">col-2</div> </div> - <div class="columns"> - <div class="column col-2"> - <div class="bg-gray docs-block">col-2</div> - </div> - <div class="column col-4 col-ml-auto"> - <div class="bg-gray docs-block">col-4 col-ml-auto</div> - </div> + <div class="column col-4 col-mx-auto"> + <div class="bg-gray docs-block">col-4 col-mx-auto</div> </div> - <div class="columns"> - <div class="column col-4 col-ml-auto"> - <div class="bg-gray docs-block">col-4 col-ml-auto</div> - </div> - <div class="column col-2"> - <div class="bg-gray docs-block">col-2</div> - </div> + </div> + <div class="columns"> + <div class="column col-2"> + <div class="bg-gray docs-block">col-2</div> </div> - <div class="columns"> - <div class="column col-4 col-mx-auto"> - <div class="bg-gray docs-block">col-4 col-mx-auto</div> - </div> - <div class="column col-2"> - <div class="bg-gray docs-block">col-2</div> - </div> + <div class="column col-4 col-ml-auto"> + <div class="bg-gray docs-block">col-4 col-ml-auto</div> </div> - <div class="columns"> - <div class="column col-4 col-mr-auto"> - <div class="bg-gray docs-block">col-4 col-mr-auto</div> - </div> - <div class="column col-2"> - <div class="bg-gray docs-block">col-2</div> - </div> + </div> + <div class="columns"> + <div class="column col-4 col-ml-auto"> + <div class="bg-gray docs-block">col-4 col-ml-auto</div> </div> - <div class="columns"> - <div class="column col-4 col-mx-auto"> - <div class="bg-gray docs-block">col-4 col-mx-auto</div> - </div> + <div class="column col-2"> + <div class="bg-gray docs-block">col-2</div> </div> + </div> + <div class="columns"> + <div class="column col-4 col-mx-auto"> + <div class="bg-gray docs-block">col-4 col-mx-auto</div> + </div> + <div class="column col-2"> + <div class="bg-gray docs-block">col-2</div> + </div> + </div> + <div class="columns"> + <div class="column col-4 col-mr-auto"> + <div class="bg-gray docs-block">col-4 col-mr-auto</div> + </div> + <div class="column col-2"> + <div class="bg-gray docs-block">col-2</div> + </div> + </div> + <div class="columns"> + <div class="column col-4 col-mx-auto"> + <div class="bg-gray docs-block">col-4 col-mx-auto</div> + </div> + </div> <!-- layout --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"container"</span>> @@ -461,33 +462,33 @@ <<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="responsive" class="container"> - <h3 class="s-title"><a href="#responsive" class="anchor" aria-hidden="true">#</a>Responsive</h3> - <div class="docs-note"> - <p>Spectre provides a neat responsive layout grid system and responsive visibility utilities. </p> + <div id="responsive" class="container"> + <h3 class="s-title"><a href="#responsive" class="anchor" aria-hidden="true">#</a>Responsive</h3> + <div class="docs-note"> + <p>Spectre provides a neat responsive layout grid system and responsive visibility utilities. </p> + </div> + <div class="columns"> + <div class="column col-10 col-lg-8 col-md-6 col-sm-4"> + <div class="bg-gray docs-block">col-10 <br> col-lg-8 <br> col-md-6 <br> col-sm-4</div> </div> - <div class="columns"> - <div class="column col-10 col-lg-8 col-md-6 col-sm-4"> - <div class="bg-gray docs-block">col-10 <br> col-lg-8 <br> col-md-6 <br> col-sm-4</div> - </div> - <div class="column col-2 col-lg-4 col-md-6 col-sm-8"> - <div class="bg-gray docs-block">col-2 <br> col-lg-4 <br> col-md-6 <br> col-sm-8</div> - </div> + <div class="column col-2 col-lg-4 col-md-6 col-sm-8"> + <div class="bg-gray docs-block">col-2 <br> col-lg-4 <br> col-md-6 <br> col-sm-8</div> </div> + </div> - <div class="docs-note"> - <p>There are <code>col-xs-[1-12]</code>, <code>col-sm-[1-12]</code>, <code>col-md-[1-12]</code>, <code>col-lg-[1-12]</code> and <code>col-xl-[1-12]</code> available for flexible grid across mobile, tablet and desktop viewport usage.</p> - <ul> - <li><code>col-xs-[1-12]</code> apply to window width smaller than or equal to <strong>480px</strong>. </li> - <li><code>col-sm-[1-12]</code> apply to window width smaller than or equal to <strong>600px</strong>. </li> - <li><code>col-md-[1-12]</code> apply to window width smaller than or equal to <strong>840px</strong>. </li> - <li><code>col-lg-[1-12]</code> apply to window width smaller than or equal to <strong>960px</strong>. </li> - <li><code>col-xl-[1-12]</code> apply to window width smaller than or equal to <strong>1280px</strong>. </li> - <li><code>col-[1-12]</code> apply to all window width, including the width wider than <strong>1280px</strong>. </li> - </ul> - </div> + <div class="docs-note"> + <p>There are <code>col-xs-[1-12]</code>, <code>col-sm-[1-12]</code>, <code>col-md-[1-12]</code>, <code>col-lg-[1-12]</code> and <code>col-xl-[1-12]</code> available for flexible grid across mobile, tablet and desktop viewport usage.</p> + <ul> + <li><code>col-xs-[1-12]</code> apply to window width smaller than or equal to <strong>480px</strong>. </li> + <li><code>col-sm-[1-12]</code> apply to window width smaller than or equal to <strong>600px</strong>. </li> + <li><code>col-md-[1-12]</code> apply to window width smaller than or equal to <strong>840px</strong>. </li> + <li><code>col-lg-[1-12]</code> apply to window width smaller than or equal to <strong>960px</strong>. </li> + <li><code>col-xl-[1-12]</code> apply to window width smaller than or equal to <strong>1280px</strong>. </li> + <li><code>col-[1-12]</code> apply to all window width, including the width wider than <strong>1280px</strong>. </li> + </ul> + </div> <!-- layout --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"container"</span>> @@ -499,10 +500,10 @@ <<span class="tag">/div</span>> </code></pre> - <h4 id="responsive-container" class="s-subtitle">Responsive container</h4> - <div class="docs-note"> - <p>The responsive layout also provides fixed-width containers. Use <code>grid-xs</code>(480px), <code>grid-sm</code> (600px), <code>grid-md</code> (840px), <code>grid-lg</code> (960px) or <code>grid-xl</code> (1280px) to <code>container</code> for a fixed-width container with the specific max-width.</p> - </div> + <h4 id="responsive-container" class="s-subtitle">Responsive container</h4> + <div class="docs-note"> + <p>The responsive layout also provides fixed-width containers. Use <code>grid-xs</code>(480px), <code>grid-sm</code> (600px), <code>grid-md</code> (840px), <code>grid-lg</code> (960px) or <code>grid-xl</code> (1280px) to <code>container</code> for a fixed-width container with the specific max-width.</p> + </div> <!-- layout --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- 100% width container with max-width set to grid-lg (960px) --></span> @@ -513,170 +514,170 @@ <<span class="tag">/div</span>> </code></pre> - <h4 id="responsive-visibility" class="s-subtitle">Responsive visibility</h4> - <div class="docs-note"> - <p>The responsive visibility utilities help show and hide elements on specific viewport sizes. </p> - </div> - <table class="docs-table table table-striped text-center"> - <thead> - <tr> - <th></th> - <th>size-xs</th> - <th>size-sm</th> - <th>size-md</th> - <th>size-lg</th> - <th>size-xl</th> - </tr> - </thead> - <tbody> - <tr> - <td class="text-left">hide-xs</td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - </tr> - <tr> - <td class="text-left">hide-sm</td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - </tr> - <tr> - <td class="text-left">hide-md</td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - </tr> - <tr> - <td class="text-left">hide-lg</td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - </tr> - <tr> - <td class="text-left">hide-xl</td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - </tr> - </tbody> - </table> - - <div class="docs-note"> - <p>For hiding elements on specific viewport sizes, there are classes <code>hide-xs</code>, <code>hide-sm</code>, <code>hide-md</code>, <code>hide-lg</code> and <code>hide-xl</code> available.</p> - <ul> - <li><code>hide-xs</code> hides elements when the window width is smaller than or equal to <strong>480px</strong>. </li> - <li><code>hide-sm</code> hides elements when the window width is smaller than or equal to <strong>600px</strong>. </li> - <li><code>hide-md</code> hides elements when the window width is smaller than or equal to <strong>840px</strong>. </li> - <li><code>hide-lg</code> hides elements when the window width is smaller than or equal to <strong>960px</strong>. </li> - <li><code>hide-xl</code> hides elements when the window width is smaller than or equal to <strong>1280px</strong>. </li> - </ul> - </div> - - <table class="docs-table table table-striped text-center"> - <thead> - <tr> - <th></th> - <th>size-xs</th> - <th>size-sm</th> - <th>size-md</th> - <th>size-lg</th> - <th>size-xl</th> - </tr> - </thead> - <tbody> - <tr> - <td class="text-left">show-xs</td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - </tr> - <tr> - <td class="text-left">show-sm</td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - </tr> - <tr> - <td class="text-left">show-md</td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - </tr> - <tr> - <td class="text-left">show-lg</td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - </tr> - <tr> - <td class="text-left">show-xl</td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - </tr> - </tbody> - </table> - - <div class="docs-note"> - <p>For showing elements on specific viewport sizes, there are classes <code>show-xs</code>, <code>show-sm</code>, <code>show-md</code>, <code>show-lg</code> and <code>show-xl</code> available.</p> - <ul> - <li><code>show-xs</code> shows elements when the window width is smaller than or equal to <strong>480px</strong>. </li> - <li><code>show-sm</code> shows elements when the window width is smaller than or equal to <strong>600px</strong>. </li> - <li><code>show-md</code> shows elements when the window width is smaller than or equal to <strong>840px</strong>. </li> - <li><code>show-lg</code> shows elements when the window width is smaller than or equal to <strong>960px</strong>. </li> - <li><code>show-xl</code> shows elements when the window width is smaller than or equal to <strong>1280px</strong>. </li> - </ul> - <p>Spectre also has a responsive web test tool Responsive Resizer. You can clone the <a href="https://github.com/picturepan2/responsive-resizer" target="_blank">GitHub Repo</a> to use it locally or use it online.</p> - <p><a href="https://picturepan2.github.io/responsive-resizer/" class="btn btn-primary" target="_blank">Responsive Resizer</a></p> - </div> + <h4 id="responsive-visibility" class="s-subtitle">Responsive visibility</h4> + <div class="docs-note"> + <p>The responsive visibility utilities help show and hide elements on specific viewport sizes. </p> + </div> + <table class="docs-table table table-striped text-center"> + <thead> + <tr> + <th></th> + <th>size-xs</th> + <th>size-sm</th> + <th>size-md</th> + <th>size-lg</th> + <th>size-xl</th> + </tr> + </thead> + <tbody> + <tr> + <td class="text-left">hide-xs</td> + <td><div class="bg-secondary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + </tr> + <tr> + <td class="text-left">hide-sm</td> + <td><div class="bg-secondary docs-dot"></div></td> + <td><div class="bg-secondary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + </tr> + <tr> + <td class="text-left">hide-md</td> + <td><div class="bg-secondary docs-dot"></div></td> + <td><div class="bg-secondary docs-dot"></div></td> + <td><div class="bg-secondary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + </tr> + <tr> + <td class="text-left">hide-lg</td> + <td><div class="bg-secondary docs-dot"></div></td> + <td><div class="bg-secondary docs-dot"></div></td> + <td><div class="bg-secondary docs-dot"></div></td> + <td><div class="bg-secondary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + </tr> + <tr> + <td class="text-left">hide-xl</td> + <td><div class="bg-secondary docs-dot"></div></td> + <td><div class="bg-secondary docs-dot"></div></td> + <td><div class="bg-secondary docs-dot"></div></td> + <td><div class="bg-secondary docs-dot"></div></td> + <td><div class="bg-secondary docs-dot"></div></td> + </tr> + </tbody> + </table> + + <div class="docs-note"> + <p>For hiding elements on specific viewport sizes, there are classes <code>hide-xs</code>, <code>hide-sm</code>, <code>hide-md</code>, <code>hide-lg</code> and <code>hide-xl</code> available.</p> + <ul> + <li><code>hide-xs</code> hides elements when the window width is smaller than or equal to <strong>480px</strong>. </li> + <li><code>hide-sm</code> hides elements when the window width is smaller than or equal to <strong>600px</strong>. </li> + <li><code>hide-md</code> hides elements when the window width is smaller than or equal to <strong>840px</strong>. </li> + <li><code>hide-lg</code> hides elements when the window width is smaller than or equal to <strong>960px</strong>. </li> + <li><code>hide-xl</code> hides elements when the window width is smaller than or equal to <strong>1280px</strong>. </li> + </ul> </div> - <div id="navbar" class="container"> - <h3 class="s-title"><a href="#navbar" class="anchor" aria-hidden="true">#</a>Navbar</h3> - <div class="docs-note"> - <p>Navbar is a layout container that appears in the header of apps and websites. </p> - </div> - <div class="columns"> - <div class="column"> - <div class="navbar"> - <div class="navbar-section"> - <a href="#navbar" class="navbar-brand mr-2">Spectre.css</a> - <a href="#navbar" class="btn btn-link">Docs</a> - <a href="https://github.com/picturepan2/spectre" class="btn btn-link">GitHub</a> - </div> - <div class="navbar-section"> - <div class="input-group input-inline"> - <input class="form-input" type="text" placeholder="search"> - <button class="btn btn-primary input-group-btn">Search</button> - </div> + <table class="docs-table table table-striped text-center"> + <thead> + <tr> + <th></th> + <th>size-xs</th> + <th>size-sm</th> + <th>size-md</th> + <th>size-lg</th> + <th>size-xl</th> + </tr> + </thead> + <tbody> + <tr> + <td class="text-left">show-xs</td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-secondary docs-dot"></div></td> + <td><div class="bg-secondary docs-dot"></div></td> + <td><div class="bg-secondary docs-dot"></div></td> + <td><div class="bg-secondary docs-dot"></div></td> + </tr> + <tr> + <td class="text-left">show-sm</td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-secondary docs-dot"></div></td> + <td><div class="bg-secondary docs-dot"></div></td> + <td><div class="bg-secondary docs-dot"></div></td> + </tr> + <tr> + <td class="text-left">show-md</td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-secondary docs-dot"></div></td> + <td><div class="bg-secondary docs-dot"></div></td> + </tr> + <tr> + <td class="text-left">show-lg</td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-secondary docs-dot"></div></td> + </tr> + <tr> + <td class="text-left">show-xl</td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + <td><div class="bg-primary docs-dot"></div></td> + </tr> + </tbody> + </table> + + <div class="docs-note"> + <p>For showing elements on specific viewport sizes, there are classes <code>show-xs</code>, <code>show-sm</code>, <code>show-md</code>, <code>show-lg</code> and <code>show-xl</code> available.</p> + <ul> + <li><code>show-xs</code> shows elements when the window width is smaller than or equal to <strong>480px</strong>. </li> + <li><code>show-sm</code> shows elements when the window width is smaller than or equal to <strong>600px</strong>. </li> + <li><code>show-md</code> shows elements when the window width is smaller than or equal to <strong>840px</strong>. </li> + <li><code>show-lg</code> shows elements when the window width is smaller than or equal to <strong>960px</strong>. </li> + <li><code>show-xl</code> shows elements when the window width is smaller than or equal to <strong>1280px</strong>. </li> + </ul> + <p>Spectre also has a responsive web test tool Responsive Resizer. You can clone the <a href="https://github.com/picturepan2/responsive-resizer" target="_blank">GitHub Repo</a> to use it locally or use it online.</p> + <p><a href="https://picturepan2.github.io/responsive-resizer/" class="btn btn-primary" target="_blank">Responsive Resizer</a></p> + </div> + </div> + + <div id="navbar" class="container"> + <h3 class="s-title"><a href="#navbar" class="anchor" aria-hidden="true">#</a>Navbar</h3> + <div class="docs-note"> + <p>Navbar is a layout container that appears in the header of apps and websites. </p> + </div> + <div class="columns"> + <div class="column"> + <div class="navbar"> + <div class="navbar-section"> + <a href="#navbar" class="navbar-brand mr-2">Spectre.css</a> + <a href="#navbar" class="btn btn-link">Docs</a> + <a href="https://github.com/picturepan2/spectre" class="btn btn-link">GitHub</a> + </div> + <div class="navbar-section"> + <div class="input-group input-inline"> + <input class="form-input" type="text" placeholder="search"> + <button class="btn btn-primary input-group-btn">Search</button> </div> </div> </div> </div> - <div class="docs-note"> - <p>The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. Each section with the <code>navbar-section</code> class will be evenly distributed in the container.</p> - </div> + </div> + <div class="docs-note"> + <p>The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. Each section with the <code>navbar-section</code> class will be evenly distributed in the container.</p> + </div> <!-- navbar --> <pre class="code" data-lang="HTML"><code><<span class="tag">header</span> <span class="atn">class</span>=<span class="atv">"navbar"</span>> @@ -694,27 +695,27 @@ <<span class="tag">/header</span>> </code></pre> - <div class="docs-note"> - <p>You can use <code>navbar-center</code> class to have a centered section.</p> - </div> + <div class="docs-note"> + <p>You can use <code>navbar-center</code> class to have a centered section.</p> + </div> - <div class="columns"> - <div class="column col-12"> - <div class="navbar"> - <div class="navbar-section"> - <a href="#navbar" class="btn btn-link">Docs</a> - <a href="#navbar" class="btn btn-link">Examples</a> - </div> - <div class="navbar-center"> - <img src="img/spectre-logo.svg" alt="Spectre.css"> - </div> - <div class="navbar-section"> - <a href="https://twitter.com/spectrecss" class="btn btn-link">Twitter</a> - <a href="https://github.com/picturepan2/spectre" class="btn btn-link">GitHub</a> - </div> + <div class="columns"> + <div class="column col-12"> + <div class="navbar"> + <div class="navbar-section"> + <a href="#navbar" class="btn btn-link">Docs</a> + <a href="#navbar" class="btn btn-link">Examples</a> + </div> + <div class="navbar-center"> + <img src="img/spectre-logo.svg" alt="Spectre.css"> + </div> + <div class="navbar-section"> + <a href="https://twitter.com/spectrecss" class="btn btn-link">Twitter</a> + <a href="https://github.com/picturepan2/spectre" class="btn btn-link">GitHub</a> </div> </div> </div> + </div> <!-- navbar --> <pre class="code" data-lang="HTML"><code><<span class="tag">header</span> <span class="atn">class</span>=<span class="atv">"navbar"</span>> @@ -732,14 +733,13 @@ <<span class="tag">/header</span>> </code></pre> - </div> + </div> - <footer class="s-footer"> - <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p> - <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> - </footer> + <footer class="docs-footer"> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p> + <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> + </footer> - </div> </div> </div> diff --git a/docs/src/docs.scss b/docs/src/docs.scss index 6a19281..64f2e95 100644 --- a/docs/src/docs.scss +++ b/docs/src/docs.scss @@ -7,36 +7,54 @@ content: "#{$version}"; } -/* Spectre New Docs */ -.s-container { - & > .columns { - flex-flow: nowrap; - min-height: 100vh; +.off-canvas { + .off-canvas-toggle { + font-size: 1rem; + left: 1.5rem; + position: fixed; + top: 1rem; + } + + .off-canvas-sidebar { + width: 12rem; + } + + .off-canvas-content { + padding: 0 4rem; } } -.s-sidebar { - background: $bg-color; - flex: 0 0 auto; - padding: 1.5rem 0 1.5rem 1.5rem; - width: 12rem; +.docs-navbar { + height: 3.8rem; + right: 0; + position: fixed; + top: 0; + z-index: $zindex-2; + + .btn { + position: absolute; + right: 1.5rem; + top: 1rem; + } +} - .s-nav { +.docs-sidebar { + .docs-nav { bottom: 1.5rem; - overflow-y: auto; + overflow-y: auto; + padding: .5rem 1.5rem; position: fixed; - top: 5rem; - width: 10.5rem; + top: 3.5rem; + width: 12rem; } .accordion { - font-size: .7rem; margin-bottom: .75rem; input { & ~ .accordion-header { color: lighten($dark-color, 10%); - font-size: .6rem; + font-size: .65rem; font-weight: 600; text-transform: uppercase; } @@ -50,6 +68,7 @@ .menu { .menu-item { + font-size: .7rem; padding-left: 1rem; & > a { @@ -62,13 +81,13 @@ } } -.s-content { +.docs-content { flex: 1 1 auto; - max-width: 960px; - padding: 0 4rem; width: calc(100vw - 12rem); & > .container { + margin-left: 0; + max-width: 800px; padding-bottom: 1.5rem; } @@ -93,16 +112,17 @@ .s-title, .s-subtitle { - line-height: 1.6rem; + color: darken($dark-color, 2%); + line-height: 1.8rem; margin-bottom: 0; - padding-top: 1.5rem; - padding-bottom: 1.5rem; + padding-top: 1rem; + padding-bottom: 1rem; position: static; @supports (position: sticky) { position: sticky; top: 0; - z-index: $zindex-2; + z-index: $zindex-1; &::before { background: $light-color; @@ -267,14 +287,13 @@ } } -.s-brand { +.docs-brand { color: $primary-color; - left: 0; - padding: 0 1.5rem; + left: 1.5rem; position: fixed; - top: 1.3rem; + top: .85rem; - .s-logo { + .docs-logo { align-items: center; border-radius: $border-radius; display: inline-flex; @@ -295,7 +314,7 @@ h2 { display: inline; - font-size: .8rem; + font-size: .9rem; font-weight: 500; margin-bottom: 0; margin-left: .5rem; @@ -304,7 +323,7 @@ } } -.s-footer { +.docs-footer { color: $gray-color; padding: .5rem .5rem 1.5rem .5rem; @@ -406,60 +425,22 @@ } } -.docs-nav-clear { - display: none; -} - -.s-navbar { - height: 3.5rem; - left: 0; - padding: .85rem 1.5rem; - position: fixed; - text-align: center; - z-index: $zindex-4; - - .s-logo, - .menu-btn { - display: none; - } - - .float-btn { - position: fixed; - right: 4rem; - top: 1.4rem; - } -} - -@media (max-width: 880px) { - .s-sidebar { - background: $bg-color; - bottom: 0; - overflow-y: auto; - padding: 3rem 1.5rem; - position: fixed; - left: 0; - top: 0; - transform: translateX(-100%); - transition: transform .2s ease; - z-index: 400; - - &:target { - transform: translateX(0); - transition: transform .2s ease; - - & + .docs-nav-clear { - display: block; - } +@media (max-width: 960px) { + .off-canvas { + .off-canvas-toggle { + z-index: $zindex-3; } + } - .s-brand { - margin-top: -1.7rem; + .docs-sidebar { + .docs-brand { + margin: .85rem 1.5rem; padding: 0; position: static; } - .s-nav { - margin-top: 2rem; + .docs-nav { + margin-top: 1rem; position: static; } @@ -468,59 +449,22 @@ } } - .s-navbar { - backdrop-filter: blur(10px); - background: rgba($bg-color-light, .65); - right: 0; - top: 0; - z-index: $zindex-2; - - .menu-btn { - display: block; - left: 2.6rem; - position: fixed; - top: .85rem; - - .btn { - font-size: 1rem; - } - } - - .s-logo { - align-items: center; - border-radius: $border-radius; - display: inline-flex; - height: 2rem; - padding: .2rem; - width: auto; - } - - .float-btn { - right: 2.9rem; - top: .85rem; - } - } - - .docs-nav-clear { - background: rgba(0, 0, 0, .15); - display: none; - height: 100%; + .docs-navbar { + backdrop-filter: blur(5px); + background: rgba($bg-color, .65); left: 0; - right: 0; - top: 0; - position: fixed; - width: 100%; - z-index: $zindex-3; } - .s-content { - min-width: auto; - padding: 0 2.5rem; - width: 100%; + .docs-content { + &.off-canvas-content { + min-width: auto; + padding: 0 1.5rem; + width: 100%; + } .s-title, .s-subtitle { - padding-top: 4rem; + padding-top: 5rem; position: static; &::before { @@ -561,9 +505,23 @@ padding: 0; } } + + .off-canvas { + .off-canvas-toggle { + left: .5rem; + } + } - .s-content { - padding: 3.5rem .5rem 0 .5rem; + .docs-navbar { + .btn { + right: 1rem; + } + } + + .docs-content { + &.off-canvas-content { + padding: 0 .5rem; + } .docs-block { padding: $unit-2 $unit-h; @@ -573,14 +531,4 @@ display: none; } } - - .s-navbar { - .menu-btn { - left: .65rem; - } - - .float-btn { - right: 1rem; - } - } }
\ No newline at end of file diff --git a/docs/utilities.html b/docs/utilities.html index 904921a..e4d41d6 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -9,300 +9,300 @@ <title>Utilities - Spectre.css CSS Framework</title> <link rel="stylesheet" href="dist/spectre.css"> <link rel="stylesheet" href="dist/spectre-icons.css"> + <link rel="stylesheet" href="dist/spectre-exp.css"> <link rel="stylesheet" href="css/docs.css"> </head> <body> - <div class="s-container container"> - <div class="columns"> - <div id="sidebar" class="s-sidebar"> - <div class="s-brand"> - <a href="index.html" class="s-logo"> - <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>Spectre.css</h2> - </a> - </div> - <div class="s-nav"> - <div class="accordion-container"> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-1"> - Getting started - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="getting-started.html#introduction">Introduction</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#installation">Installation</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#custom">Custom version</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#browsers">Browser support</a> - </li> - <li class="menu-item"> - <a href="getting-started.html#whatsnew">What's new</a> - </li> - </ul> - </div> + <div class="docs-container off-canvas"> + <div class="docs-navbar"> + <a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"> + <i class="icon icon-menu"></i> + </a> + <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> + </div> + + <div id="sidebar" class="docs-sidebar off-canvas-sidebar"> + <div class="docs-brand"> + <a href="index.html" class="docs-logo"> + <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> + <h2>Spectre.css</h2> + </a> + </div> + <div class="docs-nav"> + <div class="accordion-container"> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-1"> + Getting started + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="getting-started.html#introduction">Introduction</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#installation">Installation</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#custom">Custom version</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#browsers">Browser support</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#whatsnew">What's new</a> + </li> + </ul> </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-2"> - Elements - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="elements.html#typography">Typography</a> - </li> - <li class="menu-item"> - <a href="elements.html#tables">Tables</a> - </li> - <li class="menu-item"> - <a href="elements.html#buttons">Buttons</a> - </li> - <li class="menu-item"> - <a href="elements.html#forms">Forms</a> - </li> - <li class="menu-item"> - <a href="elements.html#icons">Icons</a> - </li> - <li class="menu-item"> - <a href="elements.html#labels">Labels</a> - </li> - <li class="menu-item"> - <a href="elements.html#codes">Codes</a> - </li> - <li class="menu-item"> - <a href="elements.html#media">Media</a> - </li> - </ul> - </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-2"> + Elements + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="elements.html#typography">Typography</a> + </li> + <li class="menu-item"> + <a href="elements.html#tables">Tables</a> + </li> + <li class="menu-item"> + <a href="elements.html#buttons">Buttons</a> + </li> + <li class="menu-item"> + <a href="elements.html#forms">Forms</a> + </li> + <li class="menu-item"> + <a href="elements.html#icons">Icons</a> + </li> + <li class="menu-item"> + <a href="elements.html#labels">Labels</a> + </li> + <li class="menu-item"> + <a href="elements.html#codes">Codes</a> + </li> + <li class="menu-item"> + <a href="elements.html#media">Media</a> + </li> + </ul> </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-3"> - Layout - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="layout.html#grid">Flexbox grid</a> - </li> - <li class="menu-item"> - <a href="layout.html#responsive">Responsive</a> - </li> - <li class="menu-item"> - <a href="layout.html#navbar">Navbar</a> - </li> - </ul> - </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-3"> + Layout + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="layout.html#grid">Flexbox grid</a> + </li> + <li class="menu-item"> + <a href="layout.html#responsive">Responsive</a> + </li> + <li class="menu-item"> + <a href="layout.html#navbar">Navbar</a> + </li> + </ul> </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-4"> - Components - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="components.html#accordions">Accordions</a> - </li> - <li class="menu-item"> - <a href="components.html#autocomplete">Autocomplete</a> - </li> - <li class="menu-item"> - <a href="components.html#avatars">Avatars</a> - </li> - <li class="menu-item"> - <a href="components.html#badges">Badges</a> - </li> - <li class="menu-item"> - <a href="components.html#bars">Bars</a> - </li> - <li class="menu-item"> - <a href="components.html#breadcrumbs">Breadcrumbs</a> - </li> - <li class="menu-item"> - <a href="components.html#cards">Cards</a> - </li> - <li class="menu-item"> - <a href="components.html#chips">Chips</a> - </li> - <li class="menu-item"> - <a href="components.html#empty">Empty states</a> - </li> - <li class="menu-item"> - <a href="components.html#menus">Menus</a> - </li> - <li class="menu-item"> - <a href="components.html#modals">Modals</a> - </li> - <li class="menu-item"> - <a href="components.html#navs">Navs</a> - </li> - <li class="menu-item"> - <a href="components.html#pagination">Pagination</a> - </li> - <li class="menu-item"> - <a href="components.html#panels">Panels</a> - </li> - <li class="menu-item"> - <a href="components.html#popovers">Popovers</a> - </li> - <li class="menu-item"> - <a href="components.html#steps">Steps</a> - </li> - <li class="menu-item"> - <a href="components.html#tabs">Tabs</a> - </li> - <li class="menu-item"> - <a href="components.html#tiles">Tiles</a> - </li> - <li class="menu-item"> - <a href="components.html#toasts">Toasts</a> - </li> - <li class="menu-item"> - <a href="components.html#tooltips">Tooltips</a> - </li> - </ul> - </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-4"> + Components + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="components.html#accordions">Accordions</a> + </li> + <li class="menu-item"> + <a href="components.html#autocomplete">Autocomplete</a> + </li> + <li class="menu-item"> + <a href="components.html#avatars">Avatars</a> + </li> + <li class="menu-item"> + <a href="components.html#badges">Badges</a> + </li> + <li class="menu-item"> + <a href="components.html#bars">Bars</a> + </li> + <li class="menu-item"> + <a href="components.html#breadcrumbs">Breadcrumbs</a> + </li> + <li class="menu-item"> + <a href="components.html#cards">Cards</a> + </li> + <li class="menu-item"> + <a href="components.html#chips">Chips</a> + </li> + <li class="menu-item"> + <a href="components.html#empty">Empty states</a> + </li> + <li class="menu-item"> + <a href="components.html#menus">Menus</a> + </li> + <li class="menu-item"> + <a href="components.html#modals">Modals</a> + </li> + <li class="menu-item"> + <a href="components.html#navs">Navs</a> + </li> + <li class="menu-item"> + <a href="components.html#pagination">Pagination</a> + </li> + <li class="menu-item"> + <a href="components.html#panels">Panels</a> + </li> + <li class="menu-item"> + <a href="components.html#popovers">Popovers</a> + </li> + <li class="menu-item"> + <a href="components.html#steps">Steps</a> + </li> + <li class="menu-item"> + <a href="components.html#tabs">Tabs</a> + </li> + <li class="menu-item"> + <a href="components.html#tiles">Tiles</a> + </li> + <li class="menu-item"> + <a href="components.html#toasts">Toasts</a> + </li> + <li class="menu-item"> + <a href="components.html#tooltips">Tooltips</a> + </li> + </ul> </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden checked> - <label class="accordion-header c-hand" for="docs-accordion-5"> - Utilities - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="utilities.html#colors">Colors</a> - </li> - <li class="menu-item"> - <a href="utilities.html#cursors">Cursors</a> - </li> - <li class="menu-item"> - <a href="utilities.html#display">Display</a> - </li> - <li class="menu-item"> - <a href="utilities.html#divider">Divider</a> - </li> - <li class="menu-item"> - <a href="utilities.html#loading">Loading</a> - </li> - <li class="menu-item"> - <a href="utilities.html#position">Position</a> - </li> - <li class="menu-item"> - <a href="utilities.html#shapes">Shapes</a> - </li> - <li class="menu-item"> - <a href="utilities.html#text">Text</a> - </li> - </ul> - </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden checked> + <label class="accordion-header c-hand" for="docs-accordion-5"> + Utilities + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="utilities.html#colors">Colors</a> + </li> + <li class="menu-item"> + <a href="utilities.html#cursors">Cursors</a> + </li> + <li class="menu-item"> + <a href="utilities.html#display">Display</a> + </li> + <li class="menu-item"> + <a href="utilities.html#divider">Divider</a> + </li> + <li class="menu-item"> + <a href="utilities.html#loading">Loading</a> + </li> + <li class="menu-item"> + <a href="utilities.html#position">Position</a> + </li> + <li class="menu-item"> + <a href="utilities.html#shapes">Shapes</a> + </li> + <li class="menu-item"> + <a href="utilities.html#text">Text</a> + </li> + </ul> </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-6"> - Experimentals - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="experimentals.html#calendars">Calendars</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#carousels">Carousels</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#comparison">Comparison sliders</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#filters">Filters</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#meters">Meters</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#off-canvas">Off-canvas</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#parallax">Parallax</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#progress">Progress</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#sliders">Sliders</a> - </li> - <li class="menu-item"> - <a href="experimentals.html#timelines">Timelines</a> - </li> - </ul> - </div> + </div> + <div class="accordion"> + <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden> + <label class="accordion-header c-hand" for="docs-accordion-6"> + Experimentals + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="experimentals.html#calendars">Calendars</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#carousels">Carousels</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#comparison">Comparison sliders</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#filters">Filters</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#meters">Meters</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#off-canvas">Off-canvas</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#parallax">Parallax</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#progress">Progress</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#sliders">Sliders</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#timelines">Timelines</a> + </li> + </ul> </div> </div> </div> </div> - <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> - <div class="s-navbar"> - <div class="menu-btn"> - <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a> - </div> - <div class="float-btn"> - <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> - </div> - </div> + </div> + + <a class="off-canvas-overlay" href="#close"></a> - <div id="content" class="s-content"> - <div id="utilities" class="container"> - <h3 class="s-title"><a href="#utilities" class="anchor" aria-hidden="true">#</a>Utilities</h3> - </div> + <div id="content" class="docs-content off-canvas-content"> + <div id="utilities" class="container"> + <h3 class="s-title"><a href="#utilities" class="anchor" aria-hidden="true">#</a>Utilities</h3> + </div> - <div class="container"> - <div class="docs-ad"> - <div class="hide-md"> - <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> - <!-- GitHub-lg --> - <ins class="adsbygoogle" - style="display:inline-block;width:728px;height:90px" - data-ad-client="ca-pub-2225124559530218" - data-ad-slot="9894180784"></ins> - <script> - (adsbygoogle = window.adsbygoogle || []).push({}); - </script> - </div> - <div class="show-md"> - <!-- GitHub-sm --> - <ins class="adsbygoogle" - style="display:inline-block;width:300px;height:250px" - data-ad-client="ca-pub-2225124559530218" - data-ad-slot="9278881734"></ins> - <script> - (adsbygoogle = window.adsbygoogle || []).push({}); - </script> - </div> + <div class="container"> + <div class="docs-ad"> + <div class="hide-md"> + <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <!-- GitHub-lg --> + <ins class="adsbygoogle" + style="display:inline-block;width:728px;height:90px" + data-ad-client="ca-pub-2225124559530218" + data-ad-slot="9894180784"></ins> + <script> + (adsbygoogle = window.adsbygoogle || []).push({}); + </script> </div> - </div> - <div id="colors" class="container"> - <h3 class="s-title"><a href="#colors" class="anchor" aria-hidden="true">#</a>Color utilities</h3> - <div class="docs-note"> - <p>Color utilities are used for changing colors for text, link and background.</p> - </div> - <h4 id="colors-text" class="s-subtitle">Text colors</h4> - <div class="docs-note"> - <p><span class="text-primary">primary color</span></p> - <p><span class="text-secondary">secondary color</span></p> - <p><span class="text-gray">gray color</span></p> - <p><span class="text-light bg-dark p-1 rounded">light color</span></p> - <p><span class="text-success">success color</span></p> - <p><span class="text-warning">warning color</span></p> - <p><span class="text-error">error color</span></p> + <div class="show-md"> + <!-- GitHub-sm --> + <ins class="adsbygoogle" + style="display:inline-block;width:300px;height:250px" + data-ad-client="ca-pub-2225124559530218" + data-ad-slot="9278881734"></ins> + <script> + (adsbygoogle = window.adsbygoogle || []).push({}); + </script> </div> + </div> + </div> + <div id="colors" class="container"> + <h3 class="s-title"><a href="#colors" class="anchor" aria-hidden="true">#</a>Color utilities</h3> + <div class="docs-note"> + <p>Color utilities are used for changing colors for text, link and background.</p> + </div> + <h4 id="colors-text" class="s-subtitle">Text colors</h4> + <div class="docs-note"> + <p><span class="text-primary">primary color</span></p> + <p><span class="text-secondary">secondary color</span></p> + <p><span class="text-gray">gray color</span></p> + <p><span class="text-light bg-dark p-1 rounded">light color</span></p> + <p><span class="text-success">success color</span></p> + <p><span class="text-warning">warning color</span></p> + <p><span class="text-error">error color</span></p> + </div> <!-- colors --> <pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-primary"</span>>primary color<<span class="tag">/span</span>> @@ -314,15 +314,15 @@ <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-error"</span>>error color<<span class="tag">/span</span>> </code></pre> - <div class="docs-note"> - <p><a class="text-primary p-1" href="#colors">primary link</a></p> - <p><a class="text-secondary p-1" href="#colors">secondary link</a></p> - <p><a class="text-gray p-1" href="#colors">gray link</a></p> - <p><a class="text-light bg-dark p-1 rounded" href="#colors">light link</a></p> - <p><a class="text-success p-1" href="#colors">success link</a></p> - <p><a class="text-warning p-1" href="#colors">warning link</a></p> - <p><a class="text-error p-1" href="#colors">error link</a></p> - </div> + <div class="docs-note"> + <p><a class="text-primary p-1" href="#colors">primary link</a></p> + <p><a class="text-secondary p-1" href="#colors">secondary link</a></p> + <p><a class="text-gray p-1" href="#colors">gray link</a></p> + <p><a class="text-light bg-dark p-1 rounded" href="#colors">light link</a></p> + <p><a class="text-success p-1" href="#colors">success link</a></p> + <p><a class="text-warning p-1" href="#colors">warning link</a></p> + <p><a class="text-error p-1" href="#colors">error link</a></p> + </div> <!-- colors --> <pre class="code" data-lang="HTML"><code><<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-primary"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>primary color<<span class="tag">/a</span>> @@ -334,16 +334,16 @@ <<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-error"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>error color<<span class="tag">/a</span>> </code></pre> - <h4 id="colors-background" class="s-subtitle">Background colors</h4> - <div class="docs-note"> - <p><span class="bg-primary text-light p-1 rounded">primary bg</span></p> - <p><span class="bg-secondary text-primary p-1 rounded">secondary bg</span></p> - <p><span class="bg-dark text-light p-1 rounded">dark bg</span></p> - <p><span class="bg-gray p-1 rounded">gray bg</span></p> - <p><span class="bg-success text-light p-1 rounded">success bg</span></p> - <p><span class="bg-warning text-light p-1 rounded">warning bg</span></p> - <p><span class="bg-error text-light p-1 rounded">error bg</span></p> - </div> + <h4 id="colors-background" class="s-subtitle">Background colors</h4> + <div class="docs-note"> + <p><span class="bg-primary text-light p-1 rounded">primary bg</span></p> + <p><span class="bg-secondary text-primary p-1 rounded">secondary bg</span></p> + <p><span class="bg-dark text-light p-1 rounded">dark bg</span></p> + <p><span class="bg-gray p-1 rounded">gray bg</span></p> + <p><span class="bg-success text-light p-1 rounded">success bg</span></p> + <p><span class="bg-warning text-light p-1 rounded">warning bg</span></p> + <p><span class="bg-error text-light p-1 rounded">error bg</span></p> + </div> <!-- colors --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-primary"</span>>primary bg<<span class="tag">/div</span>> @@ -355,33 +355,33 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-error"</span>>error bg<<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="cursors" class="container"> - <h3 class="s-title"><a href="#cursors" class="anchor" aria-hidden="true">#</a>Cursor utilities</h3> - <div class="docs-note"> - <p>Cursor utilities specify which mouse cursor to display when mouseover.</p> + <div id="cursors" class="container"> + <h3 class="s-title"><a href="#cursors" class="anchor" aria-hidden="true">#</a>Cursor utilities</h3> + <div class="docs-note"> + <p>Cursor utilities specify which mouse cursor to display when mouseover.</p> + </div> + <div class="columns"> + <div class="column"> + <div class="bg-gray docs-block c-hand">c-hand</div> </div> - <div class="columns"> - <div class="column"> - <div class="bg-gray docs-block c-hand">c-hand</div> - </div> - <div class="column"> - <div class="bg-gray docs-block c-move">c-move</div> - </div> - <div class="column"> - <div class="bg-gray docs-block c-zoom-in">c-zoom-in</div> - </div> - <div class="column"> - <div class="bg-gray docs-block c-zoom-out">c-zoom-out</div> - </div> - <div class="column"> - <div class="bg-gray docs-block c-not-allowed">c-not-allowed</div> - </div> - <div class="column"> - <div class="bg-gray docs-block c-auto">c-auto</div> - </div> + <div class="column"> + <div class="bg-gray docs-block c-move">c-move</div> + </div> + <div class="column"> + <div class="bg-gray docs-block c-zoom-in">c-zoom-in</div> + </div> + <div class="column"> + <div class="bg-gray docs-block c-zoom-out">c-zoom-out</div> </div> + <div class="column"> + <div class="bg-gray docs-block c-not-allowed">c-not-allowed</div> + </div> + <div class="column"> + <div class="bg-gray docs-block c-auto">c-auto</div> + </div> + </div> <!-- display utilities --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- cursor: hand; --></span> @@ -398,13 +398,13 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"c-auto"</span>><<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="display" class="container"> - <h3 class="s-title"><a href="#display" class="anchor" aria-hidden="true">#</a>Display utilities</h3> - <div class="docs-note"> - <p>Display utilities are used for display and hidden things.</p> - </div> + <div id="display" class="container"> + <h3 class="s-title"><a href="#display" class="anchor" aria-hidden="true">#</a>Display utilities</h3> + <div class="docs-note"> + <p>Display utilities are used for display and hidden things.</p> + </div> <!-- display utilities --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- display: block; --></span> @@ -430,62 +430,62 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-assistive"</span>><<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="divider" class="container"> - <h3 class="s-title"><a href="#divider" class="anchor" aria-hidden="true">#</a>Divider</h3> - <div class="docs-note"> - <p>A Divider is used for separating elements.</p> - </div> - <div class="columns"> - <div class="column"> - <div class="divider"></div> - </div> + <div id="divider" class="container"> + <h3 class="s-title"><a href="#divider" class="anchor" aria-hidden="true">#</a>Divider</h3> + <div class="docs-note"> + <p>A Divider is used for separating elements.</p> + </div> + <div class="columns"> + <div class="column"> + <div class="divider"></div> </div> - <div class="columns"> - <div class="column"> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. - <div class="divider text-center" data-content="OR"></div> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. - </div> + </div> + <div class="columns"> + <div class="column"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. + <div class="divider text-center" data-content="OR"></div> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. </div> + </div> - <div class="columns"> - <div class="column"> - <form> - <div class="form-group"> - <label class="form-label" for="input-example-1">Email</label> - <input class="form-input" type="text" id="input-example-1" placeholder="Email"> - </div> - <div class="form-group"> - <label class="form-label" for="input-example-2">Password</label> - <input class="form-input" type="password" id="input-example-2" placeholder="Password"> - </div> - <div class="form-group"> - <label class="form-checkbox"> - <input type="checkbox"> - <i class="form-icon"></i> Remember me - </label> - </div> - <div class="form-group"> - <button class="btn btn-primary">Sign in</button> - </div> - </form> - </div> - <div class="divider-vert" data-content="OR"></div> - <div class="column"> - <form> - <div class="form-group"> - <label class="form-label" for="input-example-3">Email</label> - <input class="form-input" type="text" id="input-example-3" placeholder="Email"> - </div> - <div class="form-group"> - <button class="btn btn-primary btn-block">Sign up</button> - <button class="btn btn-link btn-block">Learn more</button> - </div> - </form> - </div> + <div class="columns"> + <div class="column"> + <form> + <div class="form-group"> + <label class="form-label" for="input-example-1">Email</label> + <input class="form-input" type="text" id="input-example-1" placeholder="Email"> + </div> + <div class="form-group"> + <label class="form-label" for="input-example-2">Password</label> + <input class="form-input" type="password" id="input-example-2" placeholder="Password"> + </div> + <div class="form-group"> + <label class="form-checkbox"> + <input type="checkbox"> + <i class="form-icon"></i> Remember me + </label> + </div> + <div class="form-group"> + <button class="btn btn-primary">Sign in</button> + </div> + </form> + </div> + <div class="divider-vert" data-content="OR"></div> + <div class="column"> + <form> + <div class="form-group"> + <label class="form-label" for="input-example-3">Email</label> + <input class="form-input" type="text" id="input-example-3" placeholder="Email"> + </div> + <div class="form-group"> + <button class="btn btn-primary btn-block">Sign up</button> + <button class="btn btn-link btn-block">Learn more</button> + </div> + </form> </div> + </div> <!-- divider utilities --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- divider element --></span> @@ -504,26 +504,27 @@ <<span class="tag">/div</span>> <<span class="tag">/div</span>> </code></pre> - </div> - <div id="loading" class="container"> - <h3 class="s-title"><a href="#loading" class="anchor" aria-hidden="true">#</a>Loading</h3> - <div class="docs-note"> - <p>Loading indicator is used for loading or updating. Also, you can add the <code>loading</code> class to buttons for loading status.</p> - </div> - <div class="columns"> - <div class="column col-12 text-center"> - <div class="loading"></div> - </div> - </div> - <div class="docs-note"> - <p>Add the <code>loading-lg</code> class for large size. </p> + </div> + + <div id="loading" class="container"> + <h3 class="s-title"><a href="#loading" class="anchor" aria-hidden="true">#</a>Loading</h3> + <div class="docs-note"> + <p>Loading indicator is used for loading or updating. Also, you can add the <code>loading</code> class to buttons for loading status.</p> + </div> + <div class="columns"> + <div class="column col-12 text-center"> + <div class="loading"></div> </div> - <div class="columns"> - <div class="column col-12 text-center"> - <div class="loading loading-lg"></div> - </div> + </div> + <div class="docs-note"> + <p>Add the <code>loading-lg</code> class for large size. </p> + </div> + <div class="columns"> + <div class="column col-12 text-center"> + <div class="loading loading-lg"></div> </div> + </div> <!-- loading --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- loading element --></span> @@ -531,13 +532,13 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"loading loading-lg"</span>><<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="position" class="container"> - <h3 class="s-title"><a href="#position" class="anchor" aria-hidden="true">#</a>Position utilities</h3> - <div class="docs-note"> - <p>Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p> - </div> + <div id="position" class="container"> + <h3 class="s-title"><a href="#position" class="anchor" aria-hidden="true">#</a>Position utilities</h3> + <div class="docs-note"> + <p>Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p> + </div> <!-- position utilities --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- clear float --></span> @@ -576,25 +577,25 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"py-2"</span>><<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="shapes" class="container"> - <h3 class="s-title"><a href="#shapes" class="anchor" aria-hidden="true">#</a>Shape utilities</h3> - <div class="docs-note"> - <p>Shape utilities are used for change element shapes.</p> - </div> - <div class="columns"> - <div class="column col-6 text-center"> - <div class="bg-primary text-light docs-shape rounded centered"> - rounded - </div> + <div id="shapes" class="container"> + <h3 class="s-title"><a href="#shapes" class="anchor" aria-hidden="true">#</a>Shape utilities</h3> + <div class="docs-note"> + <p>Shape utilities are used for change element shapes.</p> + </div> + <div class="columns"> + <div class="column col-6 text-center"> + <div class="bg-primary text-light docs-shape rounded centered"> + rounded </div> - <div class="column col-6 text-center"> - <div class="bg-primary text-light docs-shape circle centered"> - circle - </div> + </div> + <div class="column col-6 text-center"> + <div class="bg-primary text-light docs-shape circle centered"> + circle </div> </div> + </div> <!-- shape utilities --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- rounded element --></span> @@ -603,13 +604,13 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"circle"</span>><<span class="tag">/div</span>> </code></pre> - </div> + </div> - <div id="text" class="container"> - <h3 class="s-title"><a href="#text" class="anchor" aria-hidden="true">#</a>Text utilities</h3> - <div class="docs-note"> - <p>Text utilities are used for text alignment, styles and overflow things.</p> - </div> + <div id="text" class="container"> + <h3 class="s-title"><a href="#text" class="anchor" aria-hidden="true">#</a>Text utilities</h3> + <div class="docs-note"> + <p>Text utilities are used for text alignment, styles and overflow things.</p> + </div> <!-- text utilities --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- left-aligned text --></span> @@ -645,14 +646,13 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-break"</span>><<span class="tag">/div</span>> </code></pre> - </div> + </div> - <footer class="s-footer"> - <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p> - <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> - </footer> + <footer class="docs-footer"> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p> + <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> + </footer> - </div> </div> </div> |