Merge pull request #160 from picturepan2/feature/0.2.8 v0.2.8

Feature/0.2.8

1 files changed, 113 insertions, 120 deletions

diff --git a/docs/components.html b/docs/components.html
index 9c4186b..21573b6 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -4,7 +4,7 @@
   <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 http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="author" content="https://github.com/picturepan2/" />
   <title>Components - Spectre.css</title>
   <link rel="stylesheet" href="css/spectre.css" />
@@ -62,9 +62,6 @@
                 <a href="components.html#chips">Chips</a>
               </li>
               <li class="nav-item">
-                <a href="components.html#dropdowns">Dropdowns</a>
-              </li>
-              <li class="nav-item">
                 <a href="components.html#menus">Menus</a>
               </li>
               <li class="nav-item">
@@ -253,8 +250,7 @@
               </figure>
             </div>
             <div class="column col-6 col-xs-12">
-              <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;"></figure>
-              <figure class="avatar avatar-lg" data-initial="YZ" style="background-color: #5764c6;"></figure>
+              <figure class="avatar avatar-xl" data-initial="YZ"></figure>
               <figure class="avatar" data-initial="YZ" style="background-color: #5764c6;"></figure>
               <figure class="avatar avatar-sm" data-initial="YZ" style="background-color: #5764c6;"></figure>
               <figure class="avatar avatar-xs" data-initial="YZ" style="background-color: #5764c6;"></figure>
@@ -390,17 +386,17 @@
           <div class="columns">
             <div class="column col-8 col-xs-12">
               <div class="bar">
-                <div class="bar-item tooltip" data-tooltip="50%" style="width:50%;"></div>
+                <div class="bar-item tooltip" data-tooltip="50%" role="progressbar" style="width:50%;"></div>
               </div>
             </div>
           </div>
           <div class="columns">
             <div class="column col-8 col-xs-12">
               <div class="bar">
-                <div class="bar-item tooltip" data-tooltip="25%" style="width:25%;">25%</div>
-                <div class="bar-item tooltip" data-tooltip="15%" style="width:15%;background:#818bd5;">15%</div>
-                <div class="bar-item tooltip" data-tooltip="10%" style="width:10%;background:#abb1e2;">10%</div>
-                <div class="bar-item tooltip" data-tooltip="15%" style="width:15%;">15%</div>
+                <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;">25%</div>
+                <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;background:#818bd5;">15%</div>
+                <div class="bar-item tooltip" data-tooltip="10%" role="progressbar" style="width:10%;background:#abb1e2;">10%</div>
+                <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;">15%</div>
               </div>
             </div>
           </div>
@@ -610,8 +606,112 @@
 
         </section>
 
-        <section id="dropdowns" class="container">
-          <header class="text-center"><h3>Dropdowns</h3></header>
+        <section id="menus" class="container">
+          <header class="text-center"><h3>Menus</h3></header>
+          <section class="notes">
+            <p><strong>Menus</strong> are vertical list of links or buttons for actions and navigation.</p>
+          </section>
+          <div class="columns">
+            <div class="column col-xs-12">
+              <ul class="menu">
+                <li class="menu-item">
+                  <div class="tile tile-centered">
+                    <div class="tile-icon">
+                      <img src="img/avatar-4.png" class="avatar" />
+                    </div>
+                    <div class="tile-content">
+                      Steve Rogers
+                    </div>
+                  </div>
+                </li>
+                <li class="divider"></li>
+                <li class="menu-item">
+                  <div class="menu-badge">
+                    <label class="label label-primary">2</label>
+                  </div>
+                  <a href="#menus" class="active">
+                    My profile
+                  </a>
+                </li>
+                <li class="menu-item">
+                  <a href="#menus">
+                    Settings
+                  </a>
+                </li>
+                <li class="menu-item">
+                  <a href="#menus">
+                    Logout
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div class="column col-xs-12">
+              <ul class="menu">
+                <li class="menu-header">
+                  <span class="menu-header-text">
+                    LINKS
+                  </span>
+                </li>
+                <li class="menu-item">
+                  <a href="#menus">
+                    <i class="icon icon-link"></i> Slack
+                  </a>
+                </li>
+                <li class="menu-item">
+                  <a href="#menus">
+                    <i class="icon icon-link"></i> Hipchat
+                  </a>
+                </li>
+                <li class="menu-item">
+                  <a href="#menus">
+                    <i class="icon icon-link"></i> Skype
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <section class="notes">
+            <p>Add a container element with the class <code>menu</code>. And add child elements with the classname <code>menu-item</code>. You can separate menu items with a <code>divider</code> or <code>menu-header</code>. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.</p>
+          </section>
+
+<!-- menus example -->
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;menu&quot;</span>&gt;
+  <span class="com">&lt;!-- menu header --&gt;</span>
+  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-header&quot;</span>&gt;
+    &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;menu-header-text&quot;</span>&gt;
+      LINKS
+    &lt;<span class="tag">/span</span>&gt;
+  &lt;<span class="tag">/li</span>&gt;
+  <span class="com">&lt;!-- menu item --&gt;</span>
+  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
+    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
+      &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-link&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Slack
+    &lt;<span class="tag">/a</span>&gt;
+  &lt;<span class="tag">/li</span>&gt;
+  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
+    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
+      &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-link&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Hipchat
+    &lt;<span class="tag">/a</span>&gt;
+  &lt;<span class="tag">/li</span>&gt;
+  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
+    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
+      &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-link&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Skype
+    &lt;<span class="tag">/a</span>&gt;
+  &lt;<span class="tag">/li</span>&gt;
+  <span class="com">&lt;!-- menu divider --&gt;</span>
+  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;divider&quot;</span>&gt;&lt;<span class="tag">/li</span>&gt;
+  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;menu-badge&quot;</span>&gt;
+      &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;label label-primary&quot;</span>&gt;2&lt;<span class="tag">/label</span>&gt;
+    &lt;<span class="tag">/div</span>&gt;
+    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
+      &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-link&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Settings
+    &lt;<span class="tag">/a</span>&gt;
+  &lt;<span class="tag">/li</span>&gt;
+&lt;<span class="tag">/ul</span>&gt;
+</code></pre>
+
+          <header id="dropdowns" class="text-center"><h4>Dropdown menus</h4></header>
           <section class="notes">
             <p>The <strong>dropdown</strong> is a combination of buttons and menus.</p>
           </section>
@@ -731,113 +831,6 @@
 
         </section>
 
-        <section id="menus" class="container">
-          <header class="text-center"><h3>Menus</h3></header>
-          <section class="notes">
-            <p><strong>Menus</strong> are vertical list of links or buttons for actions and navigation.</p>
-          </section>
-          <div class="columns">
-            <div class="column col-xs-12">
-              <ul class="menu">
-                <li class="menu-item">
-                  <div class="tile tile-centered">
-                    <div class="tile-icon">
-                      <img src="img/avatar-4.png" class="avatar" />
-                    </div>
-                    <div class="tile-content">
-                      Steve Rogers
-                    </div>
-                  </div>
-                </li>
-                <li class="divider"></li>
-                <li class="menu-item">
-                  <div class="menu-badge">
-                    <label class="label label-primary">2</label>
-                  </div>
-                  <a href="#menus" class="active">
-                    My profile
-                  </a>
-                </li>
-                <li class="menu-item">
-                  <a href="#menus">
-                    Settings
-                  </a>
-                </li>
-                <li class="menu-item">
-                  <a href="#menus">
-                    Logout
-                  </a>
-                </li>
-              </ul>
-            </div>
-            <div class="column col-xs-12">
-              <ul class="menu">
-                <li class="menu-header">
-                  <span class="menu-header-text">
-                    LINKS
-                  </span>
-                </li>
-                <li class="menu-item">
-                  <a href="#menus">
-                    <i class="icon icon-link"></i> Slack
-                  </a>
-                </li>
-                <li class="menu-item">
-                  <a href="#menus">
-                    <i class="icon icon-link"></i> Hipchat
-                  </a>
-                </li>
-                <li class="menu-item">
-                  <a href="#menus">
-                    <i class="icon icon-link"></i> Skype
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <section class="notes">
-            <p>Add a container element with the class <code>menu</code>. And add child elements with the classname <code>menu-item</code>. You can separate menu items with a <code>divider</code> or <code>menu-header</code>. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.</p>
-          </section>
-
-<!-- menus example -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;menu&quot;</span>&gt;
-  <span class="com">&lt;!-- menu header --&gt;</span>
-  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-header&quot;</span>&gt;
-    &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;menu-header-text&quot;</span>&gt;
-      LINKS
-    &lt;<span class="tag">/span</span>&gt;
-  &lt;<span class="tag">/li</span>&gt;
-  <span class="com">&lt;!-- menu item --&gt;</span>
-  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
-    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
-      &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-link&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Slack
-    &lt;<span class="tag">/a</span>&gt;
-  &lt;<span class="tag">/li</span>&gt;
-  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
-    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
-      &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-link&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Hipchat
-    &lt;<span class="tag">/a</span>&gt;
-  &lt;<span class="tag">/li</span>&gt;
-  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
-    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
-      &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-link&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Skype
-    &lt;<span class="tag">/a</span>&gt;
-  &lt;<span class="tag">/li</span>&gt;
-  <span class="com">&lt;!-- menu divider --&gt;</span>
-  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;divider&quot;</span>&gt;&lt;<span class="tag">/li</span>&gt;
-  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
-    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;menu-badge&quot;</span>&gt;
-      &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;label label-primary&quot;</span>&gt;2&lt;<span class="tag">/label</span>&gt;
-    &lt;<span class="tag">/div</span>&gt;
-    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
-      &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-link&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Settings
-    &lt;<span class="tag">/a</span>&gt;
-  &lt;<span class="tag">/li</span>&gt;
-&lt;<span class="tag">/ul</span>&gt;
-</code></pre>
-
-        </section>
-
         <section id="modals" class="container">
           <header class="text-center"><h3>Modals</h3></header>
           <section class="notes">