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

Feature/autocomplete chips

6 files changed, 142 insertions, 15 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/badges.less b/src/badges.less
index 265d29b..cd4a70d 100644
--- a/src/badges.less
+++ b/src/badges.less
@@ -1,8 +1,7 @@
 // Badges
 .badge {
   position: relative;
-
-
+  
   &::after {
     content: attr(data-badge);
     color: #fff;
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 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
diff --git a/src/menus.less b/src/menus.less
index 818155b..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, 45%);
       }
       &: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 {