Merge pull request #139 from picturepan2/feature/new-doc-page

Feature/new doc page

1 files changed, 13 insertions, 40 deletions

diff --git a/src/chips.less b/src/chips.less
index 6b48df9..10f214d 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -1,42 +1,5 @@
 // Chips
 .chip {
-  align-content: space-around;
-  align-items: center;
-  border-radius: @border-radius;
-  display: flex;
-  list-style: none;
-  margin: 0;
-  padding: .5rem 0;
-
-  .chip-icon {
-    flex: 0 0 auto;
-  }
-  .chip-content {
-    flex: 1 1 auto;
-    .text-ellipsis;
-    &:not(:first-child) {
-      padding-left: 1rem;
-    }
-    &:not(:last-child) {
-      padding-right: 1rem;
-    }
-  }
-  .chip-action {
-    flex: 0 0 auto;
-  }
-  .chip-title {
-    font-size: 1.4rem;
-    line-height: 1.6rem;
-  }
-  .chip-meta {
-    color: lighten(@body-font-color, 50%);
-    font-size: 1.2rem;
-    line-height: 1.6rem;
-  }
-}
-
-// Small chips
-.chip-sm {
   align-items: center;
   background: @core-border-color;
   border-radius: @border-radius;
@@ -45,11 +8,11 @@
   height: 3rem;
   margin: .1rem .2rem .1rem 0;
   max-width: 100%;
-  padding: .5rem .7rem;
+  padding: .5rem .8rem;
   text-decoration: none;
   vertical-align: middle;
 
-  &.selected {
+  &.active {
     background: @core-color;
     color: @core-light-color;
   }
@@ -61,9 +24,19 @@
     width: 2rem;
   }
 
+  .chip-meta {
+    background: rgba(0,0,0,.1);
+    font-size: 80%;
+    height: 3rem;
+    line-height: 2rem;
+    margin-left: .8rem;
+    margin-right: -.8rem;
+    opacity: .75;
+    padding: .5rem .8rem;
+  }
+
   .btn-clear {
     &::before {
-      color: currentColor;
       font-size: 1.6rem;
     }
   }