update autocomplete, chip code, and Readme doc

5 files changed, 95 insertions, 81 deletions

diff --git a/src/autocomplete.less b/src/autocomplete.less
new file mode 100644
index 0000000..1a27c57
--- /dev/null
+++ b/src/autocomplete.less
@@ -0,0 +1,59 @@
+// Autocomplete
+.form-autocomplete {
+  position: relative;
+
+  .form-autocomplete-input {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    min-height: 3.2rem;
+    background-color: #fff;
+    padding: .3rem .5rem 0 .5rem;
+    border: .1rem solid @control-color;
+    border-radius: .3rem;
+    color: @body-font-color;
+    font-size: 1.4rem;
+    line-height: 1.6rem;
+    outline: 0;
+
+    .chip-sm {
+      margin-bottom: .3rem;
+    }
+
+    .form-input {
+      display: inline-block;
+      border-color: transparent;
+      background-color: #fff;
+      width: auto;
+      height: 2.4rem;
+      padding: .3rem;
+      margin-bottom: .3rem;
+      vertical-align: top;
+    }
+  }
+
+  .form-autocomplete-list {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1988;
+    display: block;
+    width: 100%;
+    height: auto;
+    padding: .5rem;
+    margin: .3rem 0 0 0;
+    border: .1rem solid lighten(@control-color, 5%);
+    border-radius: .3rem;
+    background-color: #fff;
+    .light-shadow;
+
+    .chip {
+      background-color: transparent;
+
+      &:hover,
+      &.selected {
+        background-color: lighten(@core-color, 40%);
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/buttons.less b/src/buttons.less
index 6ed1e42..41edb47 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -108,9 +108,9 @@
     border: 0;
     border-radius: .7rem;
     vertical-align: top;
+    position: relative;
     background-color: transparent;
     opacity: .35;
-    transform: rotate(-45deg);
 
     &:hover {
       opacity: .75;
@@ -124,6 +124,7 @@
       top: 50%;
       left: 50%;
       background-color: #333;
+      transform: rotate(-45deg);
     }
 
     &::before {
diff --git a/src/chips.less b/src/chips.less
index b1089d9..4ea0016 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -1,23 +1,24 @@
 // Chips
 .chip {
   display: flex;
-  padding: .8rem 1rem;
+  padding: .3rem .8rem;
   border: .1rem solid transparent;
   border-radius: .3rem;
   margin: 0;
   list-style: none;
   align-items: center;
   align-content: space-around;
+  color: #666;
 
-  .chip-list-icon {
+  .chip-icon {
     flex: 0 0 auto;
   }
-  .chip-list-content {
+  .chip-content {
     flex: 1 1 auto;
     padding: 0 1rem;
     .text-ellipsis;
   }
-  .chip-list-action {
+  .chip-action {
     flex: 0 0 auto;
 
     .btn {
@@ -51,91 +52,42 @@
   padding: .3rem .6rem;
   border-radius: .3rem;
   font-size: 1.2rem;
-  background-color: @core-border-color;
+  background-color: lighten(@core-color, 40%);
+  color: #666;
   text-decoration: none;
 
   &:hover,
   &:focus {
-    background-color: darken(@core-border-color, 3%);
+    background-color: lighten(@core-color, 38%);
+  }
+
+  .btn {
+    &::before,
+    &::after {
+      background-color: darken(@core-color, 10%);
+    }
+  }
+
+  &.selected {
+    background-color: @core-color;
+    color: #fff;
+
+    .btn {
+      &::before,
+      &::after {
+        background-color: lighten(@core-color, 40%);
+      }
+    }
   }
 
   .chip-name {
     margin-left: .4rem;
     .text-ellipsis;
   }
+
   .avatar {
     width: 1.6rem;
     height: 1.6rem;
     font-size: .8rem;
   }
-}
-
-// Autocomplete
-.form-autocomplete {
-  position: relative;
-
-  .form-autocomplete-input {
-    display: block;
-    width: 100%;
-    max-width: 100%;
-    min-height: 3.2rem;
-    background-color: #fff;
-    padding: .3rem .5rem 0 .5rem;
-    border: .1rem solid @control-color;
-    border-radius: .3rem;
-    color: @body-font-color;
-    font-size: 1.4rem;
-    line-height: 1.6rem;
-    outline: 0;
-
-    .chip-sm {
-      margin-bottom: .3rem;
-    }
-
-    .form-input {
-      display: inline-block;
-      border-color: transparent;
-      background-color: #fff;
-      width: auto;
-      height: 2.4rem;
-      padding: .3rem;
-      margin-bottom: .3rem;
-      vertical-align: top;
-    }
-  }
-
-  .form-autocomplete-list {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    z-index: 1988;
-    display: block;
-    width: 100%;
-    height: auto;
-    padding: .3rem 0 .5rem 0;
-    margin: -.3rem 0 0 0;
-    border: .1rem solid @control-color;
-    border-top: transparent;
-    border-bottom-left-radius: .3rem;
-    border-bottom-right-radius: .3rem;
-    background-color: #fff;
-
-    &::before {
-      content: '';
-      display: block;
-      width: 100%;
-      height: 0;
-      border-top: .1rem solid @core-border-color;
-    }
-
-    .chip {
-      border-radius: 0;
-      background-color: lighten(@core-border-color, 10%);
-
-      &:hover,
-      &.selected {
-        background-color: lighten(@core-border-color, 2%);
-      }
-    }
-  }
 }
\ No newline at end of file
diff --git a/src/menus.less b/src/menus.less
index fafd608..649cd53 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -3,7 +3,7 @@
   display: block;
   text-align: left;
   margin: 0;
-  padding: 1rem;
+  padding: .5rem;
   border-radius: .3rem;
   background-color: #fff;
   z-index: 999;
@@ -12,7 +12,7 @@
   .menu-item {
     display: block;
     padding: .2rem 1rem;
-    margin-top: 0;
+    margin-top: .1rem;
     border-radius: .3rem;
     color: @body-font-color;
     line-height: 2.4rem;
@@ -30,11 +30,10 @@
       &:hover,
       &:focus {
         color: @core-link-color;
-        background-color: lighten(@core-color, 40%);
       }
       &:active,
       &.active {
-        color: darken(@core-link-color, 15%);
+        color: darken(@core-link-color, 5%);
         background-color: lighten(@core-color, 40%);
       }
     }
diff --git a/src/utilities.less b/src/utilities.less
index 25c8bc1..c47f5a0 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -156,6 +156,9 @@
   word-wrap: break-word;
   hyphens: auto;
 }
+.hand {
+  cursor: pointer;
+}
 
 // Shadow
 .shadow {