material_components_web-sass 0.23.0 → 0.24.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 (39) hide show
  1. checksums.yaml +4 -4
  2. data/.travis.yml +3 -3
  3. data/CHANGELOG.md +9 -0
  4. data/lib/material_components_web/sass/version.rb +1 -1
  5. data/vendor/assets/javascripts/material-components-web.js +12 -7
  6. data/vendor/assets/stylesheets/@material/button/_mixins.scss +5 -11
  7. data/vendor/assets/stylesheets/@material/button/mdc-button.scss +3 -2
  8. data/vendor/assets/stylesheets/@material/checkbox/_mixins.scss +0 -8
  9. data/vendor/assets/stylesheets/@material/checkbox/_variables.scss +1 -0
  10. data/vendor/assets/stylesheets/@material/checkbox/mdc-checkbox.scss +4 -2
  11. data/vendor/assets/stylesheets/@material/drawer/_mixins.scss +3 -3
  12. data/vendor/assets/stylesheets/@material/drawer/permanent/mdc-permanent-drawer.scss +9 -9
  13. data/vendor/assets/stylesheets/@material/drawer/persistent/mdc-persistent-drawer.scss +3 -3
  14. data/vendor/assets/stylesheets/@material/drawer/temporary/mdc-temporary-drawer.scss +8 -8
  15. data/vendor/assets/stylesheets/@material/fab/_mixins.scss +6 -9
  16. data/vendor/assets/stylesheets/@material/fab/mdc-fab.scss +3 -2
  17. data/vendor/assets/stylesheets/@material/icon-toggle/mdc-icon-toggle.scss +6 -9
  18. data/vendor/assets/stylesheets/@material/layout-grid/_mixins.scss +2 -0
  19. data/vendor/assets/stylesheets/@material/list/mdc-list.scss +4 -5
  20. data/vendor/assets/stylesheets/@material/radio/_functions.scss +26 -0
  21. data/vendor/assets/stylesheets/@material/radio/_mixins.scss +45 -0
  22. data/vendor/assets/stylesheets/@material/radio/_variables.scss +23 -0
  23. data/vendor/assets/stylesheets/@material/radio/mdc-radio.scss +15 -44
  24. data/vendor/assets/stylesheets/@material/ripple/_keyframes.scss +31 -29
  25. data/vendor/assets/stylesheets/@material/ripple/_mixins.scss +98 -177
  26. data/vendor/assets/stylesheets/@material/{fab → ripple}/_variables.scss +5 -2
  27. data/vendor/assets/stylesheets/@material/ripple/mdc-ripple.scss +6 -17
  28. data/vendor/assets/stylesheets/@material/snackbar/mdc-snackbar.scss +4 -3
  29. data/vendor/assets/stylesheets/@material/switch/_functions.scss +21 -0
  30. data/vendor/assets/stylesheets/@material/switch/_mixins.scss +74 -0
  31. data/vendor/assets/stylesheets/@material/switch/_variables.scss +9 -5
  32. data/vendor/assets/stylesheets/@material/switch/mdc-switch.scss +36 -43
  33. data/vendor/assets/stylesheets/@material/tabs/tab/mdc-tab.scss +5 -7
  34. data/vendor/assets/stylesheets/@material/textfield/_mixins.scss +23 -0
  35. data/vendor/assets/stylesheets/@material/textfield/_variables.scss +9 -0
  36. data/vendor/assets/stylesheets/@material/textfield/mdc-textfield.scss +20 -61
  37. data/vendor/assets/stylesheets/@material/theme/{_color_palette.scss → _color-palette.scss} +0 -0
  38. data/vendor/assets/stylesheets/@material/theme/_variables.scss +24 -0
  39. metadata +9 -4
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 5783828cbdfaefed41a723e1bf9b49275f3dd863
4
- data.tar.gz: 02d39f0fdf9d157edd6882ed817a491a6935bcd5
3
+ metadata.gz: 13cda5cefe52b75e32186da2f58944147e182177
4
+ data.tar.gz: 2f7d0179a435094ec43b949eb6c506b39c6dc879
5
5
  SHA512:
6
- metadata.gz: 512bea0d7116ea4e146a26b32d65eea383e0acc2861f56c72a17a1f4ba98772d1722d1a623fb7d8b90d7275851d6a6412d05251119acad42dd327905f62a0e26
7
- data.tar.gz: e4e64fa4ef5bc755edf6af719aeb581137362fdc47cda9820750314ffb3e4270f42c4015468c269ad84dd170c0676a447616d950185c8d066b4407a5f0d26a09
6
+ metadata.gz: '08772e27cca4eb6adbc7336d5b1375873915c060c621308f9ce126afc3489140d90e5f78b5a345ae60aa0cd3b8ad2f2a723823ba217c914943436524b2aeb0cd'
7
+ data.tar.gz: 92e9bbfe5f0268c655d68ee89b5e3fc34001997b12ea5336af4500b83d7054d4ed1f74ddf353a754d10c1a23f13fd16c114ae4b1cc10861b845bd45baf1fc0ff
@@ -1,7 +1,7 @@
1
1
  sudo: false
2
2
  language: ruby
3
3
  rvm:
4
- - 2.2.7
5
- - 2.3.4
6
- - 2.4.1
4
+ - 2.2.8
5
+ - 2.3.5
6
+ - 2.4.2
7
7
  before_install: gem install bundler
@@ -1,3 +1,12 @@
1
+ ## 0.24.0 (2017-10-31)
2
+
3
+ - Update assets to match upstream version
4
+
5
+ Library version:
6
+
7
+ - Material Components for the web v0.24.0
8
+ - Material Icons v3.0.0
9
+
1
10
  ## 0.23.0 (2017-10-19)
2
11
 
3
12
  - Update assets to match upstream version
@@ -1,5 +1,5 @@
1
1
  module MaterialComponentsWeb
2
2
  module Sass
3
- VERSION = '0.23.0'.freeze
3
+ VERSION = '0.24.0'.freeze
4
4
  end
5
5
  end
@@ -1910,6 +1910,7 @@ var MDCTabBar = function (_MDCComponent) {
1910
1910
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return cssClasses; });
1911
1911
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return strings; });
1912
1912
  /**
1913
+ * @license
1913
1914
  * Copyright 2016 Google Inc. All Rights Reserved.
1914
1915
  *
1915
1916
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -3327,16 +3328,12 @@ var MDCRippleFoundation = function (_MDCFoundation) {
3327
3328
  key: 'updateLayoutCssVars_',
3328
3329
  value: function updateLayoutCssVars_() {
3329
3330
  var _MDCRippleFoundation$6 = MDCRippleFoundation.strings,
3330
- VAR_SURFACE_WIDTH = _MDCRippleFoundation$6.VAR_SURFACE_WIDTH,
3331
- VAR_SURFACE_HEIGHT = _MDCRippleFoundation$6.VAR_SURFACE_HEIGHT,
3332
3331
  VAR_FG_SIZE = _MDCRippleFoundation$6.VAR_FG_SIZE,
3333
3332
  VAR_LEFT = _MDCRippleFoundation$6.VAR_LEFT,
3334
3333
  VAR_TOP = _MDCRippleFoundation$6.VAR_TOP,
3335
3334
  VAR_FG_SCALE = _MDCRippleFoundation$6.VAR_FG_SCALE;
3336
3335
 
3337
3336
 
3338
- this.adapter_.updateCssVariable(VAR_SURFACE_WIDTH, this.frame_.width + 'px');
3339
- this.adapter_.updateCssVariable(VAR_SURFACE_HEIGHT, this.frame_.height + 'px');
3340
3337
  this.adapter_.updateCssVariable(VAR_FG_SIZE, this.initialSize_ + 'px');
3341
3338
  this.adapter_.updateCssVariable(VAR_FG_SCALE, this.fgScale_);
3342
3339
 
@@ -3395,8 +3392,6 @@ var cssClasses = {
3395
3392
  };
3396
3393
 
3397
3394
  var strings = {
3398
- VAR_SURFACE_WIDTH: '--mdc-ripple-surface-width',
3399
- VAR_SURFACE_HEIGHT: '--mdc-ripple-surface-height',
3400
3395
  VAR_FG_SIZE: '--mdc-ripple-fg-size',
3401
3396
  VAR_LEFT: '--mdc-ripple-left',
3402
3397
  VAR_TOP: '--mdc-ripple-top',
@@ -6556,7 +6551,7 @@ var MDCIconToggle = function (_MDCComponent) {
6556
6551
  this.disabled = this.root_.getAttribute(__WEBPACK_IMPORTED_MODULE_1__foundation__["a" /* default */].strings.ARIA_DISABLED) === 'true';
6557
6552
  }
6558
6553
 
6559
- /** @return {boolean} */
6554
+ /** @return {!MDCRipple} */
6560
6555
 
6561
6556
  }, {
6562
6557
  key: 'refreshToggleData',
@@ -6571,6 +6566,14 @@ var MDCIconToggle = function (_MDCComponent) {
6571
6566
  return sel ?
6572
6567
  /** @type {!Element} */this.root_.querySelector(sel) : this.root_;
6573
6568
  }
6569
+ }, {
6570
+ key: 'ripple',
6571
+ get: function get() {
6572
+ return this.ripple_;
6573
+ }
6574
+
6575
+ /** @return {boolean} */
6576
+
6574
6577
  }, {
6575
6578
  key: 'on',
6576
6579
  get: function get() {
@@ -12089,6 +12092,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
12089
12092
  function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
12090
12093
 
12091
12094
  /**
12095
+ * @license
12092
12096
  * Copyright 2016 Google Inc. All Rights Reserved.
12093
12097
  *
12094
12098
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -12440,6 +12444,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
12440
12444
  function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
12441
12445
 
12442
12446
  /**
12447
+ * @license
12443
12448
  * Copyright 2016 Google Inc. All Rights Reserved.
12444
12449
  *
12445
12450
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -28,10 +28,10 @@
28
28
 
29
29
  @if ($light-or-dark == "light") {
30
30
  @include mdc-button-ink-color(text-primary-on-dark);
31
- @include mdc-button-ripple((theme-style: text-primary-on-dark, opacity: $mdc-filled-button-ripple-opacity));
31
+ @include mdc-ripple-color(text-primary-on-dark, $mdc-filled-button-ripple-opacity);
32
32
  } @else {
33
33
  @include mdc-button-ink-color(text-primary-on-light);
34
- @include mdc-button-ripple((theme-style: text-primary-on-light, opacity: $mdc-filled-button-ripple-opacity));
34
+ @include mdc-ripple-color(text-primary-on-light, $mdc-filled-button-ripple-opacity);
35
35
  }
36
36
  }
37
37
 
@@ -55,14 +55,6 @@
55
55
  }
56
56
  }
57
57
 
58
- @mixin mdc-button-ripple($ripple-config) {
59
- &:not(:disabled) {
60
- @include mdc-ripple-base;
61
- @include mdc-ripple-bg(map-merge((pseudo: "::before"), $ripple-config));
62
- @include mdc-ripple-fg(map-merge((pseudo: "::after"), $ripple-config));
63
- }
64
- }
65
-
66
58
  @mixin mdc-button-corner-radius($corner-radius) {
67
59
  border-radius: $corner-radius;
68
60
  }
@@ -82,11 +74,13 @@
82
74
 
83
75
  @mixin mdc-button-base_() {
84
76
  @include mdc-typography(button);
77
+ @include mdc-ripple-surface;
78
+ @include mdc-ripple-radius;
85
79
 
86
80
  display: inline-block;
87
81
  position: relative;
88
82
  box-sizing: border-box;
89
- min-width: 88px;
83
+ min-width: 64px;
90
84
  height: $mdc-button-height;
91
85
  padding: 0 16px;
92
86
  border: none;
@@ -14,6 +14,7 @@
14
14
  // limitations under the License.
15
15
  //
16
16
 
17
+ @import "@material/ripple/mixins";
17
18
  @import "@material/theme/mixins";
18
19
  @import "./mixins";
19
20
  @import "./variables";
@@ -24,7 +25,7 @@
24
25
  @include mdc-button-corner-radius(2px);
25
26
  @include mdc-button-container-fill-color(transparent);
26
27
  @include mdc-button-ink-color(primary);
27
- @include mdc-button-ripple((theme-style: primary, opacity: $mdc-unfilled-button-ripple-opacity));
28
+ @include mdc-ripple-color(primary, $mdc-unfilled-button-ripple-opacity);
28
29
  }
29
30
 
30
31
  .mdc-button--raised,
@@ -32,7 +33,7 @@
32
33
  @include mdc-button--filled_;
33
34
  @include mdc-button-container-fill-color(primary);
34
35
  @include mdc-button-ink-color(text-primary-on-primary);
35
- @include mdc-button-ripple((theme-style: text-primary-on-primary, opacity: $mdc-filled-button-ripple-opacity));
36
+ @include mdc-ripple-color(text-primary-on-primary, $mdc-filled-button-ripple-opacity);
36
37
  }
37
38
 
38
39
  .mdc-button--raised {
@@ -15,7 +15,6 @@
15
15
  //
16
16
 
17
17
  @import "@material/animation/functions";
18
- @import "@material/ripple/mixins";
19
18
  @import "@material/rtl/mixins";
20
19
  @import "./functions";
21
20
  @import "./keyframes";
@@ -87,13 +86,6 @@
87
86
  }
88
87
  }
89
88
 
90
- @mixin mdc-checkbox-ripple($ripple-config) {
91
- $ripple-config: map-merge((opacity: $mdc-checkbox-ripple-opacity, radius: 50%), $ripple-config);
92
-
93
- @include mdc-ripple-bg(map-merge((pseudo: "::before"), $ripple-config));
94
- @include mdc-ripple-fg(map-merge((pseudo: "::after"), $ripple-config));
95
- }
96
-
97
89
  //
98
90
  // Private
99
91
  //
@@ -29,6 +29,7 @@ $mdc-checkbox-border-width: 2px;
29
29
  $mdc-checkbox-transition-duration: 90ms;
30
30
  $mdc-checkbox-item-spacing: 4px;
31
31
  $mdc-checkbox-ripple-opacity: .14;
32
+ $mdc-checkbox-ripple-radius: 50%;
32
33
  $mdc-checkbox-focus-indicator-opacity: .26;
33
34
 
34
35
  // Manual calculation done on SVG
@@ -14,6 +14,7 @@
14
14
  // limitations under the License.
15
15
  //
16
16
 
17
+ @import "@material/ripple/mixins";
17
18
  @import "@material/theme/mixins";
18
19
  @import "./mixins";
19
20
  @import "./variables";
@@ -22,10 +23,11 @@
22
23
 
23
24
  .mdc-checkbox {
24
25
  @include mdc-checkbox-base_;
25
- @include mdc-ripple-base;
26
26
  @include mdc-checkbox-ink-color($mdc-checkbox-mark-color);
27
27
  @include mdc-checkbox-focus-indicator-color($mdc-checkbox-baseline-theme-color);
28
- @include mdc-checkbox-ripple((theme-style: $mdc-checkbox-baseline-theme-color, opacity: $mdc-checkbox-ripple-opacity));
28
+ @include mdc-ripple-surface;
29
+ @include mdc-ripple-color($mdc-checkbox-baseline-theme-color, $mdc-checkbox-ripple-opacity);
30
+ @include mdc-ripple-radius($mdc-checkbox-ripple-radius);
29
31
  @include mdc-checkbox-container-colors();
30
32
 
31
33
  @include mdc-theme-dark {
@@ -25,7 +25,7 @@
25
25
  position: relative;
26
26
  flex-direction: row;
27
27
  flex-shrink: 0;
28
- align-items: flex-center;
28
+ align-items: center;
29
29
  box-sizing: border-box;
30
30
  height: 56px;
31
31
  padding: 16px;
@@ -101,12 +101,12 @@
101
101
  }
102
102
  }
103
103
 
104
- /* stylelint-disable selector-no-qualifying-type */
104
+ // stylelint-disable selector-no-qualifying-type
105
105
  &--selected.mdc-list-item,
106
106
  &--selected.mdc-list-item .mdc-list-item__start-detail {
107
107
  @include mdc-theme-prop(color, primary);
108
108
  }
109
- /* stylelint-enable selector-no-qualifying-type */
109
+ // stylelint-enable selector-no-qualifying-type
110
110
 
111
111
  /* TODO(sgomes): Revisit when we have interactive lists. */
112
112
  .mdc-list-item::before {
@@ -32,29 +32,29 @@ $mdc-permanent-drawer-dark-theme-bg-color: #212121 !default;
32
32
  @include mdc-rtl-reflexive-position(left, 0);
33
33
 
34
34
  @include mdc-theme-dark {
35
- background-color: $mdc-permanent-drawer-dark-theme-bg-color;
36
- background-color: var(--mdc-permanent-drawer-dark-theme-bg-color, #{$mdc-permanent-drawer-dark-theme-bg-color});
37
-
38
35
  @include mdc-theme-prop(color, text-primary-on-dark);
39
36
  @include mdc-rtl-reflexive-box(border, right, 1px solid rgba(white, .12));
37
+
38
+ background-color: $mdc-permanent-drawer-dark-theme-bg-color;
39
+ background-color: var(--mdc-permanent-drawer-dark-theme-bg-color, #{$mdc-permanent-drawer-dark-theme-bg-color});
40
40
  }
41
41
 
42
42
  display: inline-flex;
43
- flex-direction: column;
44
43
  flex: 0 0 auto;
45
- width: $mdc-permanent-drawer-width;
44
+ flex-direction: column;
46
45
  box-sizing: border-box;
46
+ width: $mdc-permanent-drawer-width;
47
47
  overflow: hidden;
48
48
 
49
49
  &--floating {
50
- background: none;
51
-
52
50
  @include mdc-rtl-reflexive-box(border, right, none);
53
51
 
54
- @include mdc-theme-dark {
55
- background: none;
52
+ background: none;
56
53
 
54
+ @include mdc-theme-dark {
57
55
  @include mdc-rtl-reflexive-box(border, right, none);
56
+
57
+ background: none;
58
58
  }
59
59
  }
60
60
  }
@@ -38,11 +38,11 @@ $mdc-persistent-drawer-dark-theme-bg-color: #212121 !default;
38
38
  @include mdc-rtl-reflexive-position(left, 0);
39
39
 
40
40
  @include mdc-theme-dark {
41
- background-color: $mdc-persistent-drawer-dark-theme-bg-color;
42
- background-color: var(--mdc-persistent-drawer-dark-theme-bg-color, #{$mdc-persistent-drawer-dark-theme-bg-color});
43
-
44
41
  @include mdc-theme-prop(color, text-primary-on-dark);
45
42
  @include mdc-rtl-reflexive-box(border, right, 1px solid rgba(white, .12));
43
+
44
+ background-color: $mdc-persistent-drawer-dark-theme-bg-color;
45
+ background-color: var(--mdc-persistent-drawer-dark-theme-bg-color, #{$mdc-persistent-drawer-dark-theme-bg-color});
46
46
  }
47
47
 
48
48
  @include mdc-slideable-drawer;
@@ -28,11 +28,11 @@
28
28
  position: fixed;
29
29
  top: 0;
30
30
  left: 0;
31
+ box-sizing: border-box;
31
32
  width: 100%;
32
33
  height: 100%;
33
- overflow: hidden;
34
34
  pointer-events: none;
35
- box-sizing: border-box;
35
+ overflow: hidden;
36
36
  contain: strict;
37
37
  z-index: 5;
38
38
 
@@ -42,14 +42,14 @@
42
42
  position: absolute;
43
43
  top: 0;
44
44
  left: 0;
45
+ box-sizing: border-box;
45
46
  width: 100%;
46
47
  height: 100%;
47
48
  background: rgba(0, 0, 0, .6);
48
- content: "";
49
49
  opacity: 0;
50
50
  opacity: var(--mdc-temporary-drawer-opacity, 0);
51
+ content: "";
51
52
  will-change: opacity;
52
- box-sizing: border-box;
53
53
  }
54
54
 
55
55
  &__drawer {
@@ -58,9 +58,9 @@
58
58
  @include mdc-rtl-reflexive-position(left, 0);
59
59
 
60
60
  @include mdc-theme-dark(".mdc-temporary-drawer") {
61
- background: #303030;
62
-
63
61
  @include mdc-theme-prop(color, text-primary-on-dark);
62
+
63
+ background: #303030;
64
64
  }
65
65
 
66
66
  @include mdc-slideable-drawer;
@@ -72,9 +72,9 @@
72
72
  display: flex;
73
73
  position: absolute;
74
74
  flex-direction: column;
75
+ box-sizing: border-box;
75
76
  width: calc(100% - 56px);
76
77
  max-width: 280px;
77
- box-sizing: border-box;
78
78
  overflow: hidden;
79
79
  touch-action: none;
80
80
 
@@ -87,10 +87,10 @@
87
87
 
88
88
  &__content {
89
89
  flex-grow: 1;
90
+ box-sizing: border-box;
90
91
  margin: 0;
91
92
  overflow-x: hidden;
92
93
  overflow-y: auto;
93
- box-sizing: border-box;
94
94
  -webkit-overflow-scrolling: touch;
95
95
  touch-action: pan-y;
96
96
  }
@@ -16,21 +16,22 @@
16
16
  @import "@material/elevation/mixins";
17
17
  @import "@material/elevation/variables";
18
18
  @import "@material/ripple/mixins";
19
+ @import "@material/ripple/variables";
19
20
  @import "@material/theme/functions";
20
21
  @import "@material/theme/mixins";
21
- @import "./variables";
22
22
 
23
23
  @mixin mdc-fab-accessible($container-color) {
24
24
  @include mdc-fab-container-color($container-color);
25
+
25
26
  // Calculate whether to use dark or light text on top of given color.
26
27
  $light-or-dark-text: mdc-theme-light-or-dark($container-color);
27
28
 
28
29
  @if ($light-or-dark-text == "light") {
29
30
  @include mdc-fab-ink-color(text-primary-on-dark);
30
- @include mdc-fab-ripple($mdc-fab-light-ripple-config);
31
+ @include mdc-ripple-color(text-primary-on-dark, $mdc-ripple-pressed-light-ink-opacity);
31
32
  } @else {
32
33
  @include mdc-fab-ink-color(text-primary-on-light);
33
- @include mdc-fab-ripple(()); //default dark ripple
34
+ @include mdc-ripple-color(text-primary-on-light, $mdc-ripple-pressed-dark-ink-opacity);
34
35
  }
35
36
  }
36
37
 
@@ -42,16 +43,12 @@
42
43
  @include mdc-theme-prop(color, $color);
43
44
  }
44
45
 
45
- @mixin mdc-fab-ripple($ripple-config) {
46
- @include mdc-ripple-bg(map-merge((pseudo: "::before"), $ripple-config));
47
- @include mdc-ripple-fg(map-merge((pseudo: "::after"), $ripple-config));
48
- }
49
-
50
46
  $mdc-fab-icon-enter-delay_: 90ms;
51
47
  $mdc-fab-icon-enter-duration_: 180ms;
52
48
 
53
49
  @mixin mdc-fab-base_ {
54
- @include mdc-ripple-base;
50
+ @include mdc-ripple-surface;
51
+ @include mdc-ripple-radius;
55
52
  @include mdc-elevation(6);
56
53
 
57
54
  display: inline-flex;
@@ -12,8 +12,9 @@
12
12
  // See the License for the specific language governing permissions and
13
13
  // limitations under the License.
14
14
 
15
+ @import "@material/ripple/mixins";
16
+ @import "@material/ripple/variables";
15
17
  @import "./mixins";
16
- @import "./variables";
17
18
 
18
19
  // postcss-bem-linter: define fab
19
20
 
@@ -21,7 +22,7 @@
21
22
  @include mdc-fab-base_;
22
23
  @include mdc-fab-container-color(secondary);
23
24
  @include mdc-fab-ink-color(text-primary-on-secondary);
24
- @include mdc-fab-ripple($mdc-fab-light-ripple-config);
25
+ @include mdc-ripple-color(text-primary-on-secondary, $mdc-ripple-pressed-dark-ink-opacity);
25
26
 
26
27
  &:not(.mdc-ripple-upgraded) {
27
28
  -webkit-tap-highlight-color: rgba(0, 0, 0, .18);