diff --git a/src/lib/chips/chips.scss b/src/lib/chips/chips.scss index 3ea4afb1bd6..cae9826a096 100644 --- a/src/lib/chips/chips.scss +++ b/src/lib/chips/chips.scss @@ -6,48 +6,10 @@ $mat-chip-line-height: 16px; $mat-chips-chip-margin: $mat-chip-horizontal-padding / 4; .mat-chip-list-wrapper { - display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; - - /* - * Only apply the margins to chips - */ - .mat-chip:not(.mat-basic-chip) { - margin: 0 $mat-chips-chip-margin 0 $mat-chips-chip-margin; - - // Remove the margin from the first element (in both LTR and RTL) - &:first-child { - margin: { - left: 0; - right: $mat-chips-chip-margin; - } - - [dir='rtl'] & { - margin: { - left: $mat-chips-chip-margin; - right: 0; - } - } - } - - // Remove the margin from the last element (in both LTR and RTL) - &:last-child { - margin: { - left: $mat-chips-chip-margin; - right: 0; - } - - [dir='rtl'] & { - margin: { - left: 0; - right: $mat-chips-chip-margin; - } - } - } - } } .mat-chip:not(.mat-basic-chip) { @@ -57,6 +19,15 @@ $mat-chips-chip-margin: $mat-chip-horizontal-padding / 4; font-size: $mat-chip-font-size; line-height: $mat-chip-line-height; + + // Apply a margin to adjacent sibling chips. + & + & { + margin: 0 0 0 $mat-chips-chip-margin; + + [dir='rtl'] & { + margin: 0 $mat-chips-chip-margin 0 0; + } + } } .mat-chip-list-stacked .mat-chip-list-wrapper {