diff --git a/terminus-ui/chip/src/chip-collection.component.scss b/terminus-ui/chip/src/chip-collection.component.scss index 9d379a514..4b13cf62e 100644 --- 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 index 29bbeeae4..db75129dc 100644 --- a/terminus-ui/chip/src/chip.component.scss +++ b/terminus-ui/chip/src/chip.component.scss @@ -12,6 +12,7 @@ --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)}; @@ -19,15 +20,10 @@ &: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;