material_components_web-sass 0.26.0 → 0.27.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +9 -0
- data/lib/material_components_web/sass/version.rb +1 -1
- data/vendor/assets/javascripts/material-components-web.js +698 -637
- data/vendor/assets/stylesheets/@material/button/_mixins.scss +2 -2
- data/vendor/assets/stylesheets/@material/button/_variables.scss +0 -3
- data/vendor/assets/stylesheets/@material/button/mdc-button.scss +2 -2
- data/vendor/assets/stylesheets/@material/checkbox/mdc-checkbox.scss +1 -1
- data/vendor/assets/stylesheets/@material/fab/_mixins.scss +2 -2
- data/vendor/assets/stylesheets/@material/fab/mdc-fab.scss +1 -5
- data/vendor/assets/stylesheets/@material/icon-toggle/mdc-icon-toggle.scss +4 -19
- data/vendor/assets/stylesheets/@material/linear-progress/mdc-linear-progress.scss +4 -0
- data/vendor/assets/stylesheets/@material/list/_mixins.scss +83 -0
- data/vendor/assets/stylesheets/@material/list/_variables.scss +18 -0
- data/vendor/assets/stylesheets/@material/list/mdc-list.scss +50 -43
- data/vendor/assets/stylesheets/@material/menu/simple/mdc-simple-menu.scss +33 -35
- data/vendor/assets/stylesheets/@material/radio/mdc-radio.scss +1 -1
- data/vendor/assets/stylesheets/@material/ripple/_keyframes.scss +3 -2
- data/vendor/assets/stylesheets/@material/ripple/_mixins.scss +172 -34
- data/vendor/assets/stylesheets/@material/ripple/_variables.scss +23 -0
- data/vendor/assets/stylesheets/@material/ripple/mdc-ripple.scss +3 -3
- data/vendor/assets/stylesheets/@material/select/mdc-select.scss +146 -35
- data/vendor/assets/stylesheets/@material/tabs/tab/mdc-tab.scss +3 -3
- data/vendor/assets/stylesheets/@material/textfield/mdc-text-field.scss +2 -2
- data/vendor/assets/stylesheets/@material/theme/_mixins.scss +1 -1
- data/vendor/assets/stylesheets/@material/theme/_variables.scss +13 -1
- data/vendor/assets/stylesheets/@material/toolbar/mdc-toolbar.scss +1 -1
- metadata +4 -2
@@ -33,8 +33,8 @@
|
|
33
33
|
@include mdc-radio-ink-color($mdc-radio-baseline-theme-color);
|
34
34
|
@include mdc-radio-focus-indicator-color($mdc-radio-baseline-theme-color);
|
35
35
|
@include mdc-ripple-surface;
|
36
|
-
@include mdc-ripple-color($mdc-radio-baseline-theme-color, $mdc-radio-ripple-opacity);
|
37
36
|
@include mdc-ripple-radius($mdc-radio-ripple-radius);
|
37
|
+
@include mdc-states($mdc-radio-baseline-theme-color);
|
38
38
|
|
39
39
|
display: inline-block;
|
40
40
|
position: relative;
|
@@ -17,6 +17,7 @@
|
|
17
17
|
// MDC Ripple keyframes are split into their own file so that _mixins.scss can rely on them.
|
18
18
|
|
19
19
|
@import "@material/animation/variables";
|
20
|
+
@import "./variables";
|
20
21
|
|
21
22
|
@mixin mdc-ripple-keyframes_ {
|
22
23
|
@keyframes mdc-ripple-fg-radius-in {
|
@@ -41,14 +42,14 @@
|
|
41
42
|
}
|
42
43
|
|
43
44
|
to {
|
44
|
-
opacity:
|
45
|
+
opacity: var(--mdc-ripple-fg-opacity, map-get($mdc-ripple-dark-ink-opacities, "press"));
|
45
46
|
}
|
46
47
|
}
|
47
48
|
|
48
49
|
@keyframes mdc-ripple-fg-opacity-out {
|
49
50
|
from {
|
50
51
|
animation-timing-function: linear;
|
51
|
-
opacity:
|
52
|
+
opacity: var(--mdc-ripple-fg-opacity, map-get($mdc-ripple-dark-ink-opacities, "press"));
|
52
53
|
}
|
53
54
|
|
54
55
|
to {
|
@@ -15,8 +15,10 @@
|
|
15
15
|
//
|
16
16
|
|
17
17
|
@import "@material/animation/variables";
|
18
|
-
@import "@material/theme/
|
18
|
+
@import "@material/theme/functions";
|
19
|
+
@import "@material/theme/mixins";
|
19
20
|
@import "./keyframes";
|
21
|
+
@import "./variables";
|
20
22
|
|
21
23
|
// Ensure that styles needed by any component using MDC Ripple are emitted, but only once.
|
22
24
|
// (Every component using MDC Ripple imports these mixins, but doesn't necessarily import mdc-ripple.scss.)
|
@@ -53,63 +55,142 @@ $mdc-ripple-common-styles-emitted_: false !default;
|
|
53
55
|
--mdc-ripple-fg-translate-end: 0;
|
54
56
|
--mdc-ripple-fg-translate-start: 0;
|
55
57
|
|
56
|
-
will-change: transform, opacity;
|
57
58
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
58
59
|
|
59
60
|
&::before,
|
60
61
|
&::after {
|
61
62
|
position: absolute;
|
62
|
-
transition: opacity 250ms linear;
|
63
63
|
border-radius: 50%;
|
64
|
+
opacity: 0;
|
64
65
|
pointer-events: none;
|
65
66
|
content: "";
|
67
|
+
will-change: transform, opacity;
|
68
|
+
}
|
69
|
+
|
70
|
+
&::before {
|
71
|
+
transition: opacity $mdc-states-wash-duration linear;
|
72
|
+
}
|
73
|
+
|
74
|
+
// Common styles for upgraded surfaces (some of these depend on custom properties set via JS or other mixins)
|
75
|
+
|
76
|
+
&.mdc-ripple-upgraded::after {
|
77
|
+
top: 0;
|
78
|
+
left: 0;
|
79
|
+
transform: scale(0);
|
80
|
+
transform-origin: center center;
|
81
|
+
}
|
82
|
+
|
83
|
+
&.mdc-ripple-upgraded--unbounded::after {
|
84
|
+
top: var(--mdc-ripple-top, 0);
|
85
|
+
left: var(--mdc-ripple-left, 0);
|
86
|
+
}
|
87
|
+
|
88
|
+
&.mdc-ripple-upgraded--foreground-activation::after {
|
89
|
+
animation:
|
90
|
+
$mdc-ripple-translate-duration mdc-ripple-fg-radius-in forwards,
|
91
|
+
$mdc-ripple-fade-in-duration mdc-ripple-fg-opacity-in forwards;
|
92
|
+
}
|
93
|
+
|
94
|
+
&.mdc-ripple-upgraded--foreground-deactivation::after {
|
95
|
+
animation: $mdc-ripple-fade-out-duration mdc-ripple-fg-opacity-out;
|
96
|
+
// Retain transform from mdc-ripple-fg-radius-in activation
|
97
|
+
transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
66
98
|
}
|
67
99
|
}
|
68
100
|
|
69
|
-
@mixin mdc-
|
101
|
+
@mixin mdc-states-base-color($color) {
|
70
102
|
// Opacity styles are here (rather than in mdc-ripple-surface) to ensure that opacity is re-initialized for
|
71
103
|
// cases where this mixin is used to override another inherited use of itself,
|
72
104
|
// without needing to re-include mdc-ripple-surface.
|
73
105
|
&::before,
|
74
106
|
&::after {
|
75
|
-
@include mdc-
|
107
|
+
@include mdc-theme-prop(background-color, $color, $edgeOptOut: true);
|
108
|
+
}
|
109
|
+
}
|
76
110
|
|
77
|
-
|
111
|
+
@mixin mdc-states-hover-opacity($opacity) {
|
112
|
+
// Background wash styles, for both CSS-only and upgraded stateful surfaces
|
113
|
+
&:hover::before {
|
114
|
+
opacity: $opacity;
|
78
115
|
}
|
116
|
+
}
|
117
|
+
|
118
|
+
@mixin mdc-states-focus-opacity($opacity, $has-nested-focusable-element: false) {
|
119
|
+
// Focus overrides hover by reusing the ::before pseudo-element.
|
120
|
+
// :focus-within generally works on non-MS browsers and matches when a *child* of the element has focus.
|
121
|
+
// It is useful for cases where a component has a focusable element within the root node, e.g. text field,
|
122
|
+
// but undesirable in general in case of nested stateful components.
|
123
|
+
// We use a modifier class for JS-enabled surfaces to support all use cases in all browsers.
|
124
|
+
$cssOnlyFocusSelector: if(
|
125
|
+
$has-nested-focusable-element,
|
126
|
+
"&:not(.mdc-ripple-upgraded):focus::before, &:not(.mdc-ripple-upgraded):focus-within::before",
|
127
|
+
"&:not(.mdc-ripple-upgraded):focus::before"
|
128
|
+
);
|
129
|
+
|
130
|
+
#{$cssOnlyFocusSelector},
|
131
|
+
&.mdc-ripple-upgraded--background-focused::before {
|
132
|
+
// Note that this duration is only effective on focus, not blur
|
133
|
+
transition-duration: 75ms;
|
134
|
+
opacity: $opacity;
|
135
|
+
}
|
136
|
+
}
|
137
|
+
|
138
|
+
@mixin mdc-states-press-opacity($opacity) {
|
139
|
+
// Styles for non-upgraded (CSS-only) stateful surfaces
|
79
140
|
|
80
|
-
// Note: when :active is applied, :focus is already applied, which will effectively double the effect.
|
81
141
|
&:not(.mdc-ripple-upgraded) {
|
82
|
-
|
83
|
-
|
142
|
+
// Apply press additively by using the ::after pseudo-element
|
143
|
+
&::after {
|
144
|
+
transition: opacity $mdc-ripple-fade-out-duration linear;
|
145
|
+
}
|
146
|
+
|
84
147
|
&:active::after {
|
85
|
-
transition-duration:
|
86
|
-
opacity:
|
148
|
+
transition-duration: $mdc-ripple-fade-in-duration;
|
149
|
+
opacity: $opacity;
|
87
150
|
}
|
88
151
|
}
|
89
152
|
|
90
|
-
&.mdc-ripple-upgraded
|
91
|
-
opacity:
|
153
|
+
&.mdc-ripple-upgraded {
|
154
|
+
--mdc-ripple-fg-opacity: $opacity;
|
92
155
|
}
|
156
|
+
}
|
93
157
|
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
158
|
+
// Simple mixin for base states which automatically selects opacity values based on whether the ink color is
|
159
|
+
// light or dark.
|
160
|
+
@mixin mdc-states($color: black, $has-nested-focusable-element: false) {
|
161
|
+
@include mdc-states-interactions_($color, $has-nested-focusable-element);
|
162
|
+
}
|
98
163
|
|
99
|
-
|
164
|
+
// Simple mixin for activated states which automatically selects opacity values based on whether the ink color is
|
165
|
+
// light or dark.
|
166
|
+
@mixin mdc-states-activated($color, $has-nested-focusable-element: false) {
|
167
|
+
$opacity-map: mdc-states-opacities_($color);
|
168
|
+
$activated-opacity: map-get($opacity-map, "activated");
|
100
169
|
|
101
|
-
|
102
|
-
|
103
|
-
|
170
|
+
&--activated {
|
171
|
+
// Stylelint seems to think that '&' qualifies as a type selector here?
|
172
|
+
// stylelint-disable-next-line selector-max-type
|
173
|
+
&::before {
|
174
|
+
opacity: $activated-opacity;
|
175
|
+
}
|
104
176
|
|
105
|
-
|
106
|
-
animation: 300ms mdc-ripple-fg-radius-in forwards, 83ms mdc-ripple-fg-opacity-in forwards;
|
177
|
+
@include mdc-states-interactions_($color, $has-nested-focusable-element, $activated-opacity);
|
107
178
|
}
|
179
|
+
}
|
108
180
|
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
181
|
+
// Simple mixin for selected states which automatically selects opacity values based on whether the ink color is
|
182
|
+
// light or dark.
|
183
|
+
@mixin mdc-states-selected($color, $has-nested-focusable-element: false) {
|
184
|
+
$opacity-map: mdc-states-opacities_($color);
|
185
|
+
$selected-opacity: map-get($opacity-map, "selected");
|
186
|
+
|
187
|
+
&--selected {
|
188
|
+
// stylelint-disable-next-line selector-max-type
|
189
|
+
&::before {
|
190
|
+
opacity: $selected-opacity;
|
191
|
+
}
|
192
|
+
|
193
|
+
@include mdc-states-interactions_($color, $has-nested-focusable-element, $selected-opacity);
|
113
194
|
}
|
114
195
|
}
|
115
196
|
|
@@ -141,21 +222,78 @@ $mdc-ripple-common-styles-emitted_: false !default;
|
|
141
222
|
}
|
142
223
|
|
143
224
|
// Foreground ripple styles
|
225
|
+
|
144
226
|
&.mdc-ripple-upgraded::after {
|
145
|
-
top: 0;
|
146
|
-
left: 0;
|
147
227
|
width: var(--mdc-ripple-fg-size, $radius);
|
148
228
|
height: var(--mdc-ripple-fg-size, $radius);
|
149
|
-
transform: scale(0);
|
150
|
-
transform-origin: center center;
|
151
229
|
}
|
230
|
+
}
|
152
231
|
|
153
|
-
|
154
|
-
|
155
|
-
|
232
|
+
//
|
233
|
+
// Legacy
|
234
|
+
//
|
235
|
+
|
236
|
+
@mixin mdc-ripple-color($color: black, $opacity: .06) {
|
237
|
+
// Opacity styles are here (rather than in mdc-ripple-surface) to ensure that opacity is re-initialized for
|
238
|
+
// cases where this mixin is used to override another inherited use of itself,
|
239
|
+
// without needing to re-include mdc-ripple-surface.
|
240
|
+
&::before,
|
241
|
+
&::after {
|
242
|
+
@include mdc-ripple-color_($color, $opacity);
|
243
|
+
|
244
|
+
opacity: 0;
|
156
245
|
}
|
246
|
+
|
247
|
+
// Note: when :active is applied, :focus is already applied, which will effectively double the effect.
|
248
|
+
&:not(.mdc-ripple-upgraded) {
|
249
|
+
&:hover::before,
|
250
|
+
&:focus::before,
|
251
|
+
&:active::after {
|
252
|
+
transition-duration: 85ms;
|
253
|
+
opacity: .6;
|
254
|
+
}
|
255
|
+
}
|
256
|
+
|
257
|
+
&.mdc-ripple-upgraded--background-focused::before {
|
258
|
+
opacity: .99999;
|
259
|
+
}
|
260
|
+
|
261
|
+
&.mdc-ripple-upgraded--background-active-fill::before {
|
262
|
+
transition-duration: 120ms;
|
263
|
+
opacity: 1;
|
264
|
+
}
|
265
|
+
|
266
|
+
&.mdc-ripple-upgraded::after {
|
267
|
+
// Set this to 1 for backwards compatibility with how the keyframes were originally coded for use with this mixin
|
268
|
+
--mdc-ripple-fg-opacity: 1;
|
269
|
+
}
|
270
|
+
}
|
271
|
+
|
272
|
+
//
|
273
|
+
// Private
|
274
|
+
//
|
275
|
+
|
276
|
+
@function mdc-states-opacities_($color) {
|
277
|
+
$color-value: mdc-theme-prop-value($color);
|
278
|
+
$opacity-map: if(
|
279
|
+
mdc-theme-tone($color-value) == "light",
|
280
|
+
$mdc-ripple-light-ink-opacities,
|
281
|
+
$mdc-ripple-dark-ink-opacities
|
282
|
+
);
|
283
|
+
|
284
|
+
@return $opacity-map;
|
285
|
+
}
|
286
|
+
|
287
|
+
@mixin mdc-states-interactions_($color, $has-nested-focusable-element, $opacity-modifier: 0) {
|
288
|
+
$opacity-map: mdc-states-opacities_($color);
|
289
|
+
|
290
|
+
@include mdc-states-base-color($color);
|
291
|
+
@include mdc-states-hover-opacity(map-get($opacity-map, "hover") + $opacity-modifier);
|
292
|
+
@include mdc-states-focus-opacity(map-get($opacity-map, "focus") + $opacity-modifier, $has-nested-focusable-element);
|
293
|
+
@include mdc-states-press-opacity(map-get($opacity-map, "press") + $opacity-modifier);
|
157
294
|
}
|
158
295
|
|
296
|
+
// Note: This can be removed when we remove the legacy mdc-ripple-color mixin.
|
159
297
|
@mixin mdc-ripple-color_($color, $opacity) {
|
160
298
|
// stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
|
161
299
|
@if type-of($color) == "color" {
|
@@ -14,5 +14,28 @@
|
|
14
14
|
// limitations under the License.
|
15
15
|
//
|
16
16
|
|
17
|
+
$mdc-ripple-fade-in-duration: 75ms;
|
18
|
+
$mdc-ripple-fade-out-duration: 150ms;
|
19
|
+
$mdc-ripple-translate-duration: 225ms;
|
20
|
+
$mdc-states-wash-duration: 15ms;
|
21
|
+
|
22
|
+
$mdc-ripple-dark-ink-opacities: (
|
23
|
+
hover: .04,
|
24
|
+
focus: .12,
|
25
|
+
press: .16,
|
26
|
+
selected: .04,
|
27
|
+
activated: .12
|
28
|
+
) !default;
|
29
|
+
|
30
|
+
$mdc-ripple-light-ink-opacities: (
|
31
|
+
hover: .08,
|
32
|
+
focus: .24,
|
33
|
+
press: .32,
|
34
|
+
selected: .08,
|
35
|
+
activated: .24
|
36
|
+
) !default;
|
37
|
+
|
38
|
+
// Legacy
|
39
|
+
|
17
40
|
$mdc-ripple-pressed-dark-ink-opacity: .16;
|
18
41
|
$mdc-ripple-pressed-light-ink-opacity: .32;
|
@@ -23,7 +23,7 @@
|
|
23
23
|
|
24
24
|
.mdc-ripple-surface {
|
25
25
|
@include mdc-ripple-surface;
|
26
|
-
@include mdc-
|
26
|
+
@include mdc-states;
|
27
27
|
@include mdc-ripple-radius;
|
28
28
|
|
29
29
|
position: relative;
|
@@ -35,11 +35,11 @@
|
|
35
35
|
}
|
36
36
|
|
37
37
|
&--primary {
|
38
|
-
@include mdc-
|
38
|
+
@include mdc-states(primary);
|
39
39
|
}
|
40
40
|
|
41
41
|
&--accent {
|
42
|
-
@include mdc-
|
42
|
+
@include mdc-states(secondary);
|
43
43
|
}
|
44
44
|
}
|
45
45
|
|
@@ -15,69 +15,60 @@
|
|
15
15
|
//
|
16
16
|
|
17
17
|
@import "@material/animation/functions";
|
18
|
+
@import "@material/animation/variables";
|
18
19
|
@import "@material/typography/mixins";
|
19
20
|
@import "@material/theme/mixins";
|
21
|
+
@import "@material/ripple/mixins";
|
20
22
|
@import "@material/rtl/mixins";
|
21
23
|
|
22
24
|
@mixin mdc-select-dd-arrow-svg-bg_($fill-hex-number: 000000, $opacity: .54) {
|
23
25
|
background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23#{$fill-hex-number}%22%20fill-rule%3D%22evenodd%22%20opacity%3D%22#{$opacity}%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E);
|
24
26
|
}
|
25
27
|
|
28
|
+
$mdc-select-arrow-padding: 26px;
|
29
|
+
$mdc-select-label-padding: 16px;
|
30
|
+
$mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timing-function;
|
31
|
+
|
26
32
|
// postcss-bem-linter: define select
|
27
33
|
.mdc-select {
|
28
|
-
$dd-arrow-padding: 24px;
|
29
|
-
|
30
34
|
@include mdc-typography(subheading2);
|
31
35
|
@include mdc-theme-prop(color, text-primary-on-light);
|
32
|
-
@include mdc-rtl-reflexive-box(padding, right, $dd-arrow-padding);
|
33
36
|
@include mdc-select-dd-arrow-svg-bg_;
|
34
37
|
|
35
38
|
display: inline-flex;
|
39
|
+
position: relative;
|
36
40
|
align-items: center;
|
37
41
|
justify-content: flex-start;
|
38
|
-
|
39
|
-
height:
|
40
|
-
transition:
|
41
|
-
mdc-animation-exit-temporary(border-bottom-color, 150ms),
|
42
|
-
mdc-animation-exit-temporary(background-color, 150ms);
|
42
|
+
box-sizing: border-box;
|
43
|
+
height: 56px;
|
43
44
|
border: none;
|
44
|
-
border-
|
45
|
-
|
46
|
-
background-color: transparent;
|
45
|
+
border-radius: 4px 4px 0 0;
|
46
|
+
outline: none;
|
47
47
|
background-repeat: no-repeat;
|
48
|
-
background-position: right center;
|
49
|
-
font-family: Roboto, sans-serif;
|
50
|
-
font-size: .936rem;
|
48
|
+
background-position: right 10px center;
|
51
49
|
cursor: pointer;
|
52
|
-
|
53
|
-
appearance: none;
|
50
|
+
overflow: visible;
|
54
51
|
|
55
|
-
|
56
|
-
|
52
|
+
@include mdc-rtl {
|
53
|
+
background-position: left 10px center;
|
57
54
|
}
|
58
55
|
|
59
56
|
&:focus {
|
60
|
-
|
57
|
+
.mdc-select__bottom-line {
|
58
|
+
@include mdc-theme-prop(background-color, primary);
|
61
59
|
|
62
|
-
|
63
|
-
background-color: rgba(black, .06);
|
64
|
-
}
|
60
|
+
transform: scaleY(2);
|
65
61
|
|
66
|
-
|
67
|
-
|
62
|
+
&::after {
|
63
|
+
opacity: 1;
|
64
|
+
}
|
65
|
+
}
|
68
66
|
}
|
69
67
|
|
70
|
-
@include mdc-theme-dark {
|
71
|
-
@include mdc-
|
72
|
-
@include mdc-select-dd-arrow-svg-bg_(ffffff);
|
73
|
-
|
74
|
-
border-bottom: 1px solid rgba(white, .12);
|
75
|
-
|
76
|
-
&:focus {
|
77
|
-
@include mdc-theme-prop(border-bottom-color, primary);
|
68
|
+
@include mdc-theme-dark(".mdc-select") {
|
69
|
+
@include mdc-select-dd-arrow-svg-bg_("fff", .54);
|
78
70
|
|
79
|
-
|
80
|
-
}
|
71
|
+
background-color: rgba(white, .1);
|
81
72
|
}
|
82
73
|
|
83
74
|
&__menu {
|
@@ -89,12 +80,116 @@
|
|
89
80
|
z-index: 4; // Should pop up above everything else. temporary-drawer is next highest at 3.
|
90
81
|
}
|
91
82
|
|
83
|
+
&__surface {
|
84
|
+
@include mdc-typography(subheading2);
|
85
|
+
@include mdc-theme-prop(color, text-primary-on-light);
|
86
|
+
@include mdc-rtl-reflexive-property(padding, $mdc-select-label-padding, $mdc-select-arrow-padding, ".mdc-select");
|
87
|
+
@include mdc-ripple-surface;
|
88
|
+
@include mdc-ripple-radius;
|
89
|
+
@include mdc-states;
|
90
|
+
|
91
|
+
@include mdc-theme-dark(".mdc-select") {
|
92
|
+
@include mdc-states(white);
|
93
|
+
}
|
94
|
+
|
95
|
+
&::-ms-expand {
|
96
|
+
display: none;
|
97
|
+
}
|
98
|
+
|
99
|
+
display: flex;
|
100
|
+
position: relative;
|
101
|
+
flex-grow: 1;
|
102
|
+
width: 100%;
|
103
|
+
height: 56px;
|
104
|
+
border: none;
|
105
|
+
border-radius: 4px 4px 0 0;
|
106
|
+
outline: none;
|
107
|
+
background-color: rgba(black, .04);
|
108
|
+
// Resets for <select> element
|
109
|
+
appearance: none;
|
110
|
+
overflow: hidden;
|
111
|
+
}
|
112
|
+
|
113
|
+
&__label {
|
114
|
+
@include mdc-rtl-reflexive-position(left, 16px);
|
115
|
+
|
116
|
+
position: absolute;
|
117
|
+
bottom: 12px;
|
118
|
+
transform-origin: left top;
|
119
|
+
transition: $mdc-select-menu-transition;
|
120
|
+
color: rgba(black, .6);
|
121
|
+
pointer-events: none;
|
122
|
+
will-change: transform;
|
123
|
+
|
124
|
+
@include mdc-theme-dark(".mdc-select") {
|
125
|
+
@include mdc-theme-prop(color, text-secondary-on-dark);
|
126
|
+
}
|
127
|
+
|
128
|
+
@include mdc-rtl(".mdc-select") {
|
129
|
+
transform-origin: right top;
|
130
|
+
}
|
131
|
+
|
132
|
+
&--float-above {
|
133
|
+
transform: translateY(-40%) scale(.75, .75);
|
134
|
+
}
|
135
|
+
}
|
136
|
+
|
92
137
|
&__selected-text {
|
138
|
+
display: flex;
|
139
|
+
align-items: flex-end;
|
140
|
+
margin-bottom: 6px;
|
93
141
|
transition:
|
94
142
|
mdc-animation-exit-temporary(opacity, 125ms),
|
95
143
|
mdc-animation-exit-temporary(transform, 125ms);
|
96
144
|
white-space: nowrap;
|
97
145
|
overflow: hidden;
|
146
|
+
|
147
|
+
@include mdc-theme-dark(".mdc-select") {
|
148
|
+
@include mdc-theme-prop(color, text-secondary-on-dark);
|
149
|
+
}
|
150
|
+
}
|
151
|
+
|
152
|
+
&__bottom-line {
|
153
|
+
position: absolute;
|
154
|
+
bottom: 0;
|
155
|
+
left: 0;
|
156
|
+
width: 100%;
|
157
|
+
height: 1px;
|
158
|
+
transform: scaleY(1);
|
159
|
+
transform-origin: bottom;
|
160
|
+
transition: $mdc-select-menu-transition;
|
161
|
+
background-color: rgba(black, .5);
|
162
|
+
|
163
|
+
&::after {
|
164
|
+
@include mdc-theme-prop(background-color, primary);
|
165
|
+
|
166
|
+
position: absolute;
|
167
|
+
bottom: -1px;
|
168
|
+
left: 0;
|
169
|
+
width: 100%;
|
170
|
+
height: 2px;
|
171
|
+
transform: scaleX(0);
|
172
|
+
transition: $mdc-select-menu-transition;
|
173
|
+
opacity: 0;
|
174
|
+
content: "";
|
175
|
+
z-index: 2;
|
176
|
+
}
|
177
|
+
}
|
178
|
+
|
179
|
+
&__bottom-line--active {
|
180
|
+
&::after {
|
181
|
+
transform: scaleX(1);
|
182
|
+
opacity: 1;
|
183
|
+
}
|
184
|
+
}
|
185
|
+
|
186
|
+
// Since the CSS only version's .mdc-select__surface element
|
187
|
+
// is an actual <select> element (and as such gets focus), this
|
188
|
+
// will only apply to CSS only selects
|
189
|
+
&__surface:focus ~ .mdc-select__bottom-line {
|
190
|
+
@include mdc-theme-prop(background-color, primary);
|
191
|
+
|
192
|
+
transform: scaleY(2);
|
98
193
|
}
|
99
194
|
}
|
100
195
|
|
@@ -106,6 +201,16 @@
|
|
106
201
|
mdc-animation-enter(transform, 125ms, 125ms);
|
107
202
|
opacity: 0;
|
108
203
|
}
|
204
|
+
|
205
|
+
.mdc-select__bottom-line {
|
206
|
+
@include mdc-theme-prop(background-color, primary);
|
207
|
+
|
208
|
+
transform: scaleY(2);
|
209
|
+
|
210
|
+
&::after {
|
211
|
+
opacity: 1;
|
212
|
+
}
|
213
|
+
}
|
109
214
|
}
|
110
215
|
|
111
216
|
.mdc-select--disabled,
|
@@ -113,11 +218,17 @@
|
|
113
218
|
@include mdc-theme-prop(color, text-disabled-on-light);
|
114
219
|
@include mdc-select-dd-arrow-svg-bg_(000000, .38);
|
115
220
|
|
221
|
+
border-bottom-width: 1px;
|
116
222
|
border-bottom-style: dotted;
|
223
|
+
opacity: .38;
|
117
224
|
cursor: default;
|
118
225
|
pointer-events: none;
|
119
226
|
// Imitate native disabled functionality
|
120
227
|
user-select: none;
|
228
|
+
|
229
|
+
.mdc-select__bottom-line {
|
230
|
+
display: none;
|
231
|
+
}
|
121
232
|
}
|
122
233
|
|
123
234
|
@each $sel in ("mdc-select--disabled", "mdc-select[disabled]") {
|
@@ -211,8 +322,8 @@
|
|
211
322
|
.mdc-list-divider {
|
212
323
|
margin-left: -16px;
|
213
324
|
}
|
325
|
+
// stylelint-enable plugin/selector-bem-pattern
|
214
326
|
}
|
215
|
-
// stylelint-enable plugin/selector-bem-pattern
|
216
327
|
|
217
328
|
// stylelint-disable plugin/selector-bem-pattern
|
218
329
|
.mdc-list-item {
|