From bdc68333d66fca64db3f65a790a11de2d15db958 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Mon, 23 Jan 2017 15:38:53 +0800
Subject: CHG: Cleanup codes and add more focus style

---
 index.html | 99 ++++++++++++++++++++++++++------------------------------------
 1 file changed, 41 insertions(+), 58 deletions(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index 12e5d1c..e3962de 100644
--- a/index.html
+++ b/index.html
@@ -665,29 +665,6 @@
                                 </select>
                             </div>
                         </div>
-                        <div class="form-group">
-                            <div class="col-3">
-                                <label class="form-label">Tags</label>
-                            </div>
-                            <div class="col-9">
-                                <div class="chip-sm">
-                                    <span class="chip-name">Crime</span>
-                                    <button class="btn btn-clear"></button>
-                                </div>
-                                <div class="chip-sm">
-                                    <span class="chip-name">Drama</span>
-                                    <button class="btn btn-clear"></button>
-                                </div>
-                                <div class="chip-sm">
-                                    <span class="chip-name">Biography</span>
-                                    <button class="btn btn-clear"></button>
-                                </div>
-                                <div class="chip-sm">
-                                    <span class="chip-name">Mystery</span>
-                                    <button class="btn btn-clear"></button>
-                                </div>
-                            </div>
-                        </div>
                         <div class="form-group">
                             <div class="col-3"></div>
                             <div class="col-9">
@@ -1560,39 +1537,44 @@
             <div class="columns">
                 <div class="column col-xs-12">
                     <div class="chip-sm">
-                        <span class="chip-name">Crime</span>
+                        Crime
                         <button class="btn btn-clear"></button>
                     </div>
                     <div class="chip-sm">
-                        <span class="chip-name">Drama</span>
+                        Drama
                         <button class="btn btn-clear"></button>
                     </div>
                     <div class="chip-sm">
-                        <span class="chip-name">Biography</span>
+                        Biography
                         <button class="btn btn-clear"></button>
                     </div>
                     <div class="chip-sm">
-                        <span class="chip-name">Mystery</span>
+                        Mystery
                         <button class="btn btn-clear"></button>
                     </div>
                 </div>
                 <div class="column col-xs-12">
                     <div class="chip-sm">
                         <figure class="avatar" data-initial="TS" style="background-color: #5764c6;"></figure>
-                        <span class="chip-name">Tony Stark</span>
+                        Tony Stark
                         <button class="btn btn-clear"></button>
                     </div>
                     <div class="chip-sm">
                         <img src="demo/img/avatar-1.png" class="avatar" />
-                        <span class="chip-name">Thor Odinson</span>
+                        Thor Odinson
                         <button class="btn btn-clear"></button>
                     </div>
                     <div class="chip-sm">
                         <img src="demo/img/avatar-4.png" class="avatar" />
-                        <span class="chip-name">Steve Rogers</span>
+                        Steve Rogers
                     </div>
                 </div>
             </div>
+
+            <section class="notes">
+                <p>Add a container element with the class <code>chip-sm</code>. And add child text element, buttons or avatars with the class <code>avatar</code>.</p>
+            </section>
+
             <div class="columns hide">
                 <div class="column col-4 col-xs-12">
                     <div class="chip">
@@ -1601,29 +1583,25 @@
                         </div>
                         <div class="chip-content">
                             <div class="chip-title">Tony Stark</div>
-                            <div class="chip-meta">Iron Man</div>
+                            <div class="chip-meta">Iron man</div>
                         </div>
                         <div class="chip-action">
-                            <button class="btn btn-clear"></button>
+                            <button class="btn btn-primary"><i class="icon icon-playlist_add"></i></button>
                         </div>
                     </div>
                 </div>
             </div>
 
-            <section class="notes">
-                <p>Add a container element with the class <code>chip</code>. And add child text elements with <code>chip-name</code> or icons with  <code>icon</code>.</p>
-            </section>
-
             <!-- chips example -->
 <pre class="code lang-html">
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-sm&quot;</span>&gt;
-    &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;chip-name&quot;</span>&gt;Crime&lt;<span class="tag">/span</span>&gt;
+    Crime
     &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;
 
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-sm&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">span</span> <span class="atn">class</span>=<span class="atv">&quot;chip-name&quot;</span>&gt;Yan Zhu&lt;<span class="tag">/span</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;
 </pre>
@@ -1642,25 +1620,25 @@
                             <div class="form-autocomplete-input">
                                 <div class="chip-sm">
                                     <figure class="avatar" data-initial="TS" style="background-color: #A2A8E1;"></figure>
-                                    <span class="chip-name">Tony Stark</span>
+                                    Tony Stark
                                     <button class="btn btn-clear"></button>
                                 </div>
                                 <div class="chip-sm">
                                     <img src="demo/img/avatar-1.png" class="avatar" />
-                                    <span class="chip-name">Thor Odinson</span>
+                                    Thor Odinson
                                     <button class="btn btn-clear"></button>
                                 </div>
                                 <div class="chip-sm">
                                     <img src="demo/img/avatar-4.png" class="avatar" />
-                                    <span class="chip-name">Steve Rogers</span>
+                                    Steve Rogers
                                     <button class="btn btn-clear"></button>
                                 </div>
                                 <div class="chip-sm">
-                                    <span class="chip-name">Bruce Banner</span>
+                                    Bruce Banner
                                     <button class="btn btn-clear"></button>
                                 </div>
                                 <div class="chip-sm selected">
-                                    <span class="chip-name">Natasha Romanoff</span>
+                                    Natasha Romanoff
                                     <button class="btn btn-clear"></button>
                                 </div>
                                 <input class="form-input" type="text" placeholder="" />
@@ -1671,23 +1649,23 @@
                         <div class="form-autocomplete">
                             <div class="form-autocomplete-input">
                                 <div class="chip-sm">
-                                    <span class="chip-name">Tony Stark</span>
+                                    Tony Stark
                                     <button class="btn btn-clear"></button>
                                 </div>
                                 <div class="chip-sm">
-                                    <span class="chip-name">Thor Odinson</span>
+                                    Thor Odinson
                                     <button class="btn btn-clear"></button>
                                 </div>
                                 <div class="chip-sm">
-                                    <span class="chip-name">Steve Rogers</span>
+                                    Steve Rogers
                                     <button class="btn btn-clear"></button>
                                 </div>
                                 <div class="chip-sm">
-                                    <span class="chip-name">Bruce Banner</span>
+                                    Bruce Banner
                                     <button class="btn btn-clear"></button>
                                 </div>
                                 <div class="chip-sm selected">
-                                    <span class="chip-name">Natasha Romanoff</span>
+                                    Natasha Romanoff
                                     <button class="btn btn-clear"></button>
                                 </div>
                                 <input class="form-input" type="text" placeholder="" />
@@ -1700,12 +1678,12 @@
                         <div class="form-autocomplete">
                             <div class="form-autocomplete-input">
                                 <div class="chip-sm">
-                                    <span class="chip-name">Bruce Banner</span>
+                                    Bruce Banner
                                     <button class="btn btn-clear"></button>
                                 </div>
                                 <div class="chip-sm">
                                     <img src="demo/img/avatar-1.png" class="avatar" />
-                                    <span class="chip-name">Thor Odinson</span>
+                                    Thor Odinson
                                     <button class="btn btn-clear"></button>
                                 </div>
                                 <input class="form-input" type="text" placeholder="typing here" value="S" />
@@ -1751,12 +1729,12 @@
         <span class="com">&lt;!-- autocomplete chips --&gt;</span>
         &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-sm&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">span</span> <span class="atn">class</span>=<span class="atv">&quot;chip-name&quot;</span>&gt;Yan Zhu&lt;<span class="tag">/span</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;
         &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-sm selected&quot;</span>&gt;
             &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-2.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar&quot;</span> /&gt;
-            &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;chip-name&quot;</span>&gt;Yan Zhu&lt;<span class="tag">/span</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;
         <span class="com">&lt;!-- autocomplete real input box --&gt;</span>
@@ -1875,7 +1853,6 @@
             <div class="columns">
                 <div class="column col-sm-12 col-6">
                     <div class="toast">
-                        <a class="btn btn-clear float-right"></a>
                         <i class="icon icon-error_outline"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                     </div>
                 </div>
@@ -1939,9 +1916,6 @@
                                 <div class="chip-content">
                                     Steve Rogers
                                 </div>
-                                <div class="chip-action">
-
-                                </div>
                             </div>
                         </li>
                         <li class="menu-item">
@@ -2347,6 +2321,7 @@
                     </ul>
                 </div>
             </div>
+
             <section class="notes">
                 <p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>. </p>
             </section>
@@ -2461,7 +2436,7 @@
             </section>
             <div class="columns">
                 <div class="column">
-                    <div class="modal active">
+                    <div class="modal-temp">
                         <div class="modal-overlay"></div>
                         <div class="modal-container" role="document">
                             <div class="modal-header">
@@ -2696,7 +2671,15 @@
                             An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
                         </div>
                         <div class="card-footer">
-                            <a href="#" class="btn btn-primary">Add to calendar</a>
+                            <div class="chip">
+                                <div class="chip-content">
+                                    <div class="chip-title">Google</div>
+                                    <div class="chip-meta">Software and hardware</div>
+                                </div>
+                                <div class="chip-action">
+                                    <button class="btn btn-primary"><i class="icon icon-playlist_add"></i></button>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
-- 
cgit v1.3.1-23-gd82d