fix theming + ui improvements
This commit is contained in:
toni
@@ -1,47 +1,109 @@
|
||||
|
||||
// Include theming for Angular Material with `mat.theme()`.
|
||||
// This Sass mixin will define CSS variables that are used for styling Angular Material
|
||||
// components according to the Material 3 design spec.
|
||||
// Learn more about theming and how to use it for your application's
|
||||
// custom components at https://material.angular.dev/guide/theming
|
||||
@use '@angular/material' as mat;
|
||||
@use './styles.colors.scss' as my-theme;
|
||||
|
||||
@use "@angular/material" as mat;
|
||||
@use "./theme-colors.scss" as theme-colors;
|
||||
|
||||
@include mat.core();
|
||||
|
||||
@include mat.core-theme(my-theme.$primary-palette);
|
||||
@include mat.button-theme(my-theme.$primary-palette);
|
||||
|
||||
html {
|
||||
@include mat.theme((
|
||||
color: (
|
||||
primary: my-theme.$primary-palette,
|
||||
tertiary: my-theme.$tertiary-palette,
|
||||
),
|
||||
typography: Roboto,
|
||||
density: 0,
|
||||
));
|
||||
@include mat.core-theme(my-theme.$primary-palette);
|
||||
@include mat.button-theme(my-theme.$primary-palette);
|
||||
// Default the application to a light color theme. This can be changed to
|
||||
// `dark` to enable the dark color theme, or to `light dark` to defer to the
|
||||
// user's system settings.
|
||||
color-scheme: light;
|
||||
|
||||
@include mat.theme(
|
||||
(
|
||||
color: (
|
||||
theme-type: light,
|
||||
primary: theme-colors.$primary-palette,
|
||||
tertiary: theme-colors.$tertiary-palette,
|
||||
),
|
||||
typography: (
|
||||
plain-family: Roboto,
|
||||
brand-family: Roboto,
|
||||
),
|
||||
density: (
|
||||
scale: 0,
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
// Define css classes like .mat-text-on-surface
|
||||
// @include mat.system-classes();
|
||||
|
||||
.primary-btn {
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
filled-container-color: var(--mat-sys-primary),
|
||||
filled-label-text-color: var(--mat-sys-on-primary),
|
||||
outlined-label-text-color: var(--mat-sys-primary),
|
||||
outlined-outline-color: var(--mat-sys-primary),
|
||||
protected-container-color: var(--mat-sys-primary),
|
||||
protected-label-text-color: var(--mat-sys-on-primary),
|
||||
text-label-text-color: var(--mat-sys-primary),
|
||||
tonal-label-text-color: var(--mat-sys-primary),
|
||||
)
|
||||
);
|
||||
}
|
||||
.secondary-btn {
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
filled-container-color: var(--mat-sys-secondary),
|
||||
filled-label-text-color: var(--mat-sys-on-secondary),
|
||||
outlined-label-text-color: var(--mat-sys-secondary),
|
||||
outlined-outline-color: var(--mat-sys-secondary),
|
||||
protected-container-color: var(--mat-sys-secondary),
|
||||
protected-label-text-color: var(--mat-sys-on-secondary),
|
||||
text-label-text-color: var(--mat-sys-secondary),
|
||||
tonal-label-text-color: var(--mat-sys-secondary),
|
||||
)
|
||||
);
|
||||
}
|
||||
.tertiary-btn {
|
||||
@include mat.button-overrides(
|
||||
(
|
||||
filled-container-color: var(--mat-sys-tertiary),
|
||||
filled-label-text-color: var(--mat-sys-on-tertiary),
|
||||
outlined-label-text-color: var(--mat-sys-tertiary),
|
||||
outlined-outline-color: var(--mat-sys-tertiary),
|
||||
protected-container-color: var(--mat-sys-tertiary),
|
||||
protected-label-text-color: var(--mat-sys-on-tertiary),
|
||||
text-label-text-color: var(--mat-sys-tertiary),
|
||||
tonal-label-text-color: var(--mat-sys-tertiary),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
// Default the application to a light color theme. This can be changed to
|
||||
// `dark` to enable the dark color theme, or to `light dark` to defer to the
|
||||
// user's system settings.
|
||||
color-scheme: light;
|
||||
// Set a default background, font and text colors for the application using
|
||||
// Angular Material's system-level CSS variables. Learn more about these
|
||||
// variables at https://material.angular.dev/guide/system-variables
|
||||
background-color: var(--mat-sys-surface);
|
||||
color: var(--mat-sys-on-surface);
|
||||
// font: var(--mat-sys-body-medium);
|
||||
|
||||
// Set a default background, font and text colors for the application using
|
||||
// Angular Material's system-level CSS variables. Learn more about these
|
||||
// variables at https://material.angular.dev/guide/system-variables
|
||||
background-color: var(--mat-sys-surface);
|
||||
color: var(--mat-sys-on-surface);
|
||||
font: var(--mat-sys-body-medium);
|
||||
|
||||
// Reset the user agent margin.
|
||||
margin: 0;
|
||||
// Reset the user agent margin.
|
||||
margin: 0;
|
||||
}
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
|
||||
html, body { height: 100%; }
|
||||
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.no-print {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
:not(.no-print) {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user