Merge pull request #287 from picturepan2/0.4.2 v0.4.2

0.4.2

1 files changed, 123 insertions, 112 deletions

diff --git a/docs/components.html b/docs/components.html
index c009ad6..08e98ac 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -228,6 +228,9 @@
                     <a href="experimentals.html#meters">Meters</a>
                   </li>
                   <li class="menu-item">
+                    <a href="experimentals.html#off-canvas">Off-canvas</a>
+                  </li>
+                  <li class="menu-item">
                     <a href="experimentals.html#parallax">Parallax</a>
                   </li>
                   <li class="menu-item">
@@ -260,6 +263,36 @@
       </div>
 
       <div id="content" class="s-content">
+        <div id="components" class="container">
+          <h3 class="s-title"><a href="#components" class="anchor" aria-hidden="true">#</a>Components</h3>
+        </div>
+
+        <div class="container">
+          <div class="docs-ad">
+            <div class="hide-md">
+              <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+              <!-- GitHub-lg -->
+              <ins class="adsbygoogle"
+                    style="display:inline-block;width:728px;height:90px"
+                    data-ad-client="ca-pub-2225124559530218"
+                    data-ad-slot="9894180784"></ins>
+              <script>
+              (adsbygoogle = window.adsbygoogle || []).push({});
+              </script>
+            </div>
+            <div class="show-md">
+              <!-- GitHub-sm -->
+              <ins class="adsbygoogle"
+                    style="display:inline-block;width:300px;height:250px"
+                    data-ad-client="ca-pub-2225124559530218"
+                    data-ad-slot="9278881734"></ins>
+              <script>
+              (adsbygoogle = window.adsbygoogle || []).push({});
+              </script>
+            </div>
+          </div>
+        </div>
+        
         <div id="accordions" class="container">
           <h3 class="s-title"><a href="#accordions" class="anchor" aria-hidden="true">#</a>Accordions</h3>
           <div class="docs-note">
@@ -268,108 +301,104 @@
           <div class="columns">
             <div class="column col-6 col-md-12">
               <div class="accordion">
-                <div class="accordion">
-                  <input type="radio" id="accordion-1" name="accordion-radio" hidden checked>
-                  <label class="accordion-header c-hand" for="accordion-1">
-                    <i class="icon icon-arrow-right mr-1"></i>
-                    Elements
-                  </label>
-                  <div class="accordion-body">
-                    <ul class="menu menu-nav">
-                      <li class="menu-item">
-                        <a href="#accordions">Element 1</a>
-                      </li>
-                      <li class="menu-item">
-                        <a href="#accordions">Element 2</a>
-                      </li>
-                    </ul>
-                  </div>
+                <input type="radio" id="accordion-1" name="accordion-radio" hidden checked>
+                <label class="accordion-header c-hand" for="accordion-1">
+                  <i class="icon icon-arrow-right mr-1"></i>
+                  Elements
+                </label>
+                <div class="accordion-body">
+                  <ul class="menu menu-nav">
+                    <li class="menu-item">
+                      <a href="#accordions">Element 1</a>
+                    </li>
+                    <li class="menu-item">
+                      <a href="#accordions">Element 2</a>
+                    </li>
+                  </ul>
                 </div>
-                <div class="accordion">
-                  <input type="radio" id="accordion-2" name="accordion-radio" hidden>
-                  <label class="accordion-header c-hand" for="accordion-2">
-                    <i class="icon icon-arrow-right mr-1"></i>
-                    Layout
-                  </label>
-                  <div class="accordion-body">
-                    <ul class="menu menu-nav">
-                      <li class="menu-item">
-                        <a href="#accordions">Layout 1</a>
-                      </li>
-                      <li class="menu-item">
-                        <a href="#accordions">Layout 2</a>
-                      </li>
-                    </ul>
-                  </div>
+              </div>
+              <div class="accordion">
+                <input type="radio" id="accordion-2" name="accordion-radio" hidden>
+                <label class="accordion-header c-hand" for="accordion-2">
+                  <i class="icon icon-arrow-right mr-1"></i>
+                  Layout
+                </label>
+                <div class="accordion-body">
+                  <ul class="menu menu-nav">
+                    <li class="menu-item">
+                      <a href="#accordions">Layout 1</a>
+                    </li>
+                    <li class="menu-item">
+                      <a href="#accordions">Layout 2</a>
+                    </li>
+                  </ul>
                 </div>
-                <div class="accordion">
-                  <input type="radio" id="accordion-3" name="accordion-radio" hidden>
-                  <label class="accordion-header c-hand" for="accordion-3">
-                    <i class="icon icon-arrow-right mr-1"></i>
-                    Components
-                  </label>
-                  <div class="accordion-body">
-                    <ul class="menu menu-nav">
-                      <li class="menu-item">
-                        <a href="#accordions">Component 1</a>
-                      </li>
-                      <li class="menu-item">
-                        <a href="#accordions">Component 2</a>
-                      </li>
-                    </ul>
-                  </div>
+              </div>
+              <div class="accordion">
+                <input type="radio" id="accordion-3" name="accordion-radio" hidden>
+                <label class="accordion-header c-hand" for="accordion-3">
+                  <i class="icon icon-arrow-right mr-1"></i>
+                  Components
+                </label>
+                <div class="accordion-body">
+                  <ul class="menu menu-nav">
+                    <li class="menu-item">
+                      <a href="#accordions">Component 1</a>
+                    </li>
+                    <li class="menu-item">
+                      <a href="#accordions">Component 2</a>
+                    </li>
+                  </ul>
                 </div>
               </div>
             </div>
             <div class="column col-6 col-md-12">
-              <div class="accordion-container">
-                <div class="accordion">
-                  <input type="checkbox" id="accordion-4" name="accordion-checkbox" hidden checked>
-                  <label class="accordion-header c-hand" for="accordion-4">
-                    Elements
-                  </label>
-                  <div class="accordion-body">
-                    <ul class="menu menu-nav">
-                      <li class="menu-item">
-                        <a href="#accordions">Element 1</a>
-                      </li>
-                      <li class="menu-item">
-                        <a href="#accordions">Element 2</a>
-                      </li>
-                    </ul>
-                  </div>
+              <div class="accordion">
+                <input type="checkbox" id="accordion-4" name="accordion-checkbox" hidden checked>
+                <label class="accordion-header c-hand" for="accordion-4">
+                  Elements
+                </label>
+                <div class="accordion-body">
+                  <ul class="menu menu-nav">
+                    <li class="menu-item">
+                      <a href="#accordions">Element 1</a>
+                    </li>
+                    <li class="menu-item">
+                      <a href="#accordions">Element 2</a>
+                    </li>
+                  </ul>
                 </div>
-                <div class="accordion">
-                  <input type="checkbox" id="accordion-5" name="accordion-checkbox" hidden>
-                  <label class="accordion-header c-hand" for="accordion-5">
-                    Layout
-                  </label>
-                  <div class="accordion-body">
-                    <ul class="menu menu-nav">
-                      <li class="menu-item">
-                        <a href="#accordions">Layout 1</a>
-                      </li>
-                      <li class="menu-item">
-                        <a href="#accordions">Layout 2</a>
-                      </li>
-                    </ul>
-                  </div>
+              </div>
+              <div class="accordion">
+                <input type="checkbox" id="accordion-5" name="accordion-checkbox" hidden>
+                <label class="accordion-header c-hand" for="accordion-5">
+                  Layout
+                </label>
+                <div class="accordion-body">
+                  <ul class="menu menu-nav">
+                    <li class="menu-item">
+                      <a href="#accordions">Layout 1</a>
+                    </li>
+                    <li class="menu-item">
+                      <a href="#accordions">Layout 2</a>
+                    </li>
+                  </ul>
                 </div>
-                <div class="accordion">
-                  <input type="checkbox" id="accordion-6" name="accordion-checkbox" hidden>
-                  <label class="accordion-header c-hand" for="accordion-6">
-                    Components
-                  </label>
-                  <div class="accordion-body">
-                    <ul class="menu menu-nav">
-                      <li class="menu-item">
-                        <a href="#accordions">Component 1</a>
-                      </li>
-                      <li class="menu-item">
-                        <a href="#accordions">Component 2</a>
-                      </li>
-                    </ul>
-                  </div>
+              </div>
+              <div class="accordion">
+                <input type="checkbox" id="accordion-6" name="accordion-checkbox" hidden>
+                <label class="accordion-header c-hand" for="accordion-6">
+                  Components
+                </label>
+                <div class="accordion-body">
+                  <ul class="menu menu-nav">
+                    <li class="menu-item">
+                      <a href="#accordions">Component 1</a>
+                    </li>
+                    <li class="menu-item">
+                      <a href="#accordions">Component 2</a>
+                    </li>
+                  </ul>
                 </div>
               </div>
             </div>
@@ -404,24 +433,6 @@
             <p>Alternatively, you can use <code>details</code> and <code>summary</code> instead of <code>input</code> radio or checkbox trick. Add the <code>open</code> attribute to <code>details</code> to expand it. Microsoft Edge support is <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/" target="_blank">in development</a>.</p>
           </div>
 
-          <div class="columns">
-            <div class="column col-sm-12 col-6">
-              <details class="accordion" open>
-                <summary class="accordion-header c-hand"> <i class="icon icon-arrow-right mr-1"></i> Elements</summary>
-                <div class="accordion-body">
-                  <ul class="menu menu-nav">
-                    <li class="menu-item">
-                      <a href="#accordions">Element 1</a>
-                    </li>
-                    <li class="menu-item">
-                      <a href="#accordions">Element 2</a>
-                    </li>
-                  </ul>
-                </div>
-              </details>
-            </div>
-          </div>
-
 <!-- accordions -->
 <pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- details and summary Accordions example --&gt;</span>
 &lt;<span class="tag">details</span> <span class="atn">class</span>=<span class="atv">&quot;accordion&quot;</span> <span class="atn">open</span>&gt;