| @import '../core/density/private/compatibility'; |
| @import '../core/style/variables'; |
| @import '../core/theming/palette'; |
| @import '../core/theming/theming'; |
| @import '../core/typography/typography-utils'; |
| @import './toolbar-variables'; |
| |
| @mixin _mat-toolbar-height($height) { |
| .mat-toolbar-multiple-rows { |
| min-height: $height; |
| } |
| .mat-toolbar-row, .mat-toolbar-single-row { |
| height: $height; |
| } |
| } |
| |
| @mixin _mat-toolbar-color($palette) { |
| background: mat-color($palette); |
| color: mat-color($palette, default-contrast); |
| } |
| |
| @mixin _mat-toolbar-form-field-overrides { |
| .mat-form-field-underline, |
| .mat-form-field-ripple, |
| .mat-focused .mat-form-field-ripple { |
| background-color: currentColor; |
| } |
| |
| .mat-form-field-label, |
| .mat-focused .mat-form-field-label, |
| .mat-select-value, |
| .mat-select-arrow, |
| .mat-form-field.mat-focused .mat-select-arrow { |
| color: inherit; |
| } |
| |
| .mat-input-element { |
| caret-color: currentColor; |
| } |
| } |
| |
| @mixin mat-toolbar-color($config-or-theme) { |
| $config: mat-get-color-config($config-or-theme); |
| $primary: map-get($config, primary); |
| $accent: map-get($config, accent); |
| $warn: map-get($config, warn); |
| $background: map-get($config, background); |
| $foreground: map-get($config, foreground); |
| |
| .mat-toolbar { |
| background: mat-color($background, app-bar); |
| color: mat-color($foreground, text); |
| |
| &.mat-primary { |
| @include _mat-toolbar-color($primary); |
| } |
| |
| &.mat-accent { |
| @include _mat-toolbar-color($accent); |
| } |
| |
| &.mat-warn { |
| @include _mat-toolbar-color($warn); |
| } |
| |
| @include _mat-toolbar-form-field-overrides; |
| } |
| } |
| |
| @mixin mat-toolbar-typography($config-or-theme) { |
| $config: mat-get-typography-config($config-or-theme); |
| .mat-toolbar, |
| .mat-toolbar h1, |
| .mat-toolbar h2, |
| .mat-toolbar h3, |
| .mat-toolbar h4, |
| .mat-toolbar h5, |
| .mat-toolbar h6 { |
| @include mat-typography-level-to-styles($config, title); |
| margin: 0; |
| } |
| } |
| |
| @mixin mat-toolbar-density($config-or-theme) { |
| $density-scale: mat-get-density-config($config-or-theme); |
| $height-desktop: mat-private-density-prop-value( |
| $mat-toolbar-desktop-density-config, $density-scale, height); |
| $height-mobile: mat-private-density-prop-value( |
| $mat-toolbar-mobile-density-config, $density-scale, height); |
| |
| @include mat-private-density-legacy-compatibility() { |
| // Set the default height for the toolbar. |
| @include _mat-toolbar-height($height-desktop); |
| |
| // As per specs, toolbars should have a different height in mobile devices. This has been |
| // specified in the old guidelines and is still observable in the new specifications by |
| // looking at the spec images. See: https://material.io/design/components/app-bars-top.html#anatomy |
| @media ($mat-xsmall) { |
| @include _mat-toolbar-height($height-mobile); |
| } |
| } |
| } |
| |
| @mixin mat-toolbar-theme($theme-or-color-config) { |
| $theme: mat-private-legacy-get-theme($theme-or-color-config); |
| @include mat-private-check-duplicate-theme-styles($theme, 'mat-toolbar') { |
| $color: mat-get-color-config($theme); |
| $density: mat-get-density-config($theme); |
| $typography: mat-get-typography-config($theme); |
| |
| @if $color != null { |
| @include mat-toolbar-color($color); |
| } |
| @if $density != null { |
| @include mat-toolbar-density($density); |
| } |
| @if $typography != null { |
| @include mat-toolbar-typography($typography); |
| } |
| } |
| } |