From d121966a525a72aa564d81a8da19b3c4fd154bfb Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Tue, 21 Feb 2017 17:05:09 +0800
Subject: CHG: Fix bugs and improve docs

---
 docs/components.html | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 7ae98cb..ec5c834 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -90,7 +90,7 @@
             <p><strong>Autocomplete</strong> form component provides suggestions while you type. It is often used for tags and contacts input. </p>
           </section>
           <div class="columns">
-            <div class="column col-8 col-xs-12">
+            <div class="column col-9 col-xs-12">
               <div class="form-group">
                 <div class="form-autocomplete">
                   <div class="form-autocomplete-input">
@@ -122,7 +122,7 @@
                 </div>
               </div>
             </div>
-            <div class="column col-8 col-xs-12">
+            <div class="column col-9 col-xs-12">
               <div class="form-group">
                 <div class="form-autocomplete">
                   <div class="form-autocomplete-input is-focused">
@@ -482,7 +482,7 @@
             <p><strong>Chips</strong> are complex entities in small blocks. </p>
           </section>
           <div class="columns">
-            <div class="column col-8 col-xs-12">
+            <div class="column col-9 col-xs-12">
               <div class="chip">
                 Crime
                 <button class="btn btn-clear"></button>
@@ -500,7 +500,7 @@
                 <button class="btn btn-clear"></button>
               </div>
             </div>
-            <div class="column col-8 col-xs-12">
+            <div class="column col-9 col-xs-12">
               <div class="chip">
                 <figure class="avatar" data-initial="TS" style="background-color: #5764c6;"></figure>
                 Tony Stark
@@ -767,11 +767,12 @@
           </section>
           <div class="columns">
             <div class="column">
-              <div class="modal-temp">
+              <a href="#example-modal-1" class="btn btn-primary">Open Modal</a>
+              <div class="modal" id="example-modal-1">
                 <div class="modal-overlay"></div>
                 <div class="modal-container" role="document">
                   <div class="modal-header">
-                    <button type="button" class="btn btn-clear float-right" aria-label="Close"></button>
+                    <a href="#modals" class="btn btn-clear float-right" aria-label="Close"></a>
                     <div class="modal-title">Modal title</div>
                   </div>
                   <div class="modal-body">
@@ -789,7 +790,7 @@
                     </div>
                   </div>
                   <div class="modal-footer">
-                    <button class="btn btn-link">Close</button>
+                    <a href="#modals" class="btn btn-link">Close</a>
                     <button class="btn btn-primary">Share</button>
                   </div>
                 </div>
@@ -902,7 +903,7 @@
           </section>
           <header id="breadcrumbs" class="text-center"><h4>Breadcrumbs</h4></header>
           <div class="columns">
-            <div class="column col-8 col-sm-12">
+            <div class="column col-9 col-sm-12">
               <ul class="breadcrumb">
                 <li class="breadcrumb-item">
                   <a href="#breadcrumbs">
@@ -1196,7 +1197,7 @@
             <p><strong>Tiles</strong> are repeatable or embeddable information blocks.</p>
           </section>
           <div class="columns">
-            <div class="column col-sm-12 col-8">
+            <div class="column col-9 col-sm-12">
               <div class="tile">
                 <div class="tile-icon">
                   <figure class="avatar avatar-lg">
@@ -1212,7 +1213,7 @@
                 </div>
               </div>
             </div>
-            <div class="column col-sm-12 col-8">
+            <div class="column col-9 col-sm-12">
               <div class="tile">
                 <div class="tile-icon">
                   <figure class="avatar avatar-lg">
@@ -1255,7 +1256,7 @@
             <p>Add the class <code>tile-centered</code> to the container <code>tile</code>. The <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code> will be vertically centered.</p>
           </section>
           <div class="columns">
-            <div class="column col-sm-12 col-8">
+            <div class="column col-6 col-sm-12">
               <div class="tile tile-centered">
                 <div class="tile-icon">
                   <div class="example-tile-icon">
@@ -1300,7 +1301,7 @@
             <p><strong>Toasts</strong> are used to show alert or information to users.</p>
           </section>
           <div class="columns">
-            <div class="column col-sm-12 col-8">
+            <div class="column col-9 col-sm-12">
               <div class="toast">
                 <button class="btn btn-clear float-right"></button>
                 <i class="icon icon-error_outline"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-- 
cgit v1.3.1-23-gd82d