forked from angular/material
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(list): simplify list component scss
* Simplifies the List components SCSS * Fixes Dense Mode for List and introduces super elegant approach * Make SCSS more modular by having a base and dynamic variables * Remove unnecessary DOM node level for button wrap. * No longer wrap proxied elements inside of buttons * Multiple Secondary Items should align properly and have consistent spacing. * Dense Mode should not cut characaters on different environments. Fixes angular#6152. Fixes angular#8890 References angular#8482.
- Loading branch information
1 parent
f7ecb4f
commit a4ff3c5
Showing
7 changed files
with
546 additions
and
528 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,17 +1,16 @@ | ||
md-divider { | ||
margin-top: 0; | ||
margin-bottom: 0; | ||
margin-top: 0; | ||
margin-bottom: 0; | ||
} | ||
|
||
md-list { | ||
padding-top:0; | ||
padding-top: 0; | ||
} | ||
md-list-item > p, | ||
md-list-item > .md-list-item-inner > p, | ||
md-list-item .md-list-item-inner > p, | ||
md-list-item .md-list-item-inner > .md-list-item-inner > p { | ||
-webkit-user-select: none; /* Chrome all / Safari all */ | ||
-moz-user-select: none; /* Firefox all */ | ||
-ms-user-select: none; /* IE 10+ */ | ||
user-select: none; /* Likely future */ | ||
|
||
md-list-item.md-list-item-content > p, | ||
md-list-item .md-list-item-content > p { | ||
-webkit-user-select: none; /* Chrome all / Safari all */ | ||
-moz-user-select: none; /* Firefox all */ | ||
-ms-user-select: none; /* IE 10+ */ | ||
user-select: none; /* Likely future */ | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,317 @@ | ||
/** External component calculations */ | ||
$md-checkbox-width: 3 * $baseline-grid !default; | ||
$md-button-margin: rem(0.800) !default; | ||
$md-button-spacing: $button-left-right-padding + $md-button-margin !default; | ||
|
||
/** Static List Item Variables */ | ||
$md-list-item-indention: $baseline-grid * 7 !default; | ||
$md-list-item-padding: $baseline-grid * 2 !default; | ||
$md-list-item-h3-margin: 0 0 0px 0 !default; | ||
$md-list-item-h4-margin: 3px 0 1px 0 !default; | ||
$md-list-item-h4-font-weight: 400 !default; | ||
$md-list-item-p-margin: 0 0 0 0 !default; | ||
$md-list-item-subheader-height: 6 * $baseline-grid !default; | ||
|
||
/** Resets the checkbox component */ | ||
@mixin md-reset-checkbox() { | ||
md-checkbox { | ||
align-self: center; | ||
margin: 0; | ||
|
||
.md-label { | ||
display: none; | ||
} | ||
} | ||
} | ||
|
||
/** Resets the switch component to properly align */ | ||
@mixin md-reset-switch() { | ||
md-switch { | ||
margin-top: 0; | ||
margin-bottom: 0; | ||
|
||
@include rtl-prop(margin-right, margin-left, -6px, 0); | ||
} | ||
} | ||
|
||
/** Reset browsers default paragraph styles */ | ||
@mixin md-reset-paragraph() { | ||
p { | ||
margin: 0; | ||
flex: 1; | ||
} | ||
} | ||
|
||
/** Reset default md-button behavior like uppercase and text alignment */ | ||
@mixin md-reset-button() { | ||
&.md-button { | ||
font-size: inherit; | ||
text-transform: none; | ||
|
||
@include rtl(text-align, left, right); | ||
|
||
&, > .md-ripple-container { | ||
border-radius: 0; | ||
margin: 0; | ||
padding: 0; | ||
} | ||
} | ||
} | ||
|
||
/** Mixin to overwrite the size of an md-icon element */ | ||
@mixin md-icon-size($icon-size) { | ||
min-width: $icon-size; | ||
min-height: $icon-size; | ||
height: $icon-size; | ||
width: $icon-size; | ||
|
||
svg { | ||
width: $icon-size; | ||
height: $icon-size; | ||
} | ||
} | ||
|
||
/** Creates an overlaying button, which will be used to execute the primary action */ | ||
@mixin md-button-wrap() { | ||
&.md-button-wrap { | ||
position: relative; | ||
|
||
.md-button-wrap-executor { | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
|
||
height: 100%; | ||
width: 100%; | ||
|
||
@include md-reset-button(); | ||
} | ||
} | ||
} | ||
|
||
/** | ||
* Mixin to style user specified content inside of the list item. | ||
*/ | ||
@mixin md-list-item-content($list-icon-width, $list-avatar-width, $list-avatar-padding-dense) { | ||
|
||
.md-avatar, .md-avatar-icon, > md-icon:first-child { | ||
box-sizing: content-box; | ||
margin-top: $baseline-grid; | ||
margin-bottom: $baseline-grid; | ||
border-radius: 50%; | ||
|
||
flex-shrink: 0; // Per https://bugs.webkit.org/show_bug.cgi?id=146020 | ||
} | ||
|
||
.md-avatar { | ||
width: $list-avatar-width; | ||
height: $list-avatar-width; | ||
|
||
@include rtl(margin-right, $md-list-item-indention - $list-avatar-width, 0); | ||
@include rtl(margin-left, 0, $md-list-item-indention - $list-avatar-width); | ||
} | ||
|
||
.md-avatar-icon { | ||
$avatar-icon-width: $list-icon-width + ($list-avatar-padding-dense * 2); | ||
padding: $list-avatar-padding-dense; | ||
|
||
@include md-icon-size($list-icon-width); | ||
|
||
@include rtl(margin-right, $md-list-item-indention - $avatar-icon-width, 0); | ||
@include rtl(margin-left, 0, $md-list-item-indention - $avatar-icon-width); | ||
} | ||
|
||
/* Primary elements at start of the list item content. */ | ||
> md-icon:first-child:not(.md-avatar-icon) { | ||
@include md-icon-size($list-icon-width); | ||
|
||
@include rtl(margin-right, $md-list-item-indention - $list-icon-width, 0); | ||
@include rtl(margin-left, 0, $md-list-item-indention - $list-icon-width); | ||
} | ||
|
||
> md-checkbox:first-child { | ||
@include rtl(margin-right, $md-list-item-indention - $md-checkbox-width, 0); | ||
@include rtl(margin-left, 0, $md-list-item-indention - $md-checkbox-width); | ||
} | ||
|
||
md-checkbox { | ||
width: $md-checkbox-width; | ||
} | ||
|
||
md-divider { | ||
position: absolute; | ||
bottom: 0; | ||
left: 0; | ||
width: 100%; | ||
|
||
&[md-inset] { | ||
@include rtl-prop(left, right, $md-list-item-indention + $md-list-item-padding, auto); | ||
width: calc(100% - #{$md-list-item-indention + $md-list-item-padding}); | ||
margin: 0 !important; | ||
} | ||
} | ||
|
||
} | ||
|
||
/** | ||
* Mixin to enable multi-line support in the current list item. | ||
*/ | ||
@mixin md-list-item-multi-line($list-height-2, $list-height-3, $list-title-font-size, | ||
$list-title-line-height, $list-subtitle-font-size, | ||
$list-subtitle-line-height) { | ||
|
||
&.md-2-line { | ||
min-height: $list-height-2; | ||
@include ie11-min-height-flexbug($list-height-2); | ||
} | ||
|
||
&.md-3-line { | ||
min-height: $list-height-3; | ||
@include ie11-min-height-flexbug($list-height-3); | ||
|
||
&.md-list-item-content, .md-list-item-content { | ||
> md-icon:first-child, > .md-avatar, > .md-avatar-icon { | ||
margin-top: $baseline-grid * 2; | ||
margin-bottom: auto; | ||
} | ||
} | ||
} | ||
|
||
&.md-3-line, &.md-2-line { | ||
text-overflow: ellipsis; | ||
overflow: hidden; | ||
|
||
&.md-offset { | ||
@include rtl-prop(margin-left, margin-right, $md-list-item-indention, 0); | ||
} | ||
|
||
&.md-long-text { | ||
margin-top: $baseline-grid; | ||
margin-bottom: $baseline-grid; | ||
} | ||
|
||
&.md-list-item-content, .md-list-item-content { | ||
|
||
h3 { | ||
font-size: $list-title-font-size; | ||
font-weight: 400; | ||
letter-spacing: 0.010em; | ||
margin: $md-list-item-h3-margin; | ||
line-height: $list-title-line-height; | ||
overflow: hidden; | ||
white-space: nowrap; | ||
text-overflow: ellipsis; | ||
} | ||
|
||
h4 { | ||
font-size: $list-subtitle-font-size; | ||
letter-spacing: 0.010em; | ||
margin: $md-list-item-h4-margin; | ||
font-weight: $md-list-item-h4-font-weight; | ||
line-height: $list-title-line-height; | ||
overflow: hidden; | ||
white-space: nowrap; | ||
text-overflow: ellipsis; | ||
} | ||
|
||
p { | ||
font-size: $list-subtitle-font-size; | ||
font-weight: 500; | ||
letter-spacing: 0.010em; | ||
margin: $md-list-item-p-margin; | ||
line-height: $list-subtitle-line-height; | ||
} | ||
|
||
} | ||
} | ||
} | ||
|
||
|
||
/** | ||
* Creates the basic md-list with the specific dynamic variables. | ||
*/ | ||
@mixin md-list($list-font-size, $list-padding-vertical) { | ||
display: block; | ||
padding: $list-padding-vertical 0; | ||
font-size: $list-font-size; | ||
|
||
.md-subheader { | ||
font-size: $body-font-size-base; | ||
font-weight: 500; | ||
letter-spacing: 0.010em; | ||
height: $md-list-item-subheader-height; | ||
} | ||
} | ||
|
||
/** | ||
* Creates the md-list-item styles with the specific dynamic variables. | ||
*/ | ||
@mixin md-list-item($list-height-base, $list-height-2, $list-height-3, $list-avatar-width, | ||
$list-icon-width, $list-title-font-size, $list-title-line-height, | ||
$list-subtitle-font-size, $list-subtitle-line-height, | ||
$list-avatar-padding-dense) { | ||
|
||
position: relative; | ||
display: flex; | ||
flex: 1; | ||
|
||
min-height: $list-height-base; | ||
@include ie11-min-height-flexbug($list-height-base); | ||
|
||
&.md-clickable { | ||
cursor: pointer; | ||
} | ||
|
||
.md-secondary-container { | ||
display: flex; | ||
align-items: center; | ||
flex-shrink: 0; // Per https://bugs.webkit.org/show_bug.cgi?id=146020 | ||
|
||
/** Move Container to the End */ | ||
margin: auto; | ||
@include rtl(margin-right, 0, auto); | ||
@include rtl(margin-left, auto, 0); | ||
|
||
/** Reset component styles */ | ||
@include md-reset-switch(); | ||
|
||
// md-checkbox should have same spacing as other secondary buttons. | ||
md-checkbox { | ||
margin: 0 $md-button-spacing; | ||
|
||
&:last-child { | ||
@include rtl-prop(margin-right, margin-left, 0, $md-button-spacing); | ||
} | ||
} | ||
|
||
// md-button should not have any margin when being the last secondary item. | ||
.md-button:last-child, md-menu:last-child > .md-button { | ||
@include rtl-prop(margin-right, margin-left, 0, $md-button-margin); | ||
} | ||
} | ||
|
||
@include md-button-wrap(); | ||
@include md-reset-checkbox(); | ||
@include md-reset-paragraph(); | ||
@include md-list-item-multi-line( | ||
$list-height-2, $list-height-3, $list-title-font-size, $list-title-line-height, | ||
$list-subtitle-font-size, $list-subtitle-line-height | ||
); | ||
|
||
&.md-list-item-content, .md-list-item-content { | ||
/** Vertical Alignment */ | ||
display: flex; | ||
flex: 1; | ||
flex-direction: row; | ||
justify-content: flex-start; | ||
align-items: center; | ||
|
||
padding: 0 $md-list-item-padding; | ||
|
||
/** Custom styling for child content */ | ||
@include md-list-item-content( | ||
$list-icon-width, $list-avatar-width, $list-avatar-padding-dense | ||
); | ||
} | ||
|
||
} |
Oops, something went wrong.