54 lines
2.2 KiB
SCSS
54 lines
2.2 KiB
SCSS
|
@use './tokens/m2/mat/app' as tokens-mat-app;
|
||
|
|
@use './tokens/token-utils';
|
||
|
|
@use './style/elevation';
|
||
|
|
|
||
|
|
/// @deprecated This mixin is a no-op and is going to be removed in v21.
|
||
|
|
@mixin core() {}
|
||
|
|
|
||
|
|
// Emits the mat-app-background CSS class. This predefined class sets the
|
||
|
|
// background color and text color of an element.
|
||
|
|
@mixin app-background() {
|
||
|
|
// TODO: Move ripple styles to be dynamically loaded instead of in core.
|
||
|
|
// This variable is used as a fallback for the ripple element's
|
||
|
|
// background color. However, if it isn't defined anywhere, then MSS
|
||
|
|
// complains in its verification stage.
|
||
|
|
html {
|
||
|
|
--mat-sys-on-surface: initial;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Wrapper element that provides the theme background when the
|
||
|
|
// user's content isn't inside of a `mat-sidenav-container`.
|
||
|
|
@at-root {
|
||
|
|
// Note: we need to emit fallback values here to avoid errors in internal builds.
|
||
|
|
@include token-utils.use-tokens(tokens-mat-app.$prefix, tokens-mat-app.get-token-slots()) {
|
||
|
|
.mat-app-background {
|
||
|
|
@include token-utils.create-token-slot(background-color, background-color, transparent);
|
||
|
|
@include token-utils.create-token-slot(color, text-color, inherit);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Emits CSS classes for applying elevation. These classes follow the pattern
|
||
|
|
// mat-elevation-z#, where # is the elevation number you want, from 0 to 24.
|
||
|
|
// These predefined classes use the CSS box-shadow settings defined by the
|
||
|
|
// Material Design specification.
|
||
|
|
@mixin elevation-classes() {
|
||
|
|
@at-root {
|
||
|
|
@include token-utils.use-tokens(tokens-mat-app.$prefix, tokens-mat-app.get-token-slots()) {
|
||
|
|
// Provides external CSS classes for each elevation value. Each CSS class is formatted as
|
||
|
|
// `mat-elevation-z$z-value` where `$z-value` corresponds to the z-space to which the element
|
||
|
|
// is elevated.
|
||
|
|
@for $z-value from 0 through 24 {
|
||
|
|
$selector: elevation.$prefix + $z-value;
|
||
|
|
// We need the `mat-mdc-elevation-specific`, because some MDC mixins
|
||
|
|
// come with elevation baked in and we don't have a way of removing it.
|
||
|
|
.#{$selector}, .mat-mdc-elevation-specific.#{$selector} {
|
||
|
|
@include token-utils.create-token-slot(box-shadow, 'elevation-shadow-level-#{$z-value}',
|
||
|
|
none);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|