CHG: Update chip and autocomplete components

3 files changed, 21 insertions, 61 deletions

diff --git a/src/autocomplete.less b/src/autocomplete.less
index d1cc42b..5e6d65f 100644
--- a/src/autocomplete.less
+++ b/src/autocomplete.less
@@ -3,62 +3,34 @@
   position: relative;
 
   .form-autocomplete-input {
+    align-content: flex-start;
     background: #fff;
     border: .1rem solid @control-color;
     border-radius: .3rem;
     color: @body-font-color;
-    display: block;
-    font-size: 1.4rem;
-    line-height: 1.6rem;
+    display: flex;
+    flex-wrap: wrap;
     max-width: 100%;
-    min-height: 3.2rem;
+    min-height: 4rem;
     outline: 0;
-    padding: .3rem .3rem 0 .3rem;
+    padding: .4rem .4rem 0 .4rem;
     width: 100%;
 
     .chip-sm {
-      margin-bottom: .3rem;
+      margin-bottom: .4rem;
+      margin-right: .4rem;
     }
 
     .form-input {
       background: #fff;
       border-color: transparent;
-      display: inline-block;
-      height: 2.4rem;
+      display: inline-block;;
+      flex: 1 0 auto;
+      height: 3rem;
       margin-bottom: .3rem;
       padding: .3rem;
       vertical-align: top;
       width: auto;
     }
   }
-
-  .form-autocomplete-list {
-    background: #fff;
-    border: .1rem solid lighten(@control-color, 5%);
-    border-radius: .3rem;
-    display: block;
-    height: auto;
-    left: 0;
-    .light-shadow;
-    margin: .3rem 0 0 0;
-    padding: .5rem;
-    position: absolute;
-    top: 100%;
-    width: 100%;
-    z-index: 1988;
-  }
-  .form-autocomplete-item {
-    border-radius: .3rem;
-    display: block;
-    margin-top: .1rem;
-    padding: .2rem 1rem;
-
-    &:hover,
-    &:focus {
-      background: lighten(@core-secondary-color, 5%);
-    }
-    &.active {
-      background: @core-secondary-color;
-    }
-  }
 }
diff --git a/src/buttons.less b/src/buttons.less
index b8f7f2b..b4e6c93 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -109,7 +109,7 @@
     border: 0;
     color: currentColor;
     height: 2rem;
-    margin-left: .3rem;
+    margin-left: .4rem;
     opacity: .45;
     padding: 0;
     text-decoration: none;
diff --git a/src/chips.less b/src/chips.less
index f865fe9..df312cf 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -32,27 +32,21 @@
 // Small chips
 .chip-sm {
   align-items: center;
-  background: @core-secondary-color;
+  background: @core-border-color;
   border-radius: .3rem;
   color: #666;
   display: inline-flex;
-  font-size: 1.2rem;
-  height: 2.4rem;
+  height: 3rem;
+  margin-bottom: .1rem;
+  margin-top: .1rem;
   max-width: 100%;
-  padding: .3rem .6rem;
+  padding: .4rem .8rem;
   text-decoration: none;
   vertical-align: middle;
 
-  &:hover,
-  &:focus {
-    background: darken(@core-secondary-color, 2%);
-  }
-
   .btn-clear {
-    margin-top: -.2rem;
-
     &::before {
-      color: darken(@core-color, 10%);
+      color: currentColor;
       font-size: 1.6rem;
     }
   }
@@ -60,22 +54,16 @@
   &.selected {
     background: @core-color;
     color: @core-light-color;
-
-    .btn-clear {
-      &::before {
-        color: lighten(@core-color, 40%);
-      }
-    }
   }
 
   .chip-name {
-    margin-left: .4rem;
+    margin: 0 .4rem;
     .text-ellipsis;
   }
 
   .avatar {
-    font-size: .8rem;
-    height: 1.6rem;
-    width: 1.6rem;
+    font-size: 1rem;
+    height: 2rem;
+    width: 2rem;
   }
 }