@posiwise/core-styles 0.0.38 → 0.0.40
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/package.json
CHANGED
|
@@ -10,6 +10,47 @@
|
|
|
10
10
|
--first: rgb(23 105 225);
|
|
11
11
|
--second: rgb(54 194 131);
|
|
12
12
|
--text: rgb(34 34 34);
|
|
13
|
+
|
|
14
|
+
// PrimeNG Calendar icon CSS variables override
|
|
15
|
+
--p-datepicker-dropdown-color: var(--first);
|
|
16
|
+
--p-datepicker-trigger-color: var(--first);
|
|
17
|
+
--p-button-text-color: var(--first);
|
|
18
|
+
|
|
19
|
+
// PrimeNG Select option selected CSS variables override
|
|
20
|
+
--p-select-option-selected-background: var(--first);
|
|
21
|
+
--p-select-option-selected-color: #ffffff;
|
|
22
|
+
|
|
23
|
+
// PrimeNG Autocomplete option selected CSS variables override
|
|
24
|
+
--p-autocomplete-option-selected-background: var(--first);
|
|
25
|
+
--p-autocomplete-option-selected-color: #ffffff;
|
|
26
|
+
|
|
27
|
+
// PrimeNG Chip background CSS variables override
|
|
28
|
+
--p-chip-background: var(--first);
|
|
29
|
+
--p-chip-color: #ffffff;
|
|
30
|
+
|
|
31
|
+
// PrimeNG Autocomplete dropdown button CSS variables override
|
|
32
|
+
--p-autocomplete-dropdown-background: var(--first);
|
|
33
|
+
--p-autocomplete-dropdown-color: #ffffff;
|
|
34
|
+
--p-autocomplete-dropdown-border-color: var(--first);
|
|
35
|
+
|
|
36
|
+
// PrimeNG Autocomplete input border CSS variables override
|
|
37
|
+
--p-autocomplete-focus-border-color: var(--first);
|
|
38
|
+
--p-autocomplete-hover-border-color: var(--first);
|
|
39
|
+
|
|
40
|
+
// PrimeNG Checkbox checked CSS variables override
|
|
41
|
+
--p-checkbox-checked-background: var(--first);
|
|
42
|
+
--p-checkbox-checked-border-color: var(--first);
|
|
43
|
+
|
|
44
|
+
// PrimeNG Multiselect option selected CSS variables override
|
|
45
|
+
--p-multiselect-option-selected-background: var(--first);
|
|
46
|
+
--p-multiselect-option-selected-color: #ffffff;
|
|
47
|
+
--p-multiselect-option-selected-focus-background: var(--first);
|
|
48
|
+
--p-multiselect-option-selected-focus-color: #ffffff;
|
|
49
|
+
|
|
50
|
+
// PrimeNG Paginator selected page CSS variables override
|
|
51
|
+
--p-paginator-nav-button-selected-background: var(--tabs_bg);
|
|
52
|
+
--p-paginator-nav-button-selected-color: var(--tabs_text);
|
|
53
|
+
--p-paginator-nav-button-selected-border-color: var(--tabs_bg);
|
|
13
54
|
}
|
|
14
55
|
|
|
15
56
|
.plot-container,
|
|
@@ -75,10 +116,15 @@
|
|
|
75
116
|
}
|
|
76
117
|
|
|
77
118
|
.p-menuitem-link.p-menuitem-link-active {
|
|
78
|
-
background-color: var(--tabs_bg);
|
|
119
|
+
background-color: var(--tabs_bg) !important;
|
|
79
120
|
color: var(--tabs_text);
|
|
121
|
+
&:hover {
|
|
122
|
+
background-color: var(--tabs_bg) !important;
|
|
123
|
+
color: var(--tabs_text) !important;
|
|
124
|
+
}
|
|
80
125
|
}
|
|
81
126
|
|
|
127
|
+
|
|
82
128
|
.p-menuitem-link {
|
|
83
129
|
color: var(--tabs_bg);
|
|
84
130
|
}
|
|
@@ -95,6 +141,17 @@
|
|
|
95
141
|
}
|
|
96
142
|
}
|
|
97
143
|
}
|
|
144
|
+
|
|
145
|
+
.p-tabmenuitem-active {
|
|
146
|
+
background-color: var(--tabs_bg) !important;
|
|
147
|
+
color: var(--tabs_text) !important;
|
|
148
|
+
|
|
149
|
+
a,
|
|
150
|
+
.p-menuitem-link {
|
|
151
|
+
background-color: var(--tabs_bg) !important;
|
|
152
|
+
color: var(--tabs_text) !important;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
98
155
|
}
|
|
99
156
|
}
|
|
100
157
|
}
|
|
@@ -181,6 +238,13 @@
|
|
|
181
238
|
color: var(--tabs_text) !important;
|
|
182
239
|
}
|
|
183
240
|
|
|
241
|
+
.p-paginator-page.p-paginator-page-selected,
|
|
242
|
+
.p-paginator-page.p-highlight {
|
|
243
|
+
background-color: var(--tabs_bg) !important;
|
|
244
|
+
border-color: var(--tabs_bg) !important;
|
|
245
|
+
color: var(--tabs_text) !important;
|
|
246
|
+
}
|
|
247
|
+
|
|
184
248
|
pw-posts-list {
|
|
185
249
|
ul.tags li {
|
|
186
250
|
color: var(--titles);
|
|
@@ -287,7 +351,33 @@
|
|
|
287
351
|
}
|
|
288
352
|
.p-autocomplete-multiple-container {
|
|
289
353
|
.p-autocomplete-token {
|
|
290
|
-
background: var(--first);
|
|
354
|
+
background: var(--first) !important;
|
|
355
|
+
color: #ffffff !important;
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
.p-autocomplete-dropdown {
|
|
359
|
+
background-color: var(--first) !important;
|
|
360
|
+
border-color: var(--first) !important;
|
|
361
|
+
color: #ffffff !important;
|
|
362
|
+
|
|
363
|
+
svg,
|
|
364
|
+
.p-icon,
|
|
365
|
+
i {
|
|
366
|
+
color: #ffffff !important;
|
|
367
|
+
fill: #ffffff !important;
|
|
368
|
+
}
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
.p-autocomplete-input-multiple,
|
|
372
|
+
.p-inputtext {
|
|
373
|
+
&:hover {
|
|
374
|
+
border-color: var(--first) !important;
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
&:focus,
|
|
378
|
+
&.p-focus {
|
|
379
|
+
border-color: var(--first) !important;
|
|
380
|
+
box-shadow: 0 0 0 0.2rem rgba(23, 105, 225, 0.25) !important;
|
|
291
381
|
}
|
|
292
382
|
}
|
|
293
383
|
}
|
|
@@ -487,14 +577,21 @@
|
|
|
487
577
|
}
|
|
488
578
|
}
|
|
489
579
|
|
|
490
|
-
// spinner color
|
|
491
|
-
|
|
492
|
-
p-progressSpinner .p-progress-spinner-circle
|
|
580
|
+
// spinner color - PrimeNG 19 updated selectors
|
|
581
|
+
p-progressspinner .p-progressspinner-circle,
|
|
582
|
+
p-progressSpinner .p-progress-spinner-circle,
|
|
583
|
+
.p-progressspinner .p-progressspinner-circle {
|
|
493
584
|
animation:
|
|
494
585
|
custom-progress-spinner-dash 1.5s ease-in-out infinite,
|
|
495
586
|
custom-progress-spinner-color 6s ease-in-out infinite;
|
|
496
587
|
}
|
|
497
588
|
|
|
589
|
+
// Ensure spinner SVG uses custom colors
|
|
590
|
+
p-progressspinner svg circle,
|
|
591
|
+
p-progressSpinner svg circle {
|
|
592
|
+
stroke: var(--first) !important;
|
|
593
|
+
}
|
|
594
|
+
|
|
498
595
|
@keyframes custom-progress-spinner-color {
|
|
499
596
|
100%,
|
|
500
597
|
0% {
|
|
@@ -643,6 +740,178 @@
|
|
|
643
740
|
background-color: transparent !important;
|
|
644
741
|
color: var(--first) !important;
|
|
645
742
|
}
|
|
743
|
+
|
|
744
|
+
// PrimeNG Datepicker - Selected date color (blue instead of green)
|
|
745
|
+
.p-datepicker {
|
|
746
|
+
table {
|
|
747
|
+
td {
|
|
748
|
+
span.p-highlight,
|
|
749
|
+
span.p-datepicker-day-selected,
|
|
750
|
+
&.p-highlight > span {
|
|
751
|
+
background-color: var(--first) !important;
|
|
752
|
+
color: #ffffff !important;
|
|
753
|
+
}
|
|
754
|
+
|
|
755
|
+
&.p-datepicker-today {
|
|
756
|
+
> span.p-highlight {
|
|
757
|
+
background-color: var(--first) !important;
|
|
758
|
+
color: #ffffff !important;
|
|
759
|
+
}
|
|
760
|
+
}
|
|
761
|
+
|
|
762
|
+
&.p-datepicker-current-day {
|
|
763
|
+
> span {
|
|
764
|
+
background-color: var(--first) !important;
|
|
765
|
+
color: #ffffff !important;
|
|
766
|
+
}
|
|
767
|
+
}
|
|
768
|
+
}
|
|
769
|
+
}
|
|
770
|
+
}
|
|
771
|
+
|
|
772
|
+
// PrimeNG Calendar icon color
|
|
773
|
+
.p-calendar {
|
|
774
|
+
.p-datepicker-trigger,
|
|
775
|
+
.p-datepicker-dropdown {
|
|
776
|
+
background-color: transparent !important;
|
|
777
|
+
border-color: var(--first) !important;
|
|
778
|
+
color: var(--first) !important;
|
|
779
|
+
|
|
780
|
+
&:hover {
|
|
781
|
+
background-color: rgba(23, 105, 225, 0.1) !important;
|
|
782
|
+
border-color: var(--first) !important;
|
|
783
|
+
}
|
|
784
|
+
|
|
785
|
+
// Icon/SVG color - target all possible icon elements
|
|
786
|
+
svg,
|
|
787
|
+
.p-icon,
|
|
788
|
+
i,
|
|
789
|
+
calendaricon {
|
|
790
|
+
color: var(--first) !important;
|
|
791
|
+
fill: var(--first) !important;
|
|
792
|
+
}
|
|
793
|
+
|
|
794
|
+
// Target SVG paths and elements specifically
|
|
795
|
+
svg path,
|
|
796
|
+
svg circle,
|
|
797
|
+
svg rect,
|
|
798
|
+
svg polygon,
|
|
799
|
+
svg * {
|
|
800
|
+
fill: var(--first) !important;
|
|
801
|
+
stroke: var(--first) !important;
|
|
802
|
+
}
|
|
803
|
+
}
|
|
804
|
+
|
|
805
|
+
.p-inputtext:enabled:hover {
|
|
806
|
+
border-color: var(--first) !important;
|
|
807
|
+
}
|
|
808
|
+
|
|
809
|
+
.p-inputtext:enabled:focus {
|
|
810
|
+
border-color: var(--first) !important;
|
|
811
|
+
box-shadow: 0 0 0 0.2rem rgba(23, 105, 225, 0.25) !important;
|
|
812
|
+
}
|
|
813
|
+
}
|
|
814
|
+
|
|
815
|
+
// PrimeNG Select option selected color
|
|
816
|
+
.p-select-option-selected,
|
|
817
|
+
.p-select-option.p-select-option-selected {
|
|
818
|
+
background-color: var(--first) !important;
|
|
819
|
+
color: #ffffff !important;
|
|
820
|
+
|
|
821
|
+
&.p-focus {
|
|
822
|
+
background-color: var(--first) !important;
|
|
823
|
+
color: #ffffff !important;
|
|
824
|
+
}
|
|
825
|
+
}
|
|
826
|
+
|
|
827
|
+
// PrimeNG Autocomplete option selected color
|
|
828
|
+
.p-autocomplete-option-selected {
|
|
829
|
+
background-color: var(--first) !important;
|
|
830
|
+
color: #ffffff !important;
|
|
831
|
+
|
|
832
|
+
&.p-focus {
|
|
833
|
+
background-color: var(--first) !important;
|
|
834
|
+
color: #ffffff !important;
|
|
835
|
+
}
|
|
836
|
+
}
|
|
837
|
+
|
|
838
|
+
// PrimeNG Chip/Token color
|
|
839
|
+
.p-chip,
|
|
840
|
+
.p-autocomplete-token {
|
|
841
|
+
background-color: var(--first) !important;
|
|
842
|
+
color: #ffffff !important;
|
|
843
|
+
}
|
|
844
|
+
|
|
845
|
+
// PrimeNG Multiselect option selected color
|
|
846
|
+
.p-multiselect-option-selected {
|
|
847
|
+
background-color: transparent !important;
|
|
848
|
+
color: black !important;
|
|
849
|
+
|
|
850
|
+
&.p-focus {
|
|
851
|
+
background: var(--p-multiselect-option-focus-background) !important;
|
|
852
|
+
color: var(--p-multiselect-option-focus-color) !important;
|
|
853
|
+
}
|
|
854
|
+
}
|
|
855
|
+
|
|
856
|
+
// PrimeNG Checkbox checked color
|
|
857
|
+
.p-checkbox-checked .p-checkbox-box {
|
|
858
|
+
background-color: var(--first) !important;
|
|
859
|
+
border-color: var(--first) !important;
|
|
860
|
+
}
|
|
861
|
+
}
|
|
862
|
+
|
|
863
|
+
// Global PrimeNG Calendar icon styles (outside :root for higher specificity)
|
|
864
|
+
p-calendar,
|
|
865
|
+
.p-calendar {
|
|
866
|
+
.p-datepicker-trigger,
|
|
867
|
+
.p-datepicker-dropdown,
|
|
868
|
+
button[class*='datepicker'] {
|
|
869
|
+
background-color: var(--first) !important;
|
|
870
|
+
border-color: var(--first) !important;
|
|
871
|
+
color: white !important;
|
|
872
|
+
|
|
873
|
+
svg,
|
|
874
|
+
.p-icon,
|
|
875
|
+
i,
|
|
876
|
+
calendaricon,
|
|
877
|
+
* {
|
|
878
|
+
color: white !important;
|
|
879
|
+
fill: white !important;
|
|
880
|
+
stroke: white !important;
|
|
881
|
+
}
|
|
882
|
+
|
|
883
|
+
svg path,
|
|
884
|
+
svg circle,
|
|
885
|
+
svg rect,
|
|
886
|
+
svg polygon,
|
|
887
|
+
svg * {
|
|
888
|
+
fill: white !important;
|
|
889
|
+
stroke: white !important;
|
|
890
|
+
}
|
|
891
|
+
}
|
|
892
|
+
}
|
|
893
|
+
|
|
894
|
+
button.p-datepicker-trigger,
|
|
895
|
+
button.p-datepicker-dropdown {
|
|
896
|
+
background-color: transparent !important;
|
|
897
|
+
border-color: var(--first) !important;
|
|
898
|
+
color: var(--first) !important;
|
|
899
|
+
|
|
900
|
+
svg,
|
|
901
|
+
.p-icon,
|
|
902
|
+
i,
|
|
903
|
+
calendaricon,
|
|
904
|
+
* {
|
|
905
|
+
color: var(--first) !important;
|
|
906
|
+
fill: var(--first) !important;
|
|
907
|
+
stroke: var(--first) !important;
|
|
908
|
+
}
|
|
909
|
+
|
|
910
|
+
svg path,
|
|
911
|
+
svg * {
|
|
912
|
+
fill: var(--first) !important;
|
|
913
|
+
stroke: var(--first) !important;
|
|
914
|
+
}
|
|
646
915
|
}
|
|
647
916
|
|
|
648
917
|
.body-quill {
|
|
@@ -663,13 +932,145 @@
|
|
|
663
932
|
.p-dropdown-items {
|
|
664
933
|
.p-dropdown-item {
|
|
665
934
|
&.p-highlight {
|
|
666
|
-
background-color: var(--
|
|
667
|
-
color:
|
|
935
|
+
background-color: var(--first) !important;
|
|
936
|
+
color: #ffffff !important;
|
|
668
937
|
}
|
|
669
938
|
|
|
670
939
|
&.p-focus {
|
|
671
|
-
background-color: var(--
|
|
672
|
-
color:
|
|
940
|
+
background-color: var(--first) !important;
|
|
941
|
+
color: #ffffff !important;
|
|
942
|
+
}
|
|
943
|
+
}
|
|
944
|
+
}
|
|
945
|
+
}
|
|
946
|
+
|
|
947
|
+
// PrimeNG Select option selected (for p-select components)
|
|
948
|
+
.p-select-option-selected,
|
|
949
|
+
.p-select-option.p-select-option-selected {
|
|
950
|
+
background-color: var(--first) !important;
|
|
951
|
+
color: #ffffff !important;
|
|
952
|
+
|
|
953
|
+
&.p-focus {
|
|
954
|
+
background-color: var(--first) !important;
|
|
955
|
+
color: #ffffff !important;
|
|
956
|
+
}
|
|
957
|
+
}
|
|
958
|
+
|
|
959
|
+
// PrimeNG Autocomplete option selected (for p-autocomplete components)
|
|
960
|
+
.p-autocomplete-option-selected {
|
|
961
|
+
background-color: var(--first) !important;
|
|
962
|
+
color: #ffffff !important;
|
|
963
|
+
|
|
964
|
+
&.p-focus {
|
|
965
|
+
background-color: var(--first) !important;
|
|
966
|
+
color: #ffffff !important;
|
|
967
|
+
}
|
|
968
|
+
}
|
|
969
|
+
|
|
970
|
+
// PrimeNG Chip/Token styles (for autocomplete chips)
|
|
971
|
+
.p-chip,
|
|
972
|
+
.p-autocomplete-token,
|
|
973
|
+
p-chip {
|
|
974
|
+
background-color: var(--first) !important;
|
|
975
|
+
color: #ffffff !important;
|
|
976
|
+
|
|
977
|
+
.p-chip-remove-icon {
|
|
978
|
+
color: #ffffff !important;
|
|
979
|
+
}
|
|
980
|
+
}
|
|
981
|
+
|
|
982
|
+
// PrimeNG Autocomplete dropdown button
|
|
983
|
+
.p-autocomplete-dropdown,
|
|
984
|
+
button.p-autocomplete-dropdown {
|
|
985
|
+
background-color: var(--first) !important;
|
|
986
|
+
border-color: var(--first) !important;
|
|
987
|
+
color: #ffffff !important;
|
|
988
|
+
|
|
989
|
+
svg,
|
|
990
|
+
.p-icon,
|
|
991
|
+
i {
|
|
992
|
+
color: #ffffff !important;
|
|
993
|
+
fill: #ffffff !important;
|
|
994
|
+
}
|
|
995
|
+
|
|
996
|
+
&:hover {
|
|
997
|
+
background-color: var(--first) !important;
|
|
998
|
+
border-color: var(--first) !important;
|
|
999
|
+
}
|
|
1000
|
+
}
|
|
1001
|
+
|
|
1002
|
+
// PrimeNG Autocomplete input border color
|
|
1003
|
+
.p-autocomplete {
|
|
1004
|
+
.p-autocomplete-input-multiple,
|
|
1005
|
+
.p-inputtext {
|
|
1006
|
+
&:hover {
|
|
1007
|
+
border-color: var(--first) !important;
|
|
1008
|
+
}
|
|
1009
|
+
|
|
1010
|
+
&:focus,
|
|
1011
|
+
&.p-focus {
|
|
1012
|
+
border-color: var(--first) !important;
|
|
1013
|
+
box-shadow: 0 0 0 0.2rem rgba(23, 105, 225, 0.25) !important;
|
|
1014
|
+
}
|
|
1015
|
+
}
|
|
1016
|
+
|
|
1017
|
+
&:not(.p-disabled).p-focus .p-autocomplete-input-multiple,
|
|
1018
|
+
&:not(.p-disabled):hover .p-autocomplete-input-multiple {
|
|
1019
|
+
border-color: var(--first) !important;
|
|
1020
|
+
}
|
|
1021
|
+
}
|
|
1022
|
+
|
|
1023
|
+
// PrimeNG Multiselect option selected (for p-multiselect components)
|
|
1024
|
+
.p-multiselect-option-selected {
|
|
1025
|
+
background-color: var(--first) !important;
|
|
1026
|
+
color: #ffffff !important;
|
|
1027
|
+
|
|
1028
|
+
&.p-focus {
|
|
1029
|
+
background-color: var(--first) !important;
|
|
1030
|
+
color: #ffffff !important;
|
|
1031
|
+
}
|
|
1032
|
+
}
|
|
1033
|
+
|
|
1034
|
+
// PrimeNG Checkbox checked (for multiselect checkboxes)
|
|
1035
|
+
.p-checkbox-checked .p-checkbox-box,
|
|
1036
|
+
.p-checkbox.p-checkbox-checked .p-checkbox-box {
|
|
1037
|
+
background-color: var(--first) !important;
|
|
1038
|
+
border-color: var(--first) !important;
|
|
1039
|
+
}
|
|
1040
|
+
|
|
1041
|
+
// PrimeNG Tab menu item active
|
|
1042
|
+
.p-tabmenuitem-active {
|
|
1043
|
+
background-color: var(--tabs_bg) !important;
|
|
1044
|
+
color: var(--tabs_text) !important;
|
|
1045
|
+
|
|
1046
|
+
a,
|
|
1047
|
+
.p-menuitem-link {
|
|
1048
|
+
background-color: var(--tabs_bg) !important;
|
|
1049
|
+
color: var(--tabs_text) !important;
|
|
1050
|
+
}
|
|
1051
|
+
}
|
|
1052
|
+
|
|
1053
|
+
// PrimeNG Paginator page selected
|
|
1054
|
+
.p-paginator-page.p-paginator-page-selected,
|
|
1055
|
+
.p-paginator-page.p-highlight {
|
|
1056
|
+
background-color: var(--tabs_bg) !important;
|
|
1057
|
+
border-color: var(--tabs_bg) !important;
|
|
1058
|
+
color: var(--tabs_text) !important;
|
|
1059
|
+
}
|
|
1060
|
+
|
|
1061
|
+
// PrimeNG Datepicker day selected - direct global style
|
|
1062
|
+
.p-datepicker-day-selected {
|
|
1063
|
+
background-color: var(--first) !important;
|
|
1064
|
+
color: #ffffff !important;
|
|
1065
|
+
}
|
|
1066
|
+
|
|
1067
|
+
.p-datepicker {
|
|
1068
|
+
table {
|
|
1069
|
+
td {
|
|
1070
|
+
span.p-datepicker-day-selected,
|
|
1071
|
+
&.p-datepicker-day-selected > span {
|
|
1072
|
+
background-color: var(--first) !important;
|
|
1073
|
+
color: #ffffff !important;
|
|
673
1074
|
}
|
|
674
1075
|
}
|
|
675
1076
|
}
|
|
@@ -44,9 +44,15 @@
|
|
|
44
44
|
overflow: hidden;
|
|
45
45
|
padding: 0;
|
|
46
46
|
|
|
47
|
+
.p-tabmenuitem-active {
|
|
48
|
+
border-color: var(--tabs_bg) !important;
|
|
49
|
+
color: black;
|
|
50
|
+
}
|
|
51
|
+
|
|
47
52
|
.p-tabmenuitem {
|
|
48
53
|
border: 0 0;
|
|
49
54
|
margin: 0;
|
|
55
|
+
padding: 0;
|
|
50
56
|
|
|
51
57
|
a {
|
|
52
58
|
background: transparent;
|
|
@@ -76,6 +82,9 @@
|
|
|
76
82
|
.p-menuitem-link.p-menuitem-link-active {
|
|
77
83
|
@extend .tab-style;
|
|
78
84
|
}
|
|
85
|
+
.p-tabmenuitem-active {
|
|
86
|
+
@extend .tab-style;
|
|
87
|
+
}
|
|
79
88
|
|
|
80
89
|
.p-menuitem-link {
|
|
81
90
|
border: 0 !important;
|
|
@@ -43,7 +43,9 @@ body {
|
|
|
43
43
|
opacity: 0.5;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
|
|
46
|
+
/* PrimeNG 19: Support both old (ui-*) and new (p-*) class names for migration */
|
|
47
|
+
.ui-inputtext,
|
|
48
|
+
.p-inputtext {
|
|
47
49
|
appearance: none;
|
|
48
50
|
background: rgb(255 255 255);
|
|
49
51
|
border: 1px solid $ui-input-text;
|
|
@@ -56,13 +58,13 @@ body {
|
|
|
56
58
|
|
|
57
59
|
&:enabled {
|
|
58
60
|
&:hover {
|
|
59
|
-
&:not(.ui-state-error) {
|
|
61
|
+
&:not(.ui-state-error):not(.p-invalid) {
|
|
60
62
|
border-color: $toggleButton;
|
|
61
63
|
}
|
|
62
64
|
}
|
|
63
65
|
|
|
64
66
|
&:focus {
|
|
65
|
-
&:not(.ui-state-error) {
|
|
67
|
+
&:not(.ui-state-error):not(.p-invalid) {
|
|
66
68
|
border-color: $toggleButton;
|
|
67
69
|
box-shadow: 0 0 6px 0 rgb(0 0 0 / 16%);
|
|
68
70
|
outline: 0 none;
|
|
@@ -499,6 +501,7 @@ body {
|
|
|
499
501
|
|
|
500
502
|
.is-invalid {
|
|
501
503
|
.ui-dropdown,
|
|
504
|
+
.p-dropdown,
|
|
502
505
|
.ql-snow {
|
|
503
506
|
border-color: rgb(255 88 107);
|
|
504
507
|
}
|
|
@@ -509,14 +512,16 @@ body {
|
|
|
509
512
|
width: 100%;
|
|
510
513
|
}
|
|
511
514
|
|
|
512
|
-
|
|
515
|
+
/* PrimeNG 19: Support both old (ui-*) and new (p-*) class names */
|
|
516
|
+
.ui-dropdown,
|
|
517
|
+
.p-dropdown {
|
|
513
518
|
background: rgb(255 255 255);
|
|
514
519
|
border: 1px solid $ui-input-text;
|
|
515
520
|
transition:
|
|
516
521
|
border-color 0.3s,
|
|
517
522
|
box-shadow 0.3s;
|
|
518
523
|
|
|
519
|
-
&:not(.ui-state-disabled) {
|
|
524
|
+
&:not(.ui-state-disabled):not(.p-disabled) {
|
|
520
525
|
&:hover {
|
|
521
526
|
border-color: $toggleButton;
|
|
522
527
|
}
|
|
@@ -528,11 +533,13 @@ body {
|
|
|
528
533
|
}
|
|
529
534
|
}
|
|
530
535
|
|
|
531
|
-
.ui-dropdown-label
|
|
536
|
+
.ui-dropdown-label,
|
|
537
|
+
.p-dropdown-label {
|
|
532
538
|
padding-right: 2em;
|
|
533
539
|
}
|
|
534
540
|
|
|
535
|
-
.ui-dropdown-trigger
|
|
541
|
+
.ui-dropdown-trigger,
|
|
542
|
+
.p-dropdown-trigger {
|
|
536
543
|
background-color: rgb(255 255 255);
|
|
537
544
|
color: $font-color-main;
|
|
538
545
|
line-height: 2em;
|
|
@@ -541,7 +548,8 @@ body {
|
|
|
541
548
|
width: 2em;
|
|
542
549
|
}
|
|
543
550
|
|
|
544
|
-
&:not(.ui-state-disabled).ui-state-focus
|
|
551
|
+
&:not(.ui-state-disabled):not(.p-disabled).ui-state-focus,
|
|
552
|
+
&:not(.p-disabled).p-focus {
|
|
545
553
|
border-color: $toggleButton;
|
|
546
554
|
box-shadow: 0 0 6px 0 rgb(0 0 0 / 16%);
|
|
547
555
|
outline: 0 none;
|
|
@@ -1473,19 +1481,24 @@ body {
|
|
|
1473
1481
|
color: $placeHolder;
|
|
1474
1482
|
} */
|
|
1475
1483
|
|
|
1476
|
-
|
|
1484
|
+
/* PrimeNG 19: Support both old and new class names */
|
|
1485
|
+
.ui-inputtext.ng-dirty.ng-invalid,
|
|
1486
|
+
.p-inputtext.ng-dirty.ng-invalid {
|
|
1477
1487
|
border-color: $invalidInput;
|
|
1478
1488
|
}
|
|
1479
1489
|
|
|
1480
1490
|
p-dropdown.ng-dirty.ng-invalid {
|
|
1481
|
-
> .ui-dropdown
|
|
1491
|
+
> .ui-dropdown,
|
|
1492
|
+
> .p-dropdown {
|
|
1482
1493
|
border-color: $invalidInput;
|
|
1483
1494
|
}
|
|
1484
1495
|
}
|
|
1485
1496
|
|
|
1486
1497
|
p-autocomplete.ng-dirty.ng-invalid {
|
|
1487
|
-
> .ui-autocomplete
|
|
1488
|
-
|
|
1498
|
+
> .ui-autocomplete,
|
|
1499
|
+
> .p-autocomplete {
|
|
1500
|
+
> .ui-inputtext,
|
|
1501
|
+
> .p-inputtext {
|
|
1489
1502
|
border-color: $invalidInput;
|
|
1490
1503
|
}
|
|
1491
1504
|
}
|
|
@@ -1536,7 +1549,8 @@ body {
|
|
|
1536
1549
|
}
|
|
1537
1550
|
|
|
1538
1551
|
p-multiselect.ng-dirty.ng-invalid {
|
|
1539
|
-
> .ui-multiselect
|
|
1552
|
+
> .ui-multiselect,
|
|
1553
|
+
> .p-multiselect {
|
|
1540
1554
|
border-color: $invalidInput;
|
|
1541
1555
|
}
|
|
1542
1556
|
}
|