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.
Files changed (28) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +9 -0
  3. data/lib/material_components_web/sass/version.rb +1 -1
  4. data/vendor/assets/javascripts/material-components-web.js +698 -637
  5. data/vendor/assets/stylesheets/@material/button/_mixins.scss +2 -2
  6. data/vendor/assets/stylesheets/@material/button/_variables.scss +0 -3
  7. data/vendor/assets/stylesheets/@material/button/mdc-button.scss +2 -2
  8. data/vendor/assets/stylesheets/@material/checkbox/mdc-checkbox.scss +1 -1
  9. data/vendor/assets/stylesheets/@material/fab/_mixins.scss +2 -2
  10. data/vendor/assets/stylesheets/@material/fab/mdc-fab.scss +1 -5
  11. data/vendor/assets/stylesheets/@material/icon-toggle/mdc-icon-toggle.scss +4 -19
  12. data/vendor/assets/stylesheets/@material/linear-progress/mdc-linear-progress.scss +4 -0
  13. data/vendor/assets/stylesheets/@material/list/_mixins.scss +83 -0
  14. data/vendor/assets/stylesheets/@material/list/_variables.scss +18 -0
  15. data/vendor/assets/stylesheets/@material/list/mdc-list.scss +50 -43
  16. data/vendor/assets/stylesheets/@material/menu/simple/mdc-simple-menu.scss +33 -35
  17. data/vendor/assets/stylesheets/@material/radio/mdc-radio.scss +1 -1
  18. data/vendor/assets/stylesheets/@material/ripple/_keyframes.scss +3 -2
  19. data/vendor/assets/stylesheets/@material/ripple/_mixins.scss +172 -34
  20. data/vendor/assets/stylesheets/@material/ripple/_variables.scss +23 -0
  21. data/vendor/assets/stylesheets/@material/ripple/mdc-ripple.scss +3 -3
  22. data/vendor/assets/stylesheets/@material/select/mdc-select.scss +146 -35
  23. data/vendor/assets/stylesheets/@material/tabs/tab/mdc-tab.scss +3 -3
  24. data/vendor/assets/stylesheets/@material/textfield/mdc-text-field.scss +2 -2
  25. data/vendor/assets/stylesheets/@material/theme/_mixins.scss +1 -1
  26. data/vendor/assets/stylesheets/@material/theme/_variables.scss +13 -1
  27. data/vendor/assets/stylesheets/@material/toolbar/mdc-toolbar.scss +1 -1
  28. 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: 1;
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: 1;
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/variables";
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-ripple-color($color: black, $opacity: .06) {
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-ripple-color_($color, $opacity);
107
+ @include mdc-theme-prop(background-color, $color, $edgeOptOut: true);
108
+ }
109
+ }
76
110
 
77
- opacity: 0;
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
- &:hover::before,
83
- &:focus::before,
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: 85ms;
86
- opacity: .6;
148
+ transition-duration: $mdc-ripple-fade-in-duration;
149
+ opacity: $opacity;
87
150
  }
88
151
  }
89
152
 
90
- &.mdc-ripple-upgraded--background-focused::before {
91
- opacity: .99999;
153
+ &.mdc-ripple-upgraded {
154
+ --mdc-ripple-fg-opacity: $opacity;
92
155
  }
156
+ }
93
157
 
94
- &.mdc-ripple-upgraded--background-active-fill::before {
95
- transition-duration: 120ms;
96
- opacity: 1;
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
- // Foreground ripple styles
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
- &.mdc-ripple-upgraded::after {
102
- opacity: 0;
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
- &.mdc-ripple-upgraded--foreground-activation::after {
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
- &.mdc-ripple-upgraded--foreground-deactivation::after {
110
- animation: 83ms mdc-ripple-fg-opacity-out;
111
- // Retain transform from mdc-ripple-fg-radius-in activation
112
- transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
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
- &.mdc-ripple-upgraded--unbounded::after {
154
- top: var(--mdc-ripple-top, 0);
155
- left: var(--mdc-ripple-left, 0);
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-ripple-color;
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-ripple-color(primary, $mdc-ripple-pressed-dark-ink-opacity);
38
+ @include mdc-states(primary);
39
39
  }
40
40
 
41
41
  &--accent {
42
- @include mdc-ripple-color(secondary, $mdc-ripple-pressed-dark-ink-opacity);
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
- max-width: calc(100% - #{$dd-arrow-padding});
39
- height: 32px;
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-bottom: 1px solid rgba(black, .12);
45
- border-radius: 0;
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
- // Resets for <select> element
53
- appearance: none;
50
+ overflow: visible;
54
51
 
55
- &::-ms-expand {
56
- display: none;
52
+ @include mdc-rtl {
53
+ background-position: left 10px center;
57
54
  }
58
55
 
59
56
  &:focus {
60
- @include mdc-theme-prop(border-bottom-color, primary);
57
+ .mdc-select__bottom-line {
58
+ @include mdc-theme-prop(background-color, primary);
61
59
 
62
- outline: none;
63
- background-color: rgba(black, .06);
64
- }
60
+ transform: scaleY(2);
65
61
 
66
- @include mdc-rtl {
67
- background-position: left center;
62
+ &::after {
63
+ opacity: 1;
64
+ }
65
+ }
68
66
  }
69
67
 
70
- @include mdc-theme-dark {
71
- @include mdc-theme-prop(color, text-primary-on-dark);
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
- background-color: rgba(white, .09);
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 {