/
_form-field-native-select.scss
132 lines (116 loc) · 4.63 KB
/
_form-field-native-select.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
@use 'sass:map';
@use 'sass:math';
@use '../mdc-helpers/mdc-helpers';
@use '../../material/core/theming/palette';
@use '@material/theme/theme-color' as mdc-theme-color;
// Width of the Material Design form-field select arrow.
$mat-form-field-select-arrow-width: 10px;
// Height of the Material Design form-field select arrow.
$mat-form-field-select-arrow-height: 5px;
// Horizontal padding that needs to be applied to the native select in an form-field so
// that the absolute positioned arrow does not overlap the select content.
$mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-width + 5px;
// Mixin that creates styles for native select controls in a form-field.
@mixin private-form-field-native-select() {
// Remove the native select down arrow and ensure that the native appearance
// does not conflict with the form-field. e.g. Focus indication of the native
// select is undesired since we handle focus as part of the form-field.
select.mat-mdc-form-field-input-control {
-moz-appearance: none;
-webkit-appearance: none;
background-color: transparent;
display: inline-flex;
box-sizing: border-box;
// By default the cursor does not change when hovering over a select. We want to
// change this for non-disabled select elements so that it's more obvious that the
// control can be clicked.
&:not(:disabled) {
cursor: pointer;
}
}
// Native select elements with the `matInput` directive should have Material Design
// styling. This means that we add an arrow to the form-field that is based on the
// Material Design specification. We achieve this by adding a pseudo element to the
// form-field infix.
.mat-mdc-form-field-type-mat-native-select {
.mat-mdc-form-field-infix::after {
content: '';
width: 0;
height: 0;
border-left: math.div($mat-form-field-select-arrow-width, 2) solid transparent;
border-right: math.div($mat-form-field-select-arrow-width, 2) solid transparent;
border-top: $mat-form-field-select-arrow-height solid;
position: absolute;
right: 0;
// Make the arrow non-clickable so the user can click on the form control under it.
pointer-events: none;
[dir='rtl'] & {
right: auto;
left: 0;
}
}
// Add padding on the end of the native select so that the content does not
// overlap with the Material Design arrow.
.mat-mdc-form-field-input-control {
padding-right: $mat-form-field-select-horizontal-end-padding;
[dir='rtl'] & {
padding-right: 0;
padding-left: $mat-form-field-select-horizontal-end-padding;
}
}
}
}
// Gets the color to use for some text that is highlighted while a select has focus.
@function _get-focused-arrow-color($palette) {
@return rgba(mdc-theme-color.prop-value($palette), 0.87);
}
@mixin private-form-field-native-select-color($config) {
@include mdc-helpers.mat-using-mdc-theme($config) {
// These values are taken from the MDC select implementation:
// https://github.com/material-components/material-components-web/blob/master/packages/mdc-select/_select-theme.scss
$dropdown-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.54);
$disabled-dropdown-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38);
select.mat-mdc-form-field-input-control {
// On dark themes we set the native `select` color to some shade of white,
// however the color propagates to all of the `option` elements, which are
// always on a white background inside the dropdown, causing them to blend in.
// Since we can't change background of the dropdown, we need to explicitly
// reset the color of the options to something dark.
@if (map.get($config, is-dark)) {
option {
color: palette.$dark-primary-text;
}
option:disabled {
color: palette.$dark-disabled-text;
}
}
}
.mat-mdc-form-field-type-mat-native-select {
.mat-mdc-form-field-infix::after {
color: $dropdown-icon-color;
}
&.mat-focused {
&.mat-primary {
.mat-mdc-form-field-infix::after {
color: _get-focused-arrow-color(primary);
}
}
&.mat-accent {
.mat-mdc-form-field-infix::after {
color: _get-focused-arrow-color(secondary);
}
}
&.mat-warn {
.mat-mdc-form-field-infix::after {
color: _get-focused-arrow-color(error);
}
}
}
&.mat-form-field-disabled {
.mat-mdc-form-field-infix::after {
color: $disabled-dropdown-icon-color;
}
}
}
}
}