@unifiedsoftware/styles 1.0.0 → 1.0.2

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 (23) hide show
  1. package/css/fci-styles.css +3 -3
  2. package/css/fci-styles.min.css +1 -1
  3. package/css/styles.css +344 -18
  4. package/css/styles.min.css +1 -1
  5. package/css/theme-default.css +192 -0
  6. package/css/theme-default.min.css +1 -0
  7. package/fci-styles.scss +3279 -0
  8. package/index.scss +20 -0
  9. package/package.json +3 -1
  10. package/scss/_animation.scss +45 -0
  11. package/scss/components/_button.scss +15 -18
  12. package/scss/components/_collapse.scss +6 -0
  13. package/scss/components/_icon.scss +11 -0
  14. package/scss/components/_index.scss +5 -0
  15. package/scss/components/_menu.scss +124 -0
  16. package/scss/components/_slider.scss +50 -0
  17. package/scss/components/_tabs.scss +10 -6
  18. package/scss/mixins/_overlay.scss +52 -0
  19. package/scss/themes/default/components/_button.scss +23 -12
  20. package/scss/themes/default/components/_icon.scss +6 -0
  21. package/scss/themes/default/components/_index.scss +2 -0
  22. package/scss/themes/default/components/_menu.scss +58 -0
  23. package/scss/themes/default/components/_tabs.scss +15 -1
package/css/styles.css CHANGED
@@ -1,3 +1,19 @@
1
+ @charset "UTF-8";
2
+ .us-collapse {
3
+ overflow: hidden;
4
+ transition: all 0.15s ease-in-out;
5
+ }
6
+
7
+ .us-icon {
8
+ width: 1em;
9
+ height: 1em;
10
+ font-size: var(--us-icon-font-size);
11
+ color: var(--us-icon-color);
12
+ display: flex;
13
+ justify-content: center;
14
+ align-items: center;
15
+ }
16
+
1
17
  .us-button {
2
18
  position: relative;
3
19
  height: var(--us-button-height);
@@ -9,24 +25,52 @@
9
25
  border-radius: var(--us-button-border-radius);
10
26
  cursor: pointer;
11
27
  color: var(--us-button-color);
12
- background: var(--us-button-background);
28
+ background-color: var(--us-button-background);
29
+ display: flex;
30
+ align-items: center;
31
+ gap: var(--us-button-gap);
13
32
  user-select: none;
14
33
  -webkit-tap-highlight-color: transparent;
34
+ position: relative;
15
35
  }
16
- .us-button__elevation {
36
+ .us-button .us-overlay {
17
37
  position: absolute;
18
38
  inset: 0px;
19
- z-index: 0;
20
- border: var(--us-button-border-width) solid var(--us-button-border-color);
21
39
  border-radius: inherit;
22
- background: currentColor;
23
- opacity: var(--us-button-elevation-opacity);
40
+ overflow: hidden;
41
+ color: inherit;
42
+ }
43
+ .us-button .us-overlay__surface {
44
+ position: absolute;
45
+ inset: 0px;
46
+ color: var(--us-overlay-color);
47
+ opacity: var(--us-overlay-opacity);
48
+ 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
+ transition: opacity 15ms linear, background-color 15ms linear;
58
+ }
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;
66
+ transition: opacity 30ms linear;
24
67
  }
25
- .us-button:hover .us-button__elevation {
26
- opacity: var(--us-_hover-button-elevation-opacity);
68
+ .us-button:hover .us-overlay::before {
69
+ color: var(--us-_hover-overlay-color);
70
+ opacity: var(--us-_hover-overlay-opacity);
27
71
  }
28
- .us-button:active .us-button__elevation {
29
- opacity: var(--us-_active-button-elevation-opacity);
72
+ .us-button:active .us-overlay::after {
73
+ opacity: var(--us-_active-overlay-opacity);
30
74
  }
31
75
  .us-button__outline {
32
76
  position: absolute;
@@ -34,6 +78,193 @@
34
78
  z-index: 0;
35
79
  border: var(--us-button-outline-border-width) solid var(--us-button-outline-border-color);
36
80
  border-radius: inherit;
81
+ pointer-events: none;
82
+ }
83
+ .us-button__prefix, .us-button__suffix, .us-button__content {
84
+ position: relative;
85
+ display: flex;
86
+ align-items: center;
87
+ }
88
+
89
+ .us-menu {
90
+ margin: 0;
91
+ padding: 0;
92
+ color: var(--us-menu-color);
93
+ background-color: var(--us-menu-background);
94
+ }
95
+ .us-menu-item {
96
+ position: relative;
97
+ height: var(--us-menu-item-height);
98
+ padding: var(--us-menu-item-padding-y) var(--us-menu-item-padding-x);
99
+ font-size: var(--us-menu-item-font-size);
100
+ font-weight: var(--us-menu-item-font-weight);
101
+ text-decoration: none;
102
+ cursor: pointer;
103
+ display: flex;
104
+ align-items: center;
105
+ color: var(--us-menu-item-color);
106
+ background-color: var(--us-menu-item-background);
107
+ user-select: none;
108
+ -webkit-tap-highlight-color: transparent;
109
+ gap: var(--us-menu-item-gap);
110
+ position: relative;
111
+ }
112
+ .us-menu-item:hover {
113
+ text-decoration: none;
114
+ }
115
+ .us-menu-item .us-overlay {
116
+ position: absolute;
117
+ inset: 0px;
118
+ border-radius: inherit;
119
+ overflow: hidden;
120
+ color: inherit;
121
+ }
122
+ .us-menu-item .us-overlay__surface {
123
+ position: absolute;
124
+ inset: 0px;
125
+ color: var(--us-overlay-color);
126
+ opacity: var(--us-overlay-opacity);
127
+ 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
+ transition: opacity 15ms linear, background-color 15ms linear;
137
+ }
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;
145
+ transition: opacity 30ms linear;
146
+ }
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);
153
+ }
154
+ .us-menu-item--disabled {
155
+ pointer-events: none;
156
+ }
157
+ .us-menu-item--selected .us-menu-item__icon {
158
+ --us-menu-item-icon-color: var(--us-_active-menu-item-icon-color);
159
+ }
160
+ .us-menu-item__icon {
161
+ flex-shrink: 0;
162
+ z-index: 1;
163
+ display: flex;
164
+ justify-content: center;
165
+ align-items: center;
166
+ }
167
+ .us-menu-item__icon .us-icon {
168
+ --us-icon-font-size: var(--us-menu-item-icon-font-size);
169
+ --us-icon-color: var(--us-menu-item-icon-color);
170
+ }
171
+ .us-menu-item__content {
172
+ flex-grow: 1;
173
+ z-index: 1;
174
+ display: grid;
175
+ overflow: hidden;
176
+ }
177
+ .us-menu-item__title {
178
+ overflow: hidden;
179
+ display: -webkit-box;
180
+ -webkit-box-orient: vertical;
181
+ -webkit-line-clamp: 1;
182
+ }
183
+ .us-menu-group {
184
+ position: relative;
185
+ height: var(--us-menu-group-height);
186
+ padding: var(--us-menu-group-padding-y) var(--us-menu-group-padding-x);
187
+ font-size: var(--us-menu-group-font-size);
188
+ font-weight: var(--us-menu-group-font-weight);
189
+ text-decoration: none;
190
+ border-bottom: var(--us-menu-group-border-width) solid var(--us-menu-group-border-color);
191
+ display: flex;
192
+ align-items: center;
193
+ color: var(--us-menu-group-color);
194
+ background-color: var(--us-menu-group-background);
195
+ gap: var(--us-menu-group-gap);
196
+ position: relative;
197
+ }
198
+ .us-menu-group:hover {
199
+ text-decoration: none;
200
+ }
201
+ .us-menu-group .us-overlay {
202
+ position: absolute;
203
+ inset: 0px;
204
+ border-radius: inherit;
205
+ overflow: hidden;
206
+ color: inherit;
207
+ }
208
+ .us-menu-group .us-overlay__surface {
209
+ position: absolute;
210
+ inset: 0px;
211
+ color: var(--us-overlay-color);
212
+ opacity: var(--us-overlay-opacity);
213
+ background-color: currentColor;
214
+ z-index: 0;
215
+ }
216
+ .us-menu-group .us-overlay::before {
217
+ content: "";
218
+ position: absolute;
219
+ inset: 0px;
220
+ opacity: 0;
221
+ background-color: currentColor;
222
+ transition: opacity 15ms linear, background-color 15ms linear;
223
+ }
224
+ .us-menu-group .us-overlay::after {
225
+ content: "";
226
+ position: absolute;
227
+ inset: 0px;
228
+ opacity: 0;
229
+ color: var(--us-_active-overlay-color);
230
+ background-color: currentColor;
231
+ transition: opacity 30ms linear;
232
+ }
233
+ .us-menu-group:hover .us-overlay::before {
234
+ color: var(--us-_hover-overlay-color);
235
+ opacity: var(--us-_hover-overlay-opacity);
236
+ }
237
+ .us-menu-group:active .us-overlay::after {
238
+ opacity: var(--us-_active-overlay-opacity);
239
+ }
240
+ .us-menu-group__icon {
241
+ flex-shrink: 0;
242
+ z-index: 1;
243
+ display: flex;
244
+ justify-content: center;
245
+ align-items: center;
246
+ }
247
+ .us-menu-group--selected .us-menu-group__icon {
248
+ --us-menu-group-icon-color: var(--us-_active-menu-item-icon-color);
249
+ }
250
+ .us-menu-group__icon .us-icon {
251
+ --us-icon-font-size: var(--us-menu-group-icon-font-size);
252
+ --us-icon-color: var(--us-menu-group-icon-color);
253
+ }
254
+ .us-menu-group__content {
255
+ flex-grow: 1;
256
+ z-index: 1;
257
+ display: grid;
258
+ overflow: hidden;
259
+ }
260
+ .us-menu-group__title {
261
+ overflow: hidden;
262
+ display: -webkit-box;
263
+ -webkit-box-orient: vertical;
264
+ -webkit-line-clamp: 1;
265
+ }
266
+ .us-menu-submenu .us-menu {
267
+ --us-menu-background: var(--us-submenu-background);
37
268
  }
38
269
 
39
270
  .us-divider {
@@ -50,16 +281,57 @@
50
281
 
51
282
  .us-tab {
52
283
  position: relative;
53
- width: 100%;
54
284
  padding: 0px 16px;
55
- font-size: 14px;
56
- font-weight: 500;
285
+ font-size: var(--us-tab-font-size);
286
+ font-weight: var(--us-tab-font-weight);
57
287
  vertical-align: middle;
58
288
  z-index: 1;
59
289
  color: var(--us-tab-color);
60
290
  display: inline-flex;
61
291
  justify-content: center;
62
292
  align-items: center;
293
+ user-select: none;
294
+ -webkit-tap-highlight-color: transparent;
295
+ position: relative;
296
+ }
297
+ .us-tab .us-overlay {
298
+ position: absolute;
299
+ inset: 0px;
300
+ border-radius: inherit;
301
+ overflow: hidden;
302
+ color: inherit;
303
+ }
304
+ .us-tab .us-overlay__surface {
305
+ position: absolute;
306
+ inset: 0px;
307
+ color: var(--us-overlay-color);
308
+ opacity: var(--us-overlay-opacity);
309
+ background-color: currentColor;
310
+ z-index: 0;
311
+ }
312
+ .us-tab .us-overlay::before {
313
+ content: "";
314
+ position: absolute;
315
+ inset: 0px;
316
+ opacity: 0;
317
+ background-color: currentColor;
318
+ transition: opacity 15ms linear, background-color 15ms linear;
319
+ }
320
+ .us-tab .us-overlay::after {
321
+ content: "";
322
+ position: absolute;
323
+ inset: 0px;
324
+ opacity: 0;
325
+ color: var(--us-_active-overlay-color);
326
+ background-color: currentColor;
327
+ transition: opacity 30ms linear;
328
+ }
329
+ .us-tab:hover .us-overlay::before {
330
+ color: var(--us-_hover-overlay-color);
331
+ opacity: var(--us-_hover-overlay-opacity);
332
+ }
333
+ .us-tab:active .us-overlay::after {
334
+ opacity: var(--us-_active-overlay-opacity);
63
335
  }
64
336
  .us-tab__content {
65
337
  position: relative;
@@ -72,17 +344,71 @@
72
344
  }
73
345
  .us-tab__indicator {
74
346
  position: absolute;
75
- height: 3px;
76
- border-radius: 3px 3px 0px 0px;
347
+ height: var(--us-tab-indicator-height);
348
+ border-radius: 0;
77
349
  inset: auto 0px 0px;
78
350
  opacity: 0;
79
351
  z-index: -1;
80
352
  background: var(--us-tab-indicator-color);
81
353
  transform-origin: left bottom;
82
354
  }
83
- .us-tab--selected {
84
- color: var(--us-_active-tab-color);
85
- }
86
355
  .us-tab--selected .us-tab__indicator {
87
356
  opacity: 1;
357
+ }
358
+
359
+ .us-animation-spin {
360
+ animation: us-animation-spin 1s linear infinite;
361
+ transform-origin: center center;
362
+ }
363
+
364
+ @keyframes us-animation-spin {
365
+ from {
366
+ transform: rotate(0deg);
367
+ }
368
+ to {
369
+ transform: rotate(360deg);
370
+ }
371
+ }
372
+ .us-animation-pulse {
373
+ animation: us-animation-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
374
+ }
375
+
376
+ @keyframes us-animation-pulse {
377
+ 0%, 100% {
378
+ opacity: 1;
379
+ }
380
+ 50% {
381
+ opacity: 0.5;
382
+ }
383
+ }
384
+ .us-animation-bounce {
385
+ animation: us-animation-bounce 1s infinite;
386
+ }
387
+
388
+ @keyframes us-animation-bounce {
389
+ 0%, 100% {
390
+ transform: translateY(-25%);
391
+ animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
392
+ }
393
+ 50% {
394
+ transform: translateY(0);
395
+ animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
396
+ }
397
+ }
398
+ /* Estilos CSS aquí */
399
+ .slider-container {
400
+ width: 300px;
401
+ height: 20px;
402
+ background-color: #ccc;
403
+ position: relative;
404
+ margin-top: 20px;
405
+ }
406
+
407
+ .slider-point {
408
+ width: 20px;
409
+ height: 20px;
410
+ background-color: #007bff;
411
+ border-radius: 50%;
412
+ position: absolute;
413
+ cursor: pointer;
88
414
  }
package/css/styles.min.css CHANGED
@@ -1 +1 @@
1
- .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:var(--us-button-background);user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.us-button__elevation{position:absolute;inset:0px;z-index:0;border:var(--us-button-border-width) solid var(--us-button-border-color);border-radius:inherit;background:currentColor;opacity:var(--us-button-elevation-opacity)}.us-button:hover .us-button__elevation{opacity:var(--us-_hover-button-elevation-opacity)}.us-button:active .us-button__elevation{opacity:var(--us-_active-button-elevation-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}.us-divider{width:100%;height:1px;background:#cac4d0}.us-tabs{width:100%;display:flex;align-items:center}.us-tab{position:relative;width:100%;padding:0px 16px;font-size:14px;font-weight:500;vertical-align:middle;z-index:1;color:var(--us-tab-color);display:inline-flex;justify-content:center;align-items:center}.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:3px;border-radius:3px 3px 0px 0px;inset:auto 0px 0px;opacity:0;z-index:-1;background:var(--us-tab-indicator-color);transform-origin:left bottom}.us-tab--selected{color:var(--us-_active-tab-color)}.us-tab--selected .us-tab__indicator{opacity: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{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}
package/css/theme-default.css ADDED
@@ -0,0 +1,192 @@
1
+ .us-icon {
2
+ --us-icon-font-size: 1.5rem;
3
+ --us-icon-color: inherit;
4
+ }
5
+
6
+ .us-button {
7
+ --us-button-font-weight: 500;
8
+ --us-button-border-radius: 4px;
9
+ /* Overlay */
10
+ --us-_hover-overlay-color: inherit;
11
+ --us-_hover-overlay-opacity: 0.08;
12
+ --us-_active-overlay-color: inherit;
13
+ --us-_active-overlay-opacity: 0.12;
14
+ }
15
+ .us-button--filled {
16
+ --us-button-border-width: 1px;
17
+ --us-button-border-color: transparent;
18
+ --us-button-color: var(--us-white-color);
19
+ }
20
+ .us-button--filled.us-button--primary {
21
+ --us-button-background: var(--us-primary-color);
22
+ }
23
+ .us-button--filled.us-button--secondary {
24
+ --us-button-color: var(--us-black-color);
25
+ --us-button-background: var(--us-secondary-color);
26
+ }
27
+ .us-button--filled.us-button--success {
28
+ --us-button-background: var(--us-success-color);
29
+ }
30
+ .us-button--filled.us-button--info {
31
+ --us-button-background: var(--us-info-color);
32
+ }
33
+ .us-button--filled.us-button--warning {
34
+ --us-button-background: var(--us-warning-color);
35
+ }
36
+ .us-button--filled.us-button--danger {
37
+ --us-button-background: var(--us-danger-color);
38
+ }
39
+ .us-button--outlined {
40
+ --us-button-border-width: 1px;
41
+ --us-button-border-color: currentColor;
42
+ --us-button-elevation-opacity: 0;
43
+ --us-_hover-button-elevation-opacity: 0.08;
44
+ --us-_active-button-elevation-opacity: 0.12;
45
+ --us-button-outline-border-width: 1px;
46
+ --us-button-outline-border-color: currentColor;
47
+ }
48
+ .us-button--outlined.us-button--primary {
49
+ --us-button-color: var(--us-primary-color);
50
+ }
51
+ .us-button--outlined.us-button--secondary {
52
+ --us-button-color: var(--us-black-color);
53
+ }
54
+ .us-button--outlined.us-button--success {
55
+ --us-button-color: var(--us-success-color);
56
+ }
57
+ .us-button--outlined.us-button--info {
58
+ --us-button-color: var(--us-info-color);
59
+ }
60
+ .us-button--outlined.us-button--warning {
61
+ --us-button-color: var(--us-warning-color);
62
+ }
63
+ .us-button--outlined.us-button--danger {
64
+ --us-button-color: var(--us-danger-color);
65
+ }
66
+ .us-button--text {
67
+ --us-button-border-width: 1px;
68
+ --us-button-border-color: transparent;
69
+ --us-button-elevation-opacity: 0;
70
+ --us-_hover-button-elevation-opacity: 0.08;
71
+ --us-_active-button-elevation-opacity: 0.12;
72
+ }
73
+ .us-button--text.us-button--primary {
74
+ --us-button-color: var(--us-primary-color);
75
+ }
76
+ .us-button--text.us-button--secondary {
77
+ --us-button-color: var(--us-black-color);
78
+ }
79
+ .us-button--text.us-button--success {
80
+ --us-button-color: var(--us-success-color);
81
+ }
82
+ .us-button--text.us-button--info {
83
+ --us-button-color: var(--us-info-color);
84
+ }
85
+ .us-button--text.us-button--warning {
86
+ --us-button-color: var(--us-warning-color);
87
+ }
88
+ .us-button--text.us-button--danger {
89
+ --us-button-color: var(--us-danger-color);
90
+ }
91
+ .us-button--sm {
92
+ --us-button-height: 32px;
93
+ --us-button-padding-y: 0;
94
+ --us-button-padding-x: 0.75rem;
95
+ --us-button-font-size: 14px;
96
+ --us-button-gap: 0.375rem;
97
+ --us-icon-font-size: 1.125rem;
98
+ }
99
+ .us-button--md {
100
+ --us-button-height: 36px;
101
+ --us-button-padding-y: 0;
102
+ --us-button-padding-x: 1rem;
103
+ --us-button-font-size: 14px;
104
+ --us-button-gap: 0.5rem;
105
+ --us-icon-font-size: 1.25rem;
106
+ }
107
+ .us-button--lg {
108
+ --us-button-height: 40px;
109
+ --us-button-padding-y: 0;
110
+ --us-button-padding-x: 1.25rem;
111
+ --us-button-font-size: 1rem;
112
+ --us-button-gap: 0.5rem;
113
+ --us-icon-font-size: 1.5rem;
114
+ }
115
+
116
+ .us-menu {
117
+ --us-menu-color: #343a40;
118
+ --us-menu-background: #fff;
119
+ }
120
+ .us-menu-item {
121
+ --us-menu-item-height: 40px;
122
+ --us-menu-item-padding-y: 0;
123
+ --us-menu-item-padding-x: 1rem;
124
+ --us-menu-item-padding-level: 2rem;
125
+ --us-menu-item-font-size: 12px;
126
+ --us-menu-item-font-weight: 500;
127
+ --us-menu-item-gap: 1rem;
128
+ --us-menu-item-icon-font-size: 16px;
129
+ --us-menu-item-icon-color: var(--us-primary-color);
130
+ /* Overlay */
131
+ --us-overlay-color: inherit;
132
+ --us-overlay-opacity: 0;
133
+ --us-_hover-overlay-color: inherit;
134
+ --us-_hover-overlay-opacity: 0.08;
135
+ --us-_active-overlay-opacity: 0;
136
+ }
137
+ .us-menu-item--selected {
138
+ --us-menu-item-color: var(--us-primary-color);
139
+ --us-overlay-color: var(--us-primary-color);
140
+ --us-overlay-opacity: 0.08;
141
+ --us-_hover-overlay-opacity: 0;
142
+ --us-_active-overlay-opacity: 0;
143
+ }
144
+ .us-menu-group {
145
+ --us-menu-group-height: 40px;
146
+ --us-menu-group-padding-y: 0;
147
+ --us-menu-group-padding-x: 1rem;
148
+ --us-menu-group-padding-level: 2rem;
149
+ --us-menu-group-font-size: 12px;
150
+ --us-menu-group-font-weight: 700;
151
+ --us-menu-group-gap: 1rem;
152
+ --us-menu-group-border-width: 1px;
153
+ --us-menu-group-border-color: #dee2e6;
154
+ }
155
+ .us-menu-submenu {
156
+ --us-_active-submenu-item-color: var(--us-primary-color);
157
+ --us-_active-submenu-item-background: transparent;
158
+ }
159
+ .us-menu-submenu > .us-menu-item--selected {
160
+ --us-overlay-opacity: 0;
161
+ --us-_hover-overlay-opacity: 0;
162
+ --us-_active-overlay-opacity: 0;
163
+ }
164
+
165
+ .us-tab {
166
+ --us-tab-color: var(--us-black-color);
167
+ --us-tab-font-size: 12px;
168
+ --us-tab-font-weight: 500;
169
+ --us-tab-indicator-color: var(--us-primary-color);
170
+ --us-tab-indicator-height: 2px;
171
+ /* Overlay */
172
+ --us-_hover-overlay-color: inherit;
173
+ --us-_hover-overlay-opacity: 0.08;
174
+ --us-_active-overlay-color: inherit;
175
+ --us-_active-overlay-opacity: 0.12;
176
+ }
177
+ .us-tab--selected {
178
+ --us-tab-color: var(--us-primary-color);
179
+ --us-_hover-overlay-color: inherit;
180
+ --us-_active-overlay-color: inherit;
181
+ }
182
+
183
+ :root {
184
+ --us-primary-color: #990000;
185
+ --us-secondary-color: #dde4eb;
186
+ --us-success-color: #e1ae30;
187
+ --us-info-color: #8862e0;
188
+ --us-warning-color: #ffaf00;
189
+ --us-danger-color: #ff0017;
190
+ --us-black-color: #000;
191
+ --us-white-color: #fff;
192
+ }
package/css/theme-default.min.css ADDED
@@ -0,0 +1 @@
1
+ .us-icon{--us-icon-font-size: 1.5rem;--us-icon-color: inherit}.us-button{--us-button-font-weight: 500;--us-button-border-radius: 4px;--us-_hover-overlay-color: inherit;--us-_hover-overlay-opacity: 0.08;--us-_active-overlay-color: inherit;--us-_active-overlay-opacity: 0.12}.us-button--filled{--us-button-border-width: 1px;--us-button-border-color: transparent;--us-button-color: var(--us-white-color)}.us-button--filled.us-button--primary{--us-button-background: var(--us-primary-color)}.us-button--filled.us-button--secondary{--us-button-color: var(--us-black-color);--us-button-background: var(--us-secondary-color)}.us-button--filled.us-button--success{--us-button-background: var(--us-success-color)}.us-button--filled.us-button--info{--us-button-background: var(--us-info-color)}.us-button--filled.us-button--warning{--us-button-background: var(--us-warning-color)}.us-button--filled.us-button--danger{--us-button-background: var(--us-danger-color)}.us-button--outlined{--us-button-border-width: 1px;--us-button-border-color: currentColor;--us-button-elevation-opacity: 0;--us-_hover-button-elevation-opacity: 0.08;--us-_active-button-elevation-opacity: 0.12;--us-button-outline-border-width: 1px;--us-button-outline-border-color: currentColor}.us-button--outlined.us-button--primary{--us-button-color: var(--us-primary-color)}.us-button--outlined.us-button--secondary{--us-button-color: var(--us-black-color)}.us-button--outlined.us-button--success{--us-button-color: var(--us-success-color)}.us-button--outlined.us-button--info{--us-button-color: var(--us-info-color)}.us-button--outlined.us-button--warning{--us-button-color: var(--us-warning-color)}.us-button--outlined.us-button--danger{--us-button-color: var(--us-danger-color)}.us-button--text{--us-button-border-width: 1px;--us-button-border-color: transparent;--us-button-elevation-opacity: 0;--us-_hover-button-elevation-opacity: 0.08;--us-_active-button-elevation-opacity: 0.12}.us-button--text.us-button--primary{--us-button-color: var(--us-primary-color)}.us-button--text.us-button--secondary{--us-button-color: var(--us-black-color)}.us-button--text.us-button--success{--us-button-color: var(--us-success-color)}.us-button--text.us-button--info{--us-button-color: var(--us-info-color)}.us-button--text.us-button--warning{--us-button-color: var(--us-warning-color)}.us-button--text.us-button--danger{--us-button-color: var(--us-danger-color)}.us-button--sm{--us-button-height: 32px;--us-button-padding-y: 0;--us-button-padding-x: 0.75rem;--us-button-font-size: 14px;--us-button-gap: 0.375rem;--us-icon-font-size: 1.125rem}.us-button--md{--us-button-height: 36px;--us-button-padding-y: 0;--us-button-padding-x: 1rem;--us-button-font-size: 14px;--us-button-gap: 0.5rem;--us-icon-font-size: 1.25rem}.us-button--lg{--us-button-height: 40px;--us-button-padding-y: 0;--us-button-padding-x: 1.25rem;--us-button-font-size: 1rem;--us-button-gap: 0.5rem;--us-icon-font-size: 1.5rem}.us-menu{--us-menu-color: #343a40;--us-menu-background: #fff}.us-menu-item{--us-menu-item-height: 40px;--us-menu-item-padding-y: 0;--us-menu-item-padding-x: 1rem;--us-menu-item-padding-level: 2rem;--us-menu-item-font-size: 12px;--us-menu-item-font-weight: 500;--us-menu-item-gap: 1rem;--us-menu-item-icon-font-size: 16px;--us-menu-item-icon-color: var(--us-primary-color);--us-overlay-color: inherit;--us-overlay-opacity: 0;--us-_hover-overlay-color: inherit;--us-_hover-overlay-opacity: 0.08;--us-_active-overlay-opacity: 0}.us-menu-item--selected{--us-menu-item-color: var(--us-primary-color);--us-overlay-color: var(--us-primary-color);--us-overlay-opacity: 0.08;--us-_hover-overlay-opacity: 0;--us-_active-overlay-opacity: 0}.us-menu-group{--us-menu-group-height: 40px;--us-menu-group-padding-y: 0;--us-menu-group-padding-x: 1rem;--us-menu-group-padding-level: 2rem;--us-menu-group-font-size: 12px;--us-menu-group-font-weight: 700;--us-menu-group-gap: 1rem;--us-menu-group-border-width: 1px;--us-menu-group-border-color: #dee2e6}.us-menu-submenu{--us-_active-submenu-item-color: var(--us-primary-color);--us-_active-submenu-item-background: transparent}.us-menu-submenu>.us-menu-item--selected{--us-overlay-opacity: 0;--us-_hover-overlay-opacity: 0;--us-_active-overlay-opacity: 0}.us-tab{--us-tab-color: var(--us-black-color);--us-tab-font-size: 12px;--us-tab-font-weight: 500;--us-tab-indicator-color: var(--us-primary-color);--us-tab-indicator-height: 2px;--us-_hover-overlay-color: inherit;--us-_hover-overlay-opacity: 0.08;--us-_active-overlay-color: inherit;--us-_active-overlay-opacity: 0.12}.us-tab--selected{--us-tab-color: var(--us-primary-color);--us-_hover-overlay-color: inherit;--us-_active-overlay-color: inherit}:root{--us-primary-color: #990000;--us-secondary-color: #dde4eb;--us-success-color: #e1ae30;--us-info-color: #8862e0;--us-warning-color: #ffaf00;--us-danger-color: #ff0017;--us-black-color: #000;--us-white-color: #fff}