diff options
1 files changed, 32 insertions, 38 deletions
| -rw-r--r-- | docs/components.html | 70 |
diff --git a/docs/components.html b/docs/components.html index 4185433..f30a70e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -132,7 +132,7 @@ <div class="container" id="accordions"> <h3 class="s-title"><a class="anchor" href="#accordions" aria-hidden="true">#</a>Accordions</h3> <p>Accordions are used to toggle sections of content.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-6 col-md-12"> <div class="accordion"> <input id="accordion-1" type="radio" name="accordion-radio" hidden="" checked=""> @@ -239,7 +239,7 @@ <div class="container" id="avatars"> <h3 class="s-title"><a class="anchor" href="#avatars" aria-hidden="true">#</a>Avatars</h3> <p>Avatars are user profile pictures. </p> - <div class="columns"> + <div class="docs-demo 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> @@ -264,7 +264,7 @@ 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 class="columns"> + <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> <figure class="avatar avatar-xl"><img src="img/avatar-1.png" alt="Avatar"><img class="avatar-icon" src="img/avatar-2.png" alt="Avatar"></figure> <figure class="avatar avatar-lg"><img src="img/avatar-2.png" alt="Avatar"><img class="avatar-icon" src="img/avatar-3.png" alt="Avatar"></figure> @@ -290,7 +290,7 @@ <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span> <span class="hljs-tag"></<span class="hljs-name">figure</span>></span> </code></pre> - <div class="columns"> + <div class="docs-demo 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> @@ -312,7 +312,7 @@ <div class="container" id="badges"> <h3 class="s-title"><a class="anchor" href="#badges" aria-hidden="true">#</a>Badges</h3> <p>Badges are often used as unread number indicators.</p> - <div class="columns"> + <div class="docs-demo 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> @@ -323,7 +323,7 @@ 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 class="columns"> + <div class="docs-demo columns"> <div class="column col-sm-12"> <button class="btn badge" data-badge="">Button</button> <button class="btn badge" data-badge="8">Button</button> @@ -361,21 +361,17 @@ Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <progress>, <meter> and input range elements. </p> - <div class="columns"> + <div class="docs-demo 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> - <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> - <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> @@ -403,7 +399,7 @@ <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> <h4 class="s-subtitle" id="bars-slider"><a class="anchor" href="#bars-slider" aria-hidden="true">#</a>Slider bars</h4> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-8 col-xs-12"> <div class="bar bar-slider"> <div class="bar-item" role="progressbar" style="width:50%;"> @@ -411,8 +407,6 @@ </div> </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%;"> @@ -449,7 +443,7 @@ <div class="container" id="breadcrumbs"> <h3 class="s-title"><a class="anchor" href="#breadcrumbs" aria-hidden="true">#</a>Breadcrumbs</h3> <p>Breadcrumbs are used as navigational hierarchies to indicate current location.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-12"> <ul class="breadcrumb"> <li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Home">Home</a></li> @@ -489,7 +483,7 @@ <div class="container" id="cards"> <h3 class="s-title"><a class="anchor" href="#cards" aria-hidden="true">#</a>Cards</h3> <p>Cards are flexible content containers.</p> - <div class="columns"> + <div class="docs-demo 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> @@ -581,7 +575,7 @@ <div class="container" id="chips"> <h3 class="s-title"><a class="anchor" href="#chips" aria-hidden="true">#</a>Chips</h3> <p>Chips are complex entities in small blocks. </p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-12"><span class="chip">Crime</span><span class="chip">Drama</span><span class="chip">Biography<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span><span class="chip">Mystery<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span></div> <div class="column col-12"> <div class="chip"> @@ -610,7 +604,7 @@ <div class="container" id="empty"> <h3 class="s-title"><a class="anchor" href="#empty" aria-hidden="true">#</a>Empty states</h3> <p>Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-12"> <div class="empty"> <div class="empty-icon"><i class="icon icon-3x icon-mail"></i></div> @@ -665,7 +659,7 @@ <div class="container" id="menu"> <h3 class="s-title"><a class="anchor" href="#menu" aria-hidden="true">#</a>Menu</h3> <p>Menus are vertical list of links or buttons for actions and navigation.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-4 col-xs-12"> <ul class="menu"> <li class="menu-item"> @@ -750,7 +744,7 @@ </code></pre> <h4 class="s-subtitle" id="menu-dropdown"><a class="anchor" href="#menu-dropdown" aria-hidden="true">#</a>Dropdown menu</h4> <p>The dropdown is a combination of buttons and menus.</p> - <div class="columns"> + <div class="docs-demo 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> @@ -778,7 +772,7 @@ 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 class="columns"> + <div class="docs-demo 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"> @@ -821,7 +815,7 @@ <div class="container" id="modals"> <h3 class="s-title"><a class="anchor" href="#modals" aria-hidden="true">#</a>Modals</h3> <p>Modals are flexible dialog prompts.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column"><a class="btn btn-primary" href="#example-modal-1">Open Modal</a> <div class="modal" id="example-modal-1"><a class="modal-overlay" href="#modals" aria-label="Close"></a> <div class="modal-container" role="document"> @@ -876,7 +870,7 @@ <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> <h4 class="s-subtitle" id="modals-sizes"><a class="anchor" href="#modals-sizes" aria-hidden="true">#</a>Modal sizes</h4> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-6 col-xs-12"><a class="btn btn-primary" href="#example-modal-2">Open small size Modal</a> <div class="modal modal-sm" id="example-modal-2"><a class="modal-overlay" href="#modals-sizes" aria-label="Close"></a> <div class="modal-container" role="document"> @@ -912,7 +906,7 @@ <p>Use the <code>modal-sm</code> class for a smaller modal dialog. The container max width is <code>320px</code>. </p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column"><a class="btn btn-primary" href="#example-modal-3">Open large size Modal</a> <div class="modal modal-lg" id="example-modal-3"><a class="modal-overlay" href="#modals-sizes" aria-label="Close"></a> <div class="modal-container" role="document"> @@ -952,7 +946,7 @@ </div> <div class="container" id="nav"> <h3 class="s-title"><a class="anchor" href="#nav" aria-hidden="true">#</a>Nav</h3> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> <ul class="nav"> <li class="nav-item"><a href="#nav">Elements</a></li> @@ -1004,7 +998,7 @@ </div> <div class="container" id="pagination"> <h3 class="s-title"><a class="anchor" href="#pagination" aria-hidden="true">#</a>Pagination</h3> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-xs-12"> <ul class="pagination"> <li class="page-item"><a href="#pagination">Prev</a></li> @@ -1059,7 +1053,7 @@ <span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> </code></pre> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-12"> <ul class="pagination"> <li class="page-item page-prev"><a href="#pagination"> @@ -1090,7 +1084,7 @@ <div class="container" id="panels"> <h3 class="s-title"><a class="anchor" href="#panels" aria-hidden="true">#</a>Panels</h3> <p>Panels are flexible view container with auto-expand content section.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> <div class="panel"> <div class="panel-header text-center"> @@ -1222,7 +1216,7 @@ <div class="container" id="popovers"> <h3 class="s-title"><a class="anchor" href="#popovers" aria-hidden="true">#</a>Popovers</h3> <p>Popovers are small overlay content containers. Popovers component is built entirely in CSS.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-3 col-sm-6"> <div class="popover"><a class="btn btn-primary" href="#popovers">top popover</a> <div class="popover-container"> @@ -1315,7 +1309,7 @@ <div class="container" id="steps"> <h3 class="s-title"><a class="anchor" href="#steps" aria-hidden="true">#</a>Steps</h3> <p>Steps are progress indicators of a sequence of task steps.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-12"> <ul class="step"> <li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 1 Tooltip"></a></li> @@ -1356,7 +1350,7 @@ <div class="container" id="tabs"> <h3 class="s-title"><a class="anchor" href="#tabs" aria-hidden="true">#</a>Tabs</h3> <p>Tabs enable quick switch between different views.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-6 col-sm-12"> <ul class="tab"> <li class="tab-item active"><a href="#tabs">Music</a></li> @@ -1393,7 +1387,7 @@ <span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> </code></pre> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-sm-12"> <ul class="tab"> <li class="tab-item active"><a class="badge" href="#tabs" data-badge="999">Music</a></li> @@ -1418,7 +1412,7 @@ <span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> </code></pre> - <div class="columns"> + <div class="docs-demo 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> @@ -1455,7 +1449,7 @@ <div class="container" id="tiles"> <h3 class="s-title"><a class="anchor" href="#tiles" aria-hidden="true">#</a>Tiles</h3> <p>Tiles are repeatable or embeddable information blocks.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-9 col-sm-12"> <div class="tile"> <div class="tile-icon"> @@ -1512,7 +1506,7 @@ <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 class="columns"> + <div class="docs-demo columns"> <div class="column col-6 col-md-9 col-xs-12"> <div class="tile tile-centered"> <div class="tile-icon"> @@ -1548,7 +1542,7 @@ <div class="container" id="toasts"> <h3 class="s-title"><a class="anchor" href="#toasts" aria-hidden="true">#</a>Toasts</h3> <p>Toasts are used to show alert or information to users.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-9 col-sm-12"> <div class="toast"> <button class="btn btn-clear float-right"></button> @@ -1569,7 +1563,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-sm-12"> <div class="toast toast-success"> <button class="btn btn-clear float-right"></button>Toast success @@ -1595,7 +1589,7 @@ <div class="container" id="tooltips"> <h3 class="s-title"><a class="anchor" href="#tooltips" aria-hidden="true">#</a>Tooltips</h3> <p>Tooltips provide context information labels that appear on hover and focus.</p> - <div class="columns text-center"> + <div class="docs-demo columns text-center"> <div class="column col-xs-12"> <button class="btn btn-primary tooltip" data-tooltip="Top Tooltip Text">top tooltip</button> </div> |