@robosophy/prime-theme 2.0.0 → 3.0.1
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/dist/prime.css +39 -41
- package/package.json +1 -1
package/dist/prime.css
CHANGED
|
@@ -337,17 +337,19 @@
|
|
|
337
337
|
justify-content: center;
|
|
338
338
|
vertical-align: middle;
|
|
339
339
|
}
|
|
340
|
-
/*
|
|
340
|
+
/* Vue3: .p-input-icon-left/right > i | Vue4: .p-iconfield > .p-inputicon | React: .p-icon-field-left/right > .p-input-icon */
|
|
341
341
|
.p-input-icon-left,
|
|
342
342
|
.p-input-icon-right,
|
|
343
343
|
.p-icon-field-left,
|
|
344
|
-
.p-icon-field-right
|
|
344
|
+
.p-icon-field-right,
|
|
345
|
+
.p-iconfield {
|
|
345
346
|
position: relative;
|
|
346
347
|
}
|
|
347
348
|
.p-input-icon-left > i,
|
|
348
349
|
.p-input-icon-right > i,
|
|
349
350
|
.p-icon-field-left > .p-input-icon,
|
|
350
|
-
.p-icon-field-right > .p-input-icon
|
|
351
|
+
.p-icon-field-right > .p-input-icon,
|
|
352
|
+
.p-iconfield > .p-inputicon {
|
|
351
353
|
position: absolute;
|
|
352
354
|
top: 50%;
|
|
353
355
|
margin-top: 0 !important;
|
|
@@ -394,7 +396,8 @@
|
|
|
394
396
|
.p-inputtext:not(:where(.p-inputtextarea, .p-dropdown-label, .p-select-label, .p-cascadeselect-label, .p-cascade-select-label, .p-multiselect-label, .p-multi-select-label, .p-autocomplete-multiple-container)) {
|
|
395
397
|
font-weight: var(--p-inputtext-font-weight);
|
|
396
398
|
height: 48px;
|
|
397
|
-
|
|
399
|
+
font-size: 16px;
|
|
400
|
+
gap: 8px;
|
|
398
401
|
border-radius: 6px;
|
|
399
402
|
border: 1px solid var(--rs-color-neutral-700);
|
|
400
403
|
background: var(--rs-color-neutral-50);
|
|
@@ -404,10 +407,8 @@
|
|
|
404
407
|
}
|
|
405
408
|
/* Vue-only: PrimeReact 10 no emite clases de tamaño para InputText */
|
|
406
409
|
.p-inputtext-sm {
|
|
407
|
-
height:
|
|
408
|
-
|
|
409
|
-
.p-inputtext-lg {
|
|
410
|
-
height: 52px;
|
|
410
|
+
height: 36px;
|
|
411
|
+
font-size: 14px;
|
|
411
412
|
}
|
|
412
413
|
.p-inputtext:enabled:focus {
|
|
413
414
|
outline: none;
|
|
@@ -492,10 +493,12 @@
|
|
|
492
493
|
.p-multi-select.p-disabled .p-multi-select-label {
|
|
493
494
|
color: var(--rs-color-text-secondary) !important;
|
|
494
495
|
}
|
|
495
|
-
|
|
496
|
+
/* select/dropdown (both: .p-select=Vue, .p-dropdown=both) */
|
|
496
497
|
.p-select, .p-dropdown {
|
|
497
498
|
font-weight: var(--p-select-font-weight);
|
|
498
499
|
height: 48px;
|
|
500
|
+
font-size: 16px;
|
|
501
|
+
gap: 8px;
|
|
499
502
|
border-radius: 6px;
|
|
500
503
|
border: 1px solid var(--rs-color-neutral-700);
|
|
501
504
|
background: var(--rs-color-neutral-50);
|
|
@@ -507,10 +510,8 @@
|
|
|
507
510
|
}
|
|
508
511
|
/* Vue-only: PrimeReact 10 no emite clases de tamaño para Dropdown */
|
|
509
512
|
.p-select-sm, .p-dropdown-sm {
|
|
510
|
-
height:
|
|
511
|
-
|
|
512
|
-
.p-select-lg, .p-dropdown-lg {
|
|
513
|
-
height: 52px;
|
|
513
|
+
height: 36px;
|
|
514
|
+
font-size: 14px;
|
|
514
515
|
}
|
|
515
516
|
.p-select:not(.p-disabled).p-focus, .p-dropdown:not(.p-disabled).p-focus {
|
|
516
517
|
outline: none;
|
|
@@ -542,9 +543,11 @@
|
|
|
542
543
|
border: none;
|
|
543
544
|
background: transparent;
|
|
544
545
|
}
|
|
545
|
-
|
|
546
|
+
/* cascadeselect (both: .p-cascadeselect=React, .p-cascade-select=Vue) */
|
|
546
547
|
.p-cascadeselect, .p-cascade-select {
|
|
547
548
|
height: 48px;
|
|
549
|
+
font-size: 16px;
|
|
550
|
+
gap: 8px;
|
|
548
551
|
border-radius: 6px;
|
|
549
552
|
border: 1px solid var(--rs-color-neutral-700);
|
|
550
553
|
background: var(--rs-color-neutral-50);
|
|
@@ -562,10 +565,8 @@
|
|
|
562
565
|
}
|
|
563
566
|
/* Vue-only: PrimeReact 10 no emite clases de tamaño para CascadeSelect */
|
|
564
567
|
.p-cascadeselect-sm, .p-cascade-select-sm {
|
|
565
|
-
height:
|
|
566
|
-
|
|
567
|
-
.p-cascadeselect-lg, .p-cascade-select-lg {
|
|
568
|
-
height: 52px;
|
|
568
|
+
height: 36px;
|
|
569
|
+
font-size: 14px;
|
|
569
570
|
}
|
|
570
571
|
.p-cascadeselect-label, .p-cascade-select-label {
|
|
571
572
|
align-self: center;
|
|
@@ -579,9 +580,11 @@
|
|
|
579
580
|
border: none;
|
|
580
581
|
background: transparent;
|
|
581
582
|
}
|
|
582
|
-
|
|
583
|
+
/* multiselect (both: .p-multiselect=React, .p-multi-select=Vue) */
|
|
583
584
|
.p-multiselect, .p-multi-select {
|
|
584
585
|
height: 48px;
|
|
586
|
+
font-size: 16px;
|
|
587
|
+
gap: 8px;
|
|
585
588
|
border-radius: 6px;
|
|
586
589
|
border: 1px solid var(--rs-color-neutral-700);
|
|
587
590
|
background: var(--rs-color-neutral-50);
|
|
@@ -599,10 +602,8 @@
|
|
|
599
602
|
}
|
|
600
603
|
/* Vue-only: PrimeReact 10 no emite clases de tamaño para MultiSelect */
|
|
601
604
|
.p-multiselect-sm, .p-multi-select-sm {
|
|
602
|
-
height:
|
|
603
|
-
|
|
604
|
-
.p-multiselect-lg, .p-multi-select-lg {
|
|
605
|
-
height: 52px;
|
|
605
|
+
height: 36px;
|
|
606
|
+
font-size: 14px;
|
|
606
607
|
}
|
|
607
608
|
.p-multiselect-label, .p-multi-select-label {
|
|
608
609
|
align-self: center;
|
|
@@ -617,9 +618,10 @@
|
|
|
617
618
|
border: none;
|
|
618
619
|
background: transparent;
|
|
619
620
|
}
|
|
620
|
-
/* autocomplete (
|
|
621
|
-
.p-autocomplete {
|
|
621
|
+
/* autocomplete (Vue-only: :has(.p-autocomplete-input) targets Vue's structure, not React's) */
|
|
622
|
+
.p-autocomplete:has(.p-autocomplete-input) {
|
|
622
623
|
height: 48px;
|
|
624
|
+
font-size: 16px;
|
|
623
625
|
}
|
|
624
626
|
/* menu (both: .p-menuitem-text=React, .p-menu-item-label=Vue) */
|
|
625
627
|
.p-menu {
|
|
@@ -675,7 +677,7 @@
|
|
|
675
677
|
.p-button {
|
|
676
678
|
height: 48px;
|
|
677
679
|
border-radius: 6px;
|
|
678
|
-
font-size:
|
|
680
|
+
font-size: 14px;
|
|
679
681
|
font-weight: 400;
|
|
680
682
|
gap: 8px;
|
|
681
683
|
}
|
|
@@ -692,15 +694,15 @@
|
|
|
692
694
|
font-weight: 400;
|
|
693
695
|
}
|
|
694
696
|
.p-button-sm {
|
|
695
|
-
height:
|
|
696
|
-
font-size:
|
|
697
|
+
height: 36px;
|
|
698
|
+
font-size: 14px;
|
|
697
699
|
}
|
|
698
700
|
.p-button-sm:not(.p-button-link):not(.p-button-text):not(.p-button-outlined):not(.p-button-icon-only) {
|
|
699
701
|
padding: 0 16px;
|
|
700
702
|
}
|
|
701
703
|
.p-button-lg {
|
|
702
|
-
height:
|
|
703
|
-
font-size:
|
|
704
|
+
height: 54px;
|
|
705
|
+
font-size: 16px;
|
|
704
706
|
}
|
|
705
707
|
.p-button-lg:not(.p-button-link):not(.p-button-text):not(.p-button-outlined):not(.p-button-icon-only) {
|
|
706
708
|
padding: 0 16px;
|
|
@@ -711,19 +713,15 @@
|
|
|
711
713
|
.p-button-text:not(:disabled):hover {
|
|
712
714
|
background: transparent;
|
|
713
715
|
}
|
|
714
|
-
|
|
715
|
-
|
|
716
|
+
/* Icon-only text buttons - neutral color, no hover background, proper centering */
|
|
717
|
+
.p-button.p-button-icon-only.p-button-text {
|
|
718
|
+
color: var(--rs-color-button-primary);
|
|
716
719
|
}
|
|
717
|
-
.p-button.p-button-
|
|
718
|
-
|
|
719
|
-
}
|
|
720
|
-
/* React: .p-button-warning | Vue: .p-button-warn (ambos usan severity "warning") */
|
|
721
|
-
.p-button.p-button-warning .rs-icon,
|
|
722
|
-
.p-button.p-button-warn .rs-icon {
|
|
723
|
-
color: var(--rs-color-yellow-500);
|
|
720
|
+
.p-button.p-button-icon-only.p-button-text:not(:disabled):hover {
|
|
721
|
+
background: transparent;
|
|
724
722
|
}
|
|
725
|
-
.p-button.p-button-
|
|
726
|
-
|
|
723
|
+
.p-button.p-button-icon-only.p-button-text .p-button-label {
|
|
724
|
+
display: none;
|
|
727
725
|
}
|
|
728
726
|
/* Base button overrides - match fluent-light specificity for React */
|
|
729
727
|
.p-button:not(.p-button-link):not(.p-button-text):not(.p-button-outlined):not(.p-button-success):not(.p-button-info):not(.p-button-warning):not(.p-button-warn):not(.p-button-danger):not(.p-button-secondary) {
|