openstamanager/resources/scss/material/_material.scss

@use "sass:color";
@use "../variables";
@use "node_modules/@material/theme/index" with (
    $primary: variables.$primary,
    $secondary: variables.$secondary
);
@use "@material/data-table/data-table";
@use "@material/typography";

@import "include-media/dist/include-media";

@include data-table.core-styles;
@include data-table.theme-baseline;
@include typography.core-styles;

/* ---------------------------
    MDC Data Table
 ----------------------------- */

//noinspection Stylelint
.mdc-data-table__header-cell {
    &:not(.mdc-data-table__header-cell--checkbox) {
        padding: 8px 16px;
    }

    .mdc-data-table__header-cell-label {
        text-align: center;
        white-space: nowrap;
    }

    .mdc-data-table__filter-textfield {
        width: fit-content;
    }
}

/* ---------------------------
    MWC Components
--------------------------- */
mwc-button .mdi {
    font-size: 18px;
}

mwc-icon-button {
    .mdi {
        opacity: 0.54;
    }

    &:hover .mdi {
        opacity: 0.84;
    }
}

mwc-list > a,
mwc-menu > a {
    text-decoration: none;
}

mwc-list-item {
    --mdc-list-item-meta-size: auto;

    &:first-child {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    &:last-child {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
}

//noinspection Stylelint
material-drawer {
    --mdc-theme-primary: var(--mdc-theme-primary2, variables.$primary);

    > mwc-list mwc-list-item {
        border-bottom-right-radius: 100px !important;
        border-top-right-radius: 100px !important;
    }
}

material-drawer[type="modal"][open] {
    z-index: 8;
    padding-top: initial;
}

top-app-bar {
    width: 100%;

    --mdc-theme-primary: var(--mdc-theme-background, #fff);
    --mdc-theme-on-primary: var(--mdc-theme-text-primary-on-background, #5f6368);
}

mwc-button.rounded {
    --mdc-shape-small: 100px;
}

/* ---------------------------
    MDC FABs
--------------------------- */
mwc-fab {
    --mdc-icon-font: none;

    &.sticky {
        position: fixed;
        right: 16px;
        bottom: 16px;
    }

    //noinspection SassScssResolvedByNameOnly
    @include media(">desktop") {
        &.sticky {
            right: 1.5rem;
        }
    }
}

top-app-bar mwc-fab.sticky {
    bottom: 61px;
}

/* ---------------------------
    MDC Theme and Typography
--------------------------- */
//noinspection Stylelint
:root {
    --mdc-theme-primary: #{variables.$primary};
    --mdc-theme-primary2: #{variables.$primary}; // Fix for MWC Drawer styling
    --mdc-theme-secondary: #{variables.$secondary};
    --mdc-theme-background: #fff;
    --mdc-theme-surface: #fff;
    --mdc-theme-error: #b00020;
    --mdc-theme-text-primary-on-background: #000d;
    --mdc-theme-text-icon-on-background: #00000060;
    --mdc-theme-outline-color: #e0e0e0;
    --mdc-typography-font-family: #{variables.$body_font};
    --mdc-typography-button-font-family: #{variables.$headings_font};
    --mdc-snackbar-action-color: #{variables.$secondary};

    @each $type in headline1, headline2, headline3, headline4, headline5, headline6, subtitle1, subtitle2 {
        --mdc-typography-#{$type}-font-family: #{variables.$body_font};
        --mdc-typography-#{$type}-font-weight: 500;
    }
}

.mdc-high-contrast {
    --mdc-theme-primary: #{color.adjust(variables.$primary, $lightness: 100%)};
    --mdc-theme-primary2: #{color.adjust(variables.$primary, $lightness: 50%)}; // Fix for MWC Drawer styling
    --mdc-theme-secondary: #{variables.$secondary};
    --mdc-theme-on-primary: #000;
    --mdc-theme-on-secondary: #000;
    --mdc-theme-error: #cf6679;
    --mdc-theme-text-primary-on-background: #fff;
    --mdc-theme-text-secondary-on-background: #b9b9b989;
    --mdc-theme-text-icon-on-background: #e7e7e7;
    --mdc-theme-background: #121212;
    --mdc-theme-surface: #121212;
    --mdc-ripple-color: #fff;
    --mdc-button-outline-color: #e0e0e0;
    --mdc-dialog-heading-ink-color: #fff;
    --mdc-dialog-content-ink-color: #fff;
    --mdc-checkbox-unchecked-color: #fff;
    --mdc-text-field-idle-line-color: #fff;

    [slot="appContent"] {
        color: var(--mdc-theme-on-primary, #{variables.$primary});
    }

    a {
        color: var(--mdc-theme-primary, #{variables.$primary});
    }

    mwc-textfield,
    text-field,
    text-area {
        --mdc-theme-primary: var(--mdc-theme-secondary, #{variables.$secondary});
    }

    mwc-icon-button,
    i.mdi:not(.light-bg) {
        color: var(--mdc-theme-text-icon-on-background, #000d);
    }

    mwc-button {
        --mdc-ripple-color: var(--mdc-theme-primary, #{variables.$primary});

        &[raised] {
            --mdc-ripple-color: unset;

            i.mdi {
                color: unset;
            }
        }
    }

    mwc-fab {
        --mdc-theme-on-secondary: white;
    }
}