@universal-material/web 3.0.134 → 3.0.136
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/checkbox/checkbox.d.ts +1 -1
- package/checkbox/checkbox.d.ts.map +1 -1
- package/checkbox/checkbox.js +4 -6
- package/checkbox/checkbox.js.map +1 -1
- package/checkbox/checkbox.styles.d.ts.map +1 -1
- package/checkbox/checkbox.styles.js +0 -65
- package/checkbox/checkbox.styles.js.map +1 -1
- package/chip/chip.js +2 -2
- package/chip/chip.js.map +1 -1
- package/chip/chip.styles.d.ts.map +1 -1
- package/chip/chip.styles.js +4 -0
- package/chip/chip.styles.js.map +1 -1
- package/custom-elements.json +1546 -1143
- package/package.json +1 -1
- package/radio/radio.d.ts +1 -1
- package/radio/radio.d.ts.map +1 -1
- package/radio/radio.js +1 -2
- package/radio/radio.js.map +1 -1
- package/radio/radio.styles.d.ts.map +1 -1
- package/radio/radio.styles.js +0 -65
- package/radio/radio.styles.js.map +1 -1
- package/shared/menu-field/menu-field-navigation-controller.d.ts.map +1 -1
- package/shared/menu-field/menu-field-navigation-controller.js +0 -1
- package/shared/menu-field/menu-field-navigation-controller.js.map +1 -1
- package/shared/selection-control/checkbox-base.d.ts +1 -0
- package/shared/selection-control/checkbox-base.d.ts.map +1 -0
- package/shared/selection-control/checkbox-base.js +7 -0
- package/shared/selection-control/checkbox-base.js.map +1 -0
- package/shared/selection-control/selection-control-list-item.d.ts.map +1 -1
- package/shared/selection-control/selection-control-list-item.js +9 -5
- package/shared/selection-control/selection-control-list-item.js.map +1 -1
- package/shared/selection-control/selection-control.d.ts +6 -0
- package/shared/selection-control/selection-control.d.ts.map +1 -1
- package/shared/selection-control/selection-control.js +67 -10
- package/shared/selection-control/selection-control.js.map +1 -1
- package/shared/selection-control/selection-control.styles.d.ts.map +1 -1
- package/shared/selection-control/selection-control.styles.js +0 -1
- package/shared/selection-control/selection-control.styles.js.map +1 -1
- package/switch/switch.d.ts +1 -1
- package/switch/switch.d.ts.map +1 -1
- package/switch/switch.js +7 -9
- package/switch/switch.js.map +1 -1
- package/switch/switch.styles.d.ts.map +1 -1
- package/switch/switch.styles.js +0 -65
- package/switch/switch.styles.js.map +1 -1
package/switch/switch.styles.js
CHANGED
|
@@ -1,70 +1,5 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
export const styles = css `
|
|
3
|
-
:host {
|
|
4
|
-
--_state-layer-padding: var(--u-switch-state-layer-padding, 4px);
|
|
5
|
-
--_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);
|
|
6
|
-
--_indicator-color: var(--u-switch-indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
|
|
7
|
-
display: inline-block;
|
|
8
|
-
vertical-align: middle;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.container {
|
|
12
|
-
cursor: pointer;
|
|
13
|
-
position: relative;
|
|
14
|
-
width: var(--_width);
|
|
15
|
-
height: var(--_height);
|
|
16
|
-
padding: var(--_state-layer-padding);
|
|
17
|
-
border-radius: var(--u-shape-corner-full, 9999px);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
:host([hide-state-layer]) .container {
|
|
21
|
-
width: var(--_indicator-size);
|
|
22
|
-
height: var(--_indicator-size);
|
|
23
|
-
padding: 0;
|
|
24
|
-
}
|
|
25
|
-
:host([hide-state-layer]) u-ripple {
|
|
26
|
-
display: none;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
input {
|
|
30
|
-
cursor: pointer;
|
|
31
|
-
width: 100%;
|
|
32
|
-
height: 100%;
|
|
33
|
-
padding: 0;
|
|
34
|
-
margin: 0;
|
|
35
|
-
border-radius: inherit;
|
|
36
|
-
appearance: none;
|
|
37
|
-
pointer-events: none;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
u-ripple {
|
|
41
|
-
padding: var(--_state-layer-padding);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.indicator-container {
|
|
45
|
-
position: absolute;
|
|
46
|
-
display: flex;
|
|
47
|
-
align-items: center;
|
|
48
|
-
justify-content: center;
|
|
49
|
-
inset: 0;
|
|
50
|
-
pointer-events: none;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
input:checked ~ .indicator-container {
|
|
54
|
-
--_indicator-color: var(--u-switch-indicator-selected-color, var(--u-color-primary, rgb(103, 80, 164)));
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
:host([disabled]) {
|
|
58
|
-
opacity: var(--u-switch-disabled-state-opacity, 0.38);
|
|
59
|
-
}
|
|
60
|
-
:host([disabled]) input,
|
|
61
|
-
:host([disabled]) .container {
|
|
62
|
-
cursor: default;
|
|
63
|
-
}
|
|
64
|
-
:host([disabled]) .indicator-container {
|
|
65
|
-
--_indicator-color: var(--u-switch-indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));
|
|
66
|
-
}
|
|
67
|
-
|
|
68
3
|
:host {
|
|
69
4
|
--_width: 3.25rem;
|
|
70
5
|
--_height: 2rem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.styles.js","sourceRoot":"","sources":["../../src/switch/switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC
|
|
1
|
+
{"version":3,"file":"switch.styles.js","sourceRoot":"","sources":["../../src/switch/switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2EzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --_width: 3.25rem;\n --_height: 2rem;\n --_state-layer-padding: 0;\n --_selected-track-background: var(--u-switch-track-bg-color, var(--u-color-primary, rgb(103, 80, 164)));\n --_state-layer-size: var(--u-switch-state-layer-size, 2.5rem);\n --_unselected-color: var(--u-switch-track-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n --_unselected-handle-size: var(--u-swich-unselected-handle-size, 1rem);\n --_selected-handle-size: var(--u-swich-unselected-handle-size, 1.5rem);\n --_active-handle-size: var(--u-swich-unselected-handle-size, 1.75rem);\n }\n\n .indicator-container {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n width: var(--_height);\n transition: width 200ms;\n }\n\n .state-layer,\n .indicator {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .indicator {\n width: var(--_height);\n height: var(--_height);\n }\n\n .state-layer {\n flex-shrink: 0;\n width: var(--_state-layer-size);\n height: var(--_state-layer-size);\n border-radius: var(--u-shape-corner-full, 9999px);\n }\n\n .handle {\n width: var(--_unselected-handle-size);\n height: var(--_unselected-handle-size);\n background-color: var(--u-switch-unselected-handle-color, var(--_unselected-color));\n border-radius: var(--u-switch-handle-shape-corner, var(--u-shape-corner-full, 9999px));\n transition: background 200ms, width 200ms, height 200ms;\n }\n\n input {\n border: var(--u-switch-track-width, 0.125rem) solid var(--u-switch-unselected-track-outline-color, var(--_unselected-color));\n background-color: var(--u-switch-unselected-track-bg-color, var(--u-color-surface-container-highest, rgb(230, 224, 233)));\n transition: background 200ms, border-color 200ms;\n }\n input:checked {\n background-color: var(--_selected-track-background);\n border-color: var(--_selected-track-background);\n }\n input:checked ~ .indicator-container {\n width: 100%;\n }\n input:checked ~ .indicator-container .handle {\n width: var(--_selected-handle-size);\n height: var(--_selected-handle-size);\n background-color: var(--u-switch-selected-handle-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n }\n\n @media (hover: hover) {\n :host(:not([disabled]):hover) .state-layer {\n background-color: rgba(var(--u-color-on-surface-rgb, ), var(--u-switch-state-layer-hover-opacity, var(--u-state-hover-opacity, 0.08)));\n }\n }\n :host(:not([disabled]):active) .indicator-container .handle {\n width: var(--_active-handle-size);\n height: var(--_active-handle-size);\n }\n`;\n"]}
|