blob: 025237fee89b47585421f9e5527789abc39adf5d [file] [log] [blame]
@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);
}
}
}