CHG: Improve all components

1 files changed, 28 insertions, 18 deletions

diff --git a/index.html b/index.html
index a422498..cb4e1dd 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
         .bg-grey {
             background-color: #efefef;
             padding: 1rem .5rem;
-            border-radius: .3rem;
+            border-radius: .2rem;
         }
         .navbar-brand {
           font-size: 2rem;
@@ -462,9 +462,9 @@
             <div class="columns">
                 <div class="column col-xs-12">
                     <div class="btn-group">
-                        <button class="btn">first button</button>
-                        <button class="btn">second button</button>
-                        <button class="btn">third button</button>
+                        <button class="btn tooltip" data-tooltip="Lorem ipsum">first button</button>
+                        <button class="btn tooltip" data-tooltip="Lorem ipsum">second button</button>
+                        <button class="btn tooltip" data-tooltip="Lorem ipsum">third button</button>
                     </div>
                 </div>
                 <div class="column col-xs-12">
@@ -510,7 +510,6 @@
             <header class="text-center"><h4>forms</h4></header>
             <section class="notes">
                 <p><strong>Forms</strong> provide the most common control styles used in forms, including label, input, textarea, select, checkbox, radio and switch.  </p>
-                <p></p>
             </section>
             <div class="columns">
                 <div class="column col-6 col-xs-12">
@@ -534,12 +533,6 @@
                                 <i class="form-icon"></i> Female
                             </label>
                         </div>
-                        <div class="form-group hide">
-                            <label class="form-file">
-                                <input type="file" id="file">
-                                <span class="file-custom"></span>
-                            </label>
-                        </div>
                         <div class="form-group">
                             <select class="form-select">
                                 <option>Choose an option</option>
@@ -673,6 +666,29 @@
                             </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">
                                 <label class="form-switch">
@@ -1606,12 +1622,6 @@
 &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">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-favorite_border&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
-    &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;chip-name&quot;</span>&gt;Drama&lt;<span class="tag">/span</span>&gt;
-    &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;
     &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;
@@ -2904,7 +2914,7 @@
             <p>
                 <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.31
             </p>
-            <p>Designed and built with love by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+            <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
         </section>
     </footer>
     <script>