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.
- checksums.yaml +4 -4
- data/.travis.yml +3 -3
- data/CHANGELOG.md +9 -0
- data/lib/material_components_web/sass/version.rb +1 -1
- data/vendor/assets/javascripts/material-components-web.js +12 -7
- data/vendor/assets/stylesheets/@material/button/_mixins.scss +5 -11
- data/vendor/assets/stylesheets/@material/button/mdc-button.scss +3 -2
- data/vendor/assets/stylesheets/@material/checkbox/_mixins.scss +0 -8
- data/vendor/assets/stylesheets/@material/checkbox/_variables.scss +1 -0
- data/vendor/assets/stylesheets/@material/checkbox/mdc-checkbox.scss +4 -2
- data/vendor/assets/stylesheets/@material/drawer/_mixins.scss +3 -3
- data/vendor/assets/stylesheets/@material/drawer/permanent/mdc-permanent-drawer.scss +9 -9
- data/vendor/assets/stylesheets/@material/drawer/persistent/mdc-persistent-drawer.scss +3 -3
- data/vendor/assets/stylesheets/@material/drawer/temporary/mdc-temporary-drawer.scss +8 -8
- data/vendor/assets/stylesheets/@material/fab/_mixins.scss +6 -9
- data/vendor/assets/stylesheets/@material/fab/mdc-fab.scss +3 -2
- data/vendor/assets/stylesheets/@material/icon-toggle/mdc-icon-toggle.scss +6 -9
- data/vendor/assets/stylesheets/@material/layout-grid/_mixins.scss +2 -0
- data/vendor/assets/stylesheets/@material/list/mdc-list.scss +4 -5
- data/vendor/assets/stylesheets/@material/radio/_functions.scss +26 -0
- data/vendor/assets/stylesheets/@material/radio/_mixins.scss +45 -0
- data/vendor/assets/stylesheets/@material/radio/_variables.scss +23 -0
- data/vendor/assets/stylesheets/@material/radio/mdc-radio.scss +15 -44
- data/vendor/assets/stylesheets/@material/ripple/_keyframes.scss +31 -29
- data/vendor/assets/stylesheets/@material/ripple/_mixins.scss +98 -177
- data/vendor/assets/stylesheets/@material/{fab → ripple}/_variables.scss +5 -2
- data/vendor/assets/stylesheets/@material/ripple/mdc-ripple.scss +6 -17
- data/vendor/assets/stylesheets/@material/snackbar/mdc-snackbar.scss +4 -3
- data/vendor/assets/stylesheets/@material/switch/_functions.scss +21 -0
- data/vendor/assets/stylesheets/@material/switch/_mixins.scss +74 -0
- data/vendor/assets/stylesheets/@material/switch/_variables.scss +9 -5
- data/vendor/assets/stylesheets/@material/switch/mdc-switch.scss +36 -43
- data/vendor/assets/stylesheets/@material/tabs/tab/mdc-tab.scss +5 -7
- data/vendor/assets/stylesheets/@material/textfield/_mixins.scss +23 -0
- data/vendor/assets/stylesheets/@material/textfield/_variables.scss +9 -0
- data/vendor/assets/stylesheets/@material/textfield/mdc-textfield.scss +20 -61
- data/vendor/assets/stylesheets/@material/theme/{_color_palette.scss → _color-palette.scss} +0 -0
- data/vendor/assets/stylesheets/@material/theme/_variables.scss +24 -0
- metadata +9 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 13cda5cefe52b75e32186da2f58944147e182177
|
4
|
+
data.tar.gz: 2f7d0179a435094ec43b949eb6c506b39c6dc879
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: '08772e27cca4eb6adbc7336d5b1375873915c060c621308f9ce126afc3489140d90e5f78b5a345ae60aa0cd3b8ad2f2a723823ba217c914943436524b2aeb0cd'
|
7
|
+
data.tar.gz: 92e9bbfe5f0268c655d68ee89b5e3fc34001997b12ea5336af4500b83d7054d4ed1f74ddf353a754d10c1a23f13fd16c114ae4b1cc10861b845bd45baf1fc0ff
|
data/.travis.yml
CHANGED
data/CHANGELOG.md
CHANGED
@@ -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 {
|
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-
|
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-
|
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:
|
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-
|
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-
|
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-
|
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:
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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-
|
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-
|
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-
|
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-
|
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);
|