| @import '../../cdk/overlay/overlay'; |
| @import '../../cdk/a11y/a11y'; |
| @import '../../cdk/text-field/text-field'; |
| |
| // Core styles that can be used to apply material design treatments to any element. |
| @import './style/private'; |
| @import './ripple/ripple'; |
| @import './focus-indicators/focus-indicators'; |
| @import './option/option-theme'; |
| @import './option/optgroup-theme'; |
| @import './selection/pseudo-checkbox/pseudo-checkbox-theme'; |
| @import './typography/all-typography'; |
| |
| // Mixin that renders all of the core styles that are not theme-dependent. |
| @mixin mat-core($typography-config: null) { |
| @include angular-material-typography($typography-config); |
| @include mat-ripple(); |
| @include cdk-a11y(); |
| @include cdk-overlay(); |
| @include cdk-text-field(); |
| |
| @include mat-private-strong-focus-indicators-positioning(); |
| @include _mat-mdc-core(); |
| } |
| |
| @mixin mat-core-color($config-or-theme) { |
| $config: mat-get-color-config($config-or-theme); |
| // Wrapper element that provides the theme background when the user's content isn't |
| // inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand |
| // selector in case the mixin is included at the top level. |
| .mat-app-background#{if(&, ', &.mat-app-background', '')} { |
| $background: map-get($config, background); |
| $foreground: map-get($config, foreground); |
| |
| background-color: mat-color($background, background); |
| color: mat-color($foreground, text); |
| } |
| |
| // Provides external CSS classes for each elevation value. Each CSS class is formatted as |
| // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is |
| // elevated. |
| @for $zValue from 0 through 24 { |
| .#{$mat-elevation-prefix}#{$zValue} { |
| @include mat-private-theme-elevation($zValue, $config); |
| } |
| } |
| |
| // Marker that is used to determine whether the user has added a theme to their page. |
| @at-root { |
| .mat-theme-loaded-marker { |
| display: none; |
| } |
| } |
| } |
| |
| // Mixin that renders all of the core styles that depend on the theme. |
| @mixin mat-core-theme($theme-or-color-config) { |
| $theme: mat-private-legacy-get-theme($theme-or-color-config); |
| // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that |
| // there won't be multiple warnings. e.g. if `mat-core-theme` reports a warning, then |
| // the imported themes (such as `mat-ripple-theme`) should not report again. |
| @include mat-private-check-duplicate-theme-styles($theme, 'mat-core') { |
| @include mat-ripple-theme($theme); |
| @include mat-option-theme($theme); |
| @include mat-optgroup-theme($theme); |
| @include mat-pseudo-checkbox-theme($theme); |
| |
| $color: mat-get-color-config($theme); |
| @if $color != null { |
| @include mat-core-color($color); |
| } |
| } |
| } |
| |
| // Mixin that renders all of the core MDC styles. Private mixin included with `mat-core`. |
| @mixin _mat-mdc-core() { |
| @include _mat-mdc-strong-focus-indicators-positioning(); |
| } |
| |
| // Mixin that ensures focus indicator host elements are positioned so that the focus indicator |
| // pseudo element within is positioned relative to the host. Private mixin included within |
| // `_mat-mdc-core`. |
| @mixin _mat-mdc-strong-focus-indicators-positioning() { |
| .mat-mdc-focus-indicator { |
| position: relative; |
| } |
| } |