openstamanager/resources/scss/_material.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;
    }
}