update chips code

2 files changed, 32 insertions, 14 deletions

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/chips.less b/src/chips.less
index 9530264..9277071 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -1,46 +1,58 @@
 // Chips
 .chip {
   display: flex;
-  padding: .5rem;
+  padding: .8rem;
   border-radius: .3rem;
   margin: 0;
   list-style: none;
   align-items: center;
   align-content: space-around;
 
-  &:hover,
-  &.selected {
-    background-color: lighten(@control-color, 20%);
-  }
-
   .chip-list-icon {
     flex: 0 0 auto;
   }
   .chip-list-content {
     flex: 1 1 auto;
     padding: 0 1rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    .text-ellipsis;
   }
   .chip-list-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;
-  width: auto;
+  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, 2%);
   text-decoration: none;
+  .text-ellipsis;
 
   &:hover,
   &:focus {
@@ -76,7 +88,7 @@
     line-height: 1.6rem;
     outline: 0;
 
-    .chip {
+    .chip-sm {
       margin-bottom: .3rem;
     }
 
@@ -115,5 +127,12 @@
       height: .5rem;
       border-top: .1rem solid @core-border-color;
     }
+
+    .chip {
+      &:hover,
+      &.selected {
+        background-color: lighten(@control-color, 20%);
+      }
+    }
   }
 }
\ No newline at end of file