diff options
1 files changed, 35 insertions, 34 deletions
| -rw-r--r-- | docs/utilities.html | 69 |
diff --git a/docs/utilities.html b/docs/utilities.html index 5077792..d502712 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -104,12 +104,6 @@ <li class="menu-item"> <a href="layout.html#navbar">Navbar</a> </li> - <li class="menu-item"> - <a href="layout.html#panels">Panels</a> - </li> - <li class="menu-item"> - <a href="layout.html#empty">Empty states</a> - </li> </ul> </div> </div> @@ -145,6 +139,9 @@ <a href="components.html#chips">Chips</a> </li> <li class="menu-item"> + <a href="components.html#empty">Empty states</a> + </li> + <li class="menu-item"> <a href="components.html#menus">Menus</a> </li> <li class="menu-item"> @@ -157,6 +154,9 @@ <a href="components.html#pagination">Pagination</a> </li> <li class="menu-item"> + <a href="components.html#panels">Panels</a> + </li> + <li class="menu-item"> <a href="components.html#popovers">Popovers</a> </li> <li class="menu-item"> @@ -256,12 +256,12 @@ <div class="docs-note"> <p>Color utilities are used for changing colors for text, link and background.</p> </div> - <h4 class="s-subtitle">Text colors</h4> + <h4 id="colors-text" class="s-subtitle">Text colors</h4> <div class="docs-note"> <p><span class="text-primary">primary color</span></p> <p><span class="text-secondary">secondary color</span></p> <p><span class="text-gray">gray color</span></p> - <p><span class="text-light bg-dark p-5 rounded">light color</span></p> + <p><span class="text-light bg-dark p-1 rounded">light color</span></p> <p><span class="text-success">success color</span></p> <p><span class="text-warning">warning color</span></p> <p><span class="text-error">error color</span></p> @@ -278,13 +278,13 @@ </code></pre> <div class="docs-note"> - <p><a class="text-primary p-5" href="#colors">primary link</a></p> - <p><a class="text-secondary p-5" href="#colors">secondary link</a></p> - <p><a class="text-gray p-5" href="#colors">gray link</a></p> - <p><a class="text-light bg-dark p-5 rounded" href="#colors">light link</a></p> - <p><a class="text-success p-5" href="#colors">success link</a></p> - <p><a class="text-warning p-5" href="#colors">warning link</a></p> - <p><a class="text-error p-5" href="#colors">error link</a></p> + <p><a class="text-primary p-1" href="#colors">primary link</a></p> + <p><a class="text-secondary p-1" href="#colors">secondary link</a></p> + <p><a class="text-gray p-1" href="#colors">gray link</a></p> + <p><a class="text-light bg-dark p-1 rounded" href="#colors">light link</a></p> + <p><a class="text-success p-1" href="#colors">success link</a></p> + <p><a class="text-warning p-1" href="#colors">warning link</a></p> + <p><a class="text-error p-1" href="#colors">error link</a></p> </div> <!-- colors example --> @@ -297,15 +297,15 @@ <<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-error"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>error color<<span class="tag">/a</span>> </code></pre> - <h4 class="s-subtitle">Background colors</h4> + <h4 id="colors-background" class="s-subtitle">Background colors</h4> <div class="docs-note"> - <p><span class="bg-primary text-light p-5 rounded">primary bg</span></p> - <p><span class="bg-secondary text-primary p-5 rounded">secondary bg</span></p> - <p><span class="bg-dark text-light p-5 rounded">dark bg</span></p> - <p><span class="bg-gray p-5 rounded">gray bg</span></p> - <p><span class="bg-success text-light p-5 rounded">success bg</span></p> - <p><span class="bg-warning text-light p-5 rounded">warning bg</span></p> - <p><span class="bg-error text-light p-5 rounded">error bg</span></p> + <p><span class="bg-primary text-light p-1 rounded">primary bg</span></p> + <p><span class="bg-secondary text-primary p-1 rounded">secondary bg</span></p> + <p><span class="bg-dark text-light p-1 rounded">dark bg</span></p> + <p><span class="bg-gray p-1 rounded">gray bg</span></p> + <p><span class="bg-success text-light p-1 rounded">success bg</span></p> + <p><span class="bg-warning text-light p-1 rounded">warning bg</span></p> + <p><span class="bg-error text-light p-1 rounded">error bg</span></p> </div> <!-- colors example --> @@ -328,21 +328,22 @@ <!-- display utilities example --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- display: block; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"block"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-block"</span>><<span class="tag">/div</span>> <span class="com"><!-- display: inline; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"inline"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-inline"</span>><<span class="tag">/div</span>> <span class="com"><!-- display: inline-block; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"inline-block"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-inline-block"</span>><<span class="tag">/div</span>> <span class="com"><!-- display: flex; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"flex"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-flex"</span>><<span class="tag">/div</span>> <span class="com"><!-- display: inline-flex; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"inline-flex"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-inline-flex"</span>><<span class="tag">/div</span>> <span class="com"><!-- display: none; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"hide"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-none"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-hide"</span>><<span class="tag">/div</span>> <span class="com"><!-- visibility: visible; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"visible"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-visible"</span>><<span class="tag">/div</span>> <span class="com"><!-- visibility: hidden; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"invisible"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-invisible"</span>><<span class="tag">/div</span>> <span class="com"><!-- hide text contents --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-hide"</span>><<span class="tag">/div</span>> <span class="com"><!-- assistive text for screen reader --></span> @@ -428,7 +429,7 @@ <div id="loading" class="container"> <h3 class="s-title"><a href="#loading" class="anchor" aria-hidden="true">#</a>Loading</h3> <div class="docs-note"> - <p>Loading indicator is used for loading or updating. Also, you can add the <code>loading</code> class to buttons for loading status. Add the <code>btn-lg</code> class for large size. </p> + <p>Loading indicator is used for loading or updating. Also, you can add the <code>loading</code> class to buttons for loading status.</p> </div> <div class="columns"> <div class="column col-12 text-center"> @@ -436,8 +437,8 @@ </div> </div> <div class="docs-note"> - <p>Add the <code>btn-lg</code> class for large size. </p> - </div> + <p>Add the <code>loading-lg</code> class for large size. </p> + </div> <div class="columns"> <div class="column col-12 text-center"> <div class="loading loading-lg"></div> |