fix(Chip): vertical margin now always present

GetTerminus · Dec 16, 2019 · 54d8338 · 54d8338
1 parent 1c588d0
commit 54d8338
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 15 deletions.
diff --git a/terminus-ui/chip/src/chip-collection.component.scss b/terminus-ui/chip/src/chip-collection.component.scss
@@ -2,7 +2,6 @@
 
 
 .ts-chip-collection {
-  --chip-vertical-margin: #{spacing(small, 2)};
   display: block;
 
   &--vertical {
@@ -12,10 +11,6 @@
       align-items: flex-start;
       flex-direction: column;
     }
-
-    .ts-chip {
-      margin-bottom: var(--chip-vertical-margin);
-    }
   }
 }
 

diff --git a/terminus-ui/chip/src/chip.component.scss b/terminus-ui/chip/src/chip.component.scss
@@ -12,22 +12,18 @@
   --chip-color: #{color(pure, dark)};
   --chip-fontSize: 14px;
   --chip-height: #{spacing(large)};
+  --chip-margin: #{spacing(small, 2)};
   --chip-padding: #{spacing(small, 2)} #{spacing(small, 1)};
   --chip-remove-size: #{spacing(large)};
 
   &:focus,
   &:hover {
     &:not(.ts-chip--badge) {
       .c-chip {
-        --chip-backgroundColor: var(--chip-backgroundColor-hover);
-        transition: opacity 200ms cubic-bezier(.35, 0, .25, 1);
-      }
-    }
-
-    .c-chip {
-      &:not(.c-chip--disabled) {
-        --chip-backgroundColor: var(--chip-backgroundColor-hover);
-        transition: opacity 200ms cubic-bezier(.35, 0, .25, 1);
+        &:not(.c-chip--disabled) {
+          --chip-backgroundColor: var(--chip-backgroundColor-hover);
+          transition: opacity 200ms cubic-bezier(.35, 0, .25, 1);
+        }
       }
     }
   }
@@ -66,7 +62,7 @@
     display: inline-flex;
     font-size: var(--chip-fontSize);
     height: var(--chip-height);
-    margin: 0 spacing(small, 2);
+    margin: 0 var(--chip-margin) var(--chip-margin) var(--chip-margin);
     overflow: hidden;
     padding: var(--chip-padding);
     position: relative;