CHG: Fixed a number of bugs

1 files changed, 27 insertions, 25 deletions

diff --git a/docs/components.html b/docs/components.html
index b5ba342..80fc620 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -107,17 +107,16 @@
                       <button class="btn btn-clear"></button>
                     </div>
                     <div class="chip">
-                      <img src="img/avatar-1.png" class="avatar" />
+                      <img src="img/avatar-1.png" class="avatar avatar-sm" />
                       Thor Odinson
                       <button class="btn btn-clear"></button>
                     </div>
                     <div class="chip">
-                      <img src="img/avatar-4.png" class="avatar" />
+                      <img src="img/avatar-4.png" class="avatar avatar-sm" />
                       Steve Rogers
                       <button class="btn btn-clear"></button>
                     </div>
                     <div class="chip">
-                      <figure class="avatar" data-initial="TS" style="background-color: #A2A8E1;"></figure>
                       Tony Stark
                       <button class="btn btn-clear"></button>
                     </div>
@@ -139,7 +138,7 @@
                       <button class="btn btn-clear"></button>
                     </div>
                     <div class="chip">
-                      <img src="img/avatar-1.png" class="avatar" alt="Thor Odinson"/>
+                      <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"/>
                       Thor Odinson
                       <button class="btn btn-clear"></button>
                     </div>
@@ -160,7 +159,7 @@
                       <a href="#autocomplete">
                         <div class="tile tile-centered">
                           <div class="tile-icon">
-                            <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #A2A8E1;"></figure>
+                            <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5764c6;"></figure>
                           </div>
                           <div class="tile-content">
                             Tony <mark>S</mark>tark
@@ -185,7 +184,7 @@
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-autocomplete-input&quot;</span>&gt;
     <span class="com">&lt;!-- autocomplete chips --&gt;</span>
     &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
-      &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;Thor Odinson&quot;</span> /&gt;
+      &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-sm&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;Thor Odinson&quot;</span> /&gt;
       Thor Odinson
       &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
     &lt;<span class="tag">/div</span>&gt;
@@ -199,7 +198,7 @@
       &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
         &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile tile-centered&quot;</span>&gt;
           &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-icon&quot;</span>&gt;
-            &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-4.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;Steve Rogers&quot;</span> /&gt;
+            &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-4.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-sm&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;Steve Rogers&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;tile-content&quot;</span>&gt;
             Steve Rogers
@@ -211,7 +210,7 @@
       &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
         &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile tile-centered&quot;</span>&gt;
           &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-icon&quot;</span>&gt;
-            &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-3.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;Yan Zhu&quot;</span> /&gt;
+            &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-3.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-sm&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;Yan Zhu&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;tile-content&quot;</span>&gt;
             Yan Zhu
@@ -319,17 +318,17 @@
               </span>
             </div>
             <div class="column col-xs-6">
-              <span class="badge" data-badge="1">
+              <span class="badge" data-badge="8">
                 Notifications
               </span>
             </div>
             <div class="column col-xs-6">
-              <span class="badge" data-badge="99">
+              <span class="badge" data-badge="88">
                 Notifications
               </span>
             </div>
             <div class="column col-xs-6">
-              <span class="badge" data-badge="999">
+              <span class="badge" data-badge="888">
                 Notifications
               </span>
             </div>
@@ -507,15 +506,15 @@
             </div>
             <div class="column col-12">
               <div class="chip">
-                <figure class="avatar" data-initial="TS" style="background-color: #5764c6;"></figure>
+                <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5764c6;"></figure>
                 Tony Stark
               </div>
               <div class="chip">
-                <img src="img/avatar-1.png" class="avatar" />
+                <img src="img/avatar-1.png" class="avatar avatar-sm" />
                 Thor Odinson
               </div>
               <div class="chip">
-                <img src="img/avatar-4.png" class="avatar" />
+                <img src="img/avatar-4.png" class="avatar avatar-sm" />
                 Steve Rogers
               </div>
             </div>
@@ -533,7 +532,7 @@
 &lt;<span class="tag">/div</span>&gt;
 
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
-  &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar&quot;</span> /&gt;
+  &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-sm&quot;</span> /&gt;
   Yan Zhu
   &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
 &lt;<span class="tag">/div</span>&gt;</code>
@@ -544,7 +543,7 @@
         <section id="dropdowns" class="container">
           <header class="text-center"><h3>Dropdowns</h3></header>
           <section class="notes">
-            <p>A <strong>dropdown</strong> is a combination of buttons and menus.</p>
+            <p>The <strong>dropdown</strong> is a combination of buttons and menus.</p>
           </section>
           <div class="columns">
             <div class="column col-xs-12">
@@ -664,7 +663,7 @@
         <section id="menus" class="container">
           <header class="text-center"><h3>Menus</h3></header>
           <section class="notes">
-            <p>A <strong>menu</strong> is a vertical list of links or buttons for actions and navigation.</p>
+            <p>The <strong>menu</strong> is a vertical list of links or buttons for actions and navigation.</p>
           </section>
           <div class="columns">
             <div class="column col-xs-12">
@@ -802,7 +801,7 @@
           </div>
           <section class="notes">
             <p>Add a container element with the class <code>modal</code>. And add a real container <code>modal-container</code> and overlay <code>modal-overlay</code> inside it. You can add child elements with the class name <code>modal-header</code>, <code>modal-content</code> and <code>modal-footer</code> - any or all of them. </p>
-            <p>Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the class <code>active</code> to the <code>modal</code> container</p>
+            <p>Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the class <code>active</code> to the <code>modal</code> container.</p>
           </section>
 <!-- modals example -->
 <pre>
@@ -1037,7 +1036,7 @@
                   </a>
                 </li>
                 <li class="tab-item">
-                  <a href="#tabs" class="badge" data-badge="99">
+                  <a href="#tabs">
                     Playlists
                   </a>
                 </li>
@@ -1122,7 +1121,7 @@
 <pre>
 <code class="code lang-html" data-lang="HTML">&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;tab&quot;</span>&gt;
   &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item active&quot;</span>&gt;
-    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;badge&quot;</span> <span class="atn">data-badge</span>=<span class="atv">&quot;9&quot;</span>&gt;
+    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
       Music
     &lt;<span class="tag">/a</span>&gt;
   &lt;<span class="tag">/li</span>&gt;
@@ -1517,17 +1516,20 @@
           <div class="columns">
             <div class="column col-sm-12">
               <div class="toast toast-primary">
-                <i class="icon icon-error_outline"></i> Toast primary
+                <button class="btn btn-clear float-right"></button>
+                Toast primary
               </div>
             </div>
             <div class="column col-sm-12">
               <div class="toast toast-success">
-                <i class="icon icon-error_outline"></i> Toast success
+                <button class="btn btn-clear float-right"></button>
+                Toast success
               </div>
             </div>
             <div class="column col-sm-12">
               <div class="toast toast-danger">
-                <i class="icon icon-error_outline"></i> Toast danger
+                <button class="btn btn-clear float-right"></button>
+                Toast danger
               </div>
             </div>
           </div>
@@ -1587,13 +1589,13 @@
             <li class="page-item page-prev">
               <a href="layout.html">
                 <p class="page-item-meta">Previous</p>
-                <h3 class="page-item-title">Layout</h3>
+                <h4 class="page-item-title">Layout</h4>
               </a>
             </li>
             <li class="page-item page-next">
               <a href="utilities.html">
                 <p class="page-item-meta">Next</p>
-                <h3 class="page-item-title">Utilities</h3>
+                <h4 class="page-item-title">Utilities</h4>
               </a>
             </li>
           </ul>