From d8064d06254576af99228df650d13d05f771f09e Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Wed, 6 Sep 2017 17:48:24 +0800
Subject: Add Details and Summary Accordians support #256

---
 docs/utilities.html | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

(limited to 'docs/utilities.html')

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>&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;text-primary&quot;</span>&gt;primary color&lt;<span class="tag">/span</span>&gt;
 &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;text-secondary&quot;</span>&gt;secondary color&lt;<span class="tag">/span</span>&gt;
 &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;text-gray&quot;</span>&gt;gray color&lt;<span class="tag">/span</span>&gt;
@@ -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>&lt;<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">&quot;text-primary&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;primary color&lt;<span class="tag">/a</span>&gt;
 &lt;<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">&quot;text-secondary&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;secondary color&lt;<span class="tag">/a</span>&gt;
 &lt;<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">&quot;text-gray&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;gray color&lt;<span class="tag">/a</span>&gt;
@@ -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>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bg-primary&quot;</span>&gt;primary bg&lt;<span class="tag">/div</span>&gt;
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bg-secondary&quot;</span>&gt;secondary bg&lt;<span class="tag">/div</span>&gt;
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bg-dark&quot;</span>&gt;dark bg&lt;<span class="tag">/div</span>&gt;
@@ -354,7 +354,7 @@
             </div>
           </div>
 
-<!-- display utilities example -->
+<!-- display utilities -->
 <pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- cursor: hand; --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;c-hand&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- cursor: move; --&gt;</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">&lt;!-- display: block; --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;d-block&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- display: inline; --&gt;</span>
@@ -458,7 +458,7 @@
             </div>
           </div>
 
-<!-- divider utilities example -->
+<!-- divider utilities -->
 <pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- divider element --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;divider&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- divider element with text --&gt;</span>
@@ -496,7 +496,7 @@
             </div>
           </div>
 
-<!-- loading example -->
+<!-- loading -->
 <pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- loading element --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;loading&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;loading loading-lg&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
@@ -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">&lt;!-- clear float --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;clearfix&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- float: left and right --&gt;</span>
@@ -567,7 +567,7 @@
             </div>
           </div>
 
-<!-- shape utilities example -->
+<!-- shape utilities -->
 <pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- rounded element --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;rounded&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- circle element --&gt;</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">&lt;!-- left-aligned text --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-left&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- center-aligned text --&gt;</span>
-- 
cgit v1.3.1-23-gd82d