@unifiedsoftware/styles 1.0.3 → 1.0.5

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/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,104 @@
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:hover {
131
+ text-decoration: none;
132
+ }
133
+ .us-button > .us-overlay {
37
134
  position: absolute;
38
135
  inset: 0px;
39
136
  border-radius: inherit;
40
137
  overflow: hidden;
41
- color: inherit;
42
- }
43
- .us-button .us-overlay__surface {
44
- position: absolute;
45
- inset: 0px;
46
138
  color: var(--us-overlay-color);
47
139
  opacity: var(--us-overlay-opacity);
48
140
  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
141
  transition: opacity 15ms linear, background-color 15ms linear;
58
142
  }
59
- .us-button .us-overlay::after {
60
- content: "";
143
+ .us-button:hover > .us-overlay {
144
+ color: var(--us-_hover-overlay-color, var(--us-overlay-color));
145
+ opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
146
+ transition: opacity 30ms linear;
147
+ }
148
+ .us-button:active > .us-overlay {
149
+ color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
150
+ opacity: var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
151
+ }
152
+ .us-button > .us-outline {
61
153
  position: absolute;
62
154
  inset: 0px;
63
- opacity: 0;
64
- color: var(--us-_active-overlay-color);
65
- background-color: currentColor;
66
- transition: opacity 30ms linear;
155
+ border-radius: inherit;
156
+ overflow: hidden;
157
+ border: var(--us-outline-border-width) solid var(--us-outline-border-color);
67
158
  }
68
- .us-button:hover .us-overlay::before {
69
- color: var(--us-_hover-overlay-color);
70
- opacity: var(--us-_hover-overlay-opacity);
159
+ .us-button--disabled {
160
+ opacity: 0.6;
161
+ pointer-events: none;
71
162
  }
72
- .us-button:active .us-overlay::after {
73
- opacity: var(--us-_active-overlay-opacity);
163
+ .us-button--icon-only {
164
+ width: var(--us-button-height);
165
+ padding: 0;
166
+ border-radius: 9999px;
167
+ justify-content: center;
74
168
  }
75
169
  .us-button__outline {
76
170
  position: absolute;
@@ -80,7 +174,7 @@
80
174
  border-radius: inherit;
81
175
  pointer-events: none;
82
176
  }
83
- .us-button__prefix, .us-button__suffix, .us-button__content {
177
+ .us-button__start-icon, .us-button__end-icon, .us-button__content {
84
178
  position: relative;
85
179
  display: flex;
86
180
  align-items: center;
@@ -88,7 +182,7 @@
88
182
 
89
183
  .us-menu {
90
184
  margin: 0;
91
- padding: 0;
185
+ padding: var(--us-menu-padding-y) var(--us-menu-padding-x);
92
186
  color: var(--us-menu-color);
93
187
  background-color: var(--us-menu-background);
94
188
  }
@@ -98,6 +192,7 @@
98
192
  padding: var(--us-menu-item-padding-y) var(--us-menu-item-padding-x);
99
193
  font-size: var(--us-menu-item-font-size);
100
194
  font-weight: var(--us-menu-item-font-weight);
195
+ border-radius: var(--us-menu-item-border-radius);
101
196
  text-decoration: none;
102
197
  cursor: pointer;
103
198
  display: flex;
@@ -107,49 +202,28 @@
107
202
  user-select: none;
108
203
  -webkit-tap-highlight-color: transparent;
109
204
  gap: var(--us-menu-item-gap);
110
- position: relative;
111
205
  }
112
206
  .us-menu-item:hover {
113
207
  text-decoration: none;
114
208
  }
115
- .us-menu-item .us-overlay {
209
+ .us-menu-item > .us-overlay {
116
210
  position: absolute;
117
211
  inset: 0px;
118
212
  border-radius: inherit;
119
213
  overflow: hidden;
120
- color: inherit;
121
- }
122
- .us-menu-item .us-overlay__surface {
123
- position: absolute;
124
- inset: 0px;
125
214
  color: var(--us-overlay-color);
126
215
  opacity: var(--us-overlay-opacity);
127
216
  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
217
  transition: opacity 15ms linear, background-color 15ms linear;
137
218
  }
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;
219
+ .us-menu-item:hover > .us-overlay {
220
+ color: var(--us-_hover-overlay-color, var(--us-overlay-color));
221
+ opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
145
222
  transition: opacity 30ms linear;
146
223
  }
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);
224
+ .us-menu-item:active > .us-overlay {
225
+ color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
226
+ opacity: var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
153
227
  }
154
228
  .us-menu-item--disabled {
155
229
  opacity: 0.6;
@@ -189,54 +263,34 @@
189
263
  font-weight: var(--us-menu-group-font-weight);
190
264
  text-decoration: none;
191
265
  border-bottom: var(--us-menu-group-border-width) solid var(--us-menu-group-border-color);
266
+ border-radius: var(--us-menu-group-border-radius);
192
267
  display: flex;
193
268
  align-items: center;
194
269
  color: var(--us-menu-group-color);
195
270
  background-color: var(--us-menu-group-background);
196
271
  gap: var(--us-menu-group-gap);
197
- position: relative;
198
272
  }
199
273
  .us-menu-group:hover {
200
274
  text-decoration: none;
201
275
  }
202
- .us-menu-group .us-overlay {
276
+ .us-menu-group > .us-overlay {
203
277
  position: absolute;
204
278
  inset: 0px;
205
279
  border-radius: inherit;
206
280
  overflow: hidden;
207
- color: inherit;
208
- }
209
- .us-menu-group .us-overlay__surface {
210
- position: absolute;
211
- inset: 0px;
212
281
  color: var(--us-overlay-color);
213
282
  opacity: var(--us-overlay-opacity);
214
283
  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
284
  transition: opacity 15ms linear, background-color 15ms linear;
224
285
  }
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;
286
+ .us-menu-group:hover > .us-overlay {
287
+ color: var(--us-_hover-overlay-color, var(--us-overlay-color));
288
+ opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
232
289
  transition: opacity 30ms linear;
233
290
  }
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);
291
+ .us-menu-group:active > .us-overlay {
292
+ color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
293
+ opacity: var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
240
294
  }
241
295
  .us-menu-group__icon {
242
296
  flex-shrink: 0;
@@ -245,13 +299,6 @@
245
299
  justify-content: center;
246
300
  align-items: center;
247
301
  }
248
- .us-menu-group--selected .us-menu-group__icon {
249
- --us-menu-group-icon-color: var(--us-_active-menu-item-icon-color);
250
- }
251
- .us-menu-group__icon .us-icon {
252
- --us-icon-font-size: var(--us-menu-group-icon-font-size);
253
- --us-icon-color: var(--us-menu-group-icon-color);
254
- }
255
302
  .us-menu-group__content {
256
303
  flex-grow: 1;
257
304
  z-index: 1;
@@ -276,15 +323,35 @@
276
323
 
277
324
  .us-tabs {
278
325
  width: 100%;
326
+ white-space: nowrap;
327
+ overflow: hidden;
279
328
  display: flex;
280
329
  align-items: center;
281
330
  }
331
+ .us-tabs--start {
332
+ justify-content: flex-start;
333
+ }
334
+ .us-tabs--center {
335
+ justify-content: center;
336
+ }
337
+ .us-tabs--end {
338
+ justify-content: flex-end;
339
+ }
340
+ .us-tabs--stretch .us-tab {
341
+ flex-grow: 1;
342
+ }
343
+ @media (max-width: 767px) and (hover: none) {
344
+ .us-tabs {
345
+ overflow: auto;
346
+ }
347
+ }
282
348
 
283
349
  .us-tab {
284
350
  position: relative;
285
351
  padding: 0px 16px;
286
352
  font-size: var(--us-tab-font-size);
287
353
  font-weight: var(--us-tab-font-weight);
354
+ text-decoration: none;
288
355
  vertical-align: middle;
289
356
  z-index: 1;
290
357
  color: var(--us-tab-color);
@@ -293,50 +360,36 @@
293
360
  align-items: center;
294
361
  user-select: none;
295
362
  -webkit-tap-highlight-color: transparent;
296
- position: relative;
297
363
  }
298
- .us-tab .us-overlay {
364
+ .us-tab:hover {
365
+ text-decoration: none;
366
+ }
367
+ .us-tab > .us-overlay {
299
368
  position: absolute;
300
369
  inset: 0px;
301
370
  border-radius: inherit;
302
371
  overflow: hidden;
303
- color: inherit;
304
- }
305
- .us-tab .us-overlay__surface {
306
- position: absolute;
307
- inset: 0px;
308
372
  color: var(--us-overlay-color);
309
373
  opacity: var(--us-overlay-opacity);
310
374
  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
375
  transition: opacity 15ms linear, background-color 15ms linear;
320
376
  }
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;
377
+ .us-tab:hover > .us-overlay {
378
+ color: var(--us-_hover-overlay-color, var(--us-overlay-color));
379
+ opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
328
380
  transition: opacity 30ms linear;
329
381
  }
330
- .us-tab:hover .us-overlay::before {
331
- color: var(--us-_hover-overlay-color);
332
- opacity: var(--us-_hover-overlay-opacity);
382
+ .us-tab:active > .us-overlay {
383
+ color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
384
+ opacity: var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
333
385
  }
334
- .us-tab:active .us-overlay::after {
335
- opacity: var(--us-_active-overlay-opacity);
386
+ .us-tab--disabled {
387
+ opacity: 0.6;
388
+ pointer-events: none;
336
389
  }
337
390
  .us-tab__content {
338
391
  position: relative;
339
- height: 48px;
392
+ height: 40px;
340
393
  display: inline-flex;
341
394
  flex-direction: row;
342
395
  justify-content: center;
@@ -346,7 +399,7 @@
346
399
  .us-tab__indicator {
347
400
  position: absolute;
348
401
  height: var(--us-tab-indicator-height);
349
- border-radius: 0;
402
+ border-radius: var(--us-tab-indicator-border-radius);
350
403
  inset: auto 0px 0px;
351
404
  opacity: 0;
352
405
  z-index: -1;
@@ -396,6 +449,529 @@
396
449
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
397
450
  }
398
451
  }
452
+ .us-gap-0 {
453
+ gap: 0;
454
+ }
455
+
456
+ .us-gap-1 {
457
+ gap: 0.25rem;
458
+ }
459
+
460
+ .us-gap-2 {
461
+ gap: 0.5rem;
462
+ }
463
+
464
+ .us-gap-3 {
465
+ gap: 0.75rem;
466
+ }
467
+
468
+ .us-gap-4 {
469
+ gap: 1rem;
470
+ }
471
+
472
+ .us-gap-5 {
473
+ gap: 1.25rem;
474
+ }
475
+
476
+ .us-gap-6 {
477
+ gap: 1.5rem;
478
+ }
479
+
480
+ .us-gap-7 {
481
+ gap: 1.75rem;
482
+ }
483
+
484
+ .us-gap-8 {
485
+ gap: 2rem;
486
+ }
487
+
488
+ .us-gap-x-0 {
489
+ column-gap: 0;
490
+ }
491
+
492
+ .us-gap-x-1 {
493
+ column-gap: 0.25rem;
494
+ }
495
+
496
+ .us-gap-x-2 {
497
+ column-gap: 0.5rem;
498
+ }
499
+
500
+ .us-gap-x-3 {
501
+ column-gap: 0.75rem;
502
+ }
503
+
504
+ .us-gap-x-4 {
505
+ column-gap: 1rem;
506
+ }
507
+
508
+ .us-gap-x-5 {
509
+ column-gap: 1.25rem;
510
+ }
511
+
512
+ .us-gap-x-6 {
513
+ column-gap: 1.5rem;
514
+ }
515
+
516
+ .us-gap-x-7 {
517
+ column-gap: 1.75rem;
518
+ }
519
+
520
+ .us-gap-x-8 {
521
+ column-gap: 2rem;
522
+ }
523
+
524
+ .us-gap-y-0 {
525
+ row-gap: 0;
526
+ }
527
+
528
+ .us-gap-y-1 {
529
+ row-gap: 0.25rem;
530
+ }
531
+
532
+ .us-gap-y-2 {
533
+ row-gap: 0.5rem;
534
+ }
535
+
536
+ .us-gap-y-3 {
537
+ row-gap: 0.75rem;
538
+ }
539
+
540
+ .us-gap-y-4 {
541
+ row-gap: 1rem;
542
+ }
543
+
544
+ .us-gap-y-5 {
545
+ row-gap: 1.25rem;
546
+ }
547
+
548
+ .us-gap-y-6 {
549
+ row-gap: 1.5rem;
550
+ }
551
+
552
+ .us-gap-y-7 {
553
+ row-gap: 1.75rem;
554
+ }
555
+
556
+ .us-gap-y-8 {
557
+ row-gap: 2rem;
558
+ }
559
+
560
+ @media screen and (min-width: 0px) {
561
+ .xs\:us-gap-0 {
562
+ gap: 0;
563
+ }
564
+ .xs\:us-gap-1 {
565
+ gap: 0.25rem;
566
+ }
567
+ .xs\:us-gap-2 {
568
+ gap: 0.5rem;
569
+ }
570
+ .xs\:us-gap-3 {
571
+ gap: 0.75rem;
572
+ }
573
+ .xs\:us-gap-4 {
574
+ gap: 1rem;
575
+ }
576
+ .xs\:us-gap-5 {
577
+ gap: 1.25rem;
578
+ }
579
+ .xs\:us-gap-6 {
580
+ gap: 1.5rem;
581
+ }
582
+ .xs\:us-gap-7 {
583
+ gap: 1.75rem;
584
+ }
585
+ .xs\:us-gap-8 {
586
+ gap: 2rem;
587
+ }
588
+ .xs\:us-gap-x-0 {
589
+ column-gap: 0;
590
+ }
591
+ .xs\:us-gap-x-1 {
592
+ column-gap: 0.25rem;
593
+ }
594
+ .xs\:us-gap-x-2 {
595
+ column-gap: 0.5rem;
596
+ }
597
+ .xs\:us-gap-x-3 {
598
+ column-gap: 0.75rem;
599
+ }
600
+ .xs\:us-gap-x-4 {
601
+ column-gap: 1rem;
602
+ }
603
+ .xs\:us-gap-x-5 {
604
+ column-gap: 1.25rem;
605
+ }
606
+ .xs\:us-gap-x-6 {
607
+ column-gap: 1.5rem;
608
+ }
609
+ .xs\:us-gap-x-7 {
610
+ column-gap: 1.75rem;
611
+ }
612
+ .xs\:us-gap-x-8 {
613
+ column-gap: 2rem;
614
+ }
615
+ .xs\:us-gap-y-0 {
616
+ row-gap: 0;
617
+ }
618
+ .xs\:us-gap-y-1 {
619
+ row-gap: 0.25rem;
620
+ }
621
+ .xs\:us-gap-y-2 {
622
+ row-gap: 0.5rem;
623
+ }
624
+ .xs\:us-gap-y-3 {
625
+ row-gap: 0.75rem;
626
+ }
627
+ .xs\:us-gap-y-4 {
628
+ row-gap: 1rem;
629
+ }
630
+ .xs\:us-gap-y-5 {
631
+ row-gap: 1.25rem;
632
+ }
633
+ .xs\:us-gap-y-6 {
634
+ row-gap: 1.5rem;
635
+ }
636
+ .xs\:us-gap-y-7 {
637
+ row-gap: 1.75rem;
638
+ }
639
+ .xs\:us-gap-y-8 {
640
+ row-gap: 2rem;
641
+ }
642
+ }
643
+ @media screen and (min-width: 600px) {
644
+ .sm\:us-gap-0 {
645
+ gap: 0;
646
+ }
647
+ .sm\:us-gap-1 {
648
+ gap: 0.25rem;
649
+ }
650
+ .sm\:us-gap-2 {
651
+ gap: 0.5rem;
652
+ }
653
+ .sm\:us-gap-3 {
654
+ gap: 0.75rem;
655
+ }
656
+ .sm\:us-gap-4 {
657
+ gap: 1rem;
658
+ }
659
+ .sm\:us-gap-5 {
660
+ gap: 1.25rem;
661
+ }
662
+ .sm\:us-gap-6 {
663
+ gap: 1.5rem;
664
+ }
665
+ .sm\:us-gap-7 {
666
+ gap: 1.75rem;
667
+ }
668
+ .sm\:us-gap-8 {
669
+ gap: 2rem;
670
+ }
671
+ .sm\:us-gap-x-0 {
672
+ column-gap: 0;
673
+ }
674
+ .sm\:us-gap-x-1 {
675
+ column-gap: 0.25rem;
676
+ }
677
+ .sm\:us-gap-x-2 {
678
+ column-gap: 0.5rem;
679
+ }
680
+ .sm\:us-gap-x-3 {
681
+ column-gap: 0.75rem;
682
+ }
683
+ .sm\:us-gap-x-4 {
684
+ column-gap: 1rem;
685
+ }
686
+ .sm\:us-gap-x-5 {
687
+ column-gap: 1.25rem;
688
+ }
689
+ .sm\:us-gap-x-6 {
690
+ column-gap: 1.5rem;
691
+ }
692
+ .sm\:us-gap-x-7 {
693
+ column-gap: 1.75rem;
694
+ }
695
+ .sm\:us-gap-x-8 {
696
+ column-gap: 2rem;
697
+ }
698
+ .sm\:us-gap-y-0 {
699
+ row-gap: 0;
700
+ }
701
+ .sm\:us-gap-y-1 {
702
+ row-gap: 0.25rem;
703
+ }
704
+ .sm\:us-gap-y-2 {
705
+ row-gap: 0.5rem;
706
+ }
707
+ .sm\:us-gap-y-3 {
708
+ row-gap: 0.75rem;
709
+ }
710
+ .sm\:us-gap-y-4 {
711
+ row-gap: 1rem;
712
+ }
713
+ .sm\:us-gap-y-5 {
714
+ row-gap: 1.25rem;
715
+ }
716
+ .sm\:us-gap-y-6 {
717
+ row-gap: 1.5rem;
718
+ }
719
+ .sm\:us-gap-y-7 {
720
+ row-gap: 1.75rem;
721
+ }
722
+ .sm\:us-gap-y-8 {
723
+ row-gap: 2rem;
724
+ }
725
+ }
726
+ @media screen and (min-width: 960px) {
727
+ .md\:us-gap-0 {
728
+ gap: 0;
729
+ }
730
+ .md\:us-gap-1 {
731
+ gap: 0.25rem;
732
+ }
733
+ .md\:us-gap-2 {
734
+ gap: 0.5rem;
735
+ }
736
+ .md\:us-gap-3 {
737
+ gap: 0.75rem;
738
+ }
739
+ .md\:us-gap-4 {
740
+ gap: 1rem;
741
+ }
742
+ .md\:us-gap-5 {
743
+ gap: 1.25rem;
744
+ }
745
+ .md\:us-gap-6 {
746
+ gap: 1.5rem;
747
+ }
748
+ .md\:us-gap-7 {
749
+ gap: 1.75rem;
750
+ }
751
+ .md\:us-gap-8 {
752
+ gap: 2rem;
753
+ }
754
+ .md\:us-gap-x-0 {
755
+ column-gap: 0;
756
+ }
757
+ .md\:us-gap-x-1 {
758
+ column-gap: 0.25rem;
759
+ }
760
+ .md\:us-gap-x-2 {
761
+ column-gap: 0.5rem;
762
+ }
763
+ .md\:us-gap-x-3 {
764
+ column-gap: 0.75rem;
765
+ }
766
+ .md\:us-gap-x-4 {
767
+ column-gap: 1rem;
768
+ }
769
+ .md\:us-gap-x-5 {
770
+ column-gap: 1.25rem;
771
+ }
772
+ .md\:us-gap-x-6 {
773
+ column-gap: 1.5rem;
774
+ }
775
+ .md\:us-gap-x-7 {
776
+ column-gap: 1.75rem;
777
+ }
778
+ .md\:us-gap-x-8 {
779
+ column-gap: 2rem;
780
+ }
781
+ .md\:us-gap-y-0 {
782
+ row-gap: 0;
783
+ }
784
+ .md\:us-gap-y-1 {
785
+ row-gap: 0.25rem;
786
+ }
787
+ .md\:us-gap-y-2 {
788
+ row-gap: 0.5rem;
789
+ }
790
+ .md\:us-gap-y-3 {
791
+ row-gap: 0.75rem;
792
+ }
793
+ .md\:us-gap-y-4 {
794
+ row-gap: 1rem;
795
+ }
796
+ .md\:us-gap-y-5 {
797
+ row-gap: 1.25rem;
798
+ }
799
+ .md\:us-gap-y-6 {
800
+ row-gap: 1.5rem;
801
+ }
802
+ .md\:us-gap-y-7 {
803
+ row-gap: 1.75rem;
804
+ }
805
+ .md\:us-gap-y-8 {
806
+ row-gap: 2rem;
807
+ }
808
+ }
809
+ @media screen and (min-width: 1264px) {
810
+ .lg\:us-gap-0 {
811
+ gap: 0;
812
+ }
813
+ .lg\:us-gap-1 {
814
+ gap: 0.25rem;
815
+ }
816
+ .lg\:us-gap-2 {
817
+ gap: 0.5rem;
818
+ }
819
+ .lg\:us-gap-3 {
820
+ gap: 0.75rem;
821
+ }
822
+ .lg\:us-gap-4 {
823
+ gap: 1rem;
824
+ }
825
+ .lg\:us-gap-5 {
826
+ gap: 1.25rem;
827
+ }
828
+ .lg\:us-gap-6 {
829
+ gap: 1.5rem;
830
+ }
831
+ .lg\:us-gap-7 {
832
+ gap: 1.75rem;
833
+ }
834
+ .lg\:us-gap-8 {
835
+ gap: 2rem;
836
+ }
837
+ .lg\:us-gap-x-0 {
838
+ column-gap: 0;
839
+ }
840
+ .lg\:us-gap-x-1 {
841
+ column-gap: 0.25rem;
842
+ }
843
+ .lg\:us-gap-x-2 {
844
+ column-gap: 0.5rem;
845
+ }
846
+ .lg\:us-gap-x-3 {
847
+ column-gap: 0.75rem;
848
+ }
849
+ .lg\:us-gap-x-4 {
850
+ column-gap: 1rem;
851
+ }
852
+ .lg\:us-gap-x-5 {
853
+ column-gap: 1.25rem;
854
+ }
855
+ .lg\:us-gap-x-6 {
856
+ column-gap: 1.5rem;
857
+ }
858
+ .lg\:us-gap-x-7 {
859
+ column-gap: 1.75rem;
860
+ }
861
+ .lg\:us-gap-x-8 {
862
+ column-gap: 2rem;
863
+ }
864
+ .lg\:us-gap-y-0 {
865
+ row-gap: 0;
866
+ }
867
+ .lg\:us-gap-y-1 {
868
+ row-gap: 0.25rem;
869
+ }
870
+ .lg\:us-gap-y-2 {
871
+ row-gap: 0.5rem;
872
+ }
873
+ .lg\:us-gap-y-3 {
874
+ row-gap: 0.75rem;
875
+ }
876
+ .lg\:us-gap-y-4 {
877
+ row-gap: 1rem;
878
+ }
879
+ .lg\:us-gap-y-5 {
880
+ row-gap: 1.25rem;
881
+ }
882
+ .lg\:us-gap-y-6 {
883
+ row-gap: 1.5rem;
884
+ }
885
+ .lg\:us-gap-y-7 {
886
+ row-gap: 1.75rem;
887
+ }
888
+ .lg\:us-gap-y-8 {
889
+ row-gap: 2rem;
890
+ }
891
+ }
892
+ @media screen and (min-width: 1904px) {
893
+ .xl\:us-gap-0 {
894
+ gap: 0;
895
+ }
896
+ .xl\:us-gap-1 {
897
+ gap: 0.25rem;
898
+ }
899
+ .xl\:us-gap-2 {
900
+ gap: 0.5rem;
901
+ }
902
+ .xl\:us-gap-3 {
903
+ gap: 0.75rem;
904
+ }
905
+ .xl\:us-gap-4 {
906
+ gap: 1rem;
907
+ }
908
+ .xl\:us-gap-5 {
909
+ gap: 1.25rem;
910
+ }
911
+ .xl\:us-gap-6 {
912
+ gap: 1.5rem;
913
+ }
914
+ .xl\:us-gap-7 {
915
+ gap: 1.75rem;
916
+ }
917
+ .xl\:us-gap-8 {
918
+ gap: 2rem;
919
+ }
920
+ .xl\:us-gap-x-0 {
921
+ column-gap: 0;
922
+ }
923
+ .xl\:us-gap-x-1 {
924
+ column-gap: 0.25rem;
925
+ }
926
+ .xl\:us-gap-x-2 {
927
+ column-gap: 0.5rem;
928
+ }
929
+ .xl\:us-gap-x-3 {
930
+ column-gap: 0.75rem;
931
+ }
932
+ .xl\:us-gap-x-4 {
933
+ column-gap: 1rem;
934
+ }
935
+ .xl\:us-gap-x-5 {
936
+ column-gap: 1.25rem;
937
+ }
938
+ .xl\:us-gap-x-6 {
939
+ column-gap: 1.5rem;
940
+ }
941
+ .xl\:us-gap-x-7 {
942
+ column-gap: 1.75rem;
943
+ }
944
+ .xl\:us-gap-x-8 {
945
+ column-gap: 2rem;
946
+ }
947
+ .xl\:us-gap-y-0 {
948
+ row-gap: 0;
949
+ }
950
+ .xl\:us-gap-y-1 {
951
+ row-gap: 0.25rem;
952
+ }
953
+ .xl\:us-gap-y-2 {
954
+ row-gap: 0.5rem;
955
+ }
956
+ .xl\:us-gap-y-3 {
957
+ row-gap: 0.75rem;
958
+ }
959
+ .xl\:us-gap-y-4 {
960
+ row-gap: 1rem;
961
+ }
962
+ .xl\:us-gap-y-5 {
963
+ row-gap: 1.25rem;
964
+ }
965
+ .xl\:us-gap-y-6 {
966
+ row-gap: 1.5rem;
967
+ }
968
+ .xl\:us-gap-y-7 {
969
+ row-gap: 1.75rem;
970
+ }
971
+ .xl\:us-gap-y-8 {
972
+ row-gap: 2rem;
973
+ }
974
+ }
399
975
  /* Estilos CSS aquí */
400
976
  .slider-container {
401
977
  width: 300px;