diff options
1 files changed, 740 insertions, 742 deletions
| -rw-r--r-- | docs/experimentals.html | 1482 |
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> + </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> + <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-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-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-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> + <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 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 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 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 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> |