Merge pull request #10 from picturepan2/feature/autocomplete-chips

Feature/autocomplete chips

1 files changed, 74 insertions, 8 deletions

diff --git a/src/chips.less b/src/chips.less
index 53a2723..4ea0016 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -1,27 +1,93 @@
 // Chips
 .chip {
+  display: flex;
+  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-icon {
+    flex: 0 0 auto;
+  }
+  .chip-content {
+    flex: 1 1 auto;
+    padding: 0 1rem;
+    .text-ellipsis;
+  }
+  .chip-action {
+    flex: 0 0 auto;
+
+    .btn {
+      padding: .7rem .5rem;
+      border-color: transparent;
+      color: @control-color;
+
+      &:hover,
+      &:focus {
+        color: @core-color;
+        border-color: transparent;
+        background-color: transparent;
+      }
+      &:active,
+      &.active {
+        color: darken(@core-color, 5%);
+        border-color: transparent;
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+// Small chips
+.chip-sm {
   display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  max-width: 100%;
+  height: 2.4rem;
   padding: .3rem .6rem;
   border-radius: .3rem;
   font-size: 1.2rem;
-  vertical-align: middle;
-  align-items: center;
-  background-color: @core-border-color;
-  border: .1rem solid darken(@core-border-color, 5%);
+  background-color: lighten(@core-color, 40%);
+  color: #666;
+  text-decoration: none;
 
   &:hover,
   &:focus {
-    background-color: darken(@core-border-color, 2%);
+    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;
   }
-}
-
-// TODO: Chip contacts and files
\ No newline at end of file
+}
\ No newline at end of file