@cloud-ru/ds-calendar 1.0.15-preview-a0540d7f.0 → 1.0.16
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/CHANGELOG.md +10 -0
- package/dist/cjs/helperComponents/Item/styles.module.css +33 -30
- package/dist/cjs/style.css +33 -30
- package/dist/esm/helperComponents/Item/styles.module.css +33 -30
- package/dist/esm/style.css +33 -30
- package/dist/tsconfig.cjs.tsbuildinfo +1 -1
- package/dist/tsconfig.esm.tsbuildinfo +1 -1
- package/package.json +12 -12
- package/src/helperComponents/Item/styles.module.scss +22 -18
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,16 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## 1.0.16 (2026-09-14)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @ds/calendar
|
|
9
|
+
|
|
10
|
+
## 1.0.15 (2026-09-14)
|
|
11
|
+
|
|
12
|
+
### Bug Fixes
|
|
13
|
+
|
|
14
|
+
- **FF-8945:** correct calendar Item disabled+checked appearance ([54c1af5](https://github.com/cloud-ru-tech/snack-v2/commit/54c1af5b74f68f818cf37ede0aa0bd588a5c7d67))
|
|
15
|
+
|
|
6
16
|
## 1.0.14 (2026-09-10)
|
|
7
17
|
|
|
8
18
|
**Note:** Version bump only for package @ds/calendar
|
|
@@ -42,96 +42,96 @@
|
|
|
42
42
|
.container:not([data-disabled]){
|
|
43
43
|
cursor:pointer;
|
|
44
44
|
}
|
|
45
|
-
.container
|
|
45
|
+
.container .stateLayer{
|
|
46
46
|
position:absolute;
|
|
47
47
|
inset:0;
|
|
48
48
|
border-radius:inherit;
|
|
49
49
|
}
|
|
50
|
-
.container
|
|
50
|
+
.container .stateLayer[data-state=borderOnBackground]{
|
|
51
51
|
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
|
|
52
52
|
border-style:solid;
|
|
53
53
|
border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
|
|
54
54
|
}
|
|
55
|
-
.container
|
|
55
|
+
.container .stateLayer[data-state=emptyNeutralOnBackground]{
|
|
56
56
|
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
|
|
57
57
|
}
|
|
58
|
-
.container
|
|
58
|
+
.container .stateLayer[data-state=activatedOnBackground]{
|
|
59
59
|
background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
|
|
60
60
|
}
|
|
61
|
-
.container
|
|
61
|
+
.container .stateLayer[data-state=versionOnColor]{
|
|
62
62
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
|
|
63
63
|
}
|
|
64
|
-
.container
|
|
64
|
+
.container .stateLayer[data-state=emptyVersionOnColor]{
|
|
65
65
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
|
|
66
66
|
}
|
|
67
|
-
.container
|
|
67
|
+
.container .stateLayer[data-state=inversionOnColor]{
|
|
68
68
|
background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
|
|
69
69
|
}
|
|
70
|
-
.container
|
|
70
|
+
.container .stateLayer[data-state=emptyInversionOnColor]{
|
|
71
71
|
background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
|
|
72
72
|
}
|
|
73
|
-
.container
|
|
73
|
+
.container .stateLayer[data-state=emptyDarkOnAccent]{
|
|
74
74
|
background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
|
|
75
75
|
}
|
|
76
76
|
@media (hover: hover){
|
|
77
|
-
.container:
|
|
77
|
+
.container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
|
|
78
78
|
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
|
|
79
79
|
}
|
|
80
|
-
.container:
|
|
80
|
+
.container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
|
|
81
81
|
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
|
|
82
82
|
}
|
|
83
|
-
.container:
|
|
83
|
+
.container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
|
|
84
84
|
background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
|
|
85
85
|
}
|
|
86
|
-
.container:
|
|
86
|
+
.container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
|
|
87
87
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
|
|
88
88
|
}
|
|
89
|
-
.container:
|
|
89
|
+
.container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
|
|
90
90
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
|
|
91
91
|
}
|
|
92
|
-
.container:
|
|
92
|
+
.container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
|
|
93
93
|
background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
|
|
94
94
|
}
|
|
95
|
-
.container:
|
|
95
|
+
.container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
|
|
96
96
|
background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
|
|
97
97
|
}
|
|
98
|
-
.container:
|
|
98
|
+
.container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
|
|
99
99
|
background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
|
-
.container
|
|
102
|
+
.container{
|
|
103
103
|
}
|
|
104
|
-
.container
|
|
104
|
+
.container[data-loading] .stateLayer[data-state=borderOnBackground], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
|
|
105
105
|
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
|
|
106
106
|
}
|
|
107
|
-
.container
|
|
107
|
+
.container[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
|
|
108
108
|
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
|
|
109
109
|
}
|
|
110
|
-
.container
|
|
110
|
+
.container[data-loading] .stateLayer[data-state=activatedOnBackground], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
|
|
111
111
|
background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
|
|
112
112
|
}
|
|
113
|
-
.container
|
|
113
|
+
.container[data-loading] .stateLayer[data-state=versionOnColor], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
|
|
114
114
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
|
|
115
115
|
}
|
|
116
|
-
.container
|
|
116
|
+
.container[data-loading] .stateLayer[data-state=emptyVersionOnColor], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
|
|
117
117
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
|
|
118
118
|
}
|
|
119
|
-
.container
|
|
119
|
+
.container[data-loading] .stateLayer[data-state=inversionOnColor], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
|
|
120
120
|
background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
|
|
121
121
|
}
|
|
122
|
-
.container
|
|
122
|
+
.container[data-loading] .stateLayer[data-state=emptyInversionOnColor], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
|
|
123
123
|
background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
|
|
124
124
|
}
|
|
125
|
-
.container
|
|
125
|
+
.container[data-loading] .stateLayer[data-state=emptyDarkOnAccent], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
|
|
126
126
|
background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
|
|
127
127
|
}
|
|
128
|
-
.container:not([data-
|
|
128
|
+
.container:not([data-another])[data-checked]{
|
|
129
129
|
background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
|
|
130
130
|
}
|
|
131
|
-
.container:not([data-
|
|
131
|
+
.container:not([data-another])[data-range-position=in]{
|
|
132
132
|
background-color:transparent;
|
|
133
133
|
}
|
|
134
|
-
.container
|
|
134
|
+
.container[data-another][data-checked][data-range-position=start], .container[data-another][data-checked][data-range-position=end], .container[data-another][data-checked][data-range-position=start-end]{
|
|
135
135
|
background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
|
|
136
136
|
}
|
|
137
137
|
|
|
@@ -147,6 +147,9 @@
|
|
|
147
147
|
.label[data-disabled]{
|
|
148
148
|
color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
|
|
149
149
|
}
|
|
150
|
+
.label[data-disabled][data-checked]:not([data-range-position=in]){
|
|
151
|
+
color:var(--sn-theme-color-available-onComplementary, #ffffff);
|
|
152
|
+
}
|
|
150
153
|
.label:not([data-disabled], [data-another])[data-checked]:not([data-range-position=in]){
|
|
151
154
|
color:var(--sn-theme-color-available-onComplementary, #ffffff);
|
|
152
155
|
}
|
|
@@ -225,7 +228,7 @@
|
|
|
225
228
|
.root:not([data-visible]) .stateLayer{
|
|
226
229
|
display:none;
|
|
227
230
|
}
|
|
228
|
-
.root[data-disabled] .stateLayer{
|
|
231
|
+
.root[data-disabled]:not([data-checked]) .stateLayer{
|
|
229
232
|
display:none;
|
|
230
233
|
}
|
|
231
234
|
.root[data-size=s]{
|
package/dist/cjs/style.css
CHANGED
|
@@ -230,96 +230,96 @@
|
|
|
230
230
|
.container:not([data-disabled]){
|
|
231
231
|
cursor:pointer;
|
|
232
232
|
}
|
|
233
|
-
.container
|
|
233
|
+
.container .stateLayer{
|
|
234
234
|
position:absolute;
|
|
235
235
|
inset:0;
|
|
236
236
|
border-radius:inherit;
|
|
237
237
|
}
|
|
238
|
-
.container
|
|
238
|
+
.container .stateLayer[data-state=borderOnBackground]{
|
|
239
239
|
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
|
|
240
240
|
border-style:solid;
|
|
241
241
|
border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
|
|
242
242
|
}
|
|
243
|
-
.container
|
|
243
|
+
.container .stateLayer[data-state=emptyNeutralOnBackground]{
|
|
244
244
|
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
|
|
245
245
|
}
|
|
246
|
-
.container
|
|
246
|
+
.container .stateLayer[data-state=activatedOnBackground]{
|
|
247
247
|
background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
|
|
248
248
|
}
|
|
249
|
-
.container
|
|
249
|
+
.container .stateLayer[data-state=versionOnColor]{
|
|
250
250
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
|
|
251
251
|
}
|
|
252
|
-
.container
|
|
252
|
+
.container .stateLayer[data-state=emptyVersionOnColor]{
|
|
253
253
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
|
|
254
254
|
}
|
|
255
|
-
.container
|
|
255
|
+
.container .stateLayer[data-state=inversionOnColor]{
|
|
256
256
|
background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
|
|
257
257
|
}
|
|
258
|
-
.container
|
|
258
|
+
.container .stateLayer[data-state=emptyInversionOnColor]{
|
|
259
259
|
background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
|
|
260
260
|
}
|
|
261
|
-
.container
|
|
261
|
+
.container .stateLayer[data-state=emptyDarkOnAccent]{
|
|
262
262
|
background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
|
|
263
263
|
}
|
|
264
264
|
@media (hover: hover){
|
|
265
|
-
.container:
|
|
265
|
+
.container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
|
|
266
266
|
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
|
|
267
267
|
}
|
|
268
|
-
.container:
|
|
268
|
+
.container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
|
|
269
269
|
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
|
|
270
270
|
}
|
|
271
|
-
.container:
|
|
271
|
+
.container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
|
|
272
272
|
background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
|
|
273
273
|
}
|
|
274
|
-
.container:
|
|
274
|
+
.container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
|
|
275
275
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
|
|
276
276
|
}
|
|
277
|
-
.container:
|
|
277
|
+
.container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
|
|
278
278
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
|
|
279
279
|
}
|
|
280
|
-
.container:
|
|
280
|
+
.container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
|
|
281
281
|
background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
|
|
282
282
|
}
|
|
283
|
-
.container:
|
|
283
|
+
.container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
|
|
284
284
|
background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
|
|
285
285
|
}
|
|
286
|
-
.container:
|
|
286
|
+
.container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
|
|
287
287
|
background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
|
|
288
288
|
}
|
|
289
289
|
}
|
|
290
|
-
.container
|
|
290
|
+
.container{
|
|
291
291
|
}
|
|
292
|
-
.container
|
|
292
|
+
.container[data-loading] .stateLayer[data-state=borderOnBackground], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
|
|
293
293
|
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
|
|
294
294
|
}
|
|
295
|
-
.container
|
|
295
|
+
.container[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
|
|
296
296
|
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
|
|
297
297
|
}
|
|
298
|
-
.container
|
|
298
|
+
.container[data-loading] .stateLayer[data-state=activatedOnBackground], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
|
|
299
299
|
background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
|
|
300
300
|
}
|
|
301
|
-
.container
|
|
301
|
+
.container[data-loading] .stateLayer[data-state=versionOnColor], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
|
|
302
302
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
|
|
303
303
|
}
|
|
304
|
-
.container
|
|
304
|
+
.container[data-loading] .stateLayer[data-state=emptyVersionOnColor], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
|
|
305
305
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
|
|
306
306
|
}
|
|
307
|
-
.container
|
|
307
|
+
.container[data-loading] .stateLayer[data-state=inversionOnColor], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
|
|
308
308
|
background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
|
|
309
309
|
}
|
|
310
|
-
.container
|
|
310
|
+
.container[data-loading] .stateLayer[data-state=emptyInversionOnColor], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
|
|
311
311
|
background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
|
|
312
312
|
}
|
|
313
|
-
.container
|
|
313
|
+
.container[data-loading] .stateLayer[data-state=emptyDarkOnAccent], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
|
|
314
314
|
background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
|
|
315
315
|
}
|
|
316
|
-
.container:not([data-
|
|
316
|
+
.container:not([data-another])[data-checked]{
|
|
317
317
|
background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
|
|
318
318
|
}
|
|
319
|
-
.container:not([data-
|
|
319
|
+
.container:not([data-another])[data-range-position=in]{
|
|
320
320
|
background-color:transparent;
|
|
321
321
|
}
|
|
322
|
-
.container
|
|
322
|
+
.container[data-another][data-checked][data-range-position=start], .container[data-another][data-checked][data-range-position=end], .container[data-another][data-checked][data-range-position=start-end]{
|
|
323
323
|
background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
|
|
324
324
|
}
|
|
325
325
|
|
|
@@ -335,6 +335,9 @@
|
|
|
335
335
|
.label[data-disabled]{
|
|
336
336
|
color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
|
|
337
337
|
}
|
|
338
|
+
.label[data-disabled][data-checked]:not([data-range-position=in]){
|
|
339
|
+
color:var(--sn-theme-color-available-onComplementary, #ffffff);
|
|
340
|
+
}
|
|
338
341
|
.label:not([data-disabled], [data-another])[data-checked]:not([data-range-position=in]){
|
|
339
342
|
color:var(--sn-theme-color-available-onComplementary, #ffffff);
|
|
340
343
|
}
|
|
@@ -413,7 +416,7 @@
|
|
|
413
416
|
.root:not([data-visible]) .stateLayer{
|
|
414
417
|
display:none;
|
|
415
418
|
}
|
|
416
|
-
.root[data-disabled] .stateLayer{
|
|
419
|
+
.root[data-disabled]:not([data-checked]) .stateLayer{
|
|
417
420
|
display:none;
|
|
418
421
|
}
|
|
419
422
|
.root[data-size=s]{
|
|
@@ -42,96 +42,96 @@
|
|
|
42
42
|
.container:not([data-disabled]){
|
|
43
43
|
cursor:pointer;
|
|
44
44
|
}
|
|
45
|
-
.container
|
|
45
|
+
.container .stateLayer{
|
|
46
46
|
position:absolute;
|
|
47
47
|
inset:0;
|
|
48
48
|
border-radius:inherit;
|
|
49
49
|
}
|
|
50
|
-
.container
|
|
50
|
+
.container .stateLayer[data-state=borderOnBackground]{
|
|
51
51
|
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
|
|
52
52
|
border-style:solid;
|
|
53
53
|
border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
|
|
54
54
|
}
|
|
55
|
-
.container
|
|
55
|
+
.container .stateLayer[data-state=emptyNeutralOnBackground]{
|
|
56
56
|
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
|
|
57
57
|
}
|
|
58
|
-
.container
|
|
58
|
+
.container .stateLayer[data-state=activatedOnBackground]{
|
|
59
59
|
background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
|
|
60
60
|
}
|
|
61
|
-
.container
|
|
61
|
+
.container .stateLayer[data-state=versionOnColor]{
|
|
62
62
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
|
|
63
63
|
}
|
|
64
|
-
.container
|
|
64
|
+
.container .stateLayer[data-state=emptyVersionOnColor]{
|
|
65
65
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
|
|
66
66
|
}
|
|
67
|
-
.container
|
|
67
|
+
.container .stateLayer[data-state=inversionOnColor]{
|
|
68
68
|
background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
|
|
69
69
|
}
|
|
70
|
-
.container
|
|
70
|
+
.container .stateLayer[data-state=emptyInversionOnColor]{
|
|
71
71
|
background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
|
|
72
72
|
}
|
|
73
|
-
.container
|
|
73
|
+
.container .stateLayer[data-state=emptyDarkOnAccent]{
|
|
74
74
|
background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
|
|
75
75
|
}
|
|
76
76
|
@media (hover: hover){
|
|
77
|
-
.container:
|
|
77
|
+
.container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
|
|
78
78
|
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
|
|
79
79
|
}
|
|
80
|
-
.container:
|
|
80
|
+
.container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
|
|
81
81
|
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
|
|
82
82
|
}
|
|
83
|
-
.container:
|
|
83
|
+
.container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
|
|
84
84
|
background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
|
|
85
85
|
}
|
|
86
|
-
.container:
|
|
86
|
+
.container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
|
|
87
87
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
|
|
88
88
|
}
|
|
89
|
-
.container:
|
|
89
|
+
.container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
|
|
90
90
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
|
|
91
91
|
}
|
|
92
|
-
.container:
|
|
92
|
+
.container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
|
|
93
93
|
background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
|
|
94
94
|
}
|
|
95
|
-
.container:
|
|
95
|
+
.container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
|
|
96
96
|
background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
|
|
97
97
|
}
|
|
98
|
-
.container:
|
|
98
|
+
.container:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
|
|
99
99
|
background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
|
-
.container
|
|
102
|
+
.container{
|
|
103
103
|
}
|
|
104
|
-
.container
|
|
104
|
+
.container[data-loading] .stateLayer[data-state=borderOnBackground], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
|
|
105
105
|
border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
|
|
106
106
|
}
|
|
107
|
-
.container
|
|
107
|
+
.container[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
|
|
108
108
|
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
|
|
109
109
|
}
|
|
110
|
-
.container
|
|
110
|
+
.container[data-loading] .stateLayer[data-state=activatedOnBackground], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
|
|
111
111
|
background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
|
|
112
112
|
}
|
|
113
|
-
.container
|
|
113
|
+
.container[data-loading] .stateLayer[data-state=versionOnColor], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
|
|
114
114
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
|
|
115
115
|
}
|
|
116
|
-
.container
|
|
116
|
+
.container[data-loading] .stateLayer[data-state=emptyVersionOnColor], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
|
|
117
117
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
|
|
118
118
|
}
|
|
119
|
-
.container
|
|
119
|
+
.container[data-loading] .stateLayer[data-state=inversionOnColor], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
|
|
120
120
|
background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
|
|
121
121
|
}
|
|
122
|
-
.container
|
|
122
|
+
.container[data-loading] .stateLayer[data-state=emptyInversionOnColor], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
|
|
123
123
|
background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
|
|
124
124
|
}
|
|
125
|
-
.container
|
|
125
|
+
.container[data-loading] .stateLayer[data-state=emptyDarkOnAccent], .container:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .container[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
|
|
126
126
|
background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
|
|
127
127
|
}
|
|
128
|
-
.container:not([data-
|
|
128
|
+
.container:not([data-another])[data-checked]{
|
|
129
129
|
background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
|
|
130
130
|
}
|
|
131
|
-
.container:not([data-
|
|
131
|
+
.container:not([data-another])[data-range-position=in]{
|
|
132
132
|
background-color:transparent;
|
|
133
133
|
}
|
|
134
|
-
.container
|
|
134
|
+
.container[data-another][data-checked][data-range-position=start], .container[data-another][data-checked][data-range-position=end], .container[data-another][data-checked][data-range-position=start-end]{
|
|
135
135
|
background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
|
|
136
136
|
}
|
|
137
137
|
|
|
@@ -147,6 +147,9 @@
|
|
|
147
147
|
.label[data-disabled]{
|
|
148
148
|
color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
|
|
149
149
|
}
|
|
150
|
+
.label[data-disabled][data-checked]:not([data-range-position=in]){
|
|
151
|
+
color:var(--sn-theme-color-available-onComplementary, #ffffff);
|
|
152
|
+
}
|
|
150
153
|
.label:not([data-disabled], [data-another])[data-checked]:not([data-range-position=in]){
|
|
151
154
|
color:var(--sn-theme-color-available-onComplementary, #ffffff);
|
|
152
155
|
}
|
|
@@ -225,7 +228,7 @@
|
|
|
225
228
|
.root:not([data-visible]) .stateLayer{
|
|
226
229
|
display:none;
|
|
227
230
|
}
|
|
228
|
-
.root[data-disabled] .stateLayer{
|
|
231
|
+
.root[data-disabled]:not([data-checked]) .stateLayer{
|
|
229
232
|
display:none;
|
|
230
233
|
}
|
|
231
234
|
.root[data-size=s]{
|