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

Feature/more chips

5 files changed, 46 insertions, 73 deletions

diff --git a/src/autocomplete.less b/src/autocomplete.less
index b16a19a..c85b89d 100644
--- a/src/autocomplete.less
+++ b/src/autocomplete.less
@@ -13,7 +13,7 @@
     max-width: 100%;
     min-height: 3.2rem;
     outline: 0;
-    padding: .3rem .5rem 0 .5rem;
+    padding: .3rem .3rem 0 .3rem;
     width: 100%;
 
     .chip-sm {
@@ -46,14 +46,19 @@
     top: 100%;
     width: 100%;
     z-index: 1988;
+  }
+  .form-autocomplete-item {
+    border-radius: .3rem;
+    display: block;
+    margin-top: .1rem;
+    padding: .2rem 1rem;
 
-    .chip {
-      background: transparent;
-
-      &:hover,
-      &.selected {
-        background: lighten(@core-color, 40%);
-      }
+    &:hover,
+    &:focus {
+      background: lighten(@core-color, 42%);
+    }
+    &.active {
+      background: lighten(@core-color, 40%);
     }
   }
 }
diff --git a/src/buttons.less b/src/buttons.less
index d8b53d8..2070bfd 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -103,41 +103,19 @@
   &.btn-clear {
     background: transparent;
     border: 0;
-    border-radius: .7rem;
-    height: 1.4rem;
-    margin: .3rem -.2rem .3rem .2rem;
-    opacity: .35;
+    color: #666;
+    height: 2rem;
+    margin-left: .3rem;
+    opacity: .45;
     padding: 0;
-    position: relative;
-    vertical-align: top;
-    width: 1.4rem;
 
     &:hover {
-      opacity: .75;
-    }
-
-    &::before,
-    &::after {
-      background: #333;
-      content: "";
-      display: block;
-      left: 50%;
-      position: absolute;
-      top: 50%;
-      transform: rotate(-45deg);
+      opacity: .85;
     }
 
     &::before {
-      height: .2rem;
-      margin-left: -.5rem;
-      margin-top: -.1rem;
-      width: 1rem;
-    }
-    &::after {
-      height: 1rem;
-      margin-left: -.1rem;
-      margin-top: -.5rem;
-      width: .2rem;
+      content: '\00d7';
+      font-size: 2rem;
     }
   }
 }
diff --git a/src/cards.less b/src/cards.less
index f1f7e0b..b95b7d4 100644
--- a/src/cards.less
+++ b/src/cards.less
@@ -10,7 +10,6 @@
   z-index: 999;
 
   .card-header,
-  .card-image,
   .card-body,
   .card-footer {
     padding: 1.5rem 1.5rem 0 1.5rem;
@@ -20,8 +19,7 @@
     }
   }
   .card-image {
-    padding-left: 0;
-    padding-right: 0;
+    padding-top: 1.5rem;
 
     &:first-child {
       padding-top: 0;
@@ -31,6 +29,13 @@
         border-top-right-radius: .3rem;
       }
     }
+
+    &:last-child {
+      img {
+        border-bottom-left-radius: .3rem;
+        border-bottom-right-radius: .3rem;
+      }
+    }
   }
   .card-title {
     font-size: 1.4em;
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%);
       }
     }
   }
diff --git a/src/toasts.less b/src/toasts.less
index 30af555..2ca5487 100644
--- a/src/toasts.less
+++ b/src/toasts.less
@@ -24,10 +24,7 @@
   &.toast-success,
   &.toast-danger {
     .btn-clear {
-      &::before,
-      &::after {
-        background: #fff;
-      }
+      color: #fff;
     }
   }
 }