80 lines
2.1 KiB
SCSS
80 lines
2.1 KiB
SCSS
@use "sass:color";
|
|
@use "variables";
|
|
@use "include-media/dist/include-media";
|
|
|
|
md-icon svg {
|
|
width: var(--_with-icon-icon-size, var(--_icon-size, var(--_size)));
|
|
height: var(--_with-icon-icon-size, var(--_icon-size, var(--_size)));
|
|
line-height: 0;
|
|
}
|
|
|
|
:is(md-list-item, md-list-item-link) md-icon {
|
|
--md-icon-color: var(--_list-item-leading-icon-color);
|
|
|
|
padding-left: 16px;
|
|
|
|
svg {
|
|
width: var(--_list-item-leading-icon-size, var(--_with-icon-icon-size, var(--_icon-size, var(--_size))));
|
|
height: var(--_list-item-leading-icon-size, var(--_with-icon-icon-size, var(--_icon-size, var(--_size))));
|
|
}
|
|
}
|
|
|
|
label:has(> md-checkbox) {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
md-filled-text-field, md-outlined-text-field {
|
|
text-align: initial;
|
|
}
|
|
|
|
md-navigation-drawer, md-navigation-drawer-modal {
|
|
> md-list {
|
|
display: flex;
|
|
justify-content: center;
|
|
min-width: 300px;
|
|
|
|
md-list-item-link {
|
|
--md-list-item-list-item-container-shape: 100px;
|
|
--md-ripple-shape: 100px;
|
|
|
|
display: block;
|
|
width: 85%;
|
|
|
|
&[active] {
|
|
--md-list-item-list-item-container-color: var(--md-sys-color-secondary-container, #3f51b5);
|
|
}
|
|
|
|
md-icon[slot="start"] svg {
|
|
// TODO: Waiting for token implementation in Material Web
|
|
// (see https://m3.material.io/components/navigation-drawer/specs#ce8bfbcf-3dec-45d2-9d8b-5e10af1cf87d)
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
top-app-bar {
|
|
--mdc-theme-primary: var(--md-sys-color-surface, #fff);
|
|
--mdc-theme-on-primary: var(--md-sys-color-on-surface, #5f6368);
|
|
|
|
width: 100%;
|
|
|
|
[slot="navigationIcon"], [slot="title"] {
|
|
--md-icon-color: var(--md-sys-color-on-surface, #5f6368);
|
|
}
|
|
|
|
[slot="actionItems"] {
|
|
--md-icon-color: var(--md-sys-color-on-surface-variant, #5f6368);
|
|
}
|
|
}
|
|
|
|
md-fab, md-branded-fab {
|
|
&.sticky {
|
|
position: fixed;
|
|
right: 16px;
|
|
bottom: 50px;
|
|
}
|
|
}
|