Merge pull request #29 from picturepan2/feature/more-chips

Feature/more chips

1 files changed, 17 insertions, 29 deletions

diff --git a/src/chips.less b/src/chips.less
index 7ef1bc4..6a0c777 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -4,11 +4,10 @@
   align-items: center;
   border: .1rem solid transparent;
   border-radius: .3rem;
-  color: #666;
   display: flex;
   list-style: none;
   margin: 0;
-  padding: .3rem .8rem;
+  padding: .5rem 0;
 
   .chip-icon {
     flex: 0 0 auto;
@@ -20,25 +19,13 @@
   }
   .chip-action {
     flex: 0 0 auto;
-
-    .btn {
-      border-color: transparent;
-      color: @control-color;
-      padding: .7rem .5rem;
-
-      &:hover,
-      &:focus {
-        background: transparent;
-        border-color: transparent;
-        color: @core-color;
-      }
-      &:active,
-      &.active {
-        background: transparent;
-        border-color: transparent;
-        color: darken(@core-color, 5%);
-      }
-    }
+  }
+  .chip-title {
+    font-size: 1.4rem;
+  }
+  .chip-meta {
+    color: lighten(@body-font-color, 50%);
+    font-size: 1.2rem;
   }
 }
 
@@ -61,10 +48,12 @@
     background: lighten(@core-color, 38%);
   }
 
-  .btn {
-    &::before,
-    &::after {
-      background: darken(@core-color, 10%);
+  .btn-clear {
+    margin-top: -.2rem;
+
+    &::before {
+      color: darken(@core-color, 10%);
+      font-size: 1.6rem;
     }
   }
 
@@ -72,10 +61,9 @@
     background: @core-color;
     color: @core-text-color;
 
-    .btn {
-      &::before,
-      &::after {
-        background: lighten(@core-color, 40%);
+    .btn-clear {
+      &::before {
+        color: lighten(@core-color, 40%);
       }
     }
   }