diff options
Add Details and Summary Accordians support #256
1 files changed, 17 insertions, 17 deletions
| -rw-r--r-- | docs/utilities.html | 34 |
diff --git a/docs/utilities.html b/docs/utilities.html index e2457a2..56f3f25 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -22,8 +22,8 @@ </a> </div> <div class="s-nav"> - <div class="accordion"> - <div class="accordion-item"> + <div class="accordion-container"> + <div class="accordion"> <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-1"> Getting started @@ -48,7 +48,7 @@ </ul> </div> </div> - <div class="accordion-item"> + <div class="accordion"> <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-2"> Elements @@ -82,7 +82,7 @@ </ul> </div> </div> - <div class="accordion-item"> + <div class="accordion"> <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-3"> Layout @@ -101,7 +101,7 @@ </ul> </div> </div> - <div class="accordion-item"> + <div class="accordion"> <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-4"> Components @@ -171,7 +171,7 @@ </ul> </div> </div> - <div class="accordion-item"> + <div class="accordion"> <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden checked> <label class="accordion-header c-hand" for="docs-accordion-5"> Utilities @@ -205,7 +205,7 @@ </ul> </div> </div> - <div class="accordion-item"> + <div class="accordion"> <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-6"> Experimentals @@ -275,7 +275,7 @@ <p><span class="text-error">error color</span></p> </div> -<!-- colors example --> +<!-- colors --> <pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-primary"</span>>primary color<<span class="tag">/span</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-secondary"</span>>secondary color<<span class="tag">/span</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-gray"</span>>gray color<<span class="tag">/span</span>> @@ -295,7 +295,7 @@ <p><a class="text-error p-1" href="#colors">error link</a></p> </div> -<!-- colors example --> +<!-- colors --> <pre class="code" data-lang="HTML"><code><<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-primary"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>primary color<<span class="tag">/a</span>> <<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-secondary"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>secondary color<<span class="tag">/a</span>> <<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-gray"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>gray color<<span class="tag">/a</span>> @@ -316,7 +316,7 @@ <p><span class="bg-error text-light p-1 rounded">error bg</span></p> </div> -<!-- colors example --> +<!-- colors --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-primary"</span>>primary bg<<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-secondary"</span>>secondary bg<<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-dark"</span>>dark bg<<span class="tag">/div</span>> @@ -354,7 +354,7 @@ </div> </div> -<!-- display utilities example --> +<!-- display utilities --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- cursor: hand; --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"c-hand"</span>><<span class="tag">/div</span>> <span class="com"><!-- cursor: move; --></span> @@ -377,7 +377,7 @@ <p>Display utilities are used for display and hidden things.</p> </div> -<!-- display utilities example --> +<!-- display utilities --> <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">"d-block"</span>><<span class="tag">/div</span>> <span class="com"><!-- display: inline; --></span> @@ -458,7 +458,7 @@ </div> </div> -<!-- divider utilities example --> +<!-- divider utilities --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- divider element --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"divider"</span>><<span class="tag">/div</span>> <span class="com"><!-- divider element with text --></span> @@ -496,7 +496,7 @@ </div> </div> -<!-- loading example --> +<!-- loading --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- loading element --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"loading"</span>><<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"loading loading-lg"</span>><<span class="tag">/div</span>> @@ -510,7 +510,7 @@ <p>Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p> </div> -<!-- position utilities example --> +<!-- position utilities --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- clear float --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"clearfix"</span>><<span class="tag">/div</span>> <span class="com"><!-- float: left and right --></span> @@ -567,7 +567,7 @@ </div> </div> -<!-- shape utilities example --> +<!-- shape utilities --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- rounded element --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"rounded"</span>><<span class="tag">/div</span>> <span class="com"><!-- circle element --></span> @@ -582,7 +582,7 @@ <p>Text utilities are used for text alignment, styles and overflow things.</p> </div> -<!-- text utilities example --> +<!-- text utilities --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- left-aligned text --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-left"</span>><<span class="tag">/div</span>> <span class="com"><!-- center-aligned text --></span> |