Merge pull request #282 from picturepan2/0.4.1 v0.4.1

0.4.1

1 files changed, 37 insertions, 37 deletions

diff --git a/docs/utilities.html b/docs/utilities.html
index 5c45ae6..56f3f25 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
-  <meta name="robots" content="index, follow" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
-  <meta http-equiv="x-ua-compatible" content="ie=edge" />
-  <meta name="author" content="https://github.com/picturepan2/" />
+  <meta charset="utf-8">
+  <meta name="robots" content="index, follow">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="author" content="https://github.com/picturepan2/">
   <title>Utilities - Spectre.css CSS Framework</title>
-  <link rel="stylesheet" href="dist/spectre.css" />
-  <link rel="stylesheet" href="dist/spectre-icons.css" />
-  <link rel="stylesheet" href="css/docs.css" />
+  <link rel="stylesheet" href="dist/spectre.css">
+  <link rel="stylesheet" href="dist/spectre-icons.css">
+  <link rel="stylesheet" href="css/docs.css">
 </head>
 <body>
   <div class="s-container container">
@@ -17,14 +17,14 @@
       <div id="sidebar" class="s-sidebar">
         <div class="s-brand">
           <a href="index.html" class="s-logo">
-            <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
+            <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
             <h2>Spectre.css</h2>
           </a>
         </div>
         <div class="s-nav">
-          <div class="accordion">
-            <div class="accordion-item">
-              <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden />
+          <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
               </label>
@@ -48,8 +48,8 @@
                 </ul>
               </div>
             </div>
-            <div class="accordion-item">
-              <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden />
+            <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
               </label>
@@ -82,8 +82,8 @@
                 </ul>
               </div>
             </div>
-            <div class="accordion-item">
-              <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden />
+            <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
               </label>
@@ -101,8 +101,8 @@
                 </ul>
               </div>
             </div>
-            <div class="accordion-item">
-              <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden />
+            <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
               </label>
@@ -171,8 +171,8 @@
                 </ul>
               </div>
             </div>
-            <div class="accordion-item">
-              <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden checked />
+            <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
               </label>
@@ -205,8 +205,8 @@
                 </ul>
               </div>
             </div>
-            <div class="accordion-item">
-              <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden />
+            <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
               </label>
@@ -251,7 +251,7 @@
           <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a>
         </div>
         <a href="index.html" class="s-logo">
-          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
+          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
         </a>
         <div class="float-btn">
           <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
@@ -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>
@@ -426,15 +426,15 @@
               <form>
                 <div class="form-group">
                   <label class="form-label" for="input-example-1">Email</label>
-                  <input class="form-input" type="text" id="input-example-1" placeholder="Email" />
+                  <input class="form-input" type="text" id="input-example-1" placeholder="Email">
                 </div>
                 <div class="form-group">
                   <label class="form-label" for="input-example-2">Password</label>
-                  <input class="form-input" type="password" id="input-example-2" placeholder="Password" />
+                  <input class="form-input" type="password" id="input-example-2" placeholder="Password">
                 </div>
                 <div class="form-group">
                   <label class="form-checkbox">
-                    <input type="checkbox" />
+                    <input type="checkbox">
                     <i class="form-icon"></i> Remember me
                   </label>
                 </div>
@@ -448,7 +448,7 @@
               <form>
                 <div class="form-group">
                   <label class="form-label" for="input-example-3">Email</label>
-                  <input class="form-input" type="text" id="input-example-3" placeholder="Email" />
+                  <input class="form-input" type="text" id="input-example-3" placeholder="Email">
                 </div>
                 <div class="form-group">
                   <button class="btn btn-primary btn-block">Sign up</button>
@@ -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>