diff options
Update docs demo margin
1 files changed, 42 insertions, 54 deletions
| -rw-r--r-- | docs/elements.html | 96 |
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> |