UNPKG

2.87 kBSCSSView Raw
1@use 'sass:map';
2@use '../core/theming/theming';
3@use '../core/style/private';
4@use '../core/style/form-common';
5@use '../core/typography/typography';
6@use '../core/typography/typography-utils';
7
8
9@mixin color($config-or-theme) {
10 $config: theming.get-color-config($config-or-theme);
11 $foreground: map.get($config, foreground);
12 $background: map.get($config, background);
13 $primary: map.get($config, primary);
14 $accent: map.get($config, accent);
15 $warn: map.get($config, warn);
16
17 .mat-select-value {
18 color: theming.get-color-from-palette($foreground, text);
19 }
20
21 .mat-select-placeholder {
22 color: form-common.private-control-placeholder-color($config);
23 }
24
25 .mat-select-disabled .mat-select-value {
26 color: theming.get-color-from-palette($foreground, disabled-text);
27 }
28
29 .mat-select-arrow {
30 color: theming.get-color-from-palette($foreground, secondary-text);
31 }
32
33 .mat-select-panel {
34 background: theming.get-color-from-palette($background, card);
35 @include private.private-theme-overridable-elevation(4, $config);
36
37 .mat-option.mat-selected:not(.mat-option-multiple) {
38 background: theming.get-color-from-palette($background, hover, 0.12);
39 }
40 }
41
42 .mat-form-field {
43 &.mat-focused {
44 &.mat-primary .mat-select-arrow {
45 color: theming.get-color-from-palette($primary, text);
46 }
47
48 &.mat-accent .mat-select-arrow {
49 color: theming.get-color-from-palette($accent, text);
50 }
51
52 &.mat-warn .mat-select-arrow {
53 color: theming.get-color-from-palette($warn, text);
54 }
55 }
56
57 .mat-select.mat-select-invalid .mat-select-arrow {
58 color: theming.get-color-from-palette($warn, text);
59 }
60
61 .mat-select.mat-select-disabled .mat-select-arrow {
62 color: theming.get-color-from-palette($foreground, disabled-text);
63 }
64 }
65}
66
67@mixin typography($config-or-theme) {
68 $config: typography.private-typography-to-2014-config(
69 theming.get-typography-config($config-or-theme));
70 // The unit-less line-height from the font config.
71 $line-height: typography-utils.line-height($config, input);
72
73 .mat-select {
74 font-family: typography-utils.font-family($config);
75 }
76
77 .mat-select-trigger {
78 height: typography-utils.private-coerce-unitless-to-em($line-height);
79 }
80}
81
82@mixin _density($config-or-theme) {}
83
84@mixin theme($theme-or-color-config) {
85 $theme: theming.private-legacy-get-theme($theme-or-color-config);
86 @include theming.private-check-duplicate-theme-styles($theme, 'mat-select') {
87 $color: theming.get-color-config($theme);
88 $density: theming.get-density-config($theme);
89 $typography: theming.get-typography-config($theme);
90
91 @if $color != null {
92 @include color($color);
93 }
94 @if $density != null {
95 @include _density($density);
96 }
97 @if $typography != null {
98 @include typography($typography);
99 }
100 }
101}