diff options
Update docs demo margin
52 files changed, 222 insertions, 252 deletions
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> diff --git a/docs/dist/docs.css b/docs/dist/docs.css index 56db536..68d17bc 100644 --- a/docs/dist/docs.css +++ b/docs/dist/docs.css @@ -144,8 +144,9 @@ margin-top: .4rem; } -.docs-content .docs-note { - margin: 1.5rem 0; +.docs-content .docs-demo { + padding-bottom: 1rem; + padding-top: 1rem; } .docs-content .docs-ad { @@ -184,10 +185,6 @@ font-size: .7rem; } -.docs-content .columns { - margin-bottom: 1rem; -} - .docs-content .column { padding: .4rem; } diff --git a/docs/dist/docs.min.css b/docs/dist/docs.min.css index 1578bf3..47fe08d 100644 --- a/docs/dist/docs.min.css +++ b/docs/dist/docs.min.css @@ -1 +1 @@ -/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.5.2"}.off-canvas .off-canvas-toggle{font-size:1rem;left:1.5rem;position:fixed;top:1rem}.off-canvas .off-canvas-sidebar{width:12rem}.off-canvas .off-canvas-content{padding:0}.docs-navbar{height:3.8rem;position:fixed;right:0;top:0;z-index:100}.docs-navbar .btn{position:absolute;right:1.5rem;top:1rem}.docs-sidebar .docs-nav{bottom:1.5rem;-webkit-overflow-scrolling:touch;overflow-y:auto;padding:.5rem 1.5rem;position:fixed;top:3.5rem;width:12rem}.docs-sidebar .accordion{margin-bottom:.75rem}.docs-sidebar .accordion input~.accordion-header{color:#5b657a;font-size:.65rem;font-weight:600;text-transform:uppercase}.docs-sidebar .accordion input:checked~.accordion-header{color:#667189}.docs-sidebar .accordion .menu .menu-item{font-size:.7rem;padding-left:1rem}.docs-sidebar .accordion .menu .menu-item>a{background:0 0;color:#667189;display:inline-block}.docs-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:0 4rem;width:calc(100vw - 12rem)}.docs-content>.container{margin-left:0;max-width:800px;padding-bottom:1.5rem}.docs-content .anchor{color:#6362dc;height:0;margin-left:-2em;overflow:hidden;padding:0 1em;position:absolute;text-align:center;width:0;z-index:100}.docs-content .anchor:focus,.docs-content .anchor:hover{box-shadow:none;height:auto;text-decoration:none;width:2em}.docs-content .s-subtitle,.docs-content .s-title{color:#414857;line-height:1.8rem;margin-bottom:0;padding-bottom:1rem;padding-top:1rem;position:static}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-content .s-subtitle,.docs-content .s-title{position:sticky;position:-webkit-sticky;top:0;z-index:100}.docs-content .s-subtitle::before,.docs-content .s-title::before{background:#fff;bottom:0;content:"";display:block;left:-10px;position:absolute;right:-10px;top:-5px;z-index:-1}}.docs-content .s-subtitle:hover .anchor,.docs-content .s-title:hover .anchor{height:auto;width:1em}.docs-content .s-subtitle+.docs-note,.docs-content .s-title+.docs-note{margin-top:.4rem}.docs-content .docs-note{margin:1.5rem 0}.docs-content .docs-ad{background:#f8f9fa;border-radius:.1rem;display:inline-block;padding:.4rem;position:relative}.docs-content .docs-ad::before{color:#acb3c2;content:"AD";font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.docs-content .docs-ad.docs-ad-sidebar::before{content:none}.docs-content .carbon-wrap .carbon-img{display:block}.docs-content .carbon-wrap .carbon-text{color:#667189;display:block;font-size:.7rem}.docs-content .carbon-poweredby{color:#acb3c2;font-size:.7rem}.docs-content .columns{margin-bottom:1rem}.docs-content .column{padding:.4rem}.docs-content .docs-block{border-radius:.1rem;padding:.4rem}.docs-content .docs-block.bg-gray{background:#f0f1f4}.docs-content .docs-shape{height:4.8rem;line-height:1.2rem;padding:1.8rem 0;width:4.8rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:.5rem;padding:0;width:.5rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:.75rem .25rem}.docs-content .docs-color{border-radius:.1rem;margin:.25rem 0;padding:.5rem}.docs-content .docs-color .color-subtitle{font-size:.7rem;opacity:.75}.docs-content .code .hljs-tag{color:#667189}.docs-content .code .hljs-comment{color:#acb3c2}.docs-content .code .hljs-class,.docs-content .code .hljs-string,.docs-content .code .hljs-title{color:#5755d9}.docs-content .code .hljs-attribute,.docs-content .code .hljs-built_in,.docs-content .code .hljs-keyword,.docs-content .code .hljs-variable{color:#d73e48}.docs-content .code .hljs-hexcolor,.docs-content .code .hljs-value{color:#667189}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:.75rem 0}.docs-content .parallax{margin:2rem auto}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{align-content:space-around;align-items:center;background:#5755d9;border-radius:.1rem;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:1.2rem;height:2rem;width:2rem}.docs-content .example-tile-icon .icon{margin:auto}.docs-content .comparison-slider{height:auto;padding-bottom:56.2222%}.docs-content .comparison-slider .filter-grayscale{filter:grayscale(75%)}.docs-content .off-canvas{position:relative}.docs-content .off-canvas .off-canvas-toggle{left:.4rem;position:absolute;top:.4rem;z-index:1}.docs-brand{color:#5755d9;left:1.5rem;position:fixed;top:.85rem}.docs-brand .docs-logo{align-items:center;border-radius:.1rem;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;height:2rem;padding:.2rem;width:auto}.docs-brand .docs-logo:focus,.docs-brand .docs-logo:hover{text-decoration:none}.docs-brand .docs-logo img{display:inline;height:auto;width:1.6rem}.docs-brand .docs-logo h2{display:inline;font-size:.8rem;font-weight:700;line-height:1.5rem;margin-bottom:0;margin-left:.5rem;margin-right:.5rem}.docs-footer{color:#acb3c2;padding:.5rem .5rem 1.5rem .5rem}.docs-footer a{color:#667189}.btn .feather{height:1rem;vertical-align:middle}.section-hero{padding:1rem .5rem}.section-hero .docs-brand{position:absolute;top:.85rem}.section-hero .docs-brand h2{color:#5755d9}.section-hero .column{padding:.4rem}.section-updates{padding:4.5rem .5rem 3.5rem .5rem}.section-updates .card{border:0;color:#727e96;margin-bottom:1rem}.section-features{padding:4.5rem .5rem}.section-features .column{padding:.4rem}.section-footer{color:#acb3c2;padding:1.8rem .75rem 1rem .75rem;position:relative;z-index:200}.section-footer a{color:#667189}.grid-hero{padding-bottom:2rem;padding-top:6rem}.grid-hero h1{color:#50596c;font-size:1.6rem;margin-bottom:1.5rem}.grid-hero h2{color:#5b657a;font-size:.9rem;font-weight:400;line-height:1.5rem;margin-bottom:1.5rem}.grid-hero h2 u{border-bottom:.1rem solid currentColor;padding-bottom:.05rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#727e96;padding:.5rem}.grid-hero .card .card-title{color:#5755d9;font-size:.9rem;margin-bottom:0}@media (max-width:960px){.off-canvas .off-canvas-toggle{z-index:300}.off-canvas .off-canvas-content{width:100%}.docs-sidebar .docs-brand{margin:.85rem 1.5rem;padding:0;position:static}.docs-sidebar .docs-nav{margin-top:1rem;position:static}.docs-sidebar .menu .menu-item>a{padding:.3rem .4rem}.docs-navbar{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(248,249,250,.65);left:0}.docs-content{min-width:auto;padding:0 1.5rem;width:100%}.docs-content .s-subtitle,.docs-content .s-title{padding-top:5rem;position:static}.docs-content .s-subtitle::before,.docs-content .s-title::before{content:none}.section-hero .s-brand{height:5rem;padding:1.5rem .5rem;text-align:center;width:100%}.section-hero .s-brand .s-logo{height:auto}.section-hero .s-brand img{height:3.2rem;width:3.2rem}.section-hero .s-brand h2{display:none}}@media (max-width:600px){.grid-hero h2{font-size:.9rem}.grid-hero .card{padding:0}.off-canvas .off-canvas-toggle{left:.5rem}.docs-navbar .btn{right:1rem}.grid-hero .docs-brand{left:1rem}.docs-sidebar .docs-brand{margin:.85rem 1rem}.docs-sidebar .docs-nav{padding:.5rem 1rem}.docs-content{padding:0 .5rem}.docs-content .docs-block{padding:.4rem .1rem}.docs-content .anchor{display:none}}@media (min-width:1366px){.docs-ad.docs-ad-sidebar{bottom:1rem;position:fixed;right:1rem;width:7.3rem}}
\ No newline at end of file +/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.5.2"}.off-canvas .off-canvas-toggle{font-size:1rem;left:1.5rem;position:fixed;top:1rem}.off-canvas .off-canvas-sidebar{width:12rem}.off-canvas .off-canvas-content{padding:0}.docs-navbar{height:3.8rem;position:fixed;right:0;top:0;z-index:100}.docs-navbar .btn{position:absolute;right:1.5rem;top:1rem}.docs-sidebar .docs-nav{bottom:1.5rem;-webkit-overflow-scrolling:touch;overflow-y:auto;padding:.5rem 1.5rem;position:fixed;top:3.5rem;width:12rem}.docs-sidebar .accordion{margin-bottom:.75rem}.docs-sidebar .accordion input~.accordion-header{color:#5b657a;font-size:.65rem;font-weight:600;text-transform:uppercase}.docs-sidebar .accordion input:checked~.accordion-header{color:#667189}.docs-sidebar .accordion .menu .menu-item{font-size:.7rem;padding-left:1rem}.docs-sidebar .accordion .menu .menu-item>a{background:0 0;color:#667189;display:inline-block}.docs-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:0 4rem;width:calc(100vw - 12rem)}.docs-content>.container{margin-left:0;max-width:800px;padding-bottom:1.5rem}.docs-content .anchor{color:#6362dc;height:0;margin-left:-2em;overflow:hidden;padding:0 1em;position:absolute;text-align:center;width:0;z-index:100}.docs-content .anchor:focus,.docs-content .anchor:hover{box-shadow:none;height:auto;text-decoration:none;width:2em}.docs-content .s-subtitle,.docs-content .s-title{color:#414857;line-height:1.8rem;margin-bottom:0;padding-bottom:1rem;padding-top:1rem;position:static}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-content .s-subtitle,.docs-content .s-title{position:sticky;position:-webkit-sticky;top:0;z-index:100}.docs-content .s-subtitle::before,.docs-content .s-title::before{background:#fff;bottom:0;content:"";display:block;left:-10px;position:absolute;right:-10px;top:-5px;z-index:-1}}.docs-content .s-subtitle:hover .anchor,.docs-content .s-title:hover .anchor{height:auto;width:1em}.docs-content .s-subtitle+.docs-note,.docs-content .s-title+.docs-note{margin-top:.4rem}.docs-content .docs-demo{padding-bottom:1rem;padding-top:1rem}.docs-content .docs-ad{background:#f8f9fa;border-radius:.1rem;display:inline-block;padding:.4rem;position:relative}.docs-content .docs-ad::before{color:#acb3c2;content:"AD";font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.docs-content .docs-ad.docs-ad-sidebar::before{content:none}.docs-content .carbon-wrap .carbon-img{display:block}.docs-content .carbon-wrap .carbon-text{color:#667189;display:block;font-size:.7rem}.docs-content .carbon-poweredby{color:#acb3c2;font-size:.7rem}.docs-content .column{padding:.4rem}.docs-content .docs-block{border-radius:.1rem;padding:.4rem}.docs-content .docs-block.bg-gray{background:#f0f1f4}.docs-content .docs-shape{height:4.8rem;line-height:1.2rem;padding:1.8rem 0;width:4.8rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:.5rem;padding:0;width:.5rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:.75rem .25rem}.docs-content .docs-color{border-radius:.1rem;margin:.25rem 0;padding:.5rem}.docs-content .docs-color .color-subtitle{font-size:.7rem;opacity:.75}.docs-content .code .hljs-tag{color:#667189}.docs-content .code .hljs-comment{color:#acb3c2}.docs-content .code .hljs-class,.docs-content .code .hljs-string,.docs-content .code .hljs-title{color:#5755d9}.docs-content .code .hljs-attribute,.docs-content .code .hljs-built_in,.docs-content .code .hljs-keyword,.docs-content .code .hljs-variable{color:#d73e48}.docs-content .code .hljs-hexcolor,.docs-content .code .hljs-value{color:#667189}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:.75rem 0}.docs-content .parallax{margin:2rem auto}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{align-content:space-around;align-items:center;background:#5755d9;border-radius:.1rem;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:1.2rem;height:2rem;width:2rem}.docs-content .example-tile-icon .icon{margin:auto}.docs-content .comparison-slider{height:auto;padding-bottom:56.2222%}.docs-content .comparison-slider .filter-grayscale{filter:grayscale(75%)}.docs-content .off-canvas{position:relative}.docs-content .off-canvas .off-canvas-toggle{left:.4rem;position:absolute;top:.4rem;z-index:1}.docs-brand{color:#5755d9;left:1.5rem;position:fixed;top:.85rem}.docs-brand .docs-logo{align-items:center;border-radius:.1rem;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;height:2rem;padding:.2rem;width:auto}.docs-brand .docs-logo:focus,.docs-brand .docs-logo:hover{text-decoration:none}.docs-brand .docs-logo img{display:inline;height:auto;width:1.6rem}.docs-brand .docs-logo h2{display:inline;font-size:.8rem;font-weight:700;line-height:1.5rem;margin-bottom:0;margin-left:.5rem;margin-right:.5rem}.docs-footer{color:#acb3c2;padding:.5rem .5rem 1.5rem .5rem}.docs-footer a{color:#667189}.btn .feather{height:1rem;vertical-align:middle}.section-hero{padding:1rem .5rem}.section-hero .docs-brand{position:absolute;top:.85rem}.section-hero .docs-brand h2{color:#5755d9}.section-hero .column{padding:.4rem}.section-updates{padding:4.5rem .5rem 3.5rem .5rem}.section-updates .card{border:0;color:#727e96;margin-bottom:1rem}.section-features{padding:4.5rem .5rem}.section-features .column{padding:.4rem}.section-footer{color:#acb3c2;padding:1.8rem .75rem 1rem .75rem;position:relative;z-index:200}.section-footer a{color:#667189}.grid-hero{padding-bottom:2rem;padding-top:6rem}.grid-hero h1{color:#50596c;font-size:1.6rem;margin-bottom:1.5rem}.grid-hero h2{color:#5b657a;font-size:.9rem;font-weight:400;line-height:1.5rem;margin-bottom:1.5rem}.grid-hero h2 u{border-bottom:.1rem solid currentColor;padding-bottom:.05rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#727e96;padding:.5rem}.grid-hero .card .card-title{color:#5755d9;font-size:.9rem;margin-bottom:0}@media (max-width:960px){.off-canvas .off-canvas-toggle{z-index:300}.off-canvas .off-canvas-content{width:100%}.docs-sidebar .docs-brand{margin:.85rem 1.5rem;padding:0;position:static}.docs-sidebar .docs-nav{margin-top:1rem;position:static}.docs-sidebar .menu .menu-item>a{padding:.3rem .4rem}.docs-navbar{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(248,249,250,.65);left:0}.docs-content{min-width:auto;padding:0 1.5rem;width:100%}.docs-content .s-subtitle,.docs-content .s-title{padding-top:5rem;position:static}.docs-content .s-subtitle::before,.docs-content .s-title::before{content:none}.section-hero .s-brand{height:5rem;padding:1.5rem .5rem;text-align:center;width:100%}.section-hero .s-brand .s-logo{height:auto}.section-hero .s-brand img{height:3.2rem;width:3.2rem}.section-hero .s-brand h2{display:none}}@media (max-width:600px){.grid-hero h2{font-size:.9rem}.grid-hero .card{padding:0}.off-canvas .off-canvas-toggle{left:.5rem}.docs-navbar .btn{right:1rem}.grid-hero .docs-brand{left:1rem}.docs-sidebar .docs-brand{margin:.85rem 1rem}.docs-sidebar .docs-nav{padding:.5rem 1rem}.docs-content{padding:0 .5rem}.docs-content .docs-block{padding:.4rem .1rem}.docs-content .anchor{display:none}}@media (min-width:1366px){.docs-ad.docs-ad-sidebar{bottom:1rem;position:fixed;right:1rem;width:7.3rem}}
\ No newline at end of file diff --git a/docs/elements.html b/docs/elements.html index 7038e74..0a96949 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -133,7 +133,7 @@ <h3 class="s-title"><a class="anchor" href="#typography" aria-hidden="true">#</a>Typography</h3> <p>Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p> <h4 class="s-subtitle" id="typography-headings"><a class="anchor" href="#typography-headings" aria-hidden="true">#</a>Headings</h4> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-12"> <h1>H1 Heading <small class="label">40px</small></h1> </div> @@ -166,7 +166,7 @@ <span class="hljs-tag"><<span class="hljs-name">p</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span> </code></pre> <h4 class="s-subtitle" id="typography-semantic-text"><a class="anchor" href="#typography-semantic-text" aria-hidden="true">#</a>Semantic text elements</h4> - <div class="columns"> + <div class="docs-demo 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 class="ml-2">b</code></div> <div class="column col-6 col-xs-12"> @@ -260,7 +260,7 @@ <span class="hljs-tag"></<span class="hljs-name">blockquote</span>></span> </code></pre> <h4 class="s-subtitle" id="typography-lists"><a class="anchor" href="#typography-lists" aria-hidden="true">#</a>Lists</h4> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-4 col-xs-12"> <ul class="list"> <li>list item 1</li> @@ -320,7 +320,7 @@ <div class="container" id="tables"> <h3 class="s-title"><a class="anchor" href="#tables" aria-hidden="true">#</a>Tables</h3> <p>Tables include default styles for tables and data sets.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-12"> <table class="table table-striped"> <thead> @@ -381,7 +381,7 @@ <div class="container" id="buttons"> <h3 class="s-title"><a class="anchor" href="#buttons" aria-hidden="true">#</a>Buttons</h3> <p>Buttons include simple button styles for actions in different types and sizes.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-12"> <button class="btn">default button</button> <button class="btn btn-primary">primary button</button> @@ -396,7 +396,7 @@ <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>></span>link button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> </code></pre> <h4 class="s-subtitle" id="buttons-colors"><a class="anchor" href="#buttons-colors" aria-hidden="true">#</a>Button colors</h4> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-12"> <button class="btn btn-success">success button</button> <button class="btn btn-error">error button</button> @@ -409,7 +409,7 @@ <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-error"</span>></span>error button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> </code></pre> <h4 class="s-subtitle" id="buttons-sizes"><a class="anchor" href="#buttons-sizes" aria-hidden="true">#</a>Button sizes</h4> - <div class="columns"> + <div class="docs-demo 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> @@ -436,7 +436,7 @@ <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary btn-sm"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> small<span class="hljs-tag"></<span class="hljs-name">button</span>></span> </code></pre> <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 class="columns"> + <div class="docs-demo 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> @@ -453,7 +453,7 @@ </code></pre> <h4 class="s-subtitle" id="buttons-states"><a class="anchor" href="#buttons-states" aria-hidden="true">#</a>Button states</h4> <p>Add the <code>active</code> class for active button state style.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-12"> <button class="btn active">default active</button> <button class="btn btn-primary active">primary active</button> @@ -461,7 +461,7 @@ </div> </div> <p>Add the <code>disabled</code> class or the <code>disabled</code> attribute for disabled button state style.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-12"> <button class="btn disabled" tabindex="-1">default disabled</button> <button class="btn btn-primary" disabled="" tabindex="-1">primary disabled</button> @@ -473,7 +473,7 @@ <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span>></span>disabled button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> </code></pre> <p>A button with the <code>loading</code> class can show loading indicator.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-12"> <button class="btn loading">default button</button> <button class="btn btn-primary loading">primary button</button> @@ -485,31 +485,29 @@ <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary loading"</span>></span>primary button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> </code></pre> <h4 class="s-subtitle" id="buttons-groups"><a class="anchor" href="#buttons-groups" aria-hidden="true">#</a>Button groups</h4> - <div class="columns"> - <div class="column col-md-12"> + <div class="docs-demo columns"> + <div class="column col-6 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="column col-6 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> - </div> - <div class="columns"> - <div class="column col-md-12"> + <div class="column col-6 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="column col-md-12"> + <div class="column col-6 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> @@ -529,7 +527,7 @@ <div class="container" id="forms"> <h3 class="s-title"><a class="anchor" href="#forms" aria-hidden="true">#</a>Forms</h3> <p>Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> <div class="form-group"> <label class="form-label" for="input-example-1">Name</label> @@ -547,7 +545,7 @@ <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</span>></span> <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-6 col-xs-12"> <div class="form-group"> <label class="form-label" for="input-example-3">Message</label> @@ -561,7 +559,7 @@ <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-3"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Textarea"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"3"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> <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-6 col-xs-12"> <div class="form-group"> <select class="form-select"> @@ -591,7 +589,7 @@ <span class="hljs-tag"></<span class="hljs-name">select</span>></span> <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-6 col-xs-12"> <form> <div class="form-group"> @@ -619,7 +617,7 @@ <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <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-6 col-xs-12"> <div class="form-group"> <label class="form-switch"> @@ -641,7 +639,7 @@ <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <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-6 col-xs-12"> <div class="form-group"> <label class="form-checkbox"> @@ -668,7 +666,7 @@ <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> and <code>col-xs/sm/lg/xl-<1-12></code> class to the child elements for responsive form row layout. </p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-9 col-sm-12"> <form class="form-horizontal" action="#forms"> <div class="form-group"> @@ -751,7 +749,7 @@ </code></pre> <h4 class="s-subtitle" id="forms-sizes"><a class="anchor" href="#forms-sizes" aria-hidden="true">#</a>Form sizes</h4> <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 class="columns"> + <div class="docs-demo columns"> <div class="column col-4 col-xs-12"> <label class="form-label label-sm">Label</label> </div> @@ -766,8 +764,6 @@ <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> @@ -789,7 +785,7 @@ <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 class="columns"> + <div class="docs-demo 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> @@ -805,8 +801,6 @@ <input class="form-input input-lg" type="text" placeholder="Name"><i class="form-icon icon icon-arrow-right"></i> </div> </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> @@ -830,7 +824,7 @@ <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> <p>You can use the <code>loading</code> class for loading or posting state.</p> - <div class="columns"> + <div class="docs-demo 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> @@ -854,7 +848,7 @@ <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> <h4 class="s-subtitle" id="forms-input"><a class="anchor" href="#forms-input" aria-hidden="true">#</a>Input types</h4> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-9 col-sm-12"> <form class="form-horizontal" action="#forms"> <div class="form-group"> @@ -933,8 +927,8 @@ </div> </div> <h4 class="s-subtitle" id="forms-input-groups"><a class="anchor" href="#forms-input-groups" aria-hidden="true">#</a>Input groups</h4> - <div class="columns"> - <div class="column col-xs-12"> + <div class="docs-demo columns"> + <div class="column col-6 col-xs-12"> <div class="input-group"> <input class="form-input input-sm" type="text" placeholder="username"> <select class="form-select select-sm"> @@ -944,15 +938,13 @@ </select> </div> </div> - <div class="column col-xs-12"> + <div class="column col-6 col-xs-12"> <div class="input-group"><span class="input-group-addon addon-sm">slack.com/</span> <input class="form-input input-sm" type="text" placeholder="site name"> <button class="btn btn-primary input-group-btn btn-sm">Submit</button> </div> </div> - </div> - <div class="columns"> - <div class="column col-xs-12"> + <div class="column col-6 col-xs-12"> <div class="input-group"> <input class="form-input" type="text" placeholder="username"> <select class="form-select"> @@ -962,15 +954,13 @@ </select> </div> </div> - <div class="column col-xs-12"> + <div class="column col-6 col-xs-12"> <div class="input-group"><span class="input-group-addon">slack.com/</span> <input class="form-input" type="text" 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="column col-6 col-xs-12"> <div class="input-group"> <label class="form-switch"> <input type="checkbox"><i class="form-icon"></i> @@ -978,7 +968,7 @@ <input class="form-input" type="text" placeholder="name"> </div> </div> - <div class="column col-xs-12"> + <div class="column col-6 col-xs-12"> <div class="input-group"> <label class="form-checkbox"> <input type="checkbox"><i class="form-icon"></i> @@ -986,9 +976,7 @@ <input class="form-input" type="text" placeholder="name"> </div> </div> - </div> - <div class="columns"> - <div class="column col-xs-12"> + <div class="column col-6 col-xs-12"> <div class="input-group"> <input class="form-input input-lg" type="text" placeholder="username"> <select class="form-select select-lg"> @@ -998,7 +986,7 @@ </select> </div> </div> - <div class="column col-xs-12"> + <div class="column col-6 col-xs-12"> <div class="input-group"><span class="input-group-addon addon-lg">slack.com/</span> <input class="form-input input-lg" type="text" placeholder="site name"> <button class="btn btn-primary input-group-btn btn-lg">Submit</button> @@ -1031,7 +1019,7 @@ <p>To use form validation styles, you can either 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. Use the <code>form-input-hint</code> class to provide form validation success and error messages. </p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-9 col-sm-12"> <fieldset> <legend>Input</legend> @@ -1122,7 +1110,7 @@ <h4 class="s-subtitle" id="forms-disabled"><a class="anchor" href="#forms-disabled" aria-hidden="true">#</a>Form disabled styles</h4> <p> Add the <code>disabled</code> attribute to the element or <fieldset> for a disabled form components style.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> <form action="#forms"> <fieldset disabled=""> @@ -1220,7 +1208,7 @@ <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 class="columns"> + <div class="docs-demo columns"> <div class="column"><span class="label label-rounded mr-1">default label</span><span class="label label-rounded label-primary">primary label</span></div> </div> <p>Add the <code>label-rounded</code> class to have rounded labels.</p> @@ -1260,7 +1248,7 @@ <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 classic background image trick. Microsoft Edge support <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/" target="_blank">is shipped</a> with Build Number 16299+. </p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> <figure class="figure"><img class="img-fit-contain rounded" src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;"> <figcaption class="figure-caption text-center">img-fit-contain</figcaption> @@ -1283,7 +1271,7 @@ 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 class="columns"> + <div class="docs-demo columns"> <div class="column col-12"> <figure class="figure"><img class="img-responsive rounded" src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper"> <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption> @@ -1296,7 +1284,7 @@ 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 class="columns"> + <div class="docs-demo columns"> <div class="column col-12"> <div class="video-responsive"> <iframe width="560" height="315" src="https://www.youtube.com/embed/7DbslbKsQSk" allowfullscreen=""></iframe> diff --git a/docs/experimentals.html b/docs/experimentals.html index 978788d..0225fbd 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -140,7 +140,7 @@ <div class="container" id="autocomplete"> <h3 class="s-title"><a class="anchor" href="#autocomplete" aria-hidden="true">#</a>Autocomplete</h3> <p>Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-9 col-xs-12"> <div class="form-group"> <div class="form-autocomplete"> @@ -194,7 +194,7 @@ 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 class="columns"> + <div class="docs-demo columns"> <div class="column col-9 col-xs-12"> <div class="form-group"> <div class="form-autocomplete autocomplete-oneline"> @@ -246,7 +246,7 @@ <div class="container" id="calendars"> <h3 class="s-title"><a class="anchor" href="#calendars" aria-hidden="true">#</a>Calendars</h3> <p>Calendars are designed for date or date range picker and events display. It is made with flex layout.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-4 col-md-12"> <div class="calendar"> <div class="calendar-nav navbar"> @@ -376,7 +376,7 @@ </div> </div> <h4 class="s-subtitle" id="calendars-sizes"><a class="anchor" href="#calendars-sizes" aria-hidden="true">#</a>Calendars sizes</h4> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-12"> <div class="calendar calendar-lg"> <div class="calendar-nav navbar"> @@ -514,7 +514,7 @@ <div class="container" id="carousels"> <h3 class="s-title"><a class="anchor" href="#carousels" aria-hidden="true">#</a>Carousels</h3> <p>Carousels are slideshows for cycling images. It is built in pure CSS.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-12"> <div class="carousel"> <input class="carousel-locator" id="slide-1" type="radio" name="carousel-radio" hidden="" checked=""> @@ -552,7 +552,7 @@ <div class="container" id="comparison"> <h3 class="s-title"><a class="anchor" href="#comparison" aria-hidden="true">#</a>Comparison sliders</h3> <p>Comparison Sliders are sliders for comparing two images. It is built in pure CSS.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-12"> <div class="comparison-slider"> <figure class="comparison-before"><img class="rounded" src="img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper"> @@ -581,7 +581,7 @@ <div class="container" id="filters"> <h3 class="s-title"><a class="anchor" href="#filters" aria-hidden="true">#</a>Filters</h3> <p>Filters are CSS only content filters.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-12"> <div class="filter"> <input class="filter-tag" id="tag-0" type="radio" name="filter-radio" hidden="" checked=""> @@ -726,7 +726,7 @@ <div class="container" id="meters"> <h3 class="s-title"><a class="anchor" href="#meters" aria-hidden="true">#</a>Meters</h3> <p>Meters represent the value within the known range.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-3 col-xs-12"> <meter class="meter" value="20" min="0" max="100"></meter> </div> @@ -755,7 +755,7 @@ By default, the off-canvas menu is collapsed whenever the window width is. But you can add the <code>off-canvas-sidebar-show</code> class to the <code>off-canvas</code> to make the sidebar expanded when the window width is larger than or equal to <strong>960px</strong>. </p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column"> <div class="off-canvas off-canvas-sidebar-show"><a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-demo"><i class="icon icon-menu"></i></a> <div class="off-canvas-sidebar flex-centered" id="sidebar-demo"><span>Sidebar</span></div><a class="off-canvas-overlay" href="#close"></a> @@ -792,7 +792,7 @@ <div class="container" id="parallax"> <h3 class="s-title"><a class="anchor" href="#parallax" aria-hidden="true">#</a>Parallax</h3> <p>The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-sm-12 col-8 col-mx-auto"> <div class="parallax"> <div class="parallax-top-left" tabindex="1"></div> @@ -827,7 +827,7 @@ <div class="container" id="progress"> <h3 class="s-title"><a class="anchor" href="#progress" aria-hidden="true">#</a>Progress</h3> <p>The Progress indicates the progress completion of a task.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-3 col-xs-12"> <progress class="progress" value="75" max="100"></progress> </div> @@ -850,7 +850,7 @@ <p>You can add the class <code>tooltip</code> to have tooltip labels. If no <code>data-tooltip</code> is set, the <code>value</code> will be used instead. </p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> <input class="slider tooltip" type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);"> </div> @@ -866,7 +866,7 @@ <div class="container" id="timelines"> <h3 class="s-title"><a class="anchor" href="#timelines" aria-hidden="true">#</a>Timelines</h3> <p>Timelines are ordered sequences of activities.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-9 col-sm-12"> <div class="timeline"> <div class="timeline-item" id="timeline-example-1"> diff --git a/docs/layout.html b/docs/layout.html index 65d8008..3c27fec 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -132,7 +132,7 @@ <div class="container" id="grid"> <h3 class="s-title"><a class="anchor" href="#grid" aria-hidden="true">#</a>Flexbox grid</h3> <p>Layout includes flexbox based responsive grid system with 12 columns.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column"> <div class="bg-primary text-secondary docs-block"></div> </div> @@ -205,7 +205,7 @@ 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="columns col-gapless"> + <div class="docs-demo columns col-gapless"> <div class="column col-6"> <div class="bg-gray docs-block">col-6 (gapless)</div> </div> @@ -220,7 +220,7 @@ <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> <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-oneline"> + <div class="docs-demo columns col-oneline"> <div class="column col-8"> <div class="bg-gray docs-block">col-8</div> </div> @@ -294,7 +294,7 @@ </code></pre> <h4 class="s-subtitle" id="grid-nesting"><a class="anchor" href="#grid-nesting" aria-hidden="true">#</a>Grid nesting</h4> <p>To nest grids, add the new <code>columns</code> and <code>column</code> structure within an existing column.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-6"> <div class="bg-gray"> <div class="docs-block">col-6</div> @@ -328,7 +328,7 @@ <div class="container" id="responsive"> <h3 class="s-title"><a class="anchor" href="#responsive" aria-hidden="true">#</a>Responsive</h3> <p>Spectre provides a neat responsive layout grid system and responsive visibility utilities.</p> - <div class="columns"> + <div class="docs-demo 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> @@ -367,7 +367,7 @@ </code></pre> <h4 class="s-subtitle" id="responsive-visibility"><a class="anchor" href="#responsive-visibility" aria-hidden="true">#</a>Responsive visibility</h4> <p>The responsive visibility utilities help show and hide elements on specific viewport sizes.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-12"> <table class="docs-table table table-striped text-center"> <thead> @@ -483,7 +483,7 @@ <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 class="columns"> + <div class="docs-demo columns"> <div class="column col-12"> <table class="docs-table table table-striped text-center"> <thead> @@ -608,7 +608,7 @@ <div class="container" id="navbar"> <h3 class="s-title"><a class="anchor" href="#navbar" aria-hidden="true">#</a>Navbar</h3> <p>Navbar is a layout container that appears in the header of apps and websites.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column"> <div class="navbar"> <div class="navbar-section"><a class="navbar-brand mr-2" href="#navbar">Spectre.css</a><a class="btn btn-link" href="#navbar">Docs</a><a class="btn btn-link" href="https://github.com/picturepan2/spectre">GitHub</a></div> @@ -640,7 +640,7 @@ <span class="hljs-tag"></<span class="hljs-name">header</span>></span> </code></pre> <p>You can use <code>navbar-center</code> class to have a centered section.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-12"> <div class="navbar"> <div class="navbar-section"><a class="btn btn-link" href="#navbar">Docs</a><a class="btn btn-link" href="#navbar">Examples</a></div> diff --git a/docs/src/contents/accordions.pug b/docs/src/contents/accordions.pug index 8914516..4e6838b 100644 --- a/docs/src/contents/accordions.pug +++ b/docs/src/contents/accordions.pug @@ -1,6 +1,6 @@ p Accordions are used to toggle sections of content. -.columns +.docs-demo.columns .column.col-6.col-md-12 .accordion input#accordion-1(type="radio" name="accordion-radio" hidden="" checked="") diff --git a/docs/src/contents/autocomplete.pug b/docs/src/contents/autocomplete.pug index ca93c8a..5224c45 100644 --- a/docs/src/contents/autocomplete.pug +++ b/docs/src/contents/autocomplete.pug @@ -1,7 +1,7 @@ p | Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. -.columns +.docs-demo.columns .column.col-9.col-xs-12 .form-group .form-autocomplete @@ -62,7 +62,7 @@ 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. -.columns +.docs-demo.columns .column.col-9.col-xs-12 .form-group .form-autocomplete.autocomplete-oneline diff --git a/docs/src/contents/avatars.pug b/docs/src/contents/avatars.pug index ff8f6c6..2e9886c 100644 --- a/docs/src/contents/avatars.pug +++ b/docs/src/contents/avatars.pug @@ -1,6 +1,6 @@ p Avatars are user profile pictures. -.columns +.docs-demo.columns .column.col-6.col-xs-12 figure.avatar.avatar-xl img(src="img/avatar-1.png" alt="Avatar XL") @@ -28,7 +28,7 @@ p | Add the #[code avatar] class and avatar size class to #{'<div>'} element. | The #[code data-initial] attribute is the name appear inside the avatar. -.columns +.docs-demo.columns .column.col-6.col-xs-12 figure.avatar.avatar-xl img(src="img/avatar-1.png" alt="Avatar") @@ -66,7 +66,7 @@ pre.code(data-lang='HTML') <img src="img/avatar-1.png" alt="..."> </figure> -.columns +.docs-demo.columns .column.col-6.col-xs-12 figure.avatar.avatar-xl(data-initial="YZ") i.avatar-presence.online diff --git a/docs/src/contents/badges.pug b/docs/src/contents/badges.pug index 250fb39..40b42ea 100644 --- a/docs/src/contents/badges.pug +++ b/docs/src/contents/badges.pug @@ -1,6 +1,6 @@ p Badges are often used as unread number indicators. -.columns +.docs-demo.columns .column.col-3.col-xs-6 span.badge(data-badge="") | Notifications @@ -21,7 +21,7 @@ p p | If there is no #[code data-badge] or the attribute is not specified, the badge will appear as a dot. -.columns +.docs-demo.columns .column.col-sm-12 button.btn.badge(data-badge="") Button button.btn.badge(data-badge="8") Button diff --git a/docs/src/contents/bars.pug b/docs/src/contents/bars.pug index 58d7f3c..df0d17b 100644 --- a/docs/src/contents/bars.pug +++ b/docs/src/contents/bars.pug @@ -2,15 +2,13 @@ p | 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. -.columns +.docs-demo.columns .column.col-8.col-xs-12 .bar.bar-sm .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100") -.columns .column.col-8.col-xs-12 .bar .bar-item.tooltip(data-tooltip="50%" role="progressbar" style="width:50%;") -.columns .column.col-8.col-xs-12 .bar .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;") 25% @@ -42,12 +40,11 @@ pre.code(data-lang='HTML') +docs-subheading('bars-slider', 'Slider bars') -.columns +.docs-demo.columns .column.col-8.col-xs-12 .bar.bar-slider .bar-item(role="progressbar" style="width:50%;") button.bar-slider-btn.btn.tooltip(data-tooltip="50%" role="slider") -.columns .column.col-8.col-xs-12 .bar.bar-slider .bar-item(role="progressbar" style="width:15%;") diff --git a/docs/src/contents/breadcrumbs.pug b/docs/src/contents/breadcrumbs.pug index b1b66c5..ccde5e1 100644 --- a/docs/src/contents/breadcrumbs.pug +++ b/docs/src/contents/breadcrumbs.pug @@ -1,6 +1,6 @@ p Breadcrumbs are used as navigational hierarchies to indicate current location. -.columns +.docs-demo.columns .column.col-12 ul.breadcrumb li.breadcrumb-item diff --git a/docs/src/contents/buttons.pug b/docs/src/contents/buttons.pug index 8f8dbb1..3fbf5da 100644 --- a/docs/src/contents/buttons.pug +++ b/docs/src/contents/buttons.pug @@ -1,6 +1,6 @@ p Buttons include simple button styles for actions in different types and sizes. -.columns +.docs-demo.columns .column.col-12 button.btn default button button.btn.btn-primary primary button @@ -19,7 +19,7 @@ pre.code(data-lang='HTML') +docs-subheading('buttons-colors', 'Button colors') -.columns +.docs-demo.columns .column.col-12 button.btn.btn-success success button button.btn.btn-error error button @@ -38,7 +38,7 @@ pre.code(data-lang='HTML') +docs-subheading('buttons-sizes', 'Button sizes') -.columns +.docs-demo.columns .column.col-12 button.btn.btn-primary.btn-lg | large @@ -75,7 +75,7 @@ pre.code(data-lang='HTML') p | Please note that you could use the #[code btn-action] class for a square button, or add another #[code circle] class for a round button, which is often used as a Float Action Button (FAB). -.columns +.docs-demo.columns .column.col-xs-12 button.btn.btn-action.btn-primary.btn-lg i.icon.icon-menu @@ -102,7 +102,7 @@ pre.code(data-lang='HTML') p | Add the #[code active] class for active button state style. -.columns +.docs-demo.columns .column.col-12 button.btn.active default active button.btn.btn-primary.active primary active @@ -111,7 +111,7 @@ p p | Add the #[code disabled] class or the #[code disabled] attribute for disabled button state style. -.columns +.docs-demo.columns .column.col-12 button.btn.disabled(tabindex="-1") default disabled button.btn.btn-primary(disabled="" tabindex="-1") primary disabled @@ -127,7 +127,7 @@ pre.code(data-lang='HTML') p | A button with the #[code loading] class can show loading indicator. -.columns +.docs-demo.columns .column.col-12 button.btn.loading default button button.btn.btn-primary.loading primary button @@ -142,24 +142,23 @@ pre.code(data-lang='HTML') +docs-subheading('buttons-groups', 'Button groups') -.columns - .column.col-md-12 +.docs-demo.columns + .column.col-6.col-md-12 .btn-group button.btn first button button.btn second button button.btn third button - .column.col-md-12 + .column.col-6.col-md-12 .btn-group.btn-group-block button.btn.btn-primary first button button.btn.btn-primary second button button.btn.btn-primary third button -.columns - .column.col-md-12 + .column.col-6.col-md-12 .btn-group button.btn.btn-sm.active first button button.btn.btn-sm second button button.btn.btn-sm third button - .column.col-md-12 + .column.col-6.col-md-12 .btn-group.btn-group-block button.btn.btn-primary.btn-sm.active first button button.btn.btn-primary.btn-sm second button diff --git a/docs/src/contents/calendars.pug b/docs/src/contents/calendars.pug index 0806844..60866dd 100644 --- a/docs/src/contents/calendars.pug +++ b/docs/src/contents/calendars.pug @@ -1,7 +1,7 @@ p | Calendars are designed for date or date range picker and events display. It is made with flex layout. -.columns +.docs-demo.columns .column.col-4.col-md-12 .calendar .calendar-nav.navbar @@ -93,7 +93,7 @@ p +docs-subheading('calendars-sizes', 'Calendars sizes') -.columns +.docs-demo.columns .column.col-12 .calendar.calendar-lg .calendar-nav.navbar diff --git a/docs/src/contents/cards.pug b/docs/src/contents/cards.pug index 4fb3671..be8d17e 100644 --- a/docs/src/contents/cards.pug +++ b/docs/src/contents/cards.pug @@ -1,6 +1,6 @@ p Cards are flexible content containers. -.columns +.docs-demo.columns .column.col-6.col-xs-12 .card .card-image diff --git a/docs/src/contents/carousels.pug b/docs/src/contents/carousels.pug index 5ce41fa..c9c0045 100644 --- a/docs/src/contents/carousels.pug +++ b/docs/src/contents/carousels.pug @@ -1,6 +1,6 @@ p Carousels are slideshows for cycling images. It is built in pure CSS. -.columns +.docs-demo.columns .column.col-12 .carousel input#slide-1.carousel-locator(type="radio" name="carousel-radio" hidden="" checked="") diff --git a/docs/src/contents/chips.pug b/docs/src/contents/chips.pug index ff02780..7ac2a25 100644 --- a/docs/src/contents/chips.pug +++ b/docs/src/contents/chips.pug @@ -1,6 +1,6 @@ p Chips are complex entities in small blocks. -.columns +.docs-demo.columns .column.col-12 span.chip | Crime diff --git a/docs/src/contents/colors.pug b/docs/src/contents/colors.pug index 84a86be..fad27c9 100644 --- a/docs/src/contents/colors.pug +++ b/docs/src/contents/colors.pug @@ -2,7 +2,7 @@ p Color utilities are used for changing colors for text, link and background. +docs-subheading('colors-text', 'Text colors') -.columns +.docs-demo.columns .column.col-12 p span.text-primary primary color @@ -30,7 +30,7 @@ pre.code(data-lang='HTML') <span class="text-warning">warning color</span> <span class="text-error">error color</span> -.columns +.docs-demo.columns .column.col-12 p a.text-primary.p-1(href="#colors") primary link @@ -60,7 +60,7 @@ pre.code(data-lang='HTML') +docs-subheading('colors-background', 'Background colors') -.columns +.docs-demo.columns .column.col-12 p span.bg-primary.p-1.rounded primary bg diff --git a/docs/src/contents/comparison.pug b/docs/src/contents/comparison.pug index 5f6ce38..954981d 100644 --- a/docs/src/contents/comparison.pug +++ b/docs/src/contents/comparison.pug @@ -1,7 +1,7 @@ p | Comparison Sliders are sliders for comparing two images. It is built in pure CSS. -.columns +.docs-demo.columns .column.col-12 .comparison-slider figure.comparison-before diff --git a/docs/src/contents/cursor.pug b/docs/src/contents/cursor.pug index df92600..ed290b8 100644 --- a/docs/src/contents/cursor.pug +++ b/docs/src/contents/cursor.pug @@ -1,6 +1,6 @@ p Cursor utilities specify which mouse cursor to display when mouseover. -.columns +.docs-demo.columns .column.col-4 .bg-gray.docs-block.c-hand c-hand .column.col-4 diff --git a/docs/src/contents/divider.pug b/docs/src/contents/divider.pug index e84ff11..92faa70 100644 --- a/docs/src/contents/divider.pug +++ b/docs/src/contents/divider.pug @@ -1,14 +1,16 @@ p A Divider is used for separating elements. -.columns +.docs-demo.columns .column .divider -.columns + +.docs-demo.columns .column | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. .divider.text-center(data-content="OR") | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. -.columns + +.docs-demo.columns .column form .form-group diff --git a/docs/src/contents/empty.pug b/docs/src/contents/empty.pug index 0ac70dc..880090d 100644 --- a/docs/src/contents/empty.pug +++ b/docs/src/contents/empty.pug @@ -1,7 +1,7 @@ p | Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens. -.columns +.docs-demo.columns .column.col-12 .empty .empty-icon diff --git a/docs/src/contents/filters.pug b/docs/src/contents/filters.pug index 0c61640..e2e70b3 100644 --- a/docs/src/contents/filters.pug +++ b/docs/src/contents/filters.pug @@ -1,6 +1,6 @@ p Filters are CSS only content filters. -.columns +.docs-demo.columns .column.col-12 .filter input#tag-0.filter-tag(type="radio" name="filter-radio" hidden="" checked="") diff --git a/docs/src/contents/forms.pug b/docs/src/contents/forms.pug index bcfde1a..75c096e 100644 --- a/docs/src/contents/forms.pug +++ b/docs/src/contents/forms.pug @@ -1,7 +1,7 @@ p | Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. -.columns +.docs-demo.columns .column.col-6.col-xs-12 .form-group label.form-label(for="input-example-1") Name @@ -19,7 +19,7 @@ pre.code(data-lang='HTML') <input class="form-input" type="text" id="input-example-1" placeholder="Name"> </div> -.columns +.docs-demo.columns .column.col-6.col-xs-12 .form-group label.form-label(for="input-example-3") Message @@ -34,7 +34,7 @@ pre.code(data-lang='HTML') <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea> </div> -.columns +.docs-demo.columns .column.col-6.col-xs-12 .form-group select.form-select @@ -62,7 +62,7 @@ pre.code(data-lang='HTML') </select> </div> -.columns +.docs-demo.columns .column.col-6.col-xs-12 form .form-group @@ -92,7 +92,7 @@ pre.code(data-lang='HTML') </label> </div> -.columns +.docs-demo.columns .column.col-6.col-xs-12 .form-group label.form-switch @@ -116,7 +116,7 @@ pre.code(data-lang='HTML') </label> </div> -.columns +.docs-demo.columns .column.col-6.col-xs-12 .form-group label.form-checkbox @@ -149,7 +149,7 @@ p | If you want to have a horizontal form, add the #[code form-horizontal] class to the #{'<form>'} container. | And add the #[code col-<1-12>] and #[code col-xs/sm/lg/xl-<1-12>] class to the child elements for responsive form row layout. -.columns +.docs-demo.columns .column.col-9.col-sm-12 form.form-horizontal(action="#forms") .form-group @@ -220,7 +220,7 @@ pre.code(data-lang='HTML') p | For smaller or larger input and select controls, you could add the #[code input-sm]/#[code input-lg], #[code select-sm]/#[code select-lg] and #[code label-sm]/#[code label-lg] classes to the elements. -.columns +.docs-demo.columns .column.col-4.col-xs-12 label.form-label.label-sm Label .column.col-4.col-xs-12 @@ -231,7 +231,6 @@ p option Slack option Skype option Hipchat -.columns .column.col-4.col-xs-12 label.form-label.label-lg Label .column.col-4.col-xs-12 @@ -256,7 +255,7 @@ p | Add a wrapper with the #[code has-icon-left]/#[code has-icon-right] class to #{'<input>'} element. | And add the icon with #[code form-icon] class next to the #{'<input>'}. -.columns +.docs-demo.columns .column.col-4.col-xs-12 .has-icon-left input.form-input.input-sm(type="text" placeholder="Name") @@ -269,7 +268,6 @@ p .has-icon-left input.form-input.input-lg(type="text" placeholder="Name") i.form-icon.icon.icon-arrow-right -.columns .column.col-4.col-xs-12 .has-icon-right input.form-input.input-sm(type="text" placeholder="Name") @@ -295,7 +293,7 @@ pre.code(data-lang='HTML') p | You can use the #[code loading] class for loading or posting state. -.columns +.docs-demo.columns .column.col-4.col-xs-12 .has-icon-right input.form-input.input-sm(type="text" placeholder="Name") @@ -320,7 +318,7 @@ pre.code(data-lang='HTML') +docs-subheading('forms-input', 'Input types') -.columns +.docs-demo.columns .column.col-9.col-sm-12 form.form-horizontal(action="#forms") .form-group @@ -371,54 +369,51 @@ pre.code(data-lang='HTML') +docs-subheading('forms-input-groups', 'Input groups') -.columns - .column.col-xs-12 +.docs-demo.columns + .column.col-6.col-xs-12 .input-group input.form-input.input-sm(type="text" placeholder="username") select.form-select.select-sm option Slack option Skype option Hipchat - .column.col-xs-12 + .column.col-6.col-xs-12 .input-group span.input-group-addon.addon-sm slack.com/ input.form-input.input-sm(type="text" placeholder="site name") button.btn.btn-primary.input-group-btn.btn-sm Submit -.columns - .column.col-xs-12 + .column.col-6.col-xs-12 .input-group input.form-input(type="text" placeholder="username") select.form-select option Slack option Skype option Hipchat - .column.col-xs-12 + .column.col-6.col-xs-12 .input-group span.input-group-addon slack.com/ input.form-input(type="text" placeholder="site name") button.btn.btn-primary.input-group-btn Submit -.columns - .column.col-xs-12 + .column.col-6.col-xs-12 .input-group label.form-switch input(type="checkbox") i.form-icon input.form-input(type="text" placeholder="name") - .column.col-xs-12 + .column.col-6.col-xs-12 .input-group label.form-checkbox input(type="checkbox") i.form-icon input.form-input(type="text" placeholder="name") -.columns - .column.col-xs-12 + .column.col-6.col-xs-12 .input-group input.form-input.input-lg(type="text" placeholder="username") select.form-select.select-lg option Slack option Skype option Hipchat - .column.col-xs-12 + .column.col-6.col-xs-12 .input-group span.input-group-addon.addon-lg slack.com/ input.form-input.input-lg(type="text" placeholder="site name") @@ -456,7 +451,7 @@ p | To use form validation styles, you can either add #[code is-success] or #[code is-error] class to the controls or add #[code has-success] or #[code has-error] class to parent elements. | Use the #[code form-input-hint] class to provide form validation success and error messages. -.columns +.docs-demo.columns .column.col-9.col-sm-12 fieldset legend Input @@ -542,7 +537,7 @@ pre.code(data-lang='HTML') p | Add the #[code disabled] attribute to the element or #{'<fieldset>'} for a disabled form components style. -.columns +.docs-demo.columns .column.col-6.col-xs-12 form(action="#forms") fieldset(disabled="") diff --git a/docs/src/contents/grid.pug b/docs/src/contents/grid.pug index d0172fb..0665262 100644 --- a/docs/src/contents/grid.pug +++ b/docs/src/contents/grid.pug @@ -1,7 +1,7 @@ p | Layout includes flexbox based responsive grid system with 12 columns. -.columns +.docs-demo.columns .column .bg-primary.text-secondary.docs-block .column @@ -59,7 +59,7 @@ p p | And you can add the #[code col-gapless] class to the #[code columns] to have gapless columns. -.columns.col-gapless +.docs-demo.columns.col-gapless .column.col-6 .bg-gray.docs-block col-6 (gapless) .column.col-6 @@ -77,7 +77,7 @@ pre.code(data-lang='HTML') p | By default, Spectre grid has multi-line flexbox enabled. You can add the #[code col-oneline] class to #[code columns] to make all its child columns positioned in the same single row. -.columns.col-oneline +.docs-demo.columns.col-oneline .column.col-8 .bg-gray.docs-block col-8 .column.col-8 @@ -143,7 +143,7 @@ pre.code(data-lang='HTML') p | To nest grids, add the new #[code columns] and #[code column] structure within an existing column. -.columns +.docs-demo.columns .column.col-6 .bg-gray .docs-block col-6 diff --git a/docs/src/contents/labels.pug b/docs/src/contents/labels.pug index 2d55412..cef66d2 100644 --- a/docs/src/contents/labels.pug +++ b/docs/src/contents/labels.pug @@ -13,7 +13,7 @@ p | Add the #[code label] class to #{'<span>'} or #{'<small>'} elements. | You can add another class #[code label-primary], #[code label-secondary], #[code label-success], #[code label-warning] and #[code label-error] for colored labels. -.columns +.docs-demo.columns .column span.label.label-rounded.mr-1 default label span.label.label-rounded.label-primary primary label diff --git a/docs/src/contents/loading.pug b/docs/src/contents/loading.pug index c7643b2..38a1dad 100644 --- a/docs/src/contents/loading.pug +++ b/docs/src/contents/loading.pug @@ -2,14 +2,14 @@ p | Loading indicator is used for loading or updating. | You can add the #[code loading] class to a container for loading status. -.columns +.docs-demo.columns .column.col-12.text-center .loading p | Add the #[code loading-lg] class for large size. -.columns +.docs-demo.columns .column.col-12.text-center .loading.loading-lg diff --git a/docs/src/contents/media.pug b/docs/src/contents/media.pug index fcb8d36..ee78fcc 100644 --- a/docs/src/contents/media.pug +++ b/docs/src/contents/media.pug @@ -15,7 +15,7 @@ p a(href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/" target="_blank") is shipped | with Build Number 16299+. -.columns +.docs-demo.columns .column.col-6.col-xs-12 figure.figure img.img-fit-contain.rounded(src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;") @@ -41,7 +41,7 @@ p | And the included class #[code figure-caption] will provide basic style for caption. | Also, you can use #[code text-left], #[code text-center] and #[code text-right] for caption alignment. -.columns +.docs-demo.columns .column.col-12 figure.figure img.img-responsive.rounded(src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper") @@ -55,7 +55,7 @@ p | The ratio is 16:9 by default. | You may add #[code video-responsive-4-3] for 4:3 ratio video container or #[code video-responsive-1-1] for 1:1 ratio. -.columns +.docs-demo.columns .column.col-12 .video-responsive iframe(width="560" height="315" src="https://www.youtube.com/embed/7DbslbKsQSk" allowfullscreen="") diff --git a/docs/src/contents/menu.pug b/docs/src/contents/menu.pug index fe7825b..45ba53b 100644 --- a/docs/src/contents/menu.pug +++ b/docs/src/contents/menu.pug @@ -1,6 +1,6 @@ p Menus are vertical list of links or buttons for actions and navigation. -.columns +.docs-demo.columns .column.col-4.col-xs-12 ul.menu li.menu-item @@ -93,7 +93,7 @@ pre.code(data-lang='HTML') p The dropdown is a combination of buttons and menus. -.columns +.docs-demo.columns .column.col-xs-12 .dropdown .btn-group @@ -135,7 +135,7 @@ p p | If the dropdown is close to the right edge of the browser, you can add the #[code dropdown-right] class to the container to prevent it appearing off screen. -.columns +.docs-demo.columns .column.col-xs-12.text-right .dropdown.dropdown-right a.btn.btn-primary.dropdown-toggle(tabindex="0") diff --git a/docs/src/contents/meters.pug b/docs/src/contents/meters.pug index dd6899c..8f96070 100644 --- a/docs/src/contents/meters.pug +++ b/docs/src/contents/meters.pug @@ -1,6 +1,6 @@ p Meters represent the value within the known range. -.columns +.docs-demo.columns .column.col-3.col-xs-12 meter.meter(value="20" min="0" max="100") .column.col-3.col-xs-12 diff --git a/docs/src/contents/modals.pug b/docs/src/contents/modals.pug index 29580c9..54a6fcd 100644 --- a/docs/src/contents/modals.pug +++ b/docs/src/contents/modals.pug @@ -1,6 +1,6 @@ p Modals are flexible dialog prompts. -.columns +.docs-demo.columns .column a.btn.btn-primary(href="#example-modal-1") Open Modal #example-modal-1.modal @@ -62,7 +62,7 @@ pre.code(data-lang='HTML') +docs-subheading('modals-sizes', 'Modal sizes') -.columns +.docs-demo.columns .column.col-6.col-xs-12 a.btn.btn-primary(href="#example-modal-2") Open small size Modal #example-modal-2.modal.modal-sm @@ -95,7 +95,7 @@ p | Use the #[code modal-sm] class for a smaller modal dialog. | The container max width is #[code 320px]. -.columns +.docs-demo.columns .column a.btn.btn-primary(href="#example-modal-3") Open large size Modal #example-modal-3.modal.modal-lg diff --git a/docs/src/contents/nav.pug b/docs/src/contents/nav.pug index 537b6d2..f40964a 100644 --- a/docs/src/contents/nav.pug +++ b/docs/src/contents/nav.pug @@ -1,4 +1,4 @@ -.columns +.docs-demo.columns .column.col-6.col-xs-12 ul.nav li.nav-item diff --git a/docs/src/contents/navbar.pug b/docs/src/contents/navbar.pug index 21d13e4..fd4ac29 100644 --- a/docs/src/contents/navbar.pug +++ b/docs/src/contents/navbar.pug @@ -1,6 +1,6 @@ p Navbar is a layout container that appears in the header of apps and websites. -.columns +.docs-demo.columns .column .navbar .navbar-section @@ -36,7 +36,7 @@ pre.code(data-lang='HTML') p | You can use #[code navbar-center] class to have a centered section. -.columns +.docs-demo.columns .column.col-12 .navbar .navbar-section diff --git a/docs/src/contents/off-canvas.pug b/docs/src/contents/off-canvas.pug index 7e45132..3e24f4c 100644 --- a/docs/src/contents/off-canvas.pug +++ b/docs/src/contents/off-canvas.pug @@ -4,7 +4,7 @@ p | By default, the off-canvas menu is collapsed whenever the window width is. | But you can add the #[code off-canvas-sidebar-show] class to the #[code off-canvas] to make the sidebar expanded when the window width is larger than or equal to #[strong 960px]. -.columns +.docs-demo.columns .column .off-canvas.off-canvas-sidebar-show a.off-canvas-toggle.btn.btn-primary.btn-action(href="#sidebar-demo") diff --git a/docs/src/contents/pagination.pug b/docs/src/contents/pagination.pug index 83a3f92..c90f6de 100644 --- a/docs/src/contents/pagination.pug +++ b/docs/src/contents/pagination.pug @@ -1,4 +1,4 @@ -.columns +.docs-demo.columns .column.col-xs-12 ul.pagination li.page-item @@ -69,7 +69,7 @@ pre.code(data-lang='HTML') </li> </ul> -.columns +.docs-demo.columns .column.col-12 ul.pagination li.page-item.page-prev diff --git a/docs/src/contents/panels.pug b/docs/src/contents/panels.pug index 3651c81..fdf057e 100644 --- a/docs/src/contents/panels.pug +++ b/docs/src/contents/panels.pug @@ -1,6 +1,6 @@ p Panels are flexible view container with auto-expand content section. -.columns +.docs-demo.columns .column.col-6.col-xs-12 .panel .panel-header.text-center diff --git a/docs/src/contents/parallax.pug b/docs/src/contents/parallax.pug index 88d2c17..b448b43 100644 --- a/docs/src/contents/parallax.pug +++ b/docs/src/contents/parallax.pug @@ -1,7 +1,7 @@ p | The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS. -.columns +.docs-demo.columns .column.col-sm-12.col-8.col-mx-auto .parallax .parallax-top-left(tabindex="1") diff --git a/docs/src/contents/popovers.pug b/docs/src/contents/popovers.pug index ca81e54..b2c1b33 100644 --- a/docs/src/contents/popovers.pug +++ b/docs/src/contents/popovers.pug @@ -1,5 +1,6 @@ p Popovers are small overlay content containers. Popovers component is built entirely in CSS. -.columns + +.docs-demo.columns .column.col-3.col-sm-6 .popover a.btn.btn-primary(href="#popovers") diff --git a/docs/src/contents/progress.pug b/docs/src/contents/progress.pug index 22a09c1..23af0af 100644 --- a/docs/src/contents/progress.pug +++ b/docs/src/contents/progress.pug @@ -1,6 +1,6 @@ p The Progress indicates the progress completion of a task. -.columns +.docs-demo.columns .column.col-3.col-xs-12 progress.progress(value="75" max="100") .column.col-3.col-xs-12 diff --git a/docs/src/contents/responsive.pug b/docs/src/contents/responsive.pug index 8898958..9737755 100644 --- a/docs/src/contents/responsive.pug +++ b/docs/src/contents/responsive.pug @@ -1,6 +1,6 @@ p Spectre provides a neat responsive layout grid system and responsive visibility utilities. -.columns +.docs-demo.columns .column.col-10.col-lg-8.col-md-6.col-sm-4 .bg-gray.docs-block | col-10 @@ -68,7 +68,7 @@ pre.code(data-lang='HTML') p The responsive visibility utilities help show and hide elements on specific viewport sizes. -.columns +.docs-demo.columns .column.col-12 table.docs-table.table.table-striped.text-center thead @@ -156,7 +156,7 @@ ul li | #[code hide-xl] hides elements when the window width is smaller than or equal to #[strong 1280px]. -.columns +.docs-demo.columns .column.col-12 table.docs-table.table.table-striped.text-center thead diff --git a/docs/src/contents/shapes.pug b/docs/src/contents/shapes.pug index fc07d4d..7abf513 100644 --- a/docs/src/contents/shapes.pug +++ b/docs/src/contents/shapes.pug @@ -1,6 +1,6 @@ p Shape utilities are used for change element shapes. -.columns +.docs-demo.columns .column.col-6.text-center .bg-primary.text-light.docs-shape.rounded.centered | rounded diff --git a/docs/src/contents/sliders.pug b/docs/src/contents/sliders.pug index de3597b..754833c 100644 --- a/docs/src/contents/sliders.pug +++ b/docs/src/contents/sliders.pug @@ -3,7 +3,7 @@ p | You can add the class #[code tooltip] to have tooltip labels. | If no #[code data-tooltip] is set, the #[code value] will be used instead. -.columns +.docs-demo.columns .column.col-6.col-xs-12 input.slider.tooltip(type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);") .column.col-6.col-xs-12 diff --git a/docs/src/contents/steps.pug b/docs/src/contents/steps.pug index 5cf8b84..0109e02 100644 --- a/docs/src/contents/steps.pug +++ b/docs/src/contents/steps.pug @@ -1,6 +1,6 @@ p Steps are progress indicators of a sequence of task steps. -.columns +.docs-demo.columns .column.col-12 ul.step li.step-item diff --git a/docs/src/contents/tables.pug b/docs/src/contents/tables.pug index 64e4ffd..4cb996c 100644 --- a/docs/src/contents/tables.pug +++ b/docs/src/contents/tables.pug @@ -1,6 +1,6 @@ p Tables include default styles for tables and data sets. -.columns +.docs-demo.columns .column.col-12 table.table.table-striped thead diff --git a/docs/src/contents/tabs.pug b/docs/src/contents/tabs.pug index f89005d..fea99ad 100644 --- a/docs/src/contents/tabs.pug +++ b/docs/src/contents/tabs.pug @@ -1,6 +1,6 @@ p Tabs enable quick switch between different views. -.columns +.docs-demo.columns .column.col-6.col-sm-12 ul.tab li.tab-item.active @@ -51,7 +51,7 @@ pre.code(data-lang='HTML') </li> </ul> -.columns +.docs-demo.columns .column.col-sm-12 ul.tab li.tab-item.active @@ -89,7 +89,7 @@ pre.code(data-lang='HTML') </li> </ul> -.columns +.docs-demo.columns .column.col-12 ul.tab li.tab-item.active diff --git a/docs/src/contents/tiles.pug b/docs/src/contents/tiles.pug index e1e7379..cd8b994 100644 --- a/docs/src/contents/tiles.pug +++ b/docs/src/contents/tiles.pug @@ -1,6 +1,6 @@ p Tiles are repeatable or embeddable information blocks. -.columns +.docs-demo.columns .column.col-9.col-sm-12 .tile .tile-icon @@ -58,7 +58,7 @@ p | Add the #[code tile-centered] class to the container #[code tile]. | The #[code tile-icon], #[code tile-content] and #[code tile-action] will be vertically centered. -.columns +.docs-demo.columns .column.col-6.col-md-9.col-xs-12 .tile.tile-centered .tile-icon diff --git a/docs/src/contents/timelines.pug b/docs/src/contents/timelines.pug index 1badfdf..c654c9e 100644 --- a/docs/src/contents/timelines.pug +++ b/docs/src/contents/timelines.pug @@ -1,6 +1,6 @@ p Timelines are ordered sequences of activities. -.columns +.docs-demo.columns .column.col-9.col-sm-12 .timeline #timeline-example-1.timeline-item diff --git a/docs/src/contents/toasts.pug b/docs/src/contents/toasts.pug index cf4c31a..e35e4dd 100644 --- a/docs/src/contents/toasts.pug +++ b/docs/src/contents/toasts.pug @@ -1,6 +1,6 @@ p Toasts are used to show alert or information to users. -.columns +.docs-demo.columns .column.col-9.col-sm-12 .toast button.btn.btn-clear.float-right @@ -23,7 +23,7 @@ pre.code(data-lang='HTML') Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> -.columns +.docs-demo.columns .column.col-sm-12 .toast.toast-success button.btn.btn-clear.float-right diff --git a/docs/src/contents/tooltips.pug b/docs/src/contents/tooltips.pug index bda259a..08906e6 100644 --- a/docs/src/contents/tooltips.pug +++ b/docs/src/contents/tooltips.pug @@ -1,6 +1,6 @@ p Tooltips provide context information labels that appear on hover and focus. -.columns.text-center +.docs-demo.columns.text-center .column.col-xs-12 button.btn.btn-primary.tooltip(data-tooltip="Top Tooltip Text") top tooltip .column.col-xs-12 diff --git a/docs/src/contents/typography.pug b/docs/src/contents/typography.pug index 28ffc17..876a956 100644 --- a/docs/src/contents/typography.pug +++ b/docs/src/contents/typography.pug @@ -3,7 +3,7 @@ p +docs-subheading('typography-headings', 'Headings') -.columns +.docs-demo.columns .column.col-12 h1 | H1 Heading @@ -54,7 +54,7 @@ pre.code(data-lang='HTML') +docs-subheading('typography-semantic-text', 'Semantic text elements') -.columns +.docs-demo.columns .column.col-6.col-xs-12 abbr(title='Internationalization') I18N code.ml-2 abbr @@ -206,7 +206,7 @@ pre.code(data-lang='HTML') +docs-subheading('typography-lists', 'Lists') -.columns +.docs-demo.columns .column.col-4.col-xs-12 ul.list li list item 1 diff --git a/docs/src/scss/docs.scss b/docs/src/scss/docs.scss index e17f832..8887d4d 100644 --- a/docs/src/scss/docs.scss +++ b/docs/src/scss/docs.scss @@ -151,8 +151,9 @@ } } - .docs-note { - margin: 1.5rem 0; + .docs-demo { + padding-bottom: 1rem; + padding-top: 1rem; } .docs-ad { @@ -195,10 +196,6 @@ font-size: $font-size-sm; } - .columns { - margin-bottom: 1rem; - } - .column { padding: $layout-spacing; } diff --git a/docs/utilities.html b/docs/utilities.html index 5032ec7..b17bec3 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -133,7 +133,7 @@ <h3 class="s-title"><a class="anchor" href="#colors" aria-hidden="true">#</a>Color utilities</h3> <p>Color utilities are used for changing colors for text, link and background.</p> <h4 class="s-subtitle" id="colors-text"><a class="anchor" href="#colors-text" aria-hidden="true">#</a>Text colors</h4> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-12"> <p><span class="text-primary">primary color</span></p> <p><span class="text-secondary">secondary color</span></p> @@ -152,7 +152,7 @@ <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-warning"</span>></span>warning color<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-error"</span>></span>error color<span class="hljs-tag"></<span class="hljs-name">span</span>></span> </code></pre> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-12"> <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> @@ -172,7 +172,7 @@ <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-error"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>error color<span class="hljs-tag"></<span class="hljs-name">a</span>></span> </code></pre> <h4 class="s-subtitle" id="colors-background"><a class="anchor" href="#colors-background" aria-hidden="true">#</a>Background colors</h4> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-12"> <p><span class="bg-primary p-1 rounded">primary bg</span></p> <p><span class="bg-secondary text-primary p-1 rounded">secondary bg</span></p> @@ -194,7 +194,7 @@ <div class="container" id="cursor"> <h3 class="s-title"><a class="anchor" href="#cursor" aria-hidden="true">#</a>Cursor utilities</h3> <p>Cursor utilities specify which mouse cursor to display when mouseover.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-4"> <div class="bg-gray docs-block c-hand">c-hand</div> </div> @@ -255,17 +255,17 @@ <div class="container" id="divider"> <h3 class="s-title"><a class="anchor" href="#divider" aria-hidden="true">#</a>Divider</h3> <p>A Divider is used for separating elements.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column"> <div class="divider"></div> </div> </div> - <div class="columns"> + <div class="docs-demo 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="docs-demo columns"> <div class="column"> <form> <div class="form-group"> @@ -322,13 +322,13 @@ Loading indicator is used for loading or updating. You can add the <code>loading</code> class to a container for loading status. </p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-12 text-center"> <div class="loading"></div> </div> </div> <p>Add the <code>loading-lg</code> class for large size.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-12 text-center"> <div class="loading loading-lg"></div> </div> @@ -378,7 +378,7 @@ <div class="container" id="shapes"> <h3 class="s-title"><a class="anchor" href="#shapes" aria-hidden="true">#</a>Shape utilities</h3> <p>Shape utilities are used for change element shapes.</p> - <div class="columns"> + <div class="docs-demo columns"> <div class="column col-6 text-center"> <div class="bg-primary text-light docs-shape rounded centered">rounded</div> </div> |