From aea71b81042ddcf399a3da82ec6f8c3965b575ff Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Mon, 4 Apr 2016 16:53:36 +0800
Subject: update chips example codes

---
 demo/index.html  | 29 ++++++++++++++++++++++++++++-
 dist/spectre.css |  9 +++++++--
 src/buttons.less |  4 ++--
 src/chips.less   |  6 ++++++
 4 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 45df598..26d277d 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -404,16 +404,43 @@
             <div class="columns">
                 <div class="column">
                     <div class="chip">
-                        <span class="chip-name">Yan Zhu</span>
+                        <span class="chip-name">Crime</span>
+                        <button class="btn btn-clear"></button>
+                    </div>
+                    <div class="chip">
+                        <span class="chip-name">Drama</span>
+                        <button class="btn btn-clear"></button>
+                    </div>
+                    <div class="chip">
+                        <span class="chip-name">Biography</span>
+                        <button class="btn btn-clear"></button>
+                    </div>
+                    <div class="chip">
+                        <span class="chip-name">Mystery</span>
                         <button class="btn btn-clear"></button>
                     </div>
                 </div>
                 <div class="column">
+                    <div class="chip">
+                        <img src="img/avatar-1.png" class="avatar avatar-xs" />
+                        <span class="chip-name">Yan Zhu</span>
+                        <button class="btn btn-clear"></button>
+                    </div>
                     <div class="chip">
                         <img src="img/avatar-2.png" class="avatar avatar-xs" />
                         <span class="chip-name">Yan Zhu</span>
                         <button class="btn btn-clear"></button>
                     </div>
+                    <div class="chip">
+                        <img src="img/avatar-3.png" class="avatar avatar-xs" />
+                        <span class="chip-name">Yan Zhu</span>
+                        <button class="btn btn-clear"></button>
+                    </div>
+                    <div class="chip">
+                        <img src="img/avatar-4.png" class="avatar avatar-xs" />
+                        <span class="chip-name">Yan Zhu</span>
+                        <button class="btn btn-clear"></button>
+                    </div>
                 </div>
             </div>
         </section>
diff --git a/dist/spectre.css b/dist/spectre.css
index fc3faa7..8d379ee 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -762,8 +762,8 @@ button.btn-block {
 }
 .btn.btn-clear,
 button.btn-clear {
-  width: 1.6rem;
-  height: 1.6rem;
+  width: 1.4rem;
+  height: 1.4rem;
   padding: 0;
   margin: 0.1rem -0.2rem 0.1rem 0.2rem;
   border: 0;
@@ -1146,6 +1146,7 @@ textarea.form-input {
   padding: .3rem .6rem;
   border-radius: .3rem;
   font-size: 1.2rem;
+  vertical-align: middle;
   -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
@@ -1156,6 +1157,10 @@ textarea.form-input {
 .chip .chip-name {
   margin-left: .4rem;
 }
+.chip:hover,
+.chip:focus {
+  background-color: #eaeaea;
+}
 .label {
   display: inline-block;
   padding: .3rem .5rem;
diff --git a/src/buttons.less b/src/buttons.less
index 32525b7..e2db1e1 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -128,8 +128,8 @@ button {
 
   // Button Clear
   &.btn-clear {
-    width: 1.6rem;
-    height: 1.6rem;
+    width: 1.4rem;
+    height: 1.4rem;
     padding: 0;
     margin: .1rem -.2rem .1rem .2rem;
     border: 0;
diff --git a/src/chips.less b/src/chips.less
index 9c906a8..aa3027b 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -4,6 +4,7 @@
   padding: .3rem .6rem;
   border-radius: .3rem;
   font-size: 1.2rem;
+  vertical-align: middle;
   align-items: center;
   background-color: @core-border-color;
   border: 1px solid darken(@core-border-color, 5%);
@@ -11,4 +12,9 @@
   .chip-name {
     margin-left: .4rem;
   }
+
+  &:hover,
+  &:focus {
+    background-color: darken(@core-border-color, 2%);
+  }
 }
\ No newline at end of file
-- 
cgit v1.3.1-26-gb76a