You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
3.4 KiB
123 lines
3.4 KiB
@use 'sass:map';
|
|
@use '../core/density/private/compatibility';
|
|
@use '../core/style/variables';
|
|
@use '../core/theming/theming';
|
|
@use '../core/typography/typography';
|
|
@use '../core/typography/typography-utils';
|
|
@use './toolbar-variables';
|
|
|
|
@mixin _height($height) {
|
|
.mat-toolbar-multiple-rows {
|
|
min-height: $height;
|
|
}
|
|
.mat-toolbar-row, .mat-toolbar-single-row {
|
|
height: $height;
|
|
}
|
|
}
|
|
|
|
@mixin _palette-styles($palette) {
|
|
background: theming.get-color-from-palette($palette);
|
|
color: theming.get-color-from-palette($palette, default-contrast);
|
|
}
|
|
|
|
@mixin _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 color($config-or-theme) {
|
|
$config: theming.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: theming.get-color-from-palette($background, app-bar);
|
|
color: theming.get-color-from-palette($foreground, text);
|
|
|
|
&.mat-primary {
|
|
@include _palette-styles($primary);
|
|
}
|
|
|
|
&.mat-accent {
|
|
@include _palette-styles($accent);
|
|
}
|
|
|
|
&.mat-warn {
|
|
@include _palette-styles($warn);
|
|
}
|
|
|
|
@include _form-field-overrides;
|
|
}
|
|
}
|
|
|
|
@mixin typography($config-or-theme) {
|
|
$config: typography.private-typography-to-2014-config(
|
|
theming.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 typography-utils.typography-level($config, title);
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
@mixin density($config-or-theme) {
|
|
$density-scale: theming.get-density-config($config-or-theme);
|
|
$height-desktop: compatibility.private-density-prop-value(
|
|
toolbar-variables.$desktop-density-config, $density-scale, height);
|
|
$height-mobile: compatibility.private-density-prop-value(
|
|
toolbar-variables.$mobile-density-config, $density-scale, height);
|
|
|
|
@include compatibility.private-density-legacy-compatibility() {
|
|
// Set the default height for the toolbar.
|
|
@include _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 (variables.$xsmall) {
|
|
@include _height($height-mobile);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin theme($theme-or-color-config) {
|
|
$theme: theming.private-legacy-get-theme($theme-or-color-config);
|
|
@include theming.private-check-duplicate-theme-styles($theme, 'mat-toolbar') {
|
|
$color: theming.get-color-config($theme);
|
|
$density: theming.get-density-config($theme);
|
|
$typography: theming.get-typography-config($theme);
|
|
|
|
@if $color != null {
|
|
@include color($color);
|
|
}
|
|
@if $density != null {
|
|
@include density($density);
|
|
}
|
|
@if $typography != null {
|
|
@include typography($typography);
|
|
}
|
|
}
|
|
}
|