Skip to content

Commit

Permalink
fix(list): icon size in dense mode (#3913)
Browse files Browse the repository at this point in the history
Fixes the size of icons inside dense lists.

Fixes #3886.
  • Loading branch information
crisbeto authored and jelbourn committed Apr 11, 2017
1 parent 21cbf34 commit f412499
Showing 1 changed file with 10 additions and 6 deletions.
16 changes: 10 additions & 6 deletions src/lib/list/list.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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.
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand Down

0 comments on commit f412499

Please sign in to comment.