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

Revert "fix(list): incorrect padding for list-items with avatars, icons (#9163)" (#9449)

Browse Source 
This reverts commit dfbd8d211a.
This commit is contained in:
Andrew Seguin
2018-01-17 14:55:23 -08:00
committed by GitHub
parent 2140d24790
commit 4ffcdee095
2 changed files with 6 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/demo-app/list/list-demo.html
+1 -1
View File
@@ -111,7 +111,7 @@
(change)="changeEventCount = changeEventCount + 1">
<h3 mat-subheader>Groceries</h3>
<mat-list-option value="bananas" checkboxPosition="before">Bananas</mat-list-option>
<mat-list-option value="bananas">Bananas</mat-list-option>
<mat-list-option selected value="oranges">Oranges</mat-list-option>
<mat-list-option value="apples">Apples</mat-list-option>
<mat-list-option value="strawberries">Strawberries</mat-list-option>
src/lib/list/list.scss
+5 -28
View File
@@ -92,40 +92,17 @@ $mat-list-item-inset-divider-offset: 72px;
.mat-list-text {
@include mat-line-wrapper-base();
padding: 0 $mat-list-side-padding;
// By default, padding will be always added on the start-side of the mat-list-text, because
// we assume that there is always a secondary item (e.g. avatar-icon, checkbox). But if the
// mat-list-text element is the second element, then there is no secondary item and
// the padding can be removed.
// We only want to override the padding if there isn't
// an avatar or icon before the element. Since the ripple
// will always be the first child in the container, we
// check whether this element is the second child.
&:nth-child(2) {
padding: 0;
}
}
// There can be a secondary item (e.g. avatar-icon, checkbox) at the start of the
// list-item. This means that there should be a padding for the mat-list-text on the start-side.
.mat-list-item-content .mat-list-text {
padding-left: $mat-list-side-padding;
[dir='rtl'] & {
padding-right: $mat-list-side-padding;
padding-left: 0;
}
}
// Reversed content is mainly used by the MatSelectionList for displaying the checkbox at the
// end of the list option. Since there is a secondary item (checkbox) at the end of the
// option, there needs to be a padding for the mat-list-text on the end-side.
.mat-list-item-content-reverse .mat-list-text {
padding-left: 0;
padding-right: $mat-list-side-padding;
[dir='rtl'] & {
padding-right: 0;
padding-left: $mat-list-side-padding;
}
}
.mat-list-avatar {
flex-shrink: 0;
width: $mat-list-avatar-size;