@unifiedsoftware/styles 1.0.9 → 1.0.11

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
@@ -16,12 +16,11 @@
16
16
  color: var(--us-overlay-color);
17
17
  opacity: var(--us-overlay-opacity);
18
18
  background-color: currentColor;
19
- transition: opacity 15ms linear, background-color 15ms linear;
19
+ transition: all 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
20
20
  }
21
21
  .us-toolbar:hover > .us-overlay {
22
22
  color: var(--us-_hover-overlay-color, var(--us-overlay-color));
23
23
  opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
24
- transition: opacity 30ms linear;
25
24
  }
26
25
  .us-toolbar:active > .us-overlay {
27
26
  color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
@@ -80,12 +79,11 @@
80
79
  color: var(--us-overlay-color);
81
80
  opacity: var(--us-overlay-opacity);
82
81
  background-color: currentColor;
83
- transition: opacity 15ms linear, background-color 15ms linear;
82
+ transition: all 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
84
83
  }
85
84
  .us-badge:hover > .us-overlay {
86
85
  color: var(--us-_hover-overlay-color, var(--us-overlay-color));
87
86
  opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
88
- transition: opacity 30ms linear;
89
87
  }
90
88
  .us-badge:active > .us-overlay {
91
89
  color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
@@ -151,12 +149,11 @@
151
149
  color: var(--us-overlay-color);
152
150
  opacity: var(--us-overlay-opacity);
153
151
  background-color: currentColor;
154
- transition: opacity 15ms linear, background-color 15ms linear;
152
+ transition: all 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
155
153
  }
156
154
  .us-chip:hover > .us-overlay {
157
155
  color: var(--us-_hover-overlay-color, var(--us-overlay-color));
158
156
  opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
159
- transition: opacity 30ms linear;
160
157
  }
161
158
  .us-chip:active > .us-overlay {
162
159
  color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
@@ -167,7 +164,25 @@
167
164
  inset: 0px;
168
165
  border-radius: inherit;
169
166
  overflow: hidden;
170
- border: var(--us-outline-border-width) solid var(--us-outline-border-color);
167
+ border-width: var(--us-outline-border-width);
168
+ border-style: solid;
169
+ border-color: var(--us-outline-border-color);
170
+ opacity: var(--us-outline-opacity);
171
+ }
172
+ .us-chip:hover > .us-outline {
173
+ border-width: var(--us-outline-hover-border-width, var(--us-outline-border-width));
174
+ border-color: var(--us-outline-hover-border-color, var(--us-outline-border-color));
175
+ opacity: var(--us-outline-hover-opacity, var(--us-outline-opacity));
176
+ }
177
+ .us-chip:active > .us-outline {
178
+ border-width: var(--us-outline-active-border-width, var(--us-outline-hover-border-width, var(--us-outline-border-width)));
179
+ border-color: var(--us-outline-active-border-color, var(--us-outline-hover-border-color, var(--us-outline-border-color)));
180
+ opacity: var(--us-outline-active-opacity, var(--us-outline-hover-opacity, var(--us-outline-opacity)));
181
+ }
182
+ .us-chip--focus > .us-outline, .us-chip--focus:hover > .us-outline, .us-chip:focus > .us-outline {
183
+ border-width: var(--us-outline-focus-border-width, var(--us-outline-hover-border-width, var(--us-outline-border-width)));
184
+ border-color: var(--us-outline-focus-border-color, var(--us-outline-hover-border-color, var(--us-outline-border-color)));
185
+ opacity: var(--us-outline-focus-opacity, var(--us-outline-hover-opacity, var(--us-outline-opacity)));
171
186
  }
172
187
 
173
188
  .us-button {
@@ -184,6 +199,7 @@
184
199
  color: var(--us-button-color);
185
200
  background-color: var(--us-button-background);
186
201
  display: inline-flex;
202
+ justify-content: center;
187
203
  align-items: center;
188
204
  gap: var(--us-button-gap);
189
205
  user-select: none;
@@ -200,12 +216,11 @@
200
216
  color: var(--us-overlay-color);
201
217
  opacity: var(--us-overlay-opacity);
202
218
  background-color: currentColor;
203
- transition: opacity 15ms linear, background-color 15ms linear;
219
+ transition: all 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
204
220
  }
205
221
  .us-button:hover > .us-overlay {
206
222
  color: var(--us-_hover-overlay-color, var(--us-overlay-color));
207
223
  opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
208
- transition: opacity 30ms linear;
209
224
  }
210
225
  .us-button:active > .us-overlay {
211
226
  color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
@@ -216,7 +231,28 @@
216
231
  inset: 0px;
217
232
  border-radius: inherit;
218
233
  overflow: hidden;
219
- border: var(--us-outline-border-width) solid var(--us-outline-border-color);
234
+ border-width: var(--us-outline-border-width);
235
+ border-style: solid;
236
+ border-color: var(--us-outline-border-color);
237
+ opacity: var(--us-outline-opacity);
238
+ }
239
+ .us-button:hover > .us-outline {
240
+ border-width: var(--us-outline-hover-border-width, var(--us-outline-border-width));
241
+ border-color: var(--us-outline-hover-border-color, var(--us-outline-border-color));
242
+ opacity: var(--us-outline-hover-opacity, var(--us-outline-opacity));
243
+ }
244
+ .us-button:active > .us-outline {
245
+ border-width: var(--us-outline-active-border-width, var(--us-outline-hover-border-width, var(--us-outline-border-width)));
246
+ border-color: var(--us-outline-active-border-color, var(--us-outline-hover-border-color, var(--us-outline-border-color)));
247
+ opacity: var(--us-outline-active-opacity, var(--us-outline-hover-opacity, var(--us-outline-opacity)));
248
+ }
249
+ .us-button--focus > .us-outline, .us-button--focus:hover > .us-outline, .us-button:focus > .us-outline {
250
+ border-width: var(--us-outline-focus-border-width, var(--us-outline-hover-border-width, var(--us-outline-border-width)));
251
+ border-color: var(--us-outline-focus-border-color, var(--us-outline-hover-border-color, var(--us-outline-border-color)));
252
+ opacity: var(--us-outline-focus-opacity, var(--us-outline-hover-opacity, var(--us-outline-opacity)));
253
+ }
254
+ .us-button--block {
255
+ width: 100%;
220
256
  }
221
257
  .us-button--disabled {
222
258
  opacity: 0.6;
@@ -242,6 +278,21 @@
242
278
  align-items: center;
243
279
  }
244
280
 
281
+ .us-scroll-area::-webkit-scrollbar {
282
+ width: 12px;
283
+ }
284
+ .us-scroll-area::-webkit-scrollbar-track {
285
+ box-shadow: inset 0 0 0px 2px #fff;
286
+ }
287
+ .us-scroll-area::-webkit-scrollbar-thumb {
288
+ background-color: #ccd2d9;
289
+ box-shadow: inset 0 0 0px 2px #fff;
290
+ border-radius: 6px;
291
+ }
292
+ .us-scroll-area--vertical {
293
+ overflow-y: auto;
294
+ }
295
+
245
296
  .us-backdrop {
246
297
  position: fixed;
247
298
  top: 0;
@@ -276,6 +327,30 @@
276
327
  background-color: rgba(0, 0, 0, 0.6);
277
328
  }
278
329
 
330
+ .us-popover {
331
+ min-width: 240px;
332
+ position: absolute;
333
+ border-radius: 0.25rem;
334
+ box-shadow: rgba(0, 0, 59, 0.05) 0px 0px 0px 1px, rgba(1, 1, 46, 0.133) 0px 12px 60px 0px, rgba(0, 0, 0, 0.133) 0px 12px 32px -16px;
335
+ background-color: #fff;
336
+ overflow: hidden;
337
+ z-index: 40;
338
+ display: flex;
339
+ flex-direction: column;
340
+ }
341
+ .us-popover__overlay {
342
+ position: absolute;
343
+ top: 0;
344
+ left: 0;
345
+ width: 100%;
346
+ height: 100%;
347
+ pointer-events: none;
348
+ border-radius: inherit;
349
+ background-color: #fff;
350
+ opacity: 1;
351
+ z-index: 0;
352
+ }
353
+
279
354
  .us-drawer {
280
355
  position: absolute;
281
356
  max-width: var(--us-drawer-width);
@@ -381,6 +456,264 @@
381
456
  }
382
457
  }
383
458
 
459
+ .us-input {
460
+ position: relative;
461
+ width: 100%;
462
+ padding: 0;
463
+ display: flex;
464
+ align-items: center;
465
+ border: none;
466
+ border-radius: var(--us-input-border-radius);
467
+ color: var(--us-input-color);
468
+ background-color: var(--us-input-background);
469
+ }
470
+ .us-input > .us-outline {
471
+ position: absolute;
472
+ inset: 0px;
473
+ border-radius: inherit;
474
+ overflow: hidden;
475
+ border-width: var(--us-outline-border-width);
476
+ border-style: solid;
477
+ border-color: var(--us-outline-border-color);
478
+ opacity: var(--us-outline-opacity);
479
+ }
480
+ .us-input:hover > .us-outline {
481
+ border-width: var(--us-outline-hover-border-width, var(--us-outline-border-width));
482
+ border-color: var(--us-outline-hover-border-color, var(--us-outline-border-color));
483
+ opacity: var(--us-outline-hover-opacity, var(--us-outline-opacity));
484
+ }
485
+ .us-input:active > .us-outline {
486
+ border-width: var(--us-outline-active-border-width, var(--us-outline-hover-border-width, var(--us-outline-border-width)));
487
+ border-color: var(--us-outline-active-border-color, var(--us-outline-hover-border-color, var(--us-outline-border-color)));
488
+ opacity: var(--us-outline-active-opacity, var(--us-outline-hover-opacity, var(--us-outline-opacity)));
489
+ }
490
+ .us-input--focus > .us-outline, .us-input--focus:hover > .us-outline, .us-input:focus > .us-outline {
491
+ border-width: var(--us-outline-focus-border-width, var(--us-outline-hover-border-width, var(--us-outline-border-width)));
492
+ border-color: var(--us-outline-focus-border-color, var(--us-outline-hover-border-color, var(--us-outline-border-color)));
493
+ opacity: var(--us-outline-focus-opacity, var(--us-outline-hover-opacity, var(--us-outline-opacity)));
494
+ }
495
+ .us-input--disabled {
496
+ opacity: 0.75;
497
+ pointer-events: none;
498
+ }
499
+ .us-input__content {
500
+ flex: 1;
501
+ height: 100%;
502
+ display: flex;
503
+ align-items: center;
504
+ z-index: 1;
505
+ }
506
+ .us-input__field {
507
+ flex: 1;
508
+ width: 100%;
509
+ padding: var(--us-input-padding-y) var(--us-input-padding-x);
510
+ font-size: var(--us-input-font-size);
511
+ line-height: var(--us-input-line-height);
512
+ border: none;
513
+ outline: none;
514
+ color: var(--us-input-color);
515
+ background-color: transparent;
516
+ display: flex;
517
+ align-items: center;
518
+ }
519
+ .us-input__field:focus {
520
+ outline: none !important;
521
+ }
522
+ .us-input__start-content, .us-input__end-content {
523
+ flex-shrink: 0;
524
+ display: flex;
525
+ align-items: center;
526
+ }
527
+ .us-input__start-content .us-icon, .us-input__end-content .us-icon {
528
+ font-size: var(--us-input-icon-size);
529
+ }
530
+ .us-input__start-content {
531
+ margin-right: calc(-1 * var(--us-input-icon-size));
532
+ padding: var(--us-input-padding-y) calc(0.75 * var(--us-input-padding-x));
533
+ }
534
+ .us-input__end-content {
535
+ margin-left: calc(-1 * var(--us-input-icon-size));
536
+ padding: var(--us-input-padding-y) calc(0.75 * var(--us-input-padding-x));
537
+ }
538
+
539
+ .us-accordion-item {
540
+ border-bottom: 1px solid #e6e6e6;
541
+ }
542
+ .us-accordion-item:last-child {
543
+ border-bottom: none;
544
+ }
545
+ .us-accordion-header {
546
+ padding: 0.75rem 1rem;
547
+ cursor: pointer;
548
+ display: flex;
549
+ align-items: center;
550
+ gap: 1rem;
551
+ }
552
+ .us-accordion-header__content {
553
+ flex-grow: 1;
554
+ }
555
+ .us-accordion-header__start-content, .us-accordion-header__end-content {
556
+ flex-shrink: 0;
557
+ }
558
+ .us-accordion-header__title {
559
+ font-size: 0.875rem;
560
+ font-weight: 500;
561
+ }
562
+ .us-accordion-header__subtitle {
563
+ font-size: 0.75rem;
564
+ opacity: 0.75;
565
+ }
566
+ .us-accordion-panel {
567
+ padding: 1rem;
568
+ }
569
+
570
+ .us-list {
571
+ margin: 0;
572
+ padding: var(--us-list-padding-y) var(--us-list-padding-x);
573
+ color: var(--us-list-color);
574
+ background-color: var(--us-list-background);
575
+ }
576
+ .us-list-item {
577
+ position: relative;
578
+ height: var(--us-list-item-height);
579
+ padding: var(--us-list-item-padding-y) var(--us-list-item-padding-x);
580
+ font-size: var(--us-list-item-font-size);
581
+ font-weight: var(--us-list-item-font-weight);
582
+ border-radius: var(--us-list-item-border-radius);
583
+ text-decoration: none;
584
+ display: flex;
585
+ align-items: center;
586
+ color: var(--us-list-item-color);
587
+ background-color: var(--us-list-item-background);
588
+ -webkit-tap-highlight-color: transparent;
589
+ gap: var(--us-list-item-gap);
590
+ }
591
+ .us-list-item:hover {
592
+ text-decoration: none;
593
+ }
594
+ .us-list-item > .us-overlay {
595
+ position: absolute;
596
+ inset: 0px;
597
+ border-radius: inherit;
598
+ overflow: hidden;
599
+ color: var(--us-overlay-color);
600
+ opacity: var(--us-overlay-opacity);
601
+ background-color: currentColor;
602
+ transition: all 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
603
+ }
604
+ .us-list-item:hover > .us-overlay {
605
+ color: var(--us-_hover-overlay-color, var(--us-overlay-color));
606
+ opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
607
+ }
608
+ .us-list-item:active > .us-overlay {
609
+ color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
610
+ opacity: var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
611
+ }
612
+ .us-list-item--hoverable {
613
+ cursor: pointer;
614
+ user-select: none;
615
+ }
616
+ .us-list-item--disabled {
617
+ opacity: 0.6;
618
+ pointer-events: none;
619
+ }
620
+ .us-list-item__start-content, .us-list-item__end-content {
621
+ flex-shrink: 0;
622
+ z-index: 1;
623
+ display: flex;
624
+ justify-content: center;
625
+ align-items: center;
626
+ gap: calc(var(--us-list-item-gap) * 0.5);
627
+ }
628
+ .us-list-item__start-content .us-icon, .us-list-item__end-content .us-icon {
629
+ --us-icon-font-size: var(--us-list-item-icon-font-size);
630
+ --us-icon-color: var(--us-list-item-icon-color);
631
+ }
632
+ .us-list-item__content {
633
+ flex-grow: 1;
634
+ z-index: 1;
635
+ display: grid;
636
+ overflow: hidden;
637
+ }
638
+ .us-list-item__title {
639
+ font-size: var(--us-list-item-title-font-size);
640
+ font-weight: var(--us-list-item-title-font-weight);
641
+ line-height: var(--us-list-item-title-line-height);
642
+ opacity: var(--us-list-item-title-opacity);
643
+ overflow: hidden;
644
+ display: -webkit-box;
645
+ -webkit-box-orient: vertical;
646
+ -webkit-line-clamp: 1;
647
+ }
648
+ .us-list-item__subtitle {
649
+ font-size: var(--us-list-item-subtitle-font-size);
650
+ font-weight: var(--us-list-item-subtitle-font-weight);
651
+ line-height: var(--us-list-item-subtitle-line-height);
652
+ opacity: var(--us-list-item-subtitle-opacity);
653
+ overflow: hidden;
654
+ display: -webkit-box;
655
+ -webkit-box-orient: vertical;
656
+ -webkit-line-clamp: 1;
657
+ }
658
+ .us-list-subheader {
659
+ position: relative;
660
+ height: var(--us-list-subheader-height);
661
+ padding: var(--us-list-subheader-padding-y) var(--us-list-subheader-padding-x);
662
+ font-size: var(--us-list-subheader-font-size);
663
+ font-weight: var(--us-list-subheader-font-weight);
664
+ text-decoration: none;
665
+ border-bottom: var(--us-list-subheader-border-width) solid var(--us-list-subheader-border-color);
666
+ border-radius: var(--us-list-subheader-border-radius);
667
+ display: flex;
668
+ align-items: center;
669
+ color: var(--us-list-subheader-color);
670
+ background-color: var(--us-list-subheader-background);
671
+ gap: var(--us-list-subheader-gap);
672
+ }
673
+ .us-list-subheader:hover {
674
+ text-decoration: none;
675
+ }
676
+ .us-list-subheader > .us-overlay {
677
+ position: absolute;
678
+ inset: 0px;
679
+ border-radius: inherit;
680
+ overflow: hidden;
681
+ color: var(--us-overlay-color);
682
+ opacity: var(--us-overlay-opacity);
683
+ background-color: currentColor;
684
+ transition: all 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
685
+ }
686
+ .us-list-subheader:hover > .us-overlay {
687
+ color: var(--us-_hover-overlay-color, var(--us-overlay-color));
688
+ opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
689
+ }
690
+ .us-list-subheader:active > .us-overlay {
691
+ color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
692
+ opacity: var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)));
693
+ }
694
+ .us-list-subheader__icon {
695
+ flex-shrink: 0;
696
+ z-index: 1;
697
+ display: flex;
698
+ justify-content: center;
699
+ align-items: center;
700
+ }
701
+ .us-list-subheader__content {
702
+ flex-grow: 1;
703
+ z-index: 1;
704
+ display: grid;
705
+ overflow: hidden;
706
+ }
707
+ .us-list-subheader__title {
708
+ overflow: hidden;
709
+ display: -webkit-box;
710
+ -webkit-box-orient: vertical;
711
+ -webkit-line-clamp: 1;
712
+ }
713
+ .us-list-group .us-list {
714
+ --us-list-background: var(--us-list-group-background);
715
+ }
716
+
384
717
  .us-menu {
385
718
  margin: 0;
386
719
  padding: var(--us-menu-padding-y) var(--us-menu-padding-x);
@@ -415,12 +748,11 @@
415
748
  color: var(--us-overlay-color);
416
749
  opacity: var(--us-overlay-opacity);
417
750
  background-color: currentColor;
418
- transition: opacity 15ms linear, background-color 15ms linear;
751
+ transition: all 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
419
752
  }
420
753
  .us-menu-item:hover > .us-overlay {
421
754
  color: var(--us-_hover-overlay-color, var(--us-overlay-color));
422
755
  opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
423
- transition: opacity 30ms linear;
424
756
  }
425
757
  .us-menu-item:active > .us-overlay {
426
758
  color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
@@ -482,12 +814,11 @@
482
814
  color: var(--us-overlay-color);
483
815
  opacity: var(--us-overlay-opacity);
484
816
  background-color: currentColor;
485
- transition: opacity 15ms linear, background-color 15ms linear;
817
+ transition: all 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
486
818
  }
487
819
  .us-menu-group:hover > .us-overlay {
488
820
  color: var(--us-_hover-overlay-color, var(--us-overlay-color));
489
821
  opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
490
- transition: opacity 30ms linear;
491
822
  }
492
823
  .us-menu-group:active > .us-overlay {
493
824
  color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
@@ -573,12 +904,11 @@
573
904
  color: var(--us-overlay-color);
574
905
  opacity: var(--us-overlay-opacity);
575
906
  background-color: currentColor;
576
- transition: opacity 15ms linear, background-color 15ms linear;
907
+ transition: all 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
577
908
  }
578
909
  .us-tab:hover > .us-overlay {
579
910
  color: var(--us-_hover-overlay-color, var(--us-overlay-color));
580
911
  opacity: var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));
581
- transition: opacity 30ms linear;
582
912
  }
583
913
  .us-tab:active > .us-overlay {
584
914
  color: var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));
@@ -611,6 +941,33 @@
611
941
  opacity: 1;
612
942
  }
613
943
 
944
+ .us-card {
945
+ border: var(--us-card-border-width) var(--us-card-border-style) var(--us-card-border-color);
946
+ border-radius: var(--us-card-border-radius);
947
+ }
948
+ .us-card-header {
949
+ padding: var(--us-card-header-padding-y) var(--us-card-header-padding-x);
950
+ display: flex;
951
+ align-items: center;
952
+ gap: var(--us-card-header-gap);
953
+ }
954
+ .us-card-header__start-content, .us-card-header__end-content {
955
+ flex-shrink: 0;
956
+ }
957
+ .us-card-header__content {
958
+ flex-grow: 1;
959
+ }
960
+ .us-card-header__title {
961
+ font-size: var(--us-card-header-title-font-size);
962
+ font-weight: var(--us-card-header-title-font-weight);
963
+ line-height: var(--us-card-header-title-line-height);
964
+ }
965
+ .us-card-header__subtitle {
966
+ font-size: var(--us-card-header-subtitle-font-size);
967
+ font-weight: var(--us-card-header-subtitle-font-weight);
968
+ line-height: var(--us-card-header-subtitle-line-height);
969
+ }
970
+
614
971
  .us-animation-spin {
615
972
  animation: us-animation-spin 1s linear infinite;
616
973
  transform-origin: center center;
@@ -650,6 +1007,30 @@
650
1007
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
651
1008
  }
652
1009
  }
1010
+ .us-w-full {
1011
+ width: 100%;
1012
+ }
1013
+
1014
+ .us-w-screen {
1015
+ width: 100vh;
1016
+ }
1017
+
1018
+ .us-h-full {
1019
+ height: 100%;
1020
+ }
1021
+
1022
+ .us-h-screen {
1023
+ height: 100dvh;
1024
+ }
1025
+
1026
+ .us-overflow-auto {
1027
+ overflow: auto;
1028
+ }
1029
+
1030
+ .us-overflow-hidden {
1031
+ overflow: hidden;
1032
+ }
1033
+
653
1034
  .us-d-block {
654
1035
  display: block;
655
1036
  }
@@ -702,22 +1083,66 @@
702
1083
  flex-wrap: wrap-reverse;
703
1084
  }
704
1085
 
705
- .us-flex-grow-0 {
1086
+ .us-grow-0 {
706
1087
  flex-grow: 0;
707
1088
  }
708
1089
 
709
- .us-flex-grow-1 {
1090
+ .us-grow-1 {
710
1091
  flex-grow: 1;
711
1092
  }
712
1093
 
713
- .us-flex-shrink-0 {
1094
+ .us-shrink-0 {
714
1095
  flex-shrink: 0;
715
1096
  }
716
1097
 
717
- .us-flex-shrink-1 {
1098
+ .us-shrink-1 {
718
1099
  flex-shrink: 1;
719
1100
  }
720
1101
 
1102
+ .us-justify-start {
1103
+ justify-content: flex-start;
1104
+ }
1105
+
1106
+ .us-justify-end {
1107
+ justify-content: flex-end;
1108
+ }
1109
+
1110
+ .us-justify-center {
1111
+ justify-content: center;
1112
+ }
1113
+
1114
+ .us-justify-between {
1115
+ justify-content: space-between;
1116
+ }
1117
+
1118
+ .us-justify-around {
1119
+ justify-content: space-around;
1120
+ }
1121
+
1122
+ .us-justify-evenly {
1123
+ justify-content: space-evenly;
1124
+ }
1125
+
1126
+ .us-items-start {
1127
+ align-items: flex-start;
1128
+ }
1129
+
1130
+ .us-items-end {
1131
+ align-items: flex-end;
1132
+ }
1133
+
1134
+ .us-items-center {
1135
+ align-items: center;
1136
+ }
1137
+
1138
+ .us-items-stretch {
1139
+ align-items: stretch;
1140
+ }
1141
+
1142
+ .us-items-baseline {
1143
+ align-items: baseline;
1144
+ }
1145
+
721
1146
  .us-gap-0 {
722
1147
  gap: 0;
723
1148
  }
@@ -827,6 +1252,18 @@
827
1252
  }
828
1253
 
829
1254
  @media screen and (min-width: 0px) {
1255
+ .xs\:us-h-full {
1256
+ height: 100%;
1257
+ }
1258
+ .xs\:us-h-screen {
1259
+ height: 100dvh;
1260
+ }
1261
+ .xs\:us-overflow-auto {
1262
+ overflow: auto;
1263
+ }
1264
+ .xs\:us-overflow-hidden {
1265
+ overflow: hidden;
1266
+ }
830
1267
  .xs\:us-d-block {
831
1268
  display: block;
832
1269
  }
@@ -866,18 +1303,51 @@
866
1303
  .xs\:us-flex-wrap-reverse {
867
1304
  flex-wrap: wrap-reverse;
868
1305
  }
869
- .xs\:us-flex-grow-0 {
1306
+ .xs\:us-grow-0 {
870
1307
  flex-grow: 0;
871
1308
  }
872
- .xs\:us-flex-grow-1 {
1309
+ .xs\:us-grow-1 {
873
1310
  flex-grow: 1;
874
1311
  }
875
- .xs\:us-flex-shrink-0 {
1312
+ .xs\:us-shrink-0 {
876
1313
  flex-shrink: 0;
877
1314
  }
878
- .xs\:us-flex-shrink-1 {
1315
+ .xs\:us-shrink-1 {
879
1316
  flex-shrink: 1;
880
1317
  }
1318
+ .xs\:us-justify-start {
1319
+ justify-content: flex-start;
1320
+ }
1321
+ .xs\:us-justify-end {
1322
+ justify-content: flex-end;
1323
+ }
1324
+ .xs\:us-justify-center {
1325
+ justify-content: center;
1326
+ }
1327
+ .xs\:us-justify-between {
1328
+ justify-content: space-between;
1329
+ }
1330
+ .xs\:us-justify-around {
1331
+ justify-content: space-around;
1332
+ }
1333
+ .xs\:us-justify-evenly {
1334
+ justify-content: space-evenly;
1335
+ }
1336
+ .xs\:us-items-start {
1337
+ align-items: flex-start;
1338
+ }
1339
+ .xs\:us-items-end {
1340
+ align-items: flex-end;
1341
+ }
1342
+ .xs\:us-items-center {
1343
+ align-items: center;
1344
+ }
1345
+ .xs\:us-items-stretch {
1346
+ align-items: stretch;
1347
+ }
1348
+ .xs\:us-items-baseline {
1349
+ align-items: baseline;
1350
+ }
881
1351
  .xs\:us-gap-0 {
882
1352
  gap: 0;
883
1353
  }
@@ -961,6 +1431,18 @@
961
1431
  }
962
1432
  }
963
1433
  @media screen and (min-width: 600px) {
1434
+ .sm\:us-h-full {
1435
+ height: 100%;
1436
+ }
1437
+ .sm\:us-h-screen {
1438
+ height: 100dvh;
1439
+ }
1440
+ .sm\:us-overflow-auto {
1441
+ overflow: auto;
1442
+ }
1443
+ .sm\:us-overflow-hidden {
1444
+ overflow: hidden;
1445
+ }
964
1446
  .sm\:us-d-block {
965
1447
  display: block;
966
1448
  }
@@ -1000,18 +1482,51 @@
1000
1482
  .sm\:us-flex-wrap-reverse {
1001
1483
  flex-wrap: wrap-reverse;
1002
1484
  }
1003
- .sm\:us-flex-grow-0 {
1485
+ .sm\:us-grow-0 {
1004
1486
  flex-grow: 0;
1005
1487
  }
1006
- .sm\:us-flex-grow-1 {
1488
+ .sm\:us-grow-1 {
1007
1489
  flex-grow: 1;
1008
1490
  }
1009
- .sm\:us-flex-shrink-0 {
1491
+ .sm\:us-shrink-0 {
1010
1492
  flex-shrink: 0;
1011
1493
  }
1012
- .sm\:us-flex-shrink-1 {
1494
+ .sm\:us-shrink-1 {
1013
1495
  flex-shrink: 1;
1014
1496
  }
1497
+ .sm\:us-justify-start {
1498
+ justify-content: flex-start;
1499
+ }
1500
+ .sm\:us-justify-end {
1501
+ justify-content: flex-end;
1502
+ }
1503
+ .sm\:us-justify-center {
1504
+ justify-content: center;
1505
+ }
1506
+ .sm\:us-justify-between {
1507
+ justify-content: space-between;
1508
+ }
1509
+ .sm\:us-justify-around {
1510
+ justify-content: space-around;
1511
+ }
1512
+ .sm\:us-justify-evenly {
1513
+ justify-content: space-evenly;
1514
+ }
1515
+ .sm\:us-items-start {
1516
+ align-items: flex-start;
1517
+ }
1518
+ .sm\:us-items-end {
1519
+ align-items: flex-end;
1520
+ }
1521
+ .sm\:us-items-center {
1522
+ align-items: center;
1523
+ }
1524
+ .sm\:us-items-stretch {
1525
+ align-items: stretch;
1526
+ }
1527
+ .sm\:us-items-baseline {
1528
+ align-items: baseline;
1529
+ }
1015
1530
  .sm\:us-gap-0 {
1016
1531
  gap: 0;
1017
1532
  }
@@ -1095,6 +1610,18 @@
1095
1610
  }
1096
1611
  }
1097
1612
  @media screen and (min-width: 960px) {
1613
+ .md\:us-h-full {
1614
+ height: 100%;
1615
+ }
1616
+ .md\:us-h-screen {
1617
+ height: 100dvh;
1618
+ }
1619
+ .md\:us-overflow-auto {
1620
+ overflow: auto;
1621
+ }
1622
+ .md\:us-overflow-hidden {
1623
+ overflow: hidden;
1624
+ }
1098
1625
  .md\:us-d-block {
1099
1626
  display: block;
1100
1627
  }
@@ -1134,18 +1661,51 @@
1134
1661
  .md\:us-flex-wrap-reverse {
1135
1662
  flex-wrap: wrap-reverse;
1136
1663
  }
1137
- .md\:us-flex-grow-0 {
1664
+ .md\:us-grow-0 {
1138
1665
  flex-grow: 0;
1139
1666
  }
1140
- .md\:us-flex-grow-1 {
1667
+ .md\:us-grow-1 {
1141
1668
  flex-grow: 1;
1142
1669
  }
1143
- .md\:us-flex-shrink-0 {
1670
+ .md\:us-shrink-0 {
1144
1671
  flex-shrink: 0;
1145
1672
  }
1146
- .md\:us-flex-shrink-1 {
1673
+ .md\:us-shrink-1 {
1147
1674
  flex-shrink: 1;
1148
1675
  }
1676
+ .md\:us-justify-start {
1677
+ justify-content: flex-start;
1678
+ }
1679
+ .md\:us-justify-end {
1680
+ justify-content: flex-end;
1681
+ }
1682
+ .md\:us-justify-center {
1683
+ justify-content: center;
1684
+ }
1685
+ .md\:us-justify-between {
1686
+ justify-content: space-between;
1687
+ }
1688
+ .md\:us-justify-around {
1689
+ justify-content: space-around;
1690
+ }
1691
+ .md\:us-justify-evenly {
1692
+ justify-content: space-evenly;
1693
+ }
1694
+ .md\:us-items-start {
1695
+ align-items: flex-start;
1696
+ }
1697
+ .md\:us-items-end {
1698
+ align-items: flex-end;
1699
+ }
1700
+ .md\:us-items-center {
1701
+ align-items: center;
1702
+ }
1703
+ .md\:us-items-stretch {
1704
+ align-items: stretch;
1705
+ }
1706
+ .md\:us-items-baseline {
1707
+ align-items: baseline;
1708
+ }
1149
1709
  .md\:us-gap-0 {
1150
1710
  gap: 0;
1151
1711
  }
@@ -1229,6 +1789,18 @@
1229
1789
  }
1230
1790
  }
1231
1791
  @media screen and (min-width: 1264px) {
1792
+ .lg\:us-h-full {
1793
+ height: 100%;
1794
+ }
1795
+ .lg\:us-h-screen {
1796
+ height: 100dvh;
1797
+ }
1798
+ .lg\:us-overflow-auto {
1799
+ overflow: auto;
1800
+ }
1801
+ .lg\:us-overflow-hidden {
1802
+ overflow: hidden;
1803
+ }
1232
1804
  .lg\:us-d-block {
1233
1805
  display: block;
1234
1806
  }
@@ -1268,18 +1840,51 @@
1268
1840
  .lg\:us-flex-wrap-reverse {
1269
1841
  flex-wrap: wrap-reverse;
1270
1842
  }
1271
- .lg\:us-flex-grow-0 {
1843
+ .lg\:us-grow-0 {
1272
1844
  flex-grow: 0;
1273
1845
  }
1274
- .lg\:us-flex-grow-1 {
1846
+ .lg\:us-grow-1 {
1275
1847
  flex-grow: 1;
1276
1848
  }
1277
- .lg\:us-flex-shrink-0 {
1849
+ .lg\:us-shrink-0 {
1278
1850
  flex-shrink: 0;
1279
1851
  }
1280
- .lg\:us-flex-shrink-1 {
1852
+ .lg\:us-shrink-1 {
1281
1853
  flex-shrink: 1;
1282
1854
  }
1855
+ .lg\:us-justify-start {
1856
+ justify-content: flex-start;
1857
+ }
1858
+ .lg\:us-justify-end {
1859
+ justify-content: flex-end;
1860
+ }
1861
+ .lg\:us-justify-center {
1862
+ justify-content: center;
1863
+ }
1864
+ .lg\:us-justify-between {
1865
+ justify-content: space-between;
1866
+ }
1867
+ .lg\:us-justify-around {
1868
+ justify-content: space-around;
1869
+ }
1870
+ .lg\:us-justify-evenly {
1871
+ justify-content: space-evenly;
1872
+ }
1873
+ .lg\:us-items-start {
1874
+ align-items: flex-start;
1875
+ }
1876
+ .lg\:us-items-end {
1877
+ align-items: flex-end;
1878
+ }
1879
+ .lg\:us-items-center {
1880
+ align-items: center;
1881
+ }
1882
+ .lg\:us-items-stretch {
1883
+ align-items: stretch;
1884
+ }
1885
+ .lg\:us-items-baseline {
1886
+ align-items: baseline;
1887
+ }
1283
1888
  .lg\:us-gap-0 {
1284
1889
  gap: 0;
1285
1890
  }
@@ -1363,6 +1968,18 @@
1363
1968
  }
1364
1969
  }
1365
1970
  @media screen and (min-width: 1904px) {
1971
+ .xl\:us-h-full {
1972
+ height: 100%;
1973
+ }
1974
+ .xl\:us-h-screen {
1975
+ height: 100dvh;
1976
+ }
1977
+ .xl\:us-overflow-auto {
1978
+ overflow: auto;
1979
+ }
1980
+ .xl\:us-overflow-hidden {
1981
+ overflow: hidden;
1982
+ }
1366
1983
  .xl\:us-d-block {
1367
1984
  display: block;
1368
1985
  }
@@ -1402,18 +2019,51 @@
1402
2019
  .xl\:us-flex-wrap-reverse {
1403
2020
  flex-wrap: wrap-reverse;
1404
2021
  }
1405
- .xl\:us-flex-grow-0 {
2022
+ .xl\:us-grow-0 {
1406
2023
  flex-grow: 0;
1407
2024
  }
1408
- .xl\:us-flex-grow-1 {
2025
+ .xl\:us-grow-1 {
1409
2026
  flex-grow: 1;
1410
2027
  }
1411
- .xl\:us-flex-shrink-0 {
2028
+ .xl\:us-shrink-0 {
1412
2029
  flex-shrink: 0;
1413
2030
  }
1414
- .xl\:us-flex-shrink-1 {
2031
+ .xl\:us-shrink-1 {
1415
2032
  flex-shrink: 1;
1416
2033
  }
2034
+ .xl\:us-justify-start {
2035
+ justify-content: flex-start;
2036
+ }
2037
+ .xl\:us-justify-end {
2038
+ justify-content: flex-end;
2039
+ }
2040
+ .xl\:us-justify-center {
2041
+ justify-content: center;
2042
+ }
2043
+ .xl\:us-justify-between {
2044
+ justify-content: space-between;
2045
+ }
2046
+ .xl\:us-justify-around {
2047
+ justify-content: space-around;
2048
+ }
2049
+ .xl\:us-justify-evenly {
2050
+ justify-content: space-evenly;
2051
+ }
2052
+ .xl\:us-items-start {
2053
+ align-items: flex-start;
2054
+ }
2055
+ .xl\:us-items-end {
2056
+ align-items: flex-end;
2057
+ }
2058
+ .xl\:us-items-center {
2059
+ align-items: center;
2060
+ }
2061
+ .xl\:us-items-stretch {
2062
+ align-items: stretch;
2063
+ }
2064
+ .xl\:us-items-baseline {
2065
+ align-items: baseline;
2066
+ }
1417
2067
  .xl\:us-gap-0 {
1418
2068
  gap: 0;
1419
2069
  }
@@ -1496,6 +2146,24 @@
1496
2146
  row-gap: 2rem;
1497
2147
  }
1498
2148
  }
2149
+ .us-clamp-1 {
2150
+ display: -webkit-box;
2151
+ -webkit-box-orient: vertical;
2152
+ -webkit-line-clamp: 1;
2153
+ }
2154
+
2155
+ .us-clamp-2 {
2156
+ display: -webkit-box;
2157
+ -webkit-box-orient: vertical;
2158
+ -webkit-line-clamp: 2;
2159
+ }
2160
+
2161
+ .us-clamp-3 {
2162
+ display: -webkit-box;
2163
+ -webkit-box-orient: vertical;
2164
+ -webkit-line-clamp: 3;
2165
+ }
2166
+
1499
2167
  /* Estilos CSS aquí */
1500
2168
  .slider-container {
1501
2169
  width: 300px;