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): icon size in dense mode (#3913)

Browse Source 
Fixes the size of icons inside dense lists.

Fixes #3886.
This commit is contained in:
Kristiyan Kostadinov
2017-04-11 08:54:32 -07:00
committed by Jeremy Elbourn
parent 21cbf346e4
commit f412499a8a
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/list/list.scss
+10 -6
View File
@@ -4,7 +4,6 @@
$mat-list-side-padding: 16px;
$mat-list-avatar-size: 40px;
$mat-list-icon-size: 24px;
// Normal list variables
$mat-list-top-padding: 8px;
@@ -17,6 +16,7 @@ $mat-list-avatar-height: 56px;
// spec requires two- and three-line lists be taller
$mat-list-two-line-height: 72px;
$mat-list-three-line-height: 88px;
$mat-list-icon-size: 24px;
// Dense list variables
$mat-dense-top-padding: 4px;
@@ -25,11 +25,12 @@ $mat-dense-base-height: 40px;
$mat-dense-avatar-height: 48px;
$mat-dense-two-line-height: 60px;
$mat-dense-three-line-height: 76px;
$mat-dense-list-icon-size: 20px;
// This mixin provides all list-item styles, changing font size and height
// based on whether the list is in dense mode.
@mixin mat-list-item-base($font-size, $base-height, $avatar-height,
$two-line-height, $three-line-height) {
$two-line-height, $three-line-height, $icon-size) {
// Prevents the wrapper `mat-list-item-content` from collapsing due to it
// being `inline` by default.
@@ -84,8 +85,9 @@ $mat-dense-three-line-height: 76px;
}
.mat-list-icon {
width: $mat-list-icon-size;
height: $mat-list-icon-size;
width: $icon-size;
height: $icon-size;
font-size: $icon-size;
border-radius: 50%;
padding: 4px;
}
@@ -128,7 +130,8 @@ $mat-dense-three-line-height: 76px;
$mat-list-base-height,
$mat-list-avatar-height,
$mat-list-two-line-height,
$mat-list-three-line-height
$mat-list-three-line-height,
$mat-list-icon-size
);
@include mat-line-base($mat-list-secondary-font);
@@ -154,7 +157,8 @@ $mat-dense-three-line-height: 76px;
$mat-dense-base-height,
$mat-dense-avatar-height,
$mat-dense-two-line-height,
$mat-dense-three-line-height
$mat-dense-three-line-height,
$mat-dense-list-icon-size
);
@include mat-line-base($mat-dense-font-size);