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
1eb1037
commit 8bc4021
Showing
6 changed files
with
450 additions
and
435 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 |
---|---|---|
@@ -0,0 +1,300 @@ | ||
/** External component calculations */ | ||
$md-checkbox-width: 3 * $baseline-grid !default; | ||
//TODO(devversion): use shared variable from buttons.scss - See #9196 | ||
$md-button-spacing: $button-left-right-padding + rem(0.800) !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); | ||
} | ||
} | ||
|
||
/** 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%; | ||
@include rtl-prop(margin-left, margin-right, 0); | ||
} | ||
|
||
.md-avatar { | ||
width: $list-avatar-width; | ||
height: $list-avatar-width; | ||
@include rtl-prop(margin-right, margin-left, $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-prop(margin-right, margin-left, $md-list-item-indention - $avatar-icon-width); | ||
} | ||
|
||
> md-icon:first-child:not(.md-avatar-icon) { | ||
@include md-icon-size($list-icon-width); | ||
@include rtl-prop(margin-right, margin-left, $md-list-item-indention - $list-icon-width); | ||
} | ||
|
||
md-checkbox { | ||
width: $md-checkbox-width; | ||
} | ||
|
||
> md-checkbox:first-child { | ||
@include rtl-prop(margin-right, margin-left, $md-list-item-indention - $md-checkbox-width); | ||
} | ||
|
||
.md-button:last-of-type { | ||
@include rtl-prop(margin-right, margin-left, 0px); | ||
} | ||
|
||
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); | ||
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); | ||
} | ||
|
||
&.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; | ||
|
||
/** Move Container to the End */ | ||
margin: auto; | ||
@include rtl(margin-right, 0, auto); | ||
@include rtl(margin-left, auto, 0); | ||
|
||
// md-checkbox should have same spacing as other secondary buttons. | ||
md-checkbox:not(:last-child) { | ||
@include rtl-prop(margin-right, margin-left, $md-button-spacing); | ||
} | ||
} | ||
|
||
@include md-button-wrap(); | ||
@include md-reset-checkbox(); | ||
@include md-reset-switch(); | ||
@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.