skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(chips): wrong margin on single chip (#4366)

Browse Source 
* Fixes single chips having a left margin.
* Reduces the amount of CSS used to set up the chip margins.

Fixes #4359.
This commit is contained in:
Kristiyan Kostadinov
2017-05-03 01:37:47 +02:00
committed by Andrew Seguin
parent 1fd50aaa44
commit 5d03c1a69f
1 changed files with 9 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/chips/chips.scss
+9 -38
View File
@@ -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 {