material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-11-11 06:10:17 +03:00
Code Issues Projects Releases Wiki Activity

feat: Update styles and theming capabilities.

Browse Source 
PiperOrigin-RevId: 421587935
This commit is contained in:
Brandon Diamond 2022-01-13 09:39:20 -08:00 committed by Copybara-Service
parent ffa4e818ff
commit 35cd1411e1
3 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
components/list/lib/_list-item-theme.scss
View File

@ -15,6 +15,7 @@ $selectors: (
$light-theme: (
container-height: 56px,
container-color: transparent,
label-text-font: typography.get-font(body1),
label-text-size: 16px,
label-text-tracking: typography.px-to-rem(0.5px),
@ -29,7 +30,7 @@ $light-theme: (
trailing-supporting-text-size: 12px,
trailing-supporting-text-tracking: typography.px-to-rem(0.25px),
trailing-supporting-text-weight: 300,
trailing-supporting-text-color: #444746,
trailing-supporting-text-color: #646766,
icon-color: #444746,
);
@ -50,6 +51,12 @@ $light-theme: (
$theme: _resolve-theme($theme, $resolvers);
$theme: theme.create-theme-vars($theme, list);
@include _set_container-color(
(
default: map.get($theme, container-color),
)
);
@include _set-label-text-typography(
(
family: map.get($theme, label-text-font),
@ -105,6 +112,12 @@ $light-theme: (
@include _set-height($container-height);
}
@mixin _set-container-color($colors) {
@include state.enabled($selectors) {
@include _set-container-background-color(state.get-default-state($colors));
}
}
@mixin _set-label-text-typography($typography-map) {
$family: map.get($typography-map, family);
$size: map.get($typography-map, size);
@ -183,6 +196,10 @@ $light-theme: (
height: $height;
}
@mixin _set-container-background-color($color) {
background-color: $color;
}
@mixin _set-label-text-color($color) {
.md3-list-item__label-text {
color: $color;
@ -196,7 +213,7 @@ $light-theme: (
}
@mixin _set-trailing-supporting-text-color($color) {
.md3-list-item__supporting-text {
.md3-list-item__trailing-supporting-text {
color: $color;
}
}

2
components/list/lib/_list.scss
View File

@ -23,5 +23,5 @@
padding: 0;
padding-block: 8px;
list-style-type: none;
width: 500px;
min-width: 300px;
}

1
components/list/lib/list-item.ts
View File

@ -29,6 +29,7 @@ export class ListItem extends LitElement {
// TODO(b/182405623): restore whitespace
return html`
<li
tabindex="0"
class="md3-list-item ${classMap(this.getRenderClasses())}"><!--
-->${this.renderStart()}<!--
-->${this.renderBody()}<!--