$mdc-list-side-padding: 16px;
// Sets the width and height of a detail element to the specified dimension.
@mixin mdc-list-detail-size_($size) {
width: $size;
height: $size;
}
// Sets the width and height of the start detail element, as well as calculates the margins for
// the start detail element such that the text is always offset by 72px, which is defined within
// the spec.
@mixin mdc-list-start-detail-size_($size) {
$text-offset: 72px;
$side-padding: $mdc-list-side-padding;
$margin-value: $text-offset - $side-padding - $size;
@include mdc-list-detail-size_($size);
@include mdc-rtl-reflexive-box(margin, right, $margin-value, ".mdc-list-item");
}
// postcss-bem-linter: define list
.mdc-list {
@include mdc-typography(subheading2);
@include mdc-theme-prop(color, text-primary-on-background);
@include mdc-theme-dark {
@include mdc-theme-prop(color, text-primary-on-dark);
}
margin: 0;
padding: 8px $mdc-list-side-padding 0;
// According to the mocks and stickersheet, the line-height is adjusted to 24px for text content,
// same as for subheading1.
line-height: map-get(map-get($mdc-typography-styles, subheading1), line-height);
list-style-type: none;
}
.mdc-list--dense {
padding-top: 4px;
font-size: .812rem;
}
// postcss-bem-linter: end
// postcss-bem-linter: define list-item
.mdc-list-item {
display: flex;
align-items: center;
justify-content: flex-start;
height: 48px;
&__start-detail {
@include mdc-list-start-detail-size_(24px);
}
&__end-detail {
@include mdc-list-detail-size_(24px);
@include mdc-rtl-reflexive-property(margin, auto, 0, ".mdc-list-item");
}
&__text {
display: inline-flex;
flex-direction: column;
&__secondary {
@include mdc-typography(body1);
@include mdc-theme-prop(color, text-secondary-on-background);
@include mdc-theme-dark {
@include mdc-theme-prop(color, text-secondary-on-dark);
}
// Match the font size to the primary text when dense
// stylelint-disable plugin/selector-bem-pattern
.mdc-list--dense & {
font-size: inherit;
}
// stylelint-enable plugin/selector-bem-pattern
}
}
// stylelint-disable plugin/selector-bem-pattern
.mdc-list--dense & {
height: 40px;
&__start-detail {
@include mdc-list-start-detail-size_(20px);
}
&__end-detail {
@include mdc-list-detail-size_(20px);
}
}
.mdc-list--avatar-list & {
height: 56px;
&__start-detail {
@include mdc-list-start-detail-size_(40px);
border-radius: 50%;
}
}
.mdc-list--avatar-list.mdc-list--dense .mdc-list__item {
height: 48px;
&__start-detail {
@include mdc-list-start-detail-size_(36px);
}
}
.mdc-list--two-line & {
height: 72px;
}
.mdc-list--two-line.mdc-list--dense & {
height: 60px;
}
}
// postcss-bem-linter: end //
// Override anchor tag styles for the use-case of a list being used for navigation
// stylelint-disable selector-max-type,selector-no-qualifying-type
a.mdc-list-item {
color: inherit;
text-decoration: none;
}
// stylelint-enable selector-max-type,selector-no-qualifying-type
.mdc-list-item.mdc-ripple-upgraded {
@include mdc-ripple-base;
@include mdc-ripple-bg((pseudo: "::before"));
@include mdc-ripple-fg((pseudo: "::after"));
@include mdc-rtl-reflexive-position(left, $mdc-list-side-padding * -1);
position: relative;
// Cause the upgraded list item to cover the entirety of the list, causing ripples to emanate
// across the entire list element.
width: 100%;
padding: 0 $mdc-list-side-padding;
overflow: hidden;
&:focus {
outline: none;
}
@include mdc-theme-dark(".mdc-list") {
@include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .12));
@include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .12));
}
}
// postcss-bem-linter: define list-divider
.mdc-list-divider {
height: 0;
margin: 0;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, .12);
@include mdc-theme-dark(".mdc-list") {
border-bottom-color: rgba(255, 255, 255, .2);
}
}
.mdc-list-divider--inset {
$mdc-list-divider-inset-amt: /* text offset */ 72px - /* padding offset */ $mdc-list-side-padding;
@include mdc-rtl-reflexive-box(margin, left, $mdc-list-divider-inset-amt, ".mdc-list-group");
width: calc(100% - #{$mdc-list-divider-inset-amt});
}
// postcss-bem-linter: end
// postcss-bem-linter: define list-group
.mdc-list-group {
padding: 0 $mdc-list-side-padding;
&__subheader {
$mdc-list-subheader-virtual-height: 3rem;
$mdc-list-subheader-leading: map-get(map-get($mdc-typography-styles, body2), line-height);
$mdc-list-subheader-margin:
($mdc-list-subheader-virtual-height - $mdc-list-subheader-leading) / 2;
@include mdc-typography(body2);
@include mdc-theme-prop(color, text-primary-on-background);
@include mdc-theme-dark {
@include mdc-theme-prop(color, text-primary-on-dark);
}
margin: $mdc-list-subheader-margin 0;
}
// Reset padding on mdc-list since it's already accounted for by the list group.
.mdc-list {
padding: 0;
}
}
// postcss-bem-linter: end