From 706c3577c517631e8460b58afe975e6f6abe2c79 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Thu, 3 Aug 2017 13:27:26 +0800
Subject: Add form-checkbox, radio and switch validation styles

---
 docs/components.html | 64 ++++++++++++++++++++++++++--------------------------
 1 file changed, 32 insertions(+), 32 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 35c522a..3a9bbad 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -419,12 +419,12 @@
                       <button class="btn btn-clear"></button>
                     </label>
                     <label class="chip">
-                      <img src="img/avatar-1.png" class="avatar avatar-sm" />
+                      <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Avatar" />
                       Thor Odinson
                       <button class="btn btn-clear"></button>
                     </label>
                     <label class="chip">
-                      <img src="img/avatar-4.png" class="avatar avatar-sm" />
+                      <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Avatar" />
                       Steve Rogers
                       <button class="btn btn-clear"></button>
                     </label>
@@ -539,19 +539,19 @@
           <div class="columns">
             <div class="column col-6 col-xs-12">
               <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;">
-                <img src="img/avatar-1.png" />
+                <img src="img/avatar-1.png" alt="Avatar" />
               </figure>
               <figure class="avatar avatar-lg" data-initial="YZ" style="background-color: #5764c6;">
-                <img src="img/avatar-2.png" />
+                <img src="img/avatar-2.png" alt="Avatar" />
               </figure>
               <figure class="avatar" data-initial="YZ" style="background-color: #5764c6;">
-                <img src="img/avatar-3.png" />
+                <img src="img/avatar-3.png" alt="Avatar" />
               </figure>
               <figure class="avatar avatar-sm" data-initial="YZ" style="background-color: #5764c6;">
-                <img src="img/avatar-4.png" />
+                <img src="img/avatar-4.png" alt="Avatar" />
               </figure>
               <figure class="avatar avatar-xs" data-initial="YZ" style="background-color: #5764c6;">
-                <img src="img/avatar-5.png" />
+                <img src="img/avatar-5.png" alt="Avatar" />
               </figure>
             </div>
             <div class="column col-6 col-xs-12">
@@ -569,24 +569,24 @@
           <div class="columns">
             <div class="column col-6 col-xs-12">
               <figure class="avatar avatar-xl">
-                <img src="img/avatar-1.png" />
-                <img src="img/avatar-2.png" class="avatar-icon" />
+                <img src="img/avatar-1.png" alt="Avatar" />
+                <img src="img/avatar-2.png" class="avatar-icon" alt="Avatar" />
               </figure>
               <figure class="avatar avatar-lg">
-                <img src="img/avatar-2.png" />
-                <img src="img/avatar-3.png" class="avatar-icon" />
+                <img src="img/avatar-2.png" alt="Avatar" />
+                <img src="img/avatar-3.png" class="avatar-icon" alt="Avatar" />
               </figure>
               <figure class="avatar">
-                <img src="img/avatar-3.png" />
-                <img src="img/avatar-4.png" class="avatar-icon" />
+                <img src="img/avatar-3.png" alt="Avatar" />
+                <img src="img/avatar-4.png" class="avatar-icon" alt="Avatar" />
               </figure>
               <figure class="avatar avatar-sm">
-                <img src="img/avatar-4.png" />
-                <img src="img/avatar-5.png" class="avatar-icon" />
+                <img src="img/avatar-4.png" alt="Avatar" />
+                <img src="img/avatar-5.png" class="avatar-icon" alt="Avatar" />
               </figure>
               <figure class="avatar avatar-xs">
-                <img src="img/avatar-5.png" />
-                <img src="img/avatar-1.png" class="avatar-icon" />
+                <img src="img/avatar-5.png" alt="Avatar" />
+                <img src="img/avatar-1.png" class="avatar-icon" alt="Avatar" />
               </figure>
             </div>
           </div>
@@ -594,19 +594,19 @@
 <!-- avatars example -->
 <pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- Basic avatar examples --&gt;</span>
 &lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span>&gt;
-  &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&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">alt</span>=<span class="atv">&quot;...&quot;</span> /&gt;
 &lt;<span class="tag">/figure</span>&gt;
 
 &lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span>&gt;
-  &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> /&gt;
-  &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-5.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar-icon&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">alt</span>=<span class="atv">&quot;...&quot;</span> /&gt;
+  &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-5.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar-icon&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span> /&gt;
 &lt;<span class="tag">/figure</span>&gt;
 
 &lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span> <span class="atn">data-initial</span>=<span class="atv">&quot;YZ&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;background-color: #5764c6;&quot;</span>&gt;&lt;<span class="tag">/figure</span>&gt;
 
 <span class="com">&lt;!-- Show initals when avatar image is unavailable or not fully loaded --&gt;</span>
 &lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span> <span class="atn">data-initial</span>=<span class="atv">&quot;YZ&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;background-color: #5764c6;&quot;</span>&gt;
-  &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&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">alt</span>=<span class="atv">&quot;...&quot;</span> /&gt;
 &lt;<span class="tag">/figure</span>&gt;
 </code></pre>
 
@@ -856,7 +856,7 @@
             <div class="column col-6 col-xs-12">
               <div class="card">
                 <div class="card-image">
-                  <img class="img-responsive" src="img/osx-el-capitan.jpg" />
+                  <img class="img-responsive" src="img/osx-el-capitan.jpg" alt="OS X El Capitan" />
                 </div>
                 <div class="card-header">
                   <div class="card-title">Microsoft</div>
@@ -877,7 +877,7 @@
                   <div class="card-subtitle">Hardware and software</div>
                 </div>
                 <div class="card-image">
-                  <img class="img-responsive" src="img/osx-yosemite.jpg" />
+                  <img class="img-responsive" src="img/osx-yosemite.jpg" alt="OS X Yosemite" />
                 </div>
                 <div class="card-body">
                   To make a contribution to the world by making tools for the mind that advance humankind.
@@ -901,7 +901,7 @@
                   Organize the world’s information and make it universally accessible and useful.
                 </div>
                 <div class="card-image">
-                  <img class="img-responsive" src="img/osx-yosemite-2.jpg" />
+                  <img class="img-responsive" src="img/osx-yosemite-2.jpg" alt="OS X Yosemite"/>
                 </div>
                 <div class="card-footer">
                   <a href="#cards" class="btn btn-primary">Search</a>
@@ -912,7 +912,7 @@
             <div class="column col-6 col-xs-12">
               <div class="card">
                 <div class="card-image">
-                  <img class="img-responsive" src="img/osx-el-capitan-2.jpg" />
+                  <img class="img-responsive" src="img/osx-el-capitan-2.jpg" alt="OS X El Capitan" />
                 </div>
                 <div class="card-footer">
                   <a href="#cards" class="btn btn-primary">Buy</a>
@@ -933,14 +933,14 @@
                   To make a contribution to the world by making tools for the mind that advance humankind.
                 </div>
                 <div class="card-image">
-                  <img class="img-responsive" src="img/macos-sierra.jpg" />
+                  <img class="img-responsive" src="img/macos-sierra.jpg" alt="macOS Sierra" />
                 </div>
               </div>
             </div>
             <div class="column col-6 col-xs-12">
               <div class="card">
                 <div class="card-image">
-                  <img class="img-responsive" src="img/macos-sierra-2.jpg" />
+                  <img class="img-responsive" src="img/macos-sierra-2.jpg" alt="macOS Sierra" />
                 </div>
                 <div class="card-header">
                   <button class="btn btn-primary float-right"><i class="icon icon-plus"></i></button>
@@ -1007,11 +1007,11 @@
                 Tony Stark
               </label>
               <label class="chip">
-                <img src="img/avatar-1.png" class="avatar avatar-sm" />
+                <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"/>
                 Thor Odinson
               </label>
               <label class="chip">
-                <img src="img/avatar-4.png" class="avatar avatar-sm" />
+                <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers" />
                 Steve Rogers
               </label>
             </div>
@@ -1046,7 +1046,7 @@
                 <li class="menu-item">
                   <div class="tile tile-centered">
                     <div class="tile-icon">
-                      <img src="img/avatar-4.png" class="avatar" />
+                      <img src="img/avatar-4.png" class="avatar" alt="Avatar" />
                     </div>
                     <div class="tile-content">
                       Steve Rogers
@@ -1942,7 +1942,7 @@
               <div class="tile">
                 <div class="tile-icon">
                   <figure class="avatar avatar-lg">
-                    <img src="img/avatar-3.png" />
+                    <img src="img/avatar-3.png" alt="Avatar" />
                   </figure>
                 </div>
                 <div class="tile-content">
@@ -1959,7 +1959,7 @@
               <div class="tile">
                 <div class="tile-icon">
                   <figure class="avatar avatar-lg">
-                    <img src="img/avatar-2.png" />
+                    <img src="img/avatar-2.png" alt="Avatar" />
                   </figure>
                 </div>
                 <div class="tile-content">
-- 
cgit v1.3.1-23-gd82d