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(list): incorrect padding for list-items with avatars, icons (#9163)

Browse Source 
Currently list-items with an avatar, icon or checkbox have a both-sided margin for the text of 16px, while there is still a padding of 16px for the `mat-list-item-content` of 16px. This means that there is a 32px padding, that is not valid per specs.

The padding for the mat-list-text should be just on the side of the secondary item (e.g. avatar, icon or checkbox), and the other side should have no padding, because the `mat-list-item-content` already has a padding for that one.

Fixes #9156
This commit is contained in:
Paul Gschwendtner
2018-01-12 16:06:59 +01:00
committed by Andrew Seguin
parent 1c2f6b7cbe
commit dfbd8d211a
2 changed files with 29 additions and 6 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">Bananas</mat-list-option>
<mat-list-option value="bananas" checkboxPosition="before">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
+28 -5
View File
@@ -92,17 +92,40 @@ $mat-list-item-inset-divider-offset: 72px;
.mat-list-text {
@include mat-line-wrapper-base();
padding: 0 $mat-list-side-padding;
// 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.
// 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.
&: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;