1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 | @use '@material/feature-targeting/feature-targeting';
|
24 | @use '@material/floating-label/mixins' as floating-label-mixins;
|
25 | @use '@material/notched-outline/mixins' as notched-outline-mixins;
|
26 | @use '@material/notched-outline/variables' as notched-outline-variables;
|
27 | @use '@material/rtl/rtl';
|
28 | @use './select-icon-theme';
|
29 | @use './select-theme';
|
30 |
|
31 | @mixin core-styles($query: feature-targeting.all()) {
|
32 | .mdc-select--outlined {
|
33 | $feat-structure: feature-targeting.create-target($query, structure);
|
34 | $feat-color: feature-targeting.create-target($query, color);
|
35 |
|
36 | @include select-theme.outlined-height(select-theme.$height, $query: $query);
|
37 | @include select-theme.outline-shape-radius(
|
38 | select-theme.$shape-radius,
|
39 | $query: $query
|
40 | );
|
41 |
|
42 | @include select-theme.container-fill-color(
|
43 | (
|
44 | default: transparent,
|
45 | disabled: transparent,
|
46 | ),
|
47 | $query: $query
|
48 | );
|
49 |
|
50 | @include select-theme.outline-color(
|
51 | (
|
52 | default: select-theme.$outlined-idle-border,
|
53 | hover: select-theme.$outlined-hover-border,
|
54 | focus: primary,
|
55 | disabled: select-theme.$disabled-outline-color,
|
56 | ),
|
57 | $query: $query
|
58 | );
|
59 |
|
60 | @include select-theme.truncate-notched-outline-max-width(
|
61 | $leading-icon-size: 0,
|
62 | $dropdown-icon-size: select-icon-theme.$icon-size,
|
63 | $query: $query
|
64 | );
|
65 |
|
66 | @include feature-targeting.targets($feat-structure) {
|
67 | border: none;
|
68 | }
|
69 |
|
70 | .mdc-select__anchor {
|
71 | @include floating-label-mixins.shake-animation(
|
72 | select-outlined,
|
73 | $query: $query
|
74 | );
|
75 | @include notched-outline-mixins.floating-label-float-position-absolute(
|
76 | select-theme.$outlined-label-position-y,
|
77 | $query: $query
|
78 | );
|
79 | @include notched-outline-mixins.notch-offset(
|
80 | notched-outline-variables.$border-width,
|
81 | $query: $query
|
82 | );
|
83 | @include select-theme.center-aligned($query: $query);
|
84 |
|
85 | @include feature-targeting.targets($feat-structure) {
|
86 | display: flex;
|
87 |
|
88 | align-items: baseline;
|
89 | overflow: visible;
|
90 | }
|
91 | }
|
92 |
|
93 | .mdc-select__selected-text-container {
|
94 | @include feature-targeting.targets($feat-structure) {
|
95 | display: flex;
|
96 | border: none;
|
97 | z-index: 1;
|
98 | }
|
99 |
|
100 | @include feature-targeting.targets($feat-color) {
|
101 | background-color: transparent;
|
102 | }
|
103 | }
|
104 |
|
105 | .mdc-select__icon {
|
106 | @include feature-targeting.targets($feat-structure) {
|
107 | z-index: 2;
|
108 | }
|
109 | }
|
110 |
|
111 | .mdc-floating-label {
|
112 | @include feature-targeting.targets($feat-structure) {
|
113 | line-height: 1.15rem;
|
114 |
|
115 | @include rtl.reflexive-position(
|
116 | left,
|
117 | notched-outline-variables.$padding
|
118 | );
|
119 | }
|
120 | }
|
121 |
|
122 | &.mdc-select--focused {
|
123 | @include notched-outline-mixins.notch-offset(
|
124 | select-theme.$outlined-stroke-width,
|
125 | $query: $query
|
126 | );
|
127 | }
|
128 |
|
129 | &.mdc-select--invalid {
|
130 | @include select-theme.outline-color(
|
131 | (
|
132 | default: select-theme.$error-color,
|
133 | hover: select-theme.$error-color,
|
134 | focus: select-theme.$error-color,
|
135 | ),
|
136 | $query: $query
|
137 | );
|
138 | }
|
139 |
|
140 | &.mdc-select--with-leading-icon {
|
141 | @include select-theme.outlined-with-leading-icon-floating-label-position-animation(
|
142 | select-theme.$height,
|
143 | select-icon-theme.$icon-size,
|
144 | $query: $query
|
145 | );
|
146 | @include select-theme.truncate-notched-outline-max-width(
|
147 | $leading-icon-size: select-icon-theme.$icon-size,
|
148 | $dropdown-icon-size: select-icon-theme.$icon-size,
|
149 | $query: $query
|
150 | );
|
151 | }
|
152 |
|
153 | .mdc-menu-surface {
|
154 | @include feature-targeting.targets($feat-structure) {
|
155 | margin-bottom: 8px;
|
156 | }
|
157 | }
|
158 |
|
159 | &.mdc-select--no-label .mdc-menu-surface,
|
160 | .mdc-menu-surface--is-open-below {
|
161 | @include feature-targeting.targets($feat-structure) {
|
162 | margin-bottom: 0;
|
163 | }
|
164 | }
|
165 | }
|
166 | }
|