@unifiedsoftware/styles 1.1.2 → 1.1.3
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/css/fci.css +8 -2
- package/css/fci.min.css +1 -1
- package/css/styles.css +101 -323
- package/css/styles.min.css +1 -1
- package/package.json +1 -1
- package/scss/_utilities.scss +117 -0
- package/scss/components/_badge.scss +0 -4
- package/scss/components/_button.scss +0 -5
- package/scss/components/_card.scss +0 -3
- package/scss/components/_checkbox.scss +8 -0
- package/scss/components/_chip.scss +4 -4
- package/scss/components/_input.scss +0 -5
- package/scss/components/_list.scss +0 -3
- package/scss/components/_menu.scss +0 -5
- package/scss/components/_radio.scss +8 -0
- package/scss/components/_swipe.scss +0 -1
- package/scss/components/_switch.scss +8 -1
- package/scss/components/_tabs.scss +0 -3
- package/scss/components/_toolbar.scss +0 -5
- package/scss/mixins/_outline.scss +53 -53
- package/scss/mixins/_overlay.scss +58 -41
- package/scss/themes/fci/components/_button.scss +8 -0
- package/scss/themes/fci/components/_input.scss +0 -2
package/css/styles.css
CHANGED
|
@@ -10,37 +10,6 @@
|
|
|
10
10
|
display: flex;
|
|
11
11
|
align-items: center;
|
|
12
12
|
}
|
|
13
|
-
.us-toolbar > .us-overlay {
|
|
14
|
-
position: absolute;
|
|
15
|
-
inset: 0px;
|
|
16
|
-
border-radius: inherit;
|
|
17
|
-
overflow: hidden;
|
|
18
|
-
color: var(--us-overlay-color);
|
|
19
|
-
opacity: var(--us-overlay-opacity);
|
|
20
|
-
z-index: -1;
|
|
21
|
-
pointer-events: none;
|
|
22
|
-
background-color: currentColor;
|
|
23
|
-
transition: background-color, opacity, 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
24
|
-
}
|
|
25
|
-
.us-toolbar:hover > .us-overlay {
|
|
26
|
-
color: var(--us-_hover-overlay-color, var(--us-overlay-color));
|
|
27
|
-
opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
|
|
28
|
-
}
|
|
29
|
-
.us-toolbar:active > .us-overlay {
|
|
30
|
-
color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
|
|
31
|
-
opacity: var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
|
|
32
|
-
}
|
|
33
|
-
.us-toolbar--focus > .us-overlay, .us-toolbar--focus:hover > .us-overlay, .us-toolbar:focus > .us-overlay {
|
|
34
|
-
color: var(--us-_focus-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
|
|
35
|
-
opacity: var(--us-_focus-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
|
|
36
|
-
}
|
|
37
|
-
.us-toolbar > .us-outline-b {
|
|
38
|
-
position: absolute;
|
|
39
|
-
inset: 0px;
|
|
40
|
-
border-radius: inherit;
|
|
41
|
-
overflow: hidden;
|
|
42
|
-
border-bottom: var(--us-outline-border-width) solid var(--us-outline-border-color);
|
|
43
|
-
}
|
|
44
13
|
.us-toolbar__container {
|
|
45
14
|
width: 100%;
|
|
46
15
|
margin: 0 auto;
|
|
@@ -79,30 +48,6 @@
|
|
|
79
48
|
-webkit-line-clamp: 1;
|
|
80
49
|
}
|
|
81
50
|
|
|
82
|
-
.us-badge > .us-overlay {
|
|
83
|
-
position: absolute;
|
|
84
|
-
inset: 0px;
|
|
85
|
-
border-radius: inherit;
|
|
86
|
-
overflow: hidden;
|
|
87
|
-
color: var(--us-overlay-color);
|
|
88
|
-
opacity: var(--us-overlay-opacity);
|
|
89
|
-
z-index: -1;
|
|
90
|
-
pointer-events: none;
|
|
91
|
-
background-color: currentColor;
|
|
92
|
-
transition: background-color, opacity, 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
93
|
-
}
|
|
94
|
-
.us-badge:hover > .us-overlay {
|
|
95
|
-
color: var(--us-_hover-overlay-color, var(--us-overlay-color));
|
|
96
|
-
opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
|
|
97
|
-
}
|
|
98
|
-
.us-badge:active > .us-overlay {
|
|
99
|
-
color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
|
|
100
|
-
opacity: var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
|
|
101
|
-
}
|
|
102
|
-
.us-badge--focus > .us-overlay, .us-badge--focus:hover > .us-overlay, .us-badge:focus > .us-overlay {
|
|
103
|
-
color: var(--us-_focus-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
|
|
104
|
-
opacity: var(--us-_focus-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
|
|
105
|
-
}
|
|
106
51
|
.us-badge:not(.us-badge--unstyled) {
|
|
107
52
|
min-width: var(--us-badge-min-width);
|
|
108
53
|
min-height: var(--us-badge-min-height);
|
|
@@ -175,56 +120,10 @@
|
|
|
175
120
|
align-items: center;
|
|
176
121
|
gap: var(--us-chip-gap);
|
|
177
122
|
}
|
|
178
|
-
.us-chip
|
|
179
|
-
|
|
180
|
-
inset: 0px;
|
|
181
|
-
border-radius: inherit;
|
|
182
|
-
overflow: hidden;
|
|
183
|
-
color: var(--us-overlay-color);
|
|
184
|
-
opacity: var(--us-overlay-opacity);
|
|
185
|
-
z-index: -1;
|
|
186
|
-
pointer-events: none;
|
|
187
|
-
background-color: currentColor;
|
|
188
|
-
transition: background-color, opacity, 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
189
|
-
}
|
|
190
|
-
.us-chip:hover > .us-overlay {
|
|
191
|
-
color: var(--us-_hover-overlay-color, var(--us-overlay-color));
|
|
192
|
-
opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
|
|
193
|
-
}
|
|
194
|
-
.us-chip:active > .us-overlay {
|
|
195
|
-
color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
|
|
196
|
-
opacity: var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
|
|
197
|
-
}
|
|
198
|
-
.us-chip--focus > .us-overlay, .us-chip--focus:hover > .us-overlay, .us-chip:focus > .us-overlay {
|
|
199
|
-
color: var(--us-_focus-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
|
|
200
|
-
opacity: var(--us-_focus-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
|
|
201
|
-
}
|
|
202
|
-
.us-chip > .us-outline {
|
|
203
|
-
position: absolute;
|
|
204
|
-
inset: 0px;
|
|
205
|
-
border-radius: inherit;
|
|
206
|
-
overflow: hidden;
|
|
207
|
-
border-width: var(--us-outline-border-width);
|
|
208
|
-
border-style: solid;
|
|
209
|
-
border-color: var(--us-outline-border-color);
|
|
210
|
-
opacity: var(--us-outline-opacity);
|
|
123
|
+
.us-chip--disabled {
|
|
124
|
+
opacity: 0.6;
|
|
211
125
|
pointer-events: none;
|
|
212
126
|
}
|
|
213
|
-
.us-chip:hover > .us-outline {
|
|
214
|
-
border-width: var(--us-outline-hover-border-width, var(--us-outline-border-width));
|
|
215
|
-
border-color: var(--us-outline-hover-border-color, var(--us-outline-border-color));
|
|
216
|
-
opacity: var(--us-outline-hover-opacity, var(--us-outline-opacity));
|
|
217
|
-
}
|
|
218
|
-
.us-chip:active > .us-outline {
|
|
219
|
-
border-width: var(--us-outline-active-border-width, var(--us-outline-hover-border-width, var(--us-outline-border-width)));
|
|
220
|
-
border-color: var(--us-outline-active-border-color, var(--us-outline-hover-border-color, var(--us-outline-border-color)));
|
|
221
|
-
opacity: var(--us-outline-active-opacity, var(--us-outline-hover-opacity, var(--us-outline-opacity)));
|
|
222
|
-
}
|
|
223
|
-
.us-chip--focus > .us-outline, .us-chip--focus:hover > .us-outline, .us-chip:focus > .us-outline {
|
|
224
|
-
border-width: var(--us-outline-focus-border-width, var(--us-outline-hover-border-width, var(--us-outline-border-width)));
|
|
225
|
-
border-color: var(--us-outline-focus-border-color, var(--us-outline-hover-border-color, var(--us-outline-border-color)));
|
|
226
|
-
opacity: var(--us-outline-focus-opacity, var(--us-outline-hover-opacity, var(--us-outline-opacity)));
|
|
227
|
-
}
|
|
228
127
|
.us-chip--closable {
|
|
229
128
|
padding-inline-end: calc(var(--us-chip-padding-x) / 2);
|
|
230
129
|
}
|
|
@@ -273,56 +172,6 @@
|
|
|
273
172
|
.us-button:hover {
|
|
274
173
|
text-decoration: none;
|
|
275
174
|
}
|
|
276
|
-
.us-button > .us-overlay {
|
|
277
|
-
position: absolute;
|
|
278
|
-
inset: 0px;
|
|
279
|
-
border-radius: inherit;
|
|
280
|
-
overflow: hidden;
|
|
281
|
-
color: var(--us-overlay-color);
|
|
282
|
-
opacity: var(--us-overlay-opacity);
|
|
283
|
-
z-index: -1;
|
|
284
|
-
pointer-events: none;
|
|
285
|
-
background-color: currentColor;
|
|
286
|
-
transition: background-color, opacity, 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
287
|
-
}
|
|
288
|
-
.us-button:hover > .us-overlay {
|
|
289
|
-
color: var(--us-_hover-overlay-color, var(--us-overlay-color));
|
|
290
|
-
opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
|
|
291
|
-
}
|
|
292
|
-
.us-button:active > .us-overlay {
|
|
293
|
-
color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
|
|
294
|
-
opacity: var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
|
|
295
|
-
}
|
|
296
|
-
.us-button--focus > .us-overlay, .us-button--focus:hover > .us-overlay, .us-button:focus > .us-overlay {
|
|
297
|
-
color: var(--us-_focus-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
|
|
298
|
-
opacity: var(--us-_focus-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
|
|
299
|
-
}
|
|
300
|
-
.us-button > .us-outline {
|
|
301
|
-
position: absolute;
|
|
302
|
-
inset: 0px;
|
|
303
|
-
border-radius: inherit;
|
|
304
|
-
overflow: hidden;
|
|
305
|
-
border-width: var(--us-outline-border-width);
|
|
306
|
-
border-style: solid;
|
|
307
|
-
border-color: var(--us-outline-border-color);
|
|
308
|
-
opacity: var(--us-outline-opacity);
|
|
309
|
-
pointer-events: none;
|
|
310
|
-
}
|
|
311
|
-
.us-button:hover > .us-outline {
|
|
312
|
-
border-width: var(--us-outline-hover-border-width, var(--us-outline-border-width));
|
|
313
|
-
border-color: var(--us-outline-hover-border-color, var(--us-outline-border-color));
|
|
314
|
-
opacity: var(--us-outline-hover-opacity, var(--us-outline-opacity));
|
|
315
|
-
}
|
|
316
|
-
.us-button:active > .us-outline {
|
|
317
|
-
border-width: var(--us-outline-active-border-width, var(--us-outline-hover-border-width, var(--us-outline-border-width)));
|
|
318
|
-
border-color: var(--us-outline-active-border-color, var(--us-outline-hover-border-color, var(--us-outline-border-color)));
|
|
319
|
-
opacity: var(--us-outline-active-opacity, var(--us-outline-hover-opacity, var(--us-outline-opacity)));
|
|
320
|
-
}
|
|
321
|
-
.us-button--focus > .us-outline, .us-button--focus:hover > .us-outline, .us-button:focus > .us-outline {
|
|
322
|
-
border-width: var(--us-outline-focus-border-width, var(--us-outline-hover-border-width, var(--us-outline-border-width)));
|
|
323
|
-
border-color: var(--us-outline-focus-border-color, var(--us-outline-hover-border-color, var(--us-outline-border-color)));
|
|
324
|
-
opacity: var(--us-outline-focus-opacity, var(--us-outline-hover-opacity, var(--us-outline-opacity)));
|
|
325
|
-
}
|
|
326
175
|
.us-button--block {
|
|
327
176
|
width: 100%;
|
|
328
177
|
}
|
|
@@ -875,56 +724,6 @@
|
|
|
875
724
|
.us-input:not(.us-input--filterable) {
|
|
876
725
|
cursor: pointer;
|
|
877
726
|
}
|
|
878
|
-
.us-input > .us-overlay {
|
|
879
|
-
position: absolute;
|
|
880
|
-
inset: 0px;
|
|
881
|
-
border-radius: inherit;
|
|
882
|
-
overflow: hidden;
|
|
883
|
-
color: var(--us-overlay-color);
|
|
884
|
-
opacity: var(--us-overlay-opacity);
|
|
885
|
-
z-index: -1;
|
|
886
|
-
pointer-events: none;
|
|
887
|
-
background-color: currentColor;
|
|
888
|
-
transition: background-color, opacity, 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
889
|
-
}
|
|
890
|
-
.us-input:hover > .us-overlay {
|
|
891
|
-
color: var(--us-_hover-overlay-color, var(--us-overlay-color));
|
|
892
|
-
opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
|
|
893
|
-
}
|
|
894
|
-
.us-input:active > .us-overlay {
|
|
895
|
-
color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
|
|
896
|
-
opacity: var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
|
|
897
|
-
}
|
|
898
|
-
.us-input--focus > .us-overlay, .us-input--focus:hover > .us-overlay, .us-input:focus > .us-overlay {
|
|
899
|
-
color: var(--us-_focus-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
|
|
900
|
-
opacity: var(--us-_focus-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
|
|
901
|
-
}
|
|
902
|
-
.us-input > .us-outline {
|
|
903
|
-
position: absolute;
|
|
904
|
-
inset: 0px;
|
|
905
|
-
border-radius: inherit;
|
|
906
|
-
overflow: hidden;
|
|
907
|
-
border-width: var(--us-outline-border-width);
|
|
908
|
-
border-style: solid;
|
|
909
|
-
border-color: var(--us-outline-border-color);
|
|
910
|
-
opacity: var(--us-outline-opacity);
|
|
911
|
-
pointer-events: none;
|
|
912
|
-
}
|
|
913
|
-
.us-input:hover > .us-outline {
|
|
914
|
-
border-width: var(--us-outline-hover-border-width, var(--us-outline-border-width));
|
|
915
|
-
border-color: var(--us-outline-hover-border-color, var(--us-outline-border-color));
|
|
916
|
-
opacity: var(--us-outline-hover-opacity, var(--us-outline-opacity));
|
|
917
|
-
}
|
|
918
|
-
.us-input:active > .us-outline {
|
|
919
|
-
border-width: var(--us-outline-active-border-width, var(--us-outline-hover-border-width, var(--us-outline-border-width)));
|
|
920
|
-
border-color: var(--us-outline-active-border-color, var(--us-outline-hover-border-color, var(--us-outline-border-color)));
|
|
921
|
-
opacity: var(--us-outline-active-opacity, var(--us-outline-hover-opacity, var(--us-outline-opacity)));
|
|
922
|
-
}
|
|
923
|
-
.us-input--focus > .us-outline, .us-input--focus:hover > .us-outline, .us-input:focus > .us-outline {
|
|
924
|
-
border-width: var(--us-outline-focus-border-width, var(--us-outline-hover-border-width, var(--us-outline-border-width)));
|
|
925
|
-
border-color: var(--us-outline-focus-border-color, var(--us-outline-hover-border-color, var(--us-outline-border-color)));
|
|
926
|
-
opacity: var(--us-outline-focus-opacity, var(--us-outline-hover-opacity, var(--us-outline-opacity)));
|
|
927
|
-
}
|
|
928
727
|
.us-input--disabled {
|
|
929
728
|
opacity: 0.75;
|
|
930
729
|
pointer-events: none;
|
|
@@ -1053,6 +852,12 @@
|
|
|
1053
852
|
transition: color 0.1s ease-in-out 0.1s, border-color 0.1s ease-in-out 0.1s;
|
|
1054
853
|
overflow: hidden;
|
|
1055
854
|
}
|
|
855
|
+
.us-checkbox--before .us-checkbox__control {
|
|
856
|
+
order: 2;
|
|
857
|
+
}
|
|
858
|
+
.us-checkbox--befire .us-checkbox__label {
|
|
859
|
+
order: 1;
|
|
860
|
+
}
|
|
1056
861
|
.us-checkbox--checked .us-checkbox__control {
|
|
1057
862
|
border-color: var(--us-_checked-checkbox-control-border-color, var(--us-checkbox-control-border-color));
|
|
1058
863
|
color: var(--us-_checked-checkbox-control-color, var(--us-checkbox-control-color));
|
|
@@ -1140,6 +945,12 @@
|
|
|
1140
945
|
transition: color 0.1s ease-in-out 0.1s, border-color 0.1s ease-in-out 0.1s;
|
|
1141
946
|
overflow: hidden;
|
|
1142
947
|
}
|
|
948
|
+
.us-radio--before .us-radio__control {
|
|
949
|
+
order: 2;
|
|
950
|
+
}
|
|
951
|
+
.us-radio--befire .us-radio__label {
|
|
952
|
+
order: 1;
|
|
953
|
+
}
|
|
1143
954
|
.us-radio--checked .us-radio__control {
|
|
1144
955
|
border-color: var(--us-_checked-radio-control-border-color, var(--us-radio-control-border-color));
|
|
1145
956
|
color: var(--us-_checked-radio-control-color, var(--us-radio-control-color));
|
|
@@ -1239,6 +1050,12 @@
|
|
|
1239
1050
|
user-select: none;
|
|
1240
1051
|
-webkit-tap-highlight-color: transparent;
|
|
1241
1052
|
}
|
|
1053
|
+
.us-switch--before .us-switch__control {
|
|
1054
|
+
order: 2;
|
|
1055
|
+
}
|
|
1056
|
+
.us-switch--befire .us-switch__label {
|
|
1057
|
+
order: 1;
|
|
1058
|
+
}
|
|
1242
1059
|
.us-switch--checked .us-switch__control {
|
|
1243
1060
|
background-color: var(--us-_checked-switch-control-color, var(--us-switch-control-color));
|
|
1244
1061
|
}
|
|
@@ -1357,30 +1174,6 @@
|
|
|
1357
1174
|
.us-list-item:hover {
|
|
1358
1175
|
text-decoration: none;
|
|
1359
1176
|
}
|
|
1360
|
-
.us-list-item > .us-overlay {
|
|
1361
|
-
position: absolute;
|
|
1362
|
-
inset: 0px;
|
|
1363
|
-
border-radius: inherit;
|
|
1364
|
-
overflow: hidden;
|
|
1365
|
-
color: var(--us-overlay-color);
|
|
1366
|
-
opacity: var(--us-overlay-opacity);
|
|
1367
|
-
z-index: -1;
|
|
1368
|
-
pointer-events: none;
|
|
1369
|
-
background-color: currentColor;
|
|
1370
|
-
transition: background-color, opacity, 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
1371
|
-
}
|
|
1372
|
-
.us-list-item:hover > .us-overlay {
|
|
1373
|
-
color: var(--us-_hover-overlay-color, var(--us-overlay-color));
|
|
1374
|
-
opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
|
|
1375
|
-
}
|
|
1376
|
-
.us-list-item:active > .us-overlay {
|
|
1377
|
-
color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
|
|
1378
|
-
opacity: var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
|
|
1379
|
-
}
|
|
1380
|
-
.us-list-item--focus > .us-overlay, .us-list-item--focus:hover > .us-overlay, .us-list-item:focus > .us-overlay {
|
|
1381
|
-
color: var(--us-_focus-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
|
|
1382
|
-
opacity: var(--us-_focus-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
|
|
1383
|
-
}
|
|
1384
1177
|
.us-list-item--hoverable, .us-list-item--selected {
|
|
1385
1178
|
cursor: pointer;
|
|
1386
1179
|
user-select: none;
|
|
@@ -1465,30 +1258,6 @@
|
|
|
1465
1258
|
.us-menu-item:hover {
|
|
1466
1259
|
text-decoration: none;
|
|
1467
1260
|
}
|
|
1468
|
-
.us-menu-item > .us-overlay {
|
|
1469
|
-
position: absolute;
|
|
1470
|
-
inset: 0px;
|
|
1471
|
-
border-radius: inherit;
|
|
1472
|
-
overflow: hidden;
|
|
1473
|
-
color: var(--us-overlay-color);
|
|
1474
|
-
opacity: var(--us-overlay-opacity);
|
|
1475
|
-
z-index: -1;
|
|
1476
|
-
pointer-events: none;
|
|
1477
|
-
background-color: currentColor;
|
|
1478
|
-
transition: background-color, opacity, 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
1479
|
-
}
|
|
1480
|
-
.us-menu-item:hover > .us-overlay {
|
|
1481
|
-
color: var(--us-_hover-overlay-color, var(--us-overlay-color));
|
|
1482
|
-
opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
|
|
1483
|
-
}
|
|
1484
|
-
.us-menu-item:active > .us-overlay {
|
|
1485
|
-
color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
|
|
1486
|
-
opacity: var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
|
|
1487
|
-
}
|
|
1488
|
-
.us-menu-item--focus > .us-overlay, .us-menu-item--focus:hover > .us-overlay, .us-menu-item:focus > .us-overlay {
|
|
1489
|
-
color: var(--us-_focus-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
|
|
1490
|
-
opacity: var(--us-_focus-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
|
|
1491
|
-
}
|
|
1492
1261
|
.us-menu-item--hoverable {
|
|
1493
1262
|
cursor: pointer;
|
|
1494
1263
|
user-select: none;
|
|
@@ -1542,30 +1311,6 @@
|
|
|
1542
1311
|
.us-menu-group:hover {
|
|
1543
1312
|
text-decoration: none;
|
|
1544
1313
|
}
|
|
1545
|
-
.us-menu-group > .us-overlay {
|
|
1546
|
-
position: absolute;
|
|
1547
|
-
inset: 0px;
|
|
1548
|
-
border-radius: inherit;
|
|
1549
|
-
overflow: hidden;
|
|
1550
|
-
color: var(--us-overlay-color);
|
|
1551
|
-
opacity: var(--us-overlay-opacity);
|
|
1552
|
-
z-index: -1;
|
|
1553
|
-
pointer-events: none;
|
|
1554
|
-
background-color: currentColor;
|
|
1555
|
-
transition: background-color, opacity, 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
1556
|
-
}
|
|
1557
|
-
.us-menu-group:hover > .us-overlay {
|
|
1558
|
-
color: var(--us-_hover-overlay-color, var(--us-overlay-color));
|
|
1559
|
-
opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
|
|
1560
|
-
}
|
|
1561
|
-
.us-menu-group:active > .us-overlay {
|
|
1562
|
-
color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
|
|
1563
|
-
opacity: var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
|
|
1564
|
-
}
|
|
1565
|
-
.us-menu-group--focus > .us-overlay, .us-menu-group--focus:hover > .us-overlay, .us-menu-group:focus > .us-overlay {
|
|
1566
|
-
color: var(--us-_focus-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
|
|
1567
|
-
opacity: var(--us-_focus-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
|
|
1568
|
-
}
|
|
1569
1314
|
.us-menu-group__icon {
|
|
1570
1315
|
flex-shrink: 0;
|
|
1571
1316
|
z-index: 1;
|
|
@@ -1708,30 +1453,6 @@
|
|
|
1708
1453
|
.us-tab:hover {
|
|
1709
1454
|
text-decoration: none;
|
|
1710
1455
|
}
|
|
1711
|
-
.us-tab > .us-overlay {
|
|
1712
|
-
position: absolute;
|
|
1713
|
-
inset: 0px;
|
|
1714
|
-
border-radius: inherit;
|
|
1715
|
-
overflow: hidden;
|
|
1716
|
-
color: var(--us-overlay-color);
|
|
1717
|
-
opacity: var(--us-overlay-opacity);
|
|
1718
|
-
z-index: -1;
|
|
1719
|
-
pointer-events: none;
|
|
1720
|
-
background-color: currentColor;
|
|
1721
|
-
transition: background-color, opacity, 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
1722
|
-
}
|
|
1723
|
-
.us-tab:hover > .us-overlay {
|
|
1724
|
-
color: var(--us-_hover-overlay-color, var(--us-overlay-color));
|
|
1725
|
-
opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
|
|
1726
|
-
}
|
|
1727
|
-
.us-tab:active > .us-overlay {
|
|
1728
|
-
color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
|
|
1729
|
-
opacity: var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
|
|
1730
|
-
}
|
|
1731
|
-
.us-tab--focus > .us-overlay, .us-tab--focus:hover > .us-overlay, .us-tab:focus > .us-overlay {
|
|
1732
|
-
color: var(--us-_focus-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
|
|
1733
|
-
opacity: var(--us-_focus-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
|
|
1734
|
-
}
|
|
1735
1456
|
.us-tab--disabled {
|
|
1736
1457
|
opacity: 0.6;
|
|
1737
1458
|
pointer-events: none;
|
|
@@ -1796,30 +1517,6 @@
|
|
|
1796
1517
|
.us-card:hover {
|
|
1797
1518
|
text-decoration: none;
|
|
1798
1519
|
}
|
|
1799
|
-
.us-card > .us-overlay {
|
|
1800
|
-
position: absolute;
|
|
1801
|
-
inset: 0px;
|
|
1802
|
-
border-radius: inherit;
|
|
1803
|
-
overflow: hidden;
|
|
1804
|
-
color: var(--us-overlay-color);
|
|
1805
|
-
opacity: var(--us-overlay-opacity);
|
|
1806
|
-
z-index: -1;
|
|
1807
|
-
pointer-events: none;
|
|
1808
|
-
background-color: currentColor;
|
|
1809
|
-
transition: background-color, opacity, 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
1810
|
-
}
|
|
1811
|
-
.us-card:hover > .us-overlay {
|
|
1812
|
-
color: var(--us-_hover-overlay-color, var(--us-overlay-color));
|
|
1813
|
-
opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
|
|
1814
|
-
}
|
|
1815
|
-
.us-card:active > .us-overlay {
|
|
1816
|
-
color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
|
|
1817
|
-
opacity: var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
|
|
1818
|
-
}
|
|
1819
|
-
.us-card--focus > .us-overlay, .us-card--focus:hover > .us-overlay, .us-card:focus > .us-overlay {
|
|
1820
|
-
color: var(--us-_focus-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
|
|
1821
|
-
opacity: var(--us-_focus-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
|
|
1822
|
-
}
|
|
1823
1520
|
.us-card--bordered {
|
|
1824
1521
|
border: var(--us-card-border-width) var(--us-card-border-style) var(--us-card-border-color);
|
|
1825
1522
|
}
|
|
@@ -3298,6 +2995,87 @@
|
|
|
3298
2995
|
transition-duration: 150ms;
|
|
3299
2996
|
}
|
|
3300
2997
|
|
|
2998
|
+
.us-overlay {
|
|
2999
|
+
position: absolute;
|
|
3000
|
+
inset: 0px;
|
|
3001
|
+
border-radius: inherit;
|
|
3002
|
+
overflow: hidden;
|
|
3003
|
+
color: var(--us-overlay-color);
|
|
3004
|
+
opacity: var(--us-overlay-opacity);
|
|
3005
|
+
z-index: -1;
|
|
3006
|
+
pointer-events: none;
|
|
3007
|
+
background-color: currentColor;
|
|
3008
|
+
transition: background-color, opacity, 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
3009
|
+
}
|
|
3010
|
+
|
|
3011
|
+
:not([hidden]):hover > .us-overlay {
|
|
3012
|
+
color: var(--us-_hover-overlay-color, var(--us-overlay-color));
|
|
3013
|
+
opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
|
|
3014
|
+
}
|
|
3015
|
+
|
|
3016
|
+
:not([hidden]):active > .us-overlay {
|
|
3017
|
+
color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
|
|
3018
|
+
opacity: var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
|
|
3019
|
+
}
|
|
3020
|
+
|
|
3021
|
+
[class$="--focus"] > .us-overlay,
|
|
3022
|
+
:not([hidden]):focus > .us-overlay {
|
|
3023
|
+
color: var(--us-_focus-overlay-color, var(--us-overlay-color));
|
|
3024
|
+
opacity: var(--us-_focus-overlay-opacity, var(--us-overlay-opacity));
|
|
3025
|
+
}
|
|
3026
|
+
|
|
3027
|
+
[class$="--focus"]:hover > .us-overlay,
|
|
3028
|
+
:not([hidden]):focus:hover > .us-overlay {
|
|
3029
|
+
color: var(--us-_focus-hover-overlay-color, var(--us-_focus-overlay-color, var(--us-overlay-color)));
|
|
3030
|
+
opacity: var(--us-_focus-hover-overlay-opacity, var(--us-_focus-overlay-opacity, var(--us-overlay-opacity)));
|
|
3031
|
+
}
|
|
3032
|
+
|
|
3033
|
+
[class$="--focus"]:active > .us-overlay,
|
|
3034
|
+
:not([hidden]):focus:active > .us-overlay {
|
|
3035
|
+
color: var(--us-_focus-active-overlay-color, var(--us-_focus-overlay-color, var(--us-overlay-color)));
|
|
3036
|
+
opacity: var(--us-_focus-active-overlay-opacity, var(--us-_focus-overlay-opacity, var(--us-overlay-opacity)));
|
|
3037
|
+
}
|
|
3038
|
+
|
|
3039
|
+
.us-outline {
|
|
3040
|
+
position: absolute;
|
|
3041
|
+
inset: 0px;
|
|
3042
|
+
border-radius: inherit;
|
|
3043
|
+
overflow: hidden;
|
|
3044
|
+
border-width: var(--us-outline-border-width);
|
|
3045
|
+
border-style: solid;
|
|
3046
|
+
border-color: var(--us-outline-border-color);
|
|
3047
|
+
opacity: var(--us-outline-opacity);
|
|
3048
|
+
pointer-events: none;
|
|
3049
|
+
}
|
|
3050
|
+
|
|
3051
|
+
:not([hidden]):hover > .us-outline {
|
|
3052
|
+
border-width: var(--us-outline-hover-border-width, var(--us-outline-border-width));
|
|
3053
|
+
border-color: var(--us-outline-hover-border-color, var(--us-outline-border-color));
|
|
3054
|
+
opacity: var(--us-outline-hover-opacity, var(--us-outline-opacity));
|
|
3055
|
+
}
|
|
3056
|
+
|
|
3057
|
+
:not([hidden]):active > .us-outline {
|
|
3058
|
+
border-width: var(--us-outline-active-border-width, var(--us-outline-hover-border-width, var(--us-outline-border-width)));
|
|
3059
|
+
border-color: var(--us-outline-active-border-color, var(--us-outline-hover-border-color, var(--us-outline-border-color)));
|
|
3060
|
+
opacity: var(--us-outline-active-opacity, var(--us-outline-hover-opacity, var(--us-outline-opacity)));
|
|
3061
|
+
}
|
|
3062
|
+
|
|
3063
|
+
[class$="--focus"] > .us-outline,
|
|
3064
|
+
[class$="--focus"]:hover > .us-outline,
|
|
3065
|
+
:not([hidden]):focus > .us-outline {
|
|
3066
|
+
border-width: var(--us-outline-focus-border-width, var(--us-outline-hover-border-width, var(--us-outline-border-width)));
|
|
3067
|
+
border-color: var(--us-outline-focus-border-color, var(--us-outline-hover-border-color, var(--us-outline-border-color)));
|
|
3068
|
+
opacity: var(--us-outline-focus-opacity, var(--us-outline-hover-opacity, var(--us-outline-opacity)));
|
|
3069
|
+
}
|
|
3070
|
+
|
|
3071
|
+
.us-outline-b {
|
|
3072
|
+
position: absolute;
|
|
3073
|
+
inset: 0px;
|
|
3074
|
+
border-radius: inherit;
|
|
3075
|
+
overflow: hidden;
|
|
3076
|
+
border-bottom: var(--us-outline-border-width) solid var(--us-outline-border-color);
|
|
3077
|
+
}
|
|
3078
|
+
|
|
3301
3079
|
/* Estilos CSS aquí */
|
|
3302
3080
|
.slider-container {
|
|
3303
3081
|
width: 300px;
|