@material/web 1.1.2-nightly.c97362c.0 → 1.2.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.
- package/button/internal/button.d.ts +8 -0
- package/button/internal/button.js +9 -1
- package/button/internal/button.js.map +1 -1
- package/dialog/internal/_dialog.scss +50 -42
- package/dialog/internal/dialog-styles.css.js +1 -1
- package/dialog/internal/dialog-styles.css.js.map +1 -1
- package/divider/internal/_divider.scss +6 -6
- package/divider/internal/divider-styles.css.js +1 -1
- package/divider/internal/divider-styles.css.js.map +1 -1
- package/elevation/internal/_elevation.scss +10 -4
- package/elevation/internal/elevation-styles.css.js +1 -1
- package/elevation/internal/elevation-styles.css.js.map +1 -1
- package/iconbutton/internal/icon-button.d.ts +8 -0
- package/iconbutton/internal/icon-button.js +9 -1
- package/iconbutton/internal/icon-button.js.map +1 -1
- package/menu/internal/menuitem/_menu-item.scss +31 -52
- package/menu/internal/menuitem/menu-item-styles.css.js +1 -1
- package/menu/internal/menuitem/menu-item-styles.css.js.map +1 -1
- package/package.json +5 -3
- package/radio/internal/_radio.scss +34 -34
- package/radio/internal/radio-styles.css.js +1 -1
- package/radio/internal/radio-styles.css.js.map +1 -1
- package/ripple/internal/_ripple.scss +8 -9
- package/ripple/internal/ripple-styles.css.js +1 -1
- package/ripple/internal/ripple-styles.css.js.map +1 -1
- package/switch/internal/_handle.scss +42 -37
- package/switch/internal/_icon.scss +17 -17
- package/switch/internal/_switch.scss +52 -52
- package/switch/internal/_track.scss +18 -18
- package/switch/internal/switch-styles.css.js +1 -1
- package/switch/internal/switch-styles.css.js.map +1 -1
- package/testing/harness.d.ts +371 -0
- package/testing/harness.js +737 -0
- package/testing/harness.js.map +1 -0
- package/testing/transform-pseudo-classes.d.ts +39 -0
- package/testing/transform-pseudo-classes.js +172 -0
- package/testing/transform-pseudo-classes.js.map +1 -0
- package/tokens/_index.scss +0 -1
- package/tokens/_md-comp-list-item.scss +2 -2
- package/tokens/_md-comp-menu-item.scss +63 -7
- package/tokens/_md-comp-menu-list-item.scss +0 -162
|
@@ -17,59 +17,41 @@
|
|
|
17
17
|
// go/keep-sorted end
|
|
18
18
|
|
|
19
19
|
@mixin theme($tokens) {
|
|
20
|
-
$list-item-supported-tokens: tokens.$md-comp-menu-list-item-supported-tokens;
|
|
21
20
|
$supported-tokens: tokens.$md-comp-menu-item-supported-tokens;
|
|
22
21
|
|
|
23
22
|
@each $token, $value in $tokens {
|
|
24
|
-
@if list.index($supported-tokens, $token) ==
|
|
25
|
-
null and
|
|
26
|
-
list.index($list-item-supported-tokens, $token) ==
|
|
27
|
-
null
|
|
28
|
-
{
|
|
23
|
+
@if list.index($supported-tokens, $token) == null {
|
|
29
24
|
@error 'Token `#{$token}` is not a supported token.';
|
|
30
25
|
}
|
|
31
26
|
|
|
32
27
|
@if $value and list.index($supported-tokens, $token) == null {
|
|
33
28
|
--md-menu-item-#{$token}: #{$value};
|
|
34
29
|
}
|
|
35
|
-
|
|
36
|
-
@if $value and list.index($list-item-supported-tokens, $token) == null {
|
|
37
|
-
--md-list-item-#{$token}: #{$value};
|
|
38
|
-
}
|
|
39
30
|
}
|
|
40
31
|
}
|
|
41
32
|
|
|
42
33
|
@mixin styles() {
|
|
43
|
-
$list-item-tokens: tokens.md-comp-menu-list-item-values();
|
|
44
|
-
@each $token, $value in $list-item-tokens {
|
|
45
|
-
$list-item-tokens: map.set(
|
|
46
|
-
$list-item-tokens,
|
|
47
|
-
$token,
|
|
48
|
-
var(--md-menu-item-#{$token}, #{$value})
|
|
49
|
-
);
|
|
50
|
-
}
|
|
51
34
|
$tokens: tokens.md-comp-menu-item-values();
|
|
52
35
|
@each $token, $value in $tokens {
|
|
53
36
|
$tokens: map.set($tokens, $token, var(--md-menu-item-#{$token}, #{$value}));
|
|
54
37
|
}
|
|
55
38
|
|
|
56
39
|
:host {
|
|
57
|
-
border-radius: map.get($
|
|
40
|
+
border-radius: map.get($tokens, 'container-shape');
|
|
58
41
|
display: flex;
|
|
59
42
|
|
|
60
43
|
@include ripple.theme(
|
|
61
44
|
(
|
|
62
|
-
hover-color: map.get($
|
|
63
|
-
hover-opacity: map.get($
|
|
64
|
-
pressed-color: map.get($
|
|
65
|
-
pressed-opacity:
|
|
66
|
-
map.get($list-item-tokens, 'pressed-state-layer-opacity'),
|
|
45
|
+
hover-color: map.get($tokens, 'hover-state-layer-color'),
|
|
46
|
+
hover-opacity: map.get($tokens, 'hover-state-layer-opacity'),
|
|
47
|
+
pressed-color: map.get($tokens, 'pressed-state-layer-color'),
|
|
48
|
+
pressed-opacity: map.get($tokens, 'pressed-state-layer-opacity'),
|
|
67
49
|
)
|
|
68
50
|
);
|
|
69
51
|
}
|
|
70
52
|
|
|
71
53
|
:host([disabled]) {
|
|
72
|
-
opacity: map.get($
|
|
54
|
+
opacity: map.get($tokens, 'disabled-opacity');
|
|
73
55
|
pointer-events: none;
|
|
74
56
|
}
|
|
75
57
|
|
|
@@ -121,39 +103,36 @@
|
|
|
121
103
|
md-item {
|
|
122
104
|
border-radius: inherit;
|
|
123
105
|
flex: 1;
|
|
124
|
-
color: map.get($
|
|
125
|
-
font-family: map.get($
|
|
126
|
-
font-size: map.get($
|
|
127
|
-
line-height: map.get($
|
|
128
|
-
font-weight: map.get($
|
|
129
|
-
min-height: map.get($
|
|
130
|
-
padding-top: map.get($
|
|
131
|
-
padding-bottom: map.get($
|
|
132
|
-
padding-inline-start: map.get($
|
|
133
|
-
padding-inline-end: map.get($
|
|
106
|
+
color: map.get($tokens, 'label-text-color');
|
|
107
|
+
font-family: map.get($tokens, 'label-text-font');
|
|
108
|
+
font-size: map.get($tokens, 'label-text-size');
|
|
109
|
+
line-height: map.get($tokens, 'label-text-line-height');
|
|
110
|
+
font-weight: map.get($tokens, 'label-text-weight');
|
|
111
|
+
min-height: map.get($tokens, 'one-line-container-height');
|
|
112
|
+
padding-top: map.get($tokens, 'top-space');
|
|
113
|
+
padding-bottom: map.get($tokens, 'bottom-space');
|
|
114
|
+
padding-inline-start: map.get($tokens, 'leading-space');
|
|
115
|
+
padding-inline-end: map.get($tokens, 'trailing-space');
|
|
134
116
|
}
|
|
135
117
|
|
|
136
118
|
md-item[multiline] {
|
|
137
|
-
min-height: map.get($
|
|
119
|
+
min-height: map.get($tokens, 'two-line-container-height');
|
|
138
120
|
}
|
|
139
121
|
|
|
140
122
|
[slot='supporting-text'] {
|
|
141
|
-
color: map.get($
|
|
142
|
-
font-family: map.get($
|
|
143
|
-
font-size: map.get($
|
|
144
|
-
line-height: map.get($
|
|
145
|
-
font-weight: map.get($
|
|
123
|
+
color: map.get($tokens, 'supporting-text-color');
|
|
124
|
+
font-family: map.get($tokens, 'supporting-text-font');
|
|
125
|
+
font-size: map.get($tokens, 'supporting-text-size');
|
|
126
|
+
line-height: map.get($tokens, 'supporting-text-line-height');
|
|
127
|
+
font-weight: map.get($tokens, 'supporting-text-weight');
|
|
146
128
|
}
|
|
147
129
|
|
|
148
130
|
[slot='trailing-supporting-text'] {
|
|
149
|
-
color: map.get($
|
|
150
|
-
font-family: map.get($
|
|
151
|
-
font-size: map.get($
|
|
152
|
-
line-height: map.get(
|
|
153
|
-
|
|
154
|
-
'trailing-supporting-text-line-height'
|
|
155
|
-
);
|
|
156
|
-
font-weight: map.get($list-item-tokens, 'trailing-supporting-text-weight');
|
|
131
|
+
color: map.get($tokens, 'trailing-supporting-text-color');
|
|
132
|
+
font-family: map.get($tokens, 'trailing-supporting-text-font');
|
|
133
|
+
font-size: map.get($tokens, 'trailing-supporting-text-size');
|
|
134
|
+
line-height: map.get($tokens, 'trailing-supporting-text-line-height');
|
|
135
|
+
font-weight: map.get($tokens, 'trailing-supporting-text-weight');
|
|
157
136
|
}
|
|
158
137
|
|
|
159
138
|
:is([slot='start'], [slot='end'])::slotted(*) {
|
|
@@ -161,15 +140,15 @@
|
|
|
161
140
|
}
|
|
162
141
|
|
|
163
142
|
[slot='start'] {
|
|
164
|
-
color: map.get($
|
|
143
|
+
color: map.get($tokens, 'leading-icon-color');
|
|
165
144
|
}
|
|
166
145
|
|
|
167
146
|
[slot='end'] {
|
|
168
|
-
color: map.get($
|
|
147
|
+
color: map.get($tokens, 'trailing-icon-color');
|
|
169
148
|
}
|
|
170
149
|
|
|
171
150
|
.list-item {
|
|
172
|
-
background-color: map.get($
|
|
151
|
+
background-color: map.get($tokens, 'container-color');
|
|
173
152
|
}
|
|
174
153
|
|
|
175
154
|
.list-item.selected {
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { css } from 'lit';
|
|
7
|
-
export const styles = css `:host{display:flex;--md-ripple-hover-color: var(--md-menu-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-menu-item-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-menu-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-menu-item-pressed-state-layer-opacity, 0.12)}:host([disabled]){opacity:var(--md-menu-item-disabled-opacity, 0.3);pointer-events:none}md-focus-ring{z-index:1;--md-focus-ring-shape: 8px}a,button,li{background:none;border:none;padding:0;margin:0;text-align:unset;text-decoration:none}.list-item{border-radius:inherit;display:flex;flex:1;max-width:inherit;min-width:inherit;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.list-item:not(.disabled){cursor:pointer}[slot=container]{pointer-events:none}md-ripple{border-radius:inherit}md-item{border-radius:inherit;flex:1;color:var(--md-menu-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));font-family:var(--md-menu-item-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));line-height:var(--md-menu-item-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));font-weight:var(--md-menu-item-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));min-height:var(--md-menu-item-one-line-container-height, 56px);padding-top:var(--md-menu-item-top-space, 12px);padding-bottom:var(--md-menu-item-bottom-space, 12px);padding-inline-start:var(--md-menu-item-leading-space, 16px);padding-inline-end:var(--md-menu-item-trailing-space, 16px)}md-item[multiline]{min-height:var(--md-menu-item-two-line-container-height, 72px)}[slot=supporting-text]{color:var(--md-menu-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-menu-item-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-menu-item-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));font-weight:var(--md-menu-item-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)))}[slot=trailing-supporting-text]{color:var(--md-menu-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-menu-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-trailing-supporting-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));line-height:var(--md-menu-item-trailing-supporting-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));font-weight:var(--md-menu-item-trailing-supporting-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)))}:is([slot=start],[slot=end])::slotted(*){fill:currentColor}[slot=start]{color:var(--md-menu-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}[slot=end]{color:var(--md-menu-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.list-item.selected{background-color:var(--md-menu-item-selected-container-color, var(--md-sys-color-secondary-container, #e8def8))}.selected:not(.disabled) ::slotted(*){color:var(--md-menu-item-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b))}@media(forced-colors: active){:host([disabled]),:host([disabled]) slot{color:GrayText;opacity:1}.list-item{position:relative}.list-item.selected::before{content:"";position:absolute;inset:0;box-sizing:border-box;border-radius:inherit;pointer-events:none;border:3px double CanvasText}}/*# sourceMappingURL=menu-item-styles.css.map */
|
|
7
|
+
export const styles = css `:host{display:flex;--md-ripple-hover-color: var(--md-menu-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-menu-item-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-menu-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-menu-item-pressed-state-layer-opacity, 0.12)}:host([disabled]){opacity:var(--md-menu-item-disabled-opacity, 0.3);pointer-events:none}md-focus-ring{z-index:1;--md-focus-ring-shape: 8px}a,button,li{background:none;border:none;padding:0;margin:0;text-align:unset;text-decoration:none}.list-item{border-radius:inherit;display:flex;flex:1;max-width:inherit;min-width:inherit;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.list-item:not(.disabled){cursor:pointer}[slot=container]{pointer-events:none}md-ripple{border-radius:inherit}md-item{border-radius:inherit;flex:1;color:var(--md-menu-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));font-family:var(--md-menu-item-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));line-height:var(--md-menu-item-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));font-weight:var(--md-menu-item-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));min-height:var(--md-menu-item-one-line-container-height, 56px);padding-top:var(--md-menu-item-top-space, 12px);padding-bottom:var(--md-menu-item-bottom-space, 12px);padding-inline-start:var(--md-menu-item-leading-space, 16px);padding-inline-end:var(--md-menu-item-trailing-space, 16px)}md-item[multiline]{min-height:var(--md-menu-item-two-line-container-height, 72px)}[slot=supporting-text]{color:var(--md-menu-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-menu-item-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-menu-item-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));font-weight:var(--md-menu-item-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)))}[slot=trailing-supporting-text]{color:var(--md-menu-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-menu-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-trailing-supporting-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));line-height:var(--md-menu-item-trailing-supporting-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));font-weight:var(--md-menu-item-trailing-supporting-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)))}:is([slot=start],[slot=end])::slotted(*){fill:currentColor}[slot=start]{color:var(--md-menu-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}[slot=end]{color:var(--md-menu-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.list-item{background-color:var(--md-menu-item-container-color, transparent)}.list-item.selected{background-color:var(--md-menu-item-selected-container-color, var(--md-sys-color-secondary-container, #e8def8))}.selected:not(.disabled) ::slotted(*){color:var(--md-menu-item-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b))}@media(forced-colors: active){:host([disabled]),:host([disabled]) slot{color:GrayText;opacity:1}.list-item{position:relative}.list-item.selected::before{content:"";position:absolute;inset:0;box-sizing:border-box;border-radius:inherit;pointer-events:none;border:3px double CanvasText}}/*# sourceMappingURL=menu-item-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=menu-item-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-item-styles.css.js","sourceRoot":"","sources":["menu-item-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{display:flex;--md-ripple-hover-color: var(--md-menu-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-menu-item-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-menu-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-menu-item-pressed-state-layer-opacity, 0.12)}:host([disabled]){opacity:var(--md-menu-item-disabled-opacity, 0.3);pointer-events:none}md-focus-ring{z-index:1;--md-focus-ring-shape: 8px}a,button,li{background:none;border:none;padding:0;margin:0;text-align:unset;text-decoration:none}.list-item{border-radius:inherit;display:flex;flex:1;max-width:inherit;min-width:inherit;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.list-item:not(.disabled){cursor:pointer}[slot=container]{pointer-events:none}md-ripple{border-radius:inherit}md-item{border-radius:inherit;flex:1;color:var(--md-menu-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));font-family:var(--md-menu-item-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));line-height:var(--md-menu-item-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));font-weight:var(--md-menu-item-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));min-height:var(--md-menu-item-one-line-container-height, 56px);padding-top:var(--md-menu-item-top-space, 12px);padding-bottom:var(--md-menu-item-bottom-space, 12px);padding-inline-start:var(--md-menu-item-leading-space, 16px);padding-inline-end:var(--md-menu-item-trailing-space, 16px)}md-item[multiline]{min-height:var(--md-menu-item-two-line-container-height, 72px)}[slot=supporting-text]{color:var(--md-menu-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-menu-item-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-menu-item-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));font-weight:var(--md-menu-item-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)))}[slot=trailing-supporting-text]{color:var(--md-menu-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-menu-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-trailing-supporting-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));line-height:var(--md-menu-item-trailing-supporting-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));font-weight:var(--md-menu-item-trailing-supporting-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)))}:is([slot=start],[slot=end])::slotted(*){fill:currentColor}[slot=start]{color:var(--md-menu-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}[slot=end]{color:var(--md-menu-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.list-item.selected{background-color:var(--md-menu-item-selected-container-color, var(--md-sys-color-secondary-container, #e8def8))}.selected:not(.disabled) ::slotted(*){color:var(--md-menu-item-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b))}@media(forced-colors: active){:host([disabled]),:host([disabled]) slot{color:GrayText;opacity:1}.list-item{position:relative}.list-item.selected::before{content:\"\";position:absolute;inset:0;box-sizing:border-box;border-radius:inherit;pointer-events:none;border:3px double CanvasText}}/*# sourceMappingURL=menu-item-styles.css.map */\n`;\n "]}
|
|
1
|
+
{"version":3,"file":"menu-item-styles.css.js","sourceRoot":"","sources":["menu-item-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{display:flex;--md-ripple-hover-color: var(--md-menu-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-menu-item-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-menu-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-menu-item-pressed-state-layer-opacity, 0.12)}:host([disabled]){opacity:var(--md-menu-item-disabled-opacity, 0.3);pointer-events:none}md-focus-ring{z-index:1;--md-focus-ring-shape: 8px}a,button,li{background:none;border:none;padding:0;margin:0;text-align:unset;text-decoration:none}.list-item{border-radius:inherit;display:flex;flex:1;max-width:inherit;min-width:inherit;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.list-item:not(.disabled){cursor:pointer}[slot=container]{pointer-events:none}md-ripple{border-radius:inherit}md-item{border-radius:inherit;flex:1;color:var(--md-menu-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));font-family:var(--md-menu-item-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));line-height:var(--md-menu-item-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));font-weight:var(--md-menu-item-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));min-height:var(--md-menu-item-one-line-container-height, 56px);padding-top:var(--md-menu-item-top-space, 12px);padding-bottom:var(--md-menu-item-bottom-space, 12px);padding-inline-start:var(--md-menu-item-leading-space, 16px);padding-inline-end:var(--md-menu-item-trailing-space, 16px)}md-item[multiline]{min-height:var(--md-menu-item-two-line-container-height, 72px)}[slot=supporting-text]{color:var(--md-menu-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-menu-item-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-menu-item-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));font-weight:var(--md-menu-item-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)))}[slot=trailing-supporting-text]{color:var(--md-menu-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-menu-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-trailing-supporting-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));line-height:var(--md-menu-item-trailing-supporting-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));font-weight:var(--md-menu-item-trailing-supporting-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)))}:is([slot=start],[slot=end])::slotted(*){fill:currentColor}[slot=start]{color:var(--md-menu-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}[slot=end]{color:var(--md-menu-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.list-item{background-color:var(--md-menu-item-container-color, transparent)}.list-item.selected{background-color:var(--md-menu-item-selected-container-color, var(--md-sys-color-secondary-container, #e8def8))}.selected:not(.disabled) ::slotted(*){color:var(--md-menu-item-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b))}@media(forced-colors: active){:host([disabled]),:host([disabled]) slot{color:GrayText;opacity:1}.list-item{position:relative}.list-item.selected::before{content:\"\";position:absolute;inset:0;box-sizing:border-box;border-radius:inherit;pointer-events:none;border:3px double CanvasText}}/*# sourceMappingURL=menu-item-styles.css.map */\n`;\n "]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@material/web",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -43,11 +43,13 @@
|
|
|
43
43
|
"!web-test-runner.config.js",
|
|
44
44
|
"!commitlint.config.js",
|
|
45
45
|
"!**/test/**",
|
|
46
|
-
"!**/testing/**",
|
|
47
46
|
"!**/*_test.*",
|
|
48
47
|
"!.wireit/**",
|
|
49
48
|
"!catalog",
|
|
50
|
-
"!scripts/"
|
|
49
|
+
"!scripts/",
|
|
50
|
+
"!**/testing/**",
|
|
51
|
+
"testing/harness.{js,js.map,d.ts}",
|
|
52
|
+
"testing/transform-pseudo-classes.{js,js.map,d.ts}"
|
|
51
53
|
],
|
|
52
54
|
"workspaces": [
|
|
53
55
|
"catalog"
|
|
@@ -32,31 +32,30 @@ $_md-sys-motion: tokens.md-sys-motion-values();
|
|
|
32
32
|
|
|
33
33
|
@mixin styles() {
|
|
34
34
|
$tokens: tokens.md-comp-radio-values();
|
|
35
|
+
@each $token, $value in $tokens {
|
|
36
|
+
$tokens: map.set($tokens, $token, var(--md-radio-#{$token}, #{$value}));
|
|
37
|
+
}
|
|
35
38
|
|
|
36
39
|
@layer {
|
|
37
40
|
:host {
|
|
38
|
-
@each $token, $value in $tokens {
|
|
39
|
-
--_#{$token}: var(--md-radio-#{$token}, #{$value});
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
@include ripple.theme(
|
|
43
|
-
(
|
|
44
|
-
hover-color: var(--_hover-state-layer-color),
|
|
45
|
-
hover-opacity: var(--_hover-state-layer-opacity),
|
|
46
|
-
pressed-color: var(--_pressed-state-layer-color),
|
|
47
|
-
pressed-opacity: var(--_pressed-state-layer-opacity),
|
|
48
|
-
)
|
|
49
|
-
);
|
|
50
|
-
|
|
51
41
|
display: inline-flex;
|
|
52
|
-
height:
|
|
42
|
+
height: map.get($tokens, 'icon-size');
|
|
53
43
|
outline: none;
|
|
54
44
|
position: relative;
|
|
55
45
|
vertical-align: top; // Fix extra space when placed inside display: block
|
|
56
|
-
width:
|
|
46
|
+
width: map.get($tokens, 'icon-size');
|
|
57
47
|
// Remove highlight color for mobile Safari
|
|
58
48
|
-webkit-tap-highlight-color: transparent;
|
|
59
49
|
cursor: pointer;
|
|
50
|
+
|
|
51
|
+
@include ripple.theme(
|
|
52
|
+
(
|
|
53
|
+
hover-color: map.get($tokens, 'hover-state-layer-color'),
|
|
54
|
+
hover-opacity: map.get($tokens, 'hover-state-layer-opacity'),
|
|
55
|
+
pressed-color: map.get($tokens, 'pressed-state-layer-color'),
|
|
56
|
+
pressed-opacity: map.get($tokens, 'pressed-state-layer-opacity'),
|
|
57
|
+
)
|
|
58
|
+
);
|
|
60
59
|
}
|
|
61
60
|
|
|
62
61
|
:host([disabled]) {
|
|
@@ -64,7 +63,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
|
|
|
64
63
|
}
|
|
65
64
|
|
|
66
65
|
:host([touch-target='wrapper']) {
|
|
67
|
-
margin: max(0px, ((48px -
|
|
66
|
+
margin: max(0px, ((48px - map.get($tokens, 'icon-size')) / 2));
|
|
68
67
|
}
|
|
69
68
|
|
|
70
69
|
.container {
|
|
@@ -84,10 +83,11 @@ $_md-sys-motion: tokens.md-sys-motion-values();
|
|
|
84
83
|
.checked {
|
|
85
84
|
@include ripple.theme(
|
|
86
85
|
(
|
|
87
|
-
hover-color:
|
|
88
|
-
hover-opacity:
|
|
89
|
-
pressed-color:
|
|
90
|
-
pressed-opacity:
|
|
86
|
+
hover-color: map.get($tokens, 'selected-hover-state-layer-color'),
|
|
87
|
+
hover-opacity: map.get($tokens, 'selected-hover-state-layer-opacity'),
|
|
88
|
+
pressed-color: map.get($tokens, 'selected-pressed-state-layer-color'),
|
|
89
|
+
pressed-opacity:
|
|
90
|
+
map.get($tokens, 'selected-pressed-state-layer-opacity'),
|
|
91
91
|
)
|
|
92
92
|
);
|
|
93
93
|
}
|
|
@@ -109,13 +109,13 @@ $_md-sys-motion: tokens.md-sys-motion-values();
|
|
|
109
109
|
|
|
110
110
|
md-ripple {
|
|
111
111
|
border-radius: 50%;
|
|
112
|
-
height:
|
|
112
|
+
height: map.get($tokens, 'state-layer-size');
|
|
113
113
|
inset: unset;
|
|
114
|
-
width:
|
|
114
|
+
width: map.get($tokens, 'state-layer-size');
|
|
115
115
|
}
|
|
116
116
|
|
|
117
117
|
.icon {
|
|
118
|
-
fill:
|
|
118
|
+
fill: map.get($tokens, 'icon-color');
|
|
119
119
|
inset: 0;
|
|
120
120
|
position: absolute;
|
|
121
121
|
}
|
|
@@ -132,7 +132,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
|
|
|
132
132
|
}
|
|
133
133
|
|
|
134
134
|
.checked .icon {
|
|
135
|
-
fill:
|
|
135
|
+
fill: map.get($tokens, 'selected-icon-color');
|
|
136
136
|
}
|
|
137
137
|
|
|
138
138
|
.checked .inner.circle {
|
|
@@ -157,37 +157,37 @@ $_md-sys-motion: tokens.md-sys-motion-values();
|
|
|
157
157
|
}
|
|
158
158
|
|
|
159
159
|
:host(:hover) .icon {
|
|
160
|
-
fill:
|
|
160
|
+
fill: map.get($tokens, 'hover-icon-color');
|
|
161
161
|
}
|
|
162
162
|
|
|
163
163
|
:host(:focus-within) .icon {
|
|
164
|
-
fill:
|
|
164
|
+
fill: map.get($tokens, 'focus-icon-color');
|
|
165
165
|
}
|
|
166
166
|
|
|
167
167
|
:host(:active) .icon {
|
|
168
|
-
fill:
|
|
168
|
+
fill: map.get($tokens, 'pressed-icon-color');
|
|
169
169
|
}
|
|
170
170
|
|
|
171
171
|
:host([disabled]) .icon {
|
|
172
|
-
fill:
|
|
173
|
-
opacity:
|
|
172
|
+
fill: map.get($tokens, 'disabled-unselected-icon-color');
|
|
173
|
+
opacity: map.get($tokens, 'disabled-unselected-icon-opacity');
|
|
174
174
|
}
|
|
175
175
|
|
|
176
176
|
:host(:hover) .checked .icon {
|
|
177
|
-
fill:
|
|
177
|
+
fill: map.get($tokens, 'selected-hover-icon-color');
|
|
178
178
|
}
|
|
179
179
|
|
|
180
180
|
:host(:focus-within) .checked .icon {
|
|
181
|
-
fill:
|
|
181
|
+
fill: map.get($tokens, 'selected-focus-icon-color');
|
|
182
182
|
}
|
|
183
183
|
|
|
184
184
|
:host(:active) .checked .icon {
|
|
185
|
-
fill:
|
|
185
|
+
fill: map.get($tokens, 'selected-pressed-icon-color');
|
|
186
186
|
}
|
|
187
187
|
|
|
188
188
|
:host([disabled]) .checked .icon {
|
|
189
|
-
fill:
|
|
190
|
-
opacity:
|
|
189
|
+
fill: map.get($tokens, 'disabled-selected-icon-color');
|
|
190
|
+
opacity: map.get($tokens, 'disabled-selected-icon-opacity');
|
|
191
191
|
}
|
|
192
192
|
}
|
|
193
193
|
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { css } from 'lit';
|
|
7
|
-
export const styles = css `@layer{:host{
|
|
7
|
+
export const styles = css `@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20px);outline:none;position:relative;vertical-align:top;width:var(--md-radio-icon-size, 20px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer;--md-ripple-hover-color: var(--md-radio-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-radio-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-radio-pressed-state-layer-opacity, 0.12)}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-radio-icon-size, 20px))/2)}.container{display:flex;height:100%;place-content:center;place-items:center;width:100%}md-focus-ring{height:44px;inset:unset;width:44px}.checked{--md-ripple-hover-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12)}input{appearance:none;height:48px;margin:0;position:absolute;width:48px;cursor:inherit}:host([touch-target=none]) input{width:100%;height:100%}md-ripple{border-radius:50%;height:var(--md-radio-state-layer-size, 40px);inset:unset;width:var(--md-radio-state-layer-size, 40px)}.icon{fill:var(--md-radio-icon-color, var(--md-sys-color-on-surface-variant, #49454f));inset:0;position:absolute}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}.checked .icon{fill:var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4))}.checked .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--md-radio-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:focus-within) .icon{fill:var(--md-radio-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:active) .icon{fill:var(--md-radio-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host([disabled]) .icon{fill:var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-unselected-icon-opacity, 0.38)}:host(:hover) .checked .icon{fill:var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:focus-within) .checked .icon{fill:var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:active) .checked .icon{fill:var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}:host([disabled]) .checked .icon{fill:var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-selected-icon-opacity, 0.38)}}@layer hcm{@media(forced-colors: active){.icon{fill:CanvasText}:host([disabled]) .icon{fill:GrayText;opacity:1}}}/*# sourceMappingURL=radio-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=radio-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-styles.css.js","sourceRoot":"","sources":["radio-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`@layer{:host{
|
|
1
|
+
{"version":3,"file":"radio-styles.css.js","sourceRoot":"","sources":["radio-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20px);outline:none;position:relative;vertical-align:top;width:var(--md-radio-icon-size, 20px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer;--md-ripple-hover-color: var(--md-radio-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-radio-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-radio-pressed-state-layer-opacity, 0.12)}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-radio-icon-size, 20px))/2)}.container{display:flex;height:100%;place-content:center;place-items:center;width:100%}md-focus-ring{height:44px;inset:unset;width:44px}.checked{--md-ripple-hover-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12)}input{appearance:none;height:48px;margin:0;position:absolute;width:48px;cursor:inherit}:host([touch-target=none]) input{width:100%;height:100%}md-ripple{border-radius:50%;height:var(--md-radio-state-layer-size, 40px);inset:unset;width:var(--md-radio-state-layer-size, 40px)}.icon{fill:var(--md-radio-icon-color, var(--md-sys-color-on-surface-variant, #49454f));inset:0;position:absolute}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}.checked .icon{fill:var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4))}.checked .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--md-radio-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:focus-within) .icon{fill:var(--md-radio-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:active) .icon{fill:var(--md-radio-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host([disabled]) .icon{fill:var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-unselected-icon-opacity, 0.38)}:host(:hover) .checked .icon{fill:var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:focus-within) .checked .icon{fill:var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:active) .checked .icon{fill:var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}:host([disabled]) .checked .icon{fill:var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-selected-icon-opacity, 0.38)}}@layer hcm{@media(forced-colors: active){.icon{fill:CanvasText}:host([disabled]) .icon{fill:GrayText;opacity:1}}}/*# sourceMappingURL=radio-styles.css.map */\n`;\n "]}
|
|
@@ -26,12 +26,11 @@
|
|
|
26
26
|
|
|
27
27
|
@mixin styles() {
|
|
28
28
|
$tokens: tokens.md-comp-ripple-values();
|
|
29
|
+
@each $token, $value in $tokens {
|
|
30
|
+
$tokens: map.set($tokens, $token, var(--md-ripple-#{$token}, #{$value}));
|
|
31
|
+
}
|
|
29
32
|
|
|
30
33
|
:host {
|
|
31
|
-
@each $token, $value in $tokens {
|
|
32
|
-
--_#{$token}: var(--md-ripple-#{$token}, #{$value});
|
|
33
|
-
}
|
|
34
|
-
|
|
35
34
|
display: flex;
|
|
36
35
|
margin: auto;
|
|
37
36
|
pointer-events: none;
|
|
@@ -66,7 +65,7 @@
|
|
|
66
65
|
}
|
|
67
66
|
|
|
68
67
|
&::before {
|
|
69
|
-
background-color:
|
|
68
|
+
background-color: map.get($tokens, 'hover-color');
|
|
70
69
|
inset: 0;
|
|
71
70
|
transition: opacity 15ms linear, background-color 15ms linear;
|
|
72
71
|
}
|
|
@@ -75,7 +74,7 @@
|
|
|
75
74
|
// press ripple fade-out
|
|
76
75
|
background: radial-gradient(
|
|
77
76
|
closest-side,
|
|
78
|
-
|
|
77
|
+
map.get($tokens, 'pressed-color') max(calc(100% - 70px), 65%),
|
|
79
78
|
transparent 100%
|
|
80
79
|
);
|
|
81
80
|
transform-origin: center center;
|
|
@@ -84,13 +83,13 @@
|
|
|
84
83
|
}
|
|
85
84
|
|
|
86
85
|
.hovered::before {
|
|
87
|
-
background-color:
|
|
88
|
-
opacity:
|
|
86
|
+
background-color: map.get($tokens, 'hover-color');
|
|
87
|
+
opacity: map.get($tokens, 'hover-opacity');
|
|
89
88
|
}
|
|
90
89
|
|
|
91
90
|
.pressed::after {
|
|
92
91
|
// press ripple fade-in
|
|
93
|
-
opacity:
|
|
92
|
+
opacity: map.get($tokens, 'pressed-opacity');
|
|
94
93
|
transition-duration: 105ms;
|
|
95
94
|
}
|
|
96
95
|
}
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { css } from 'lit';
|
|
7
|
-
export const styles = css `:host{
|
|
7
|
+
export const styles = css `:host{display:flex;margin:auto;pointer-events:none}:host([disabled]){display:none}@media(forced-colors: active){:host{display:none}}:host,.surface{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.surface{-webkit-tap-highlight-color:rgba(0,0,0,0)}.surface::before,.surface::after{content:"";opacity:0;position:absolute}.surface::before{background-color:var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));inset:0;transition:opacity 15ms linear,background-color 15ms linear}.surface::after{background:radial-gradient(closest-side, var(--md-ripple-pressed-color, var(--md-sys-color-on-surface, #1d1b20)) max(100% - 70px, 65%), transparent 100%);transform-origin:center center;transition:opacity 375ms linear}.hovered::before{background-color:var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-ripple-hover-opacity, 0.08)}.pressed::after{opacity:var(--md-ripple-pressed-opacity, 0.12);transition-duration:105ms}/*# sourceMappingURL=ripple-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=ripple-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ripple-styles.css.js","sourceRoot":"","sources":["ripple-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{
|
|
1
|
+
{"version":3,"file":"ripple-styles.css.js","sourceRoot":"","sources":["ripple-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{display:flex;margin:auto;pointer-events:none}:host([disabled]){display:none}@media(forced-colors: active){:host{display:none}}:host,.surface{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.surface{-webkit-tap-highlight-color:rgba(0,0,0,0)}.surface::before,.surface::after{content:\"\";opacity:0;position:absolute}.surface::before{background-color:var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));inset:0;transition:opacity 15ms linear,background-color 15ms linear}.surface::after{background:radial-gradient(closest-side, var(--md-ripple-pressed-color, var(--md-sys-color-on-surface, #1d1b20)) max(100% - 70px, 65%), transparent 100%);transform-origin:center center;transition:opacity 375ms linear}.hovered::before{background-color:var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-ripple-hover-opacity, 0.08)}.pressed::after{opacity:var(--md-ripple-pressed-opacity, 0.12);transition-duration:105ms}/*# sourceMappingURL=ripple-styles.css.map */\n`;\n "]}
|