@unifiedsoftware/styles 1.0.3 → 1.0.4

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.
Files changed (21) hide show
  1. package/css/styles.css +161 -114
  2. package/css/styles.min.css +1 -1
  3. package/css/theme-default.css +238 -50
  4. package/css/theme-default.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/components/_badge.scss +45 -0
  7. package/scss/components/_button.scss +13 -3
  8. package/scss/components/_chip.scss +21 -0
  9. package/scss/components/_index.scss +3 -0
  10. package/scss/components/_tabs.scss +29 -6
  11. package/scss/mixins/_button.scss +16 -0
  12. package/scss/mixins/_chip.scss +16 -0
  13. package/scss/mixins/_outline.scss +11 -0
  14. package/scss/mixins/_overlay.scss +38 -39
  15. package/scss/themes/default/_tokens.scss +3 -0
  16. package/scss/themes/default/components/_badge.scss +21 -0
  17. package/scss/themes/default/components/_button.scss +72 -50
  18. package/scss/themes/default/components/_chip.scss +165 -0
  19. package/scss/themes/default/components/_index.scss +3 -0
  20. package/scss/themes/default/components/_menu.scss +2 -3
  21. package/scss/themes/default/components/_tabs.scss +5 -6
package/css/styles.css CHANGED
@@ -1,4 +1,57 @@
1
1
  @charset "UTF-8";
2
+ .us-badge {
3
+ position: absolute;
4
+ padding: var(--us-badge-padding-y) var(--us-badge-padding-x);
5
+ font-size: var(--us-badge-font-size);
6
+ font-weight: var(--us-badge-font-weight);
7
+ border: var(--us-badge-border-width) solid var(--us-badge-border-color);
8
+ border-radius: var(--us-badge-border-radius);
9
+ color: var(--us-badge-color);
10
+ background-color: var(--us-badge-background);
11
+ display: inline-flex;
12
+ }
13
+ .us-badge > .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
+ background-color: currentColor;
21
+ transition: opacity 15ms linear, background-color 15ms linear;
22
+ }
23
+ .us-badge:hover > .us-overlay {
24
+ color: var(--us-_hover-overlay-color, var(--us-overlay-color));
25
+ opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
26
+ transition: opacity 30ms linear;
27
+ }
28
+ .us-badge:active > .us-overlay {
29
+ color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
30
+ opacity: var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
31
+ }
32
+ .us-badge--top-left {
33
+ top: 10%;
34
+ left: 10%;
35
+ }
36
+ .us-badge--top-right {
37
+ right: 0;
38
+ top: 0;
39
+ transform: translate(50%, -50%);
40
+ }
41
+ .us-badge--bottom-left {
42
+ bottom: 10%;
43
+ left: 10%;
44
+ }
45
+ .us-badge--bottom-right {
46
+ bottom: 0;
47
+ right: 0;
48
+ }
49
+ .us-badge-wrapper {
50
+ flex-shrink: 0;
51
+ position: relative;
52
+ display: inline-flex;
53
+ }
54
+
2
55
  .us-collapse {
3
56
  overflow: hidden;
4
57
  transition: all 0.15s ease-in-out;
@@ -14,63 +67,97 @@
14
67
  align-items: center;
15
68
  }
16
69
 
70
+ .us-chip {
71
+ position: relative;
72
+ height: var(--us-chip-height);
73
+ padding: var(--us-chip-padding-y) var(--us-chip-padding-x);
74
+ font-size: var(--us-chip-font-size);
75
+ font-weight: var(--us-chip-font-weight);
76
+ font-family: var(--us-chip-font-family);
77
+ border-radius: var(--us-chip-border-radius);
78
+ color: var(--us-chip-color);
79
+ background-color: var(--us-chip-background);
80
+ display: inline-flex;
81
+ align-items: center;
82
+ gap: var(--us-chip-gap);
83
+ }
84
+ .us-chip > .us-overlay {
85
+ position: absolute;
86
+ inset: 0px;
87
+ border-radius: inherit;
88
+ overflow: hidden;
89
+ color: var(--us-overlay-color);
90
+ opacity: var(--us-overlay-opacity);
91
+ background-color: currentColor;
92
+ transition: opacity 15ms linear, background-color 15ms linear;
93
+ }
94
+ .us-chip: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
+ transition: opacity 30ms linear;
98
+ }
99
+ .us-chip:active > .us-overlay {
100
+ color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
101
+ opacity: var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
102
+ }
103
+ .us-chip > .us-outline {
104
+ position: absolute;
105
+ inset: 0px;
106
+ border-radius: inherit;
107
+ overflow: hidden;
108
+ border: var(--us-outline-border-width) solid var(--us-outline-border-color);
109
+ }
110
+
17
111
  .us-button {
18
112
  position: relative;
19
113
  height: var(--us-button-height);
20
114
  padding: var(--us-button-padding-y) var(--us-button-padding-x);
21
115
  font-size: var(--us-button-font-size);
22
116
  font-weight: var(--us-button-font-weight);
117
+ font-family: var(--us-button-font-family);
23
118
  border: none;
24
119
  outline: none;
25
120
  border-radius: var(--us-button-border-radius);
26
121
  cursor: pointer;
27
122
  color: var(--us-button-color);
28
123
  background-color: var(--us-button-background);
29
- display: flex;
124
+ display: inline-flex;
30
125
  align-items: center;
31
126
  gap: var(--us-button-gap);
32
127
  user-select: none;
33
128
  -webkit-tap-highlight-color: transparent;
34
- position: relative;
35
129
  }
36
- .us-button .us-overlay {
130
+ .us-button > .us-overlay {
37
131
  position: absolute;
38
132
  inset: 0px;
39
133
  border-radius: inherit;
40
134
  overflow: hidden;
41
- color: inherit;
42
- }
43
- .us-button .us-overlay__surface {
44
- position: absolute;
45
- inset: 0px;
46
135
  color: var(--us-overlay-color);
47
136
  opacity: var(--us-overlay-opacity);
48
137
  background-color: currentColor;
49
- z-index: 0;
50
- }
51
- .us-button .us-overlay::before {
52
- content: "";
53
- position: absolute;
54
- inset: 0px;
55
- opacity: 0;
56
- background-color: currentColor;
57
138
  transition: opacity 15ms linear, background-color 15ms linear;
58
139
  }
59
- .us-button .us-overlay::after {
60
- content: "";
61
- position: absolute;
62
- inset: 0px;
63
- opacity: 0;
64
- color: var(--us-_active-overlay-color);
65
- background-color: currentColor;
140
+ .us-button:hover > .us-overlay {
141
+ color: var(--us-_hover-overlay-color, var(--us-overlay-color));
142
+ opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
66
143
  transition: opacity 30ms linear;
67
144
  }
68
- .us-button:hover .us-overlay::before {
69
- color: var(--us-_hover-overlay-color);
70
- opacity: var(--us-_hover-overlay-opacity);
145
+ .us-button:active > .us-overlay {
146
+ color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
147
+ opacity: var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
71
148
  }
72
- .us-button:active .us-overlay::after {
73
- opacity: var(--us-_active-overlay-opacity);
149
+ .us-button > .us-outline {
150
+ position: absolute;
151
+ inset: 0px;
152
+ border-radius: inherit;
153
+ overflow: hidden;
154
+ border: var(--us-outline-border-width) solid var(--us-outline-border-color);
155
+ }
156
+ .us-button--icon-only {
157
+ width: var(--us-button-height);
158
+ padding: 0;
159
+ border-radius: 9999px;
160
+ justify-content: center;
74
161
  }
75
162
  .us-button__outline {
76
163
  position: absolute;
@@ -80,7 +167,7 @@
80
167
  border-radius: inherit;
81
168
  pointer-events: none;
82
169
  }
83
- .us-button__prefix, .us-button__suffix, .us-button__content {
170
+ .us-button__start-icon, .us-button__end-icon, .us-button__content {
84
171
  position: relative;
85
172
  display: flex;
86
173
  align-items: center;
@@ -107,49 +194,28 @@
107
194
  user-select: none;
108
195
  -webkit-tap-highlight-color: transparent;
109
196
  gap: var(--us-menu-item-gap);
110
- position: relative;
111
197
  }
112
198
  .us-menu-item:hover {
113
199
  text-decoration: none;
114
200
  }
115
- .us-menu-item .us-overlay {
201
+ .us-menu-item > .us-overlay {
116
202
  position: absolute;
117
203
  inset: 0px;
118
204
  border-radius: inherit;
119
205
  overflow: hidden;
120
- color: inherit;
121
- }
122
- .us-menu-item .us-overlay__surface {
123
- position: absolute;
124
- inset: 0px;
125
206
  color: var(--us-overlay-color);
126
207
  opacity: var(--us-overlay-opacity);
127
208
  background-color: currentColor;
128
- z-index: 0;
129
- }
130
- .us-menu-item .us-overlay::before {
131
- content: "";
132
- position: absolute;
133
- inset: 0px;
134
- opacity: 0;
135
- background-color: currentColor;
136
209
  transition: opacity 15ms linear, background-color 15ms linear;
137
210
  }
138
- .us-menu-item .us-overlay::after {
139
- content: "";
140
- position: absolute;
141
- inset: 0px;
142
- opacity: 0;
143
- color: var(--us-_active-overlay-color);
144
- background-color: currentColor;
211
+ .us-menu-item:hover > .us-overlay {
212
+ color: var(--us-_hover-overlay-color, var(--us-overlay-color));
213
+ opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
145
214
  transition: opacity 30ms linear;
146
215
  }
147
- .us-menu-item:hover .us-overlay::before {
148
- color: var(--us-_hover-overlay-color);
149
- opacity: var(--us-_hover-overlay-opacity);
150
- }
151
- .us-menu-item:active .us-overlay::after {
152
- opacity: var(--us-_active-overlay-opacity);
216
+ .us-menu-item:active > .us-overlay {
217
+ color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
218
+ opacity: var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
153
219
  }
154
220
  .us-menu-item--disabled {
155
221
  opacity: 0.6;
@@ -194,49 +260,28 @@
194
260
  color: var(--us-menu-group-color);
195
261
  background-color: var(--us-menu-group-background);
196
262
  gap: var(--us-menu-group-gap);
197
- position: relative;
198
263
  }
199
264
  .us-menu-group:hover {
200
265
  text-decoration: none;
201
266
  }
202
- .us-menu-group .us-overlay {
267
+ .us-menu-group > .us-overlay {
203
268
  position: absolute;
204
269
  inset: 0px;
205
270
  border-radius: inherit;
206
271
  overflow: hidden;
207
- color: inherit;
208
- }
209
- .us-menu-group .us-overlay__surface {
210
- position: absolute;
211
- inset: 0px;
212
272
  color: var(--us-overlay-color);
213
273
  opacity: var(--us-overlay-opacity);
214
274
  background-color: currentColor;
215
- z-index: 0;
216
- }
217
- .us-menu-group .us-overlay::before {
218
- content: "";
219
- position: absolute;
220
- inset: 0px;
221
- opacity: 0;
222
- background-color: currentColor;
223
275
  transition: opacity 15ms linear, background-color 15ms linear;
224
276
  }
225
- .us-menu-group .us-overlay::after {
226
- content: "";
227
- position: absolute;
228
- inset: 0px;
229
- opacity: 0;
230
- color: var(--us-_active-overlay-color);
231
- background-color: currentColor;
277
+ .us-menu-group:hover > .us-overlay {
278
+ color: var(--us-_hover-overlay-color, var(--us-overlay-color));
279
+ opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
232
280
  transition: opacity 30ms linear;
233
281
  }
234
- .us-menu-group:hover .us-overlay::before {
235
- color: var(--us-_hover-overlay-color);
236
- opacity: var(--us-_hover-overlay-opacity);
237
- }
238
- .us-menu-group:active .us-overlay::after {
239
- opacity: var(--us-_active-overlay-opacity);
282
+ .us-menu-group:active > .us-overlay {
283
+ color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
284
+ opacity: var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
240
285
  }
241
286
  .us-menu-group__icon {
242
287
  flex-shrink: 0;
@@ -276,9 +321,28 @@
276
321
 
277
322
  .us-tabs {
278
323
  width: 100%;
324
+ white-space: nowrap;
325
+ overflow: hidden;
279
326
  display: flex;
280
327
  align-items: center;
281
328
  }
329
+ .us-tabs--start {
330
+ justify-content: flex-start;
331
+ }
332
+ .us-tabs--center {
333
+ justify-content: center;
334
+ }
335
+ .us-tabs--end {
336
+ justify-content: flex-end;
337
+ }
338
+ .us-tabs--stretch .us-tab {
339
+ flex-grow: 1;
340
+ }
341
+ @media (max-width: 767px) and (hover: none) {
342
+ .us-tabs {
343
+ overflow: auto;
344
+ }
345
+ }
282
346
 
283
347
  .us-tab {
284
348
  position: relative;
@@ -293,50 +357,33 @@
293
357
  align-items: center;
294
358
  user-select: none;
295
359
  -webkit-tap-highlight-color: transparent;
296
- position: relative;
297
360
  }
298
- .us-tab .us-overlay {
361
+ .us-tab > .us-overlay {
299
362
  position: absolute;
300
363
  inset: 0px;
301
364
  border-radius: inherit;
302
365
  overflow: hidden;
303
- color: inherit;
304
- }
305
- .us-tab .us-overlay__surface {
306
- position: absolute;
307
- inset: 0px;
308
366
  color: var(--us-overlay-color);
309
367
  opacity: var(--us-overlay-opacity);
310
368
  background-color: currentColor;
311
- z-index: 0;
312
- }
313
- .us-tab .us-overlay::before {
314
- content: "";
315
- position: absolute;
316
- inset: 0px;
317
- opacity: 0;
318
- background-color: currentColor;
319
369
  transition: opacity 15ms linear, background-color 15ms linear;
320
370
  }
321
- .us-tab .us-overlay::after {
322
- content: "";
323
- position: absolute;
324
- inset: 0px;
325
- opacity: 0;
326
- color: var(--us-_active-overlay-color);
327
- background-color: currentColor;
371
+ .us-tab:hover > .us-overlay {
372
+ color: var(--us-_hover-overlay-color, var(--us-overlay-color));
373
+ opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
328
374
  transition: opacity 30ms linear;
329
375
  }
330
- .us-tab:hover .us-overlay::before {
331
- color: var(--us-_hover-overlay-color);
332
- opacity: var(--us-_hover-overlay-opacity);
376
+ .us-tab:active > .us-overlay {
377
+ color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
378
+ opacity: var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
333
379
  }
334
- .us-tab:active .us-overlay::after {
335
- opacity: var(--us-_active-overlay-opacity);
380
+ .us-tab--disabled {
381
+ opacity: 0.6;
382
+ pointer-events: none;
336
383
  }
337
384
  .us-tab__content {
338
385
  position: relative;
339
- height: 48px;
386
+ height: 40px;
340
387
  display: inline-flex;
341
388
  flex-direction: row;
342
389
  justify-content: center;
@@ -346,7 +393,7 @@
346
393
  .us-tab__indicator {
347
394
  position: absolute;
348
395
  height: var(--us-tab-indicator-height);
349
- border-radius: 0;
396
+ border-radius: var(--us-tab-indicator-border-radius);
350
397
  inset: auto 0px 0px;
351
398
  opacity: 0;
352
399
  z-index: -1;
package/css/styles.min.css CHANGED
@@ -1 +1 @@
1
- .us-collapse{overflow:hidden;transition:all .15s ease-in-out}.us-icon{width:1em;height:1em;font-size:var(--us-icon-font-size);color:var(--us-icon-color);display:flex;justify-content:center;align-items:center}.us-button{position:relative;height:var(--us-button-height);padding:var(--us-button-padding-y) var(--us-button-padding-x);font-size:var(--us-button-font-size);font-weight:var(--us-button-font-weight);border:none;outline:none;border-radius:var(--us-button-border-radius);cursor:pointer;color:var(--us-button-color);background-color:var(--us-button-background);display:flex;align-items:center;gap:var(--us-button-gap);user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative}.us-button .us-overlay{position:absolute;inset:0px;border-radius:inherit;overflow:hidden;color:inherit}.us-button .us-overlay__surface{position:absolute;inset:0px;color:var(--us-overlay-color);opacity:var(--us-overlay-opacity);background-color:currentColor;z-index:0}.us-button .us-overlay::before{content:"";position:absolute;inset:0px;opacity:0;background-color:currentColor;transition:opacity 15ms linear,background-color 15ms linear}.us-button .us-overlay::after{content:"";position:absolute;inset:0px;opacity:0;color:var(--us-_active-overlay-color);background-color:currentColor;transition:opacity 30ms linear}.us-button:hover .us-overlay::before{color:var(--us-_hover-overlay-color);opacity:var(--us-_hover-overlay-opacity)}.us-button:active .us-overlay::after{opacity:var(--us-_active-overlay-opacity)}.us-button__outline{position:absolute;inset:0px;z-index:0;border:var(--us-button-outline-border-width) solid var(--us-button-outline-border-color);border-radius:inherit;pointer-events:none}.us-button__prefix,.us-button__suffix,.us-button__content{position:relative;display:flex;align-items:center}.us-menu{margin:0;padding:0;color:var(--us-menu-color);background-color:var(--us-menu-background)}.us-menu-item{position:relative;height:var(--us-menu-item-height);padding:var(--us-menu-item-padding-y) var(--us-menu-item-padding-x);font-size:var(--us-menu-item-font-size);font-weight:var(--us-menu-item-font-weight);text-decoration:none;cursor:pointer;display:flex;align-items:center;color:var(--us-menu-item-color);background-color:var(--us-menu-item-background);user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);gap:var(--us-menu-item-gap);position:relative}.us-menu-item:hover{text-decoration:none}.us-menu-item .us-overlay{position:absolute;inset:0px;border-radius:inherit;overflow:hidden;color:inherit}.us-menu-item .us-overlay__surface{position:absolute;inset:0px;color:var(--us-overlay-color);opacity:var(--us-overlay-opacity);background-color:currentColor;z-index:0}.us-menu-item .us-overlay::before{content:"";position:absolute;inset:0px;opacity:0;background-color:currentColor;transition:opacity 15ms linear,background-color 15ms linear}.us-menu-item .us-overlay::after{content:"";position:absolute;inset:0px;opacity:0;color:var(--us-_active-overlay-color);background-color:currentColor;transition:opacity 30ms linear}.us-menu-item:hover .us-overlay::before{color:var(--us-_hover-overlay-color);opacity:var(--us-_hover-overlay-opacity)}.us-menu-item:active .us-overlay::after{opacity:var(--us-_active-overlay-opacity)}.us-menu-item--disabled{opacity:.6;pointer-events:none}.us-menu-item--selected .us-menu-item__icon{--us-menu-item-icon-color: var(--us-_active-menu-item-icon-color)}.us-menu-item__icon{flex-shrink:0;z-index:1;display:flex;justify-content:center;align-items:center}.us-menu-item__icon .us-icon{--us-icon-font-size: var(--us-menu-item-icon-font-size);--us-icon-color: var(--us-menu-item-icon-color)}.us-menu-item__content{flex-grow:1;z-index:1;display:grid;overflow:hidden}.us-menu-item__title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.us-menu-group{position:relative;height:var(--us-menu-group-height);padding:var(--us-menu-group-padding-y) var(--us-menu-group-padding-x);font-size:var(--us-menu-group-font-size);font-weight:var(--us-menu-group-font-weight);text-decoration:none;border-bottom:var(--us-menu-group-border-width) solid var(--us-menu-group-border-color);display:flex;align-items:center;color:var(--us-menu-group-color);background-color:var(--us-menu-group-background);gap:var(--us-menu-group-gap);position:relative}.us-menu-group:hover{text-decoration:none}.us-menu-group .us-overlay{position:absolute;inset:0px;border-radius:inherit;overflow:hidden;color:inherit}.us-menu-group .us-overlay__surface{position:absolute;inset:0px;color:var(--us-overlay-color);opacity:var(--us-overlay-opacity);background-color:currentColor;z-index:0}.us-menu-group .us-overlay::before{content:"";position:absolute;inset:0px;opacity:0;background-color:currentColor;transition:opacity 15ms linear,background-color 15ms linear}.us-menu-group .us-overlay::after{content:"";position:absolute;inset:0px;opacity:0;color:var(--us-_active-overlay-color);background-color:currentColor;transition:opacity 30ms linear}.us-menu-group:hover .us-overlay::before{color:var(--us-_hover-overlay-color);opacity:var(--us-_hover-overlay-opacity)}.us-menu-group:active .us-overlay::after{opacity:var(--us-_active-overlay-opacity)}.us-menu-group__icon{flex-shrink:0;z-index:1;display:flex;justify-content:center;align-items:center}.us-menu-group--selected .us-menu-group__icon{--us-menu-group-icon-color: var(--us-_active-menu-item-icon-color)}.us-menu-group__icon .us-icon{--us-icon-font-size: var(--us-menu-group-icon-font-size);--us-icon-color: var(--us-menu-group-icon-color)}.us-menu-group__content{flex-grow:1;z-index:1;display:grid;overflow:hidden}.us-menu-group__title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.us-menu-submenu .us-menu{--us-menu-background: var(--us-submenu-background)}.us-divider{width:100%;height:1px;background:#cac4d0}.us-tabs{width:100%;display:flex;align-items:center}.us-tab{position:relative;padding:0px 16px;font-size:var(--us-tab-font-size);font-weight:var(--us-tab-font-weight);vertical-align:middle;z-index:1;color:var(--us-tab-color);display:inline-flex;justify-content:center;align-items:center;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative}.us-tab .us-overlay{position:absolute;inset:0px;border-radius:inherit;overflow:hidden;color:inherit}.us-tab .us-overlay__surface{position:absolute;inset:0px;color:var(--us-overlay-color);opacity:var(--us-overlay-opacity);background-color:currentColor;z-index:0}.us-tab .us-overlay::before{content:"";position:absolute;inset:0px;opacity:0;background-color:currentColor;transition:opacity 15ms linear,background-color 15ms linear}.us-tab .us-overlay::after{content:"";position:absolute;inset:0px;opacity:0;color:var(--us-_active-overlay-color);background-color:currentColor;transition:opacity 30ms linear}.us-tab:hover .us-overlay::before{color:var(--us-_hover-overlay-color);opacity:var(--us-_hover-overlay-opacity)}.us-tab:active .us-overlay::after{opacity:var(--us-_active-overlay-opacity)}.us-tab__content{position:relative;height:48px;display:inline-flex;flex-direction:row;justify-content:center;align-items:center;gap:8px}.us-tab__indicator{position:absolute;height:var(--us-tab-indicator-height);border-radius:0;inset:auto 0px 0px;opacity:0;z-index:-1;background:var(--us-tab-indicator-color);transform-origin:left bottom}.us-tab--selected .us-tab__indicator{opacity:1}.us-animation-spin{animation:us-animation-spin 1s linear infinite;transform-origin:center center}@keyframes us-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.us-animation-pulse{animation:us-animation-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}@keyframes us-animation-pulse{0%,100%{opacity:1}50%{opacity:.5}}.us-animation-bounce{animation:us-animation-bounce 1s infinite}@keyframes us-animation-bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8, 0, 1, 1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}}.slider-container{width:300px;height:20px;background-color:#ccc;position:relative;margin-top:20px}.slider-point{width:20px;height:20px;background-color:#007bff;border-radius:50%;position:absolute;cursor:pointer}
1
+ .us-badge{position:absolute;padding:var(--us-badge-padding-y) var(--us-badge-padding-x);font-size:var(--us-badge-font-size);font-weight:var(--us-badge-font-weight);border:var(--us-badge-border-width) solid var(--us-badge-border-color);border-radius:var(--us-badge-border-radius);color:var(--us-badge-color);background-color:var(--us-badge-background);display:inline-flex}.us-badge>.us-overlay{position:absolute;inset:0px;border-radius:inherit;overflow:hidden;color:var(--us-overlay-color);opacity:var(--us-overlay-opacity);background-color:currentColor;transition:opacity 15ms linear,background-color 15ms linear}.us-badge:hover>.us-overlay{color:var(--us-_hover-overlay-color, var(--us-overlay-color));opacity:var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));transition:opacity 30ms linear}.us-badge:active>.us-overlay{color:var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));opacity:var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)))}.us-badge--top-left{top:10%;left:10%}.us-badge--top-right{right:0;top:0;transform:translate(50%, -50%)}.us-badge--bottom-left{bottom:10%;left:10%}.us-badge--bottom-right{bottom:0;right:0}.us-badge-wrapper{flex-shrink:0;position:relative;display:inline-flex}.us-collapse{overflow:hidden;transition:all .15s ease-in-out}.us-icon{width:1em;height:1em;font-size:var(--us-icon-font-size);color:var(--us-icon-color);display:flex;justify-content:center;align-items:center}.us-chip{position:relative;height:var(--us-chip-height);padding:var(--us-chip-padding-y) var(--us-chip-padding-x);font-size:var(--us-chip-font-size);font-weight:var(--us-chip-font-weight);font-family:var(--us-chip-font-family);border-radius:var(--us-chip-border-radius);color:var(--us-chip-color);background-color:var(--us-chip-background);display:inline-flex;align-items:center;gap:var(--us-chip-gap)}.us-chip>.us-overlay{position:absolute;inset:0px;border-radius:inherit;overflow:hidden;color:var(--us-overlay-color);opacity:var(--us-overlay-opacity);background-color:currentColor;transition:opacity 15ms linear,background-color 15ms linear}.us-chip:hover>.us-overlay{color:var(--us-_hover-overlay-color, var(--us-overlay-color));opacity:var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));transition:opacity 30ms linear}.us-chip:active>.us-overlay{color:var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));opacity:var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)))}.us-chip>.us-outline{position:absolute;inset:0px;border-radius:inherit;overflow:hidden;border:var(--us-outline-border-width) solid var(--us-outline-border-color)}.us-button{position:relative;height:var(--us-button-height);padding:var(--us-button-padding-y) var(--us-button-padding-x);font-size:var(--us-button-font-size);font-weight:var(--us-button-font-weight);font-family:var(--us-button-font-family);border:none;outline:none;border-radius:var(--us-button-border-radius);cursor:pointer;color:var(--us-button-color);background-color:var(--us-button-background);display:inline-flex;align-items:center;gap:var(--us-button-gap);user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.us-button>.us-overlay{position:absolute;inset:0px;border-radius:inherit;overflow:hidden;color:var(--us-overlay-color);opacity:var(--us-overlay-opacity);background-color:currentColor;transition:opacity 15ms linear,background-color 15ms linear}.us-button:hover>.us-overlay{color:var(--us-_hover-overlay-color, var(--us-overlay-color));opacity:var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));transition:opacity 30ms linear}.us-button:active>.us-overlay{color:var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));opacity:var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)))}.us-button>.us-outline{position:absolute;inset:0px;border-radius:inherit;overflow:hidden;border:var(--us-outline-border-width) solid var(--us-outline-border-color)}.us-button--icon-only{width:var(--us-button-height);padding:0;border-radius:9999px;justify-content:center}.us-button__outline{position:absolute;inset:0px;z-index:0;border:var(--us-button-outline-border-width) solid var(--us-button-outline-border-color);border-radius:inherit;pointer-events:none}.us-button__start-icon,.us-button__end-icon,.us-button__content{position:relative;display:flex;align-items:center}.us-menu{margin:0;padding:0;color:var(--us-menu-color);background-color:var(--us-menu-background)}.us-menu-item{position:relative;height:var(--us-menu-item-height);padding:var(--us-menu-item-padding-y) var(--us-menu-item-padding-x);font-size:var(--us-menu-item-font-size);font-weight:var(--us-menu-item-font-weight);text-decoration:none;cursor:pointer;display:flex;align-items:center;color:var(--us-menu-item-color);background-color:var(--us-menu-item-background);user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);gap:var(--us-menu-item-gap)}.us-menu-item:hover{text-decoration:none}.us-menu-item>.us-overlay{position:absolute;inset:0px;border-radius:inherit;overflow:hidden;color:var(--us-overlay-color);opacity:var(--us-overlay-opacity);background-color:currentColor;transition:opacity 15ms linear,background-color 15ms linear}.us-menu-item:hover>.us-overlay{color:var(--us-_hover-overlay-color, var(--us-overlay-color));opacity:var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));transition:opacity 30ms linear}.us-menu-item:active>.us-overlay{color:var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));opacity:var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)))}.us-menu-item--disabled{opacity:.6;pointer-events:none}.us-menu-item--selected .us-menu-item__icon{--us-menu-item-icon-color: var(--us-_active-menu-item-icon-color)}.us-menu-item__icon{flex-shrink:0;z-index:1;display:flex;justify-content:center;align-items:center}.us-menu-item__icon .us-icon{--us-icon-font-size: var(--us-menu-item-icon-font-size);--us-icon-color: var(--us-menu-item-icon-color)}.us-menu-item__content{flex-grow:1;z-index:1;display:grid;overflow:hidden}.us-menu-item__title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.us-menu-group{position:relative;height:var(--us-menu-group-height);padding:var(--us-menu-group-padding-y) var(--us-menu-group-padding-x);font-size:var(--us-menu-group-font-size);font-weight:var(--us-menu-group-font-weight);text-decoration:none;border-bottom:var(--us-menu-group-border-width) solid var(--us-menu-group-border-color);display:flex;align-items:center;color:var(--us-menu-group-color);background-color:var(--us-menu-group-background);gap:var(--us-menu-group-gap)}.us-menu-group:hover{text-decoration:none}.us-menu-group>.us-overlay{position:absolute;inset:0px;border-radius:inherit;overflow:hidden;color:var(--us-overlay-color);opacity:var(--us-overlay-opacity);background-color:currentColor;transition:opacity 15ms linear,background-color 15ms linear}.us-menu-group:hover>.us-overlay{color:var(--us-_hover-overlay-color, var(--us-overlay-color));opacity:var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));transition:opacity 30ms linear}.us-menu-group:active>.us-overlay{color:var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));opacity:var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)))}.us-menu-group__icon{flex-shrink:0;z-index:1;display:flex;justify-content:center;align-items:center}.us-menu-group--selected .us-menu-group__icon{--us-menu-group-icon-color: var(--us-_active-menu-item-icon-color)}.us-menu-group__icon .us-icon{--us-icon-font-size: var(--us-menu-group-icon-font-size);--us-icon-color: var(--us-menu-group-icon-color)}.us-menu-group__content{flex-grow:1;z-index:1;display:grid;overflow:hidden}.us-menu-group__title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.us-menu-submenu .us-menu{--us-menu-background: var(--us-submenu-background)}.us-divider{width:100%;height:1px;background:#cac4d0}.us-tabs{width:100%;white-space:nowrap;overflow:hidden;display:flex;align-items:center}.us-tabs--start{justify-content:flex-start}.us-tabs--center{justify-content:center}.us-tabs--end{justify-content:flex-end}.us-tabs--stretch .us-tab{flex-grow:1}@media(max-width: 767px)and (hover: none){.us-tabs{overflow:auto}}.us-tab{position:relative;padding:0px 16px;font-size:var(--us-tab-font-size);font-weight:var(--us-tab-font-weight);vertical-align:middle;z-index:1;color:var(--us-tab-color);display:inline-flex;justify-content:center;align-items:center;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.us-tab>.us-overlay{position:absolute;inset:0px;border-radius:inherit;overflow:hidden;color:var(--us-overlay-color);opacity:var(--us-overlay-opacity);background-color:currentColor;transition:opacity 15ms linear,background-color 15ms linear}.us-tab:hover>.us-overlay{color:var(--us-_hover-overlay-color, var(--us-overlay-color));opacity:var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));transition:opacity 30ms linear}.us-tab:active>.us-overlay{color:var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));opacity:var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)))}.us-tab--disabled{opacity:.6;pointer-events:none}.us-tab__content{position:relative;height:40px;display:inline-flex;flex-direction:row;justify-content:center;align-items:center;gap:8px}.us-tab__indicator{position:absolute;height:var(--us-tab-indicator-height);border-radius:var(--us-tab-indicator-border-radius);inset:auto 0px 0px;opacity:0;z-index:-1;background:var(--us-tab-indicator-color);transform-origin:left bottom}.us-tab--selected .us-tab__indicator{opacity:1}.us-animation-spin{animation:us-animation-spin 1s linear infinite;transform-origin:center center}@keyframes us-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.us-animation-pulse{animation:us-animation-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}@keyframes us-animation-pulse{0%,100%{opacity:1}50%{opacity:.5}}.us-animation-bounce{animation:us-animation-bounce 1s infinite}@keyframes us-animation-bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8, 0, 1, 1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}}.slider-container{width:300px;height:20px;background-color:#ccc;position:relative;margin-top:20px}.slider-point{width:20px;height:20px;background-color:#007bff;border-radius:50%;position:absolute;cursor:pointer}