julien
9be9f191bb
- Replace color.red/green/blue() with color.channel() in styles.scss - Replace deprecated if() ternary with @if/@else in _variants.scss - Silence @import deprecation in angular.json (Bootstrap 5.x uses @import throughout; migrating to @use breaks the variable override mechanism)
81 lines
2.9 KiB
SCSS
81 lines
2.9 KiB
SCSS
@use "sass:map";
|
|
@use "sass:meta";
|
|
@use "@angular/material" as mat;
|
|
|
|
$_ripple-opacity: 0.1;
|
|
|
|
// Applies a focus style to an mat-button element for each of the supported palettes.
|
|
@mixin _focus-overlay-color($config-or-theme, $variants) {
|
|
$config: mat.m2-get-color-config($config-or-theme);
|
|
@each $variant, $variant-palette in $variants {
|
|
&.mat-#{"" + $variant} .mat-mdc-button-focus-overlay {
|
|
background-color: mat.m2-get-color-from-palette($variant-palette);
|
|
}
|
|
&.mat-#{"" + $variant} .mat-mdc-button-persistent-ripple::before {
|
|
background-color: mat.m2-get-color-from-palette($variant-palette);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin _ripple-background($palette, $hue, $opacity) {
|
|
$background-color: mat.m2-get-color-from-palette($palette, $hue, $opacity);
|
|
background-color: $background-color;
|
|
@if (meta.type-of($background-color) != color) {
|
|
opacity: $opacity;
|
|
}
|
|
}
|
|
|
|
@mixin _ripple-color($theme, $hue, $opacity, $variants) {
|
|
@each $variant, $variant-palette in $variants {
|
|
&.mat-#{"" + $variant} .mat-ripple-element {
|
|
@include _ripple-background($variant-palette, $hue, $opacity);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Applies a property to an mat-button element for each of the supported palettes.
|
|
@mixin _theme-property($theme, $property, $hue, $variants) {
|
|
$background: map.get($theme, background);
|
|
$foreground: map.get($theme, foreground);
|
|
|
|
@each $variant, $variant-palette in $variants {
|
|
&.mat-#{"" + $variant} {
|
|
#{$property}: mat.m2-get-color-from-palette($variant-palette, $hue);
|
|
&.mat-mdc-button-disabled {
|
|
@if $property == "color" {
|
|
#{$property}: mat.m2-get-color-from-palette($foreground, disabled-button);
|
|
} @else {
|
|
#{$property}: mat.m2-get-color-from-palette($background, disabled-button);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin color($config-or-theme, $variants) {
|
|
$config: mat.m2-get-color-config($config-or-theme);
|
|
$foreground: map.get($config, foreground);
|
|
$background: map.get($config, background);
|
|
|
|
.mat-icon:not(:disabled) {
|
|
@include _theme-property($config, "color", text, $variants);
|
|
}
|
|
|
|
.mdc-button:not(:disabled),
|
|
.mat-mdc-icon-button:not(:disabled),
|
|
.mat-mdc-stroked-button:not(:disabled) {
|
|
@include _theme-property($config, "color", text, $variants);
|
|
@include _focus-overlay-color($config, $variants);
|
|
}
|
|
|
|
.mat-mdc-flat-button:not(:disabled),
|
|
.mat-mdc-raised-button:not(:disabled),
|
|
.mat-mdc-unelevated-button:not(:disabled),
|
|
.mat-mdc-fab:not(:disabled),
|
|
.mat-mdc-mini-fab:not(:disabled) {
|
|
@include _theme-property($config, "color", default-contrast, $variants);
|
|
@include _theme-property($config, "background-color", default, $variants);
|
|
@include _ripple-color($config, default-contrast, $_ripple-opacity, $variants);
|
|
}
|
|
}
|