@posiwise/core-styles 0.0.37 → 0.0.39
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,
|
|
@@ -95,6 +136,17 @@
|
|
|
95
136
|
}
|
|
96
137
|
}
|
|
97
138
|
}
|
|
139
|
+
|
|
140
|
+
.p-tabmenuitem-active {
|
|
141
|
+
background-color: var(--tabs_bg) !important;
|
|
142
|
+
color: var(--tabs_text) !important;
|
|
143
|
+
|
|
144
|
+
a,
|
|
145
|
+
.p-menuitem-link {
|
|
146
|
+
background-color: var(--tabs_bg) !important;
|
|
147
|
+
color: var(--tabs_text) !important;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
98
150
|
}
|
|
99
151
|
}
|
|
100
152
|
}
|
|
@@ -181,6 +233,13 @@
|
|
|
181
233
|
color: var(--tabs_text) !important;
|
|
182
234
|
}
|
|
183
235
|
|
|
236
|
+
.p-paginator-page.p-paginator-page-selected,
|
|
237
|
+
.p-paginator-page.p-highlight {
|
|
238
|
+
background-color: var(--tabs_bg) !important;
|
|
239
|
+
border-color: var(--tabs_bg) !important;
|
|
240
|
+
color: var(--tabs_text) !important;
|
|
241
|
+
}
|
|
242
|
+
|
|
184
243
|
pw-posts-list {
|
|
185
244
|
ul.tags li {
|
|
186
245
|
color: var(--titles);
|
|
@@ -287,7 +346,33 @@
|
|
|
287
346
|
}
|
|
288
347
|
.p-autocomplete-multiple-container {
|
|
289
348
|
.p-autocomplete-token {
|
|
290
|
-
background: var(--first);
|
|
349
|
+
background: var(--first) !important;
|
|
350
|
+
color: #ffffff !important;
|
|
351
|
+
}
|
|
352
|
+
}
|
|
353
|
+
.p-autocomplete-dropdown {
|
|
354
|
+
background-color: var(--first) !important;
|
|
355
|
+
border-color: var(--first) !important;
|
|
356
|
+
color: #ffffff !important;
|
|
357
|
+
|
|
358
|
+
svg,
|
|
359
|
+
.p-icon,
|
|
360
|
+
i {
|
|
361
|
+
color: #ffffff !important;
|
|
362
|
+
fill: #ffffff !important;
|
|
363
|
+
}
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
.p-autocomplete-input-multiple,
|
|
367
|
+
.p-inputtext {
|
|
368
|
+
&:hover {
|
|
369
|
+
border-color: var(--first) !important;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
&:focus,
|
|
373
|
+
&.p-focus {
|
|
374
|
+
border-color: var(--first) !important;
|
|
375
|
+
box-shadow: 0 0 0 0.2rem rgba(23, 105, 225, 0.25) !important;
|
|
291
376
|
}
|
|
292
377
|
}
|
|
293
378
|
}
|
|
@@ -487,14 +572,21 @@
|
|
|
487
572
|
}
|
|
488
573
|
}
|
|
489
574
|
|
|
490
|
-
// spinner color
|
|
491
|
-
|
|
492
|
-
p-progressSpinner .p-progress-spinner-circle
|
|
575
|
+
// spinner color - PrimeNG 19 updated selectors
|
|
576
|
+
p-progressspinner .p-progressspinner-circle,
|
|
577
|
+
p-progressSpinner .p-progress-spinner-circle,
|
|
578
|
+
.p-progressspinner .p-progressspinner-circle {
|
|
493
579
|
animation:
|
|
494
580
|
custom-progress-spinner-dash 1.5s ease-in-out infinite,
|
|
495
581
|
custom-progress-spinner-color 6s ease-in-out infinite;
|
|
496
582
|
}
|
|
497
583
|
|
|
584
|
+
// Ensure spinner SVG uses custom colors
|
|
585
|
+
p-progressspinner svg circle,
|
|
586
|
+
p-progressSpinner svg circle {
|
|
587
|
+
stroke: var(--first) !important;
|
|
588
|
+
}
|
|
589
|
+
|
|
498
590
|
@keyframes custom-progress-spinner-color {
|
|
499
591
|
100%,
|
|
500
592
|
0% {
|
|
@@ -643,6 +735,178 @@
|
|
|
643
735
|
background-color: transparent !important;
|
|
644
736
|
color: var(--first) !important;
|
|
645
737
|
}
|
|
738
|
+
|
|
739
|
+
// PrimeNG Datepicker - Selected date color (blue instead of green)
|
|
740
|
+
.p-datepicker {
|
|
741
|
+
table {
|
|
742
|
+
td {
|
|
743
|
+
span.p-highlight,
|
|
744
|
+
span.p-datepicker-day-selected,
|
|
745
|
+
&.p-highlight > span {
|
|
746
|
+
background-color: var(--first) !important;
|
|
747
|
+
color: #ffffff !important;
|
|
748
|
+
}
|
|
749
|
+
|
|
750
|
+
&.p-datepicker-today {
|
|
751
|
+
> span.p-highlight {
|
|
752
|
+
background-color: var(--first) !important;
|
|
753
|
+
color: #ffffff !important;
|
|
754
|
+
}
|
|
755
|
+
}
|
|
756
|
+
|
|
757
|
+
&.p-datepicker-current-day {
|
|
758
|
+
> span {
|
|
759
|
+
background-color: var(--first) !important;
|
|
760
|
+
color: #ffffff !important;
|
|
761
|
+
}
|
|
762
|
+
}
|
|
763
|
+
}
|
|
764
|
+
}
|
|
765
|
+
}
|
|
766
|
+
|
|
767
|
+
// PrimeNG Calendar icon color
|
|
768
|
+
.p-calendar {
|
|
769
|
+
.p-datepicker-trigger,
|
|
770
|
+
.p-datepicker-dropdown {
|
|
771
|
+
background-color: transparent !important;
|
|
772
|
+
border-color: var(--first) !important;
|
|
773
|
+
color: var(--first) !important;
|
|
774
|
+
|
|
775
|
+
&:hover {
|
|
776
|
+
background-color: rgba(23, 105, 225, 0.1) !important;
|
|
777
|
+
border-color: var(--first) !important;
|
|
778
|
+
}
|
|
779
|
+
|
|
780
|
+
// Icon/SVG color - target all possible icon elements
|
|
781
|
+
svg,
|
|
782
|
+
.p-icon,
|
|
783
|
+
i,
|
|
784
|
+
calendaricon {
|
|
785
|
+
color: var(--first) !important;
|
|
786
|
+
fill: var(--first) !important;
|
|
787
|
+
}
|
|
788
|
+
|
|
789
|
+
// Target SVG paths and elements specifically
|
|
790
|
+
svg path,
|
|
791
|
+
svg circle,
|
|
792
|
+
svg rect,
|
|
793
|
+
svg polygon,
|
|
794
|
+
svg * {
|
|
795
|
+
fill: var(--first) !important;
|
|
796
|
+
stroke: var(--first) !important;
|
|
797
|
+
}
|
|
798
|
+
}
|
|
799
|
+
|
|
800
|
+
.p-inputtext:enabled:hover {
|
|
801
|
+
border-color: var(--first) !important;
|
|
802
|
+
}
|
|
803
|
+
|
|
804
|
+
.p-inputtext:enabled:focus {
|
|
805
|
+
border-color: var(--first) !important;
|
|
806
|
+
box-shadow: 0 0 0 0.2rem rgba(23, 105, 225, 0.25) !important;
|
|
807
|
+
}
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
// PrimeNG Select option selected color
|
|
811
|
+
.p-select-option-selected,
|
|
812
|
+
.p-select-option.p-select-option-selected {
|
|
813
|
+
background-color: var(--first) !important;
|
|
814
|
+
color: #ffffff !important;
|
|
815
|
+
|
|
816
|
+
&.p-focus {
|
|
817
|
+
background-color: var(--first) !important;
|
|
818
|
+
color: #ffffff !important;
|
|
819
|
+
}
|
|
820
|
+
}
|
|
821
|
+
|
|
822
|
+
// PrimeNG Autocomplete option selected color
|
|
823
|
+
.p-autocomplete-option-selected {
|
|
824
|
+
background-color: var(--first) !important;
|
|
825
|
+
color: #ffffff !important;
|
|
826
|
+
|
|
827
|
+
&.p-focus {
|
|
828
|
+
background-color: var(--first) !important;
|
|
829
|
+
color: #ffffff !important;
|
|
830
|
+
}
|
|
831
|
+
}
|
|
832
|
+
|
|
833
|
+
// PrimeNG Chip/Token color
|
|
834
|
+
.p-chip,
|
|
835
|
+
.p-autocomplete-token {
|
|
836
|
+
background-color: var(--first) !important;
|
|
837
|
+
color: #ffffff !important;
|
|
838
|
+
}
|
|
839
|
+
|
|
840
|
+
// PrimeNG Multiselect option selected color
|
|
841
|
+
.p-multiselect-option-selected {
|
|
842
|
+
background-color: transparent !important;
|
|
843
|
+
color: black !important;
|
|
844
|
+
|
|
845
|
+
&.p-focus {
|
|
846
|
+
background: var(--p-multiselect-option-focus-background) !important;
|
|
847
|
+
color: var(--p-multiselect-option-focus-color) !important;
|
|
848
|
+
}
|
|
849
|
+
}
|
|
850
|
+
|
|
851
|
+
// PrimeNG Checkbox checked color
|
|
852
|
+
.p-checkbox-checked .p-checkbox-box {
|
|
853
|
+
background-color: var(--first) !important;
|
|
854
|
+
border-color: var(--first) !important;
|
|
855
|
+
}
|
|
856
|
+
}
|
|
857
|
+
|
|
858
|
+
// Global PrimeNG Calendar icon styles (outside :root for higher specificity)
|
|
859
|
+
p-calendar,
|
|
860
|
+
.p-calendar {
|
|
861
|
+
.p-datepicker-trigger,
|
|
862
|
+
.p-datepicker-dropdown,
|
|
863
|
+
button[class*='datepicker'] {
|
|
864
|
+
background-color: var(--first) !important;
|
|
865
|
+
border-color: var(--first) !important;
|
|
866
|
+
color: white !important;
|
|
867
|
+
|
|
868
|
+
svg,
|
|
869
|
+
.p-icon,
|
|
870
|
+
i,
|
|
871
|
+
calendaricon,
|
|
872
|
+
* {
|
|
873
|
+
color: white !important;
|
|
874
|
+
fill: white !important;
|
|
875
|
+
stroke: white !important;
|
|
876
|
+
}
|
|
877
|
+
|
|
878
|
+
svg path,
|
|
879
|
+
svg circle,
|
|
880
|
+
svg rect,
|
|
881
|
+
svg polygon,
|
|
882
|
+
svg * {
|
|
883
|
+
fill: white !important;
|
|
884
|
+
stroke: white !important;
|
|
885
|
+
}
|
|
886
|
+
}
|
|
887
|
+
}
|
|
888
|
+
|
|
889
|
+
button.p-datepicker-trigger,
|
|
890
|
+
button.p-datepicker-dropdown {
|
|
891
|
+
background-color: transparent !important;
|
|
892
|
+
border-color: var(--first) !important;
|
|
893
|
+
color: var(--first) !important;
|
|
894
|
+
|
|
895
|
+
svg,
|
|
896
|
+
.p-icon,
|
|
897
|
+
i,
|
|
898
|
+
calendaricon,
|
|
899
|
+
* {
|
|
900
|
+
color: var(--first) !important;
|
|
901
|
+
fill: var(--first) !important;
|
|
902
|
+
stroke: var(--first) !important;
|
|
903
|
+
}
|
|
904
|
+
|
|
905
|
+
svg path,
|
|
906
|
+
svg * {
|
|
907
|
+
fill: var(--first) !important;
|
|
908
|
+
stroke: var(--first) !important;
|
|
909
|
+
}
|
|
646
910
|
}
|
|
647
911
|
|
|
648
912
|
.body-quill {
|
|
@@ -663,13 +927,145 @@
|
|
|
663
927
|
.p-dropdown-items {
|
|
664
928
|
.p-dropdown-item {
|
|
665
929
|
&.p-highlight {
|
|
666
|
-
background-color: var(--
|
|
667
|
-
color:
|
|
930
|
+
background-color: var(--first) !important;
|
|
931
|
+
color: #ffffff !important;
|
|
668
932
|
}
|
|
669
933
|
|
|
670
934
|
&.p-focus {
|
|
671
|
-
background-color: var(--
|
|
672
|
-
color:
|
|
935
|
+
background-color: var(--first) !important;
|
|
936
|
+
color: #ffffff !important;
|
|
937
|
+
}
|
|
938
|
+
}
|
|
939
|
+
}
|
|
940
|
+
}
|
|
941
|
+
|
|
942
|
+
// PrimeNG Select option selected (for p-select components)
|
|
943
|
+
.p-select-option-selected,
|
|
944
|
+
.p-select-option.p-select-option-selected {
|
|
945
|
+
background-color: var(--first) !important;
|
|
946
|
+
color: #ffffff !important;
|
|
947
|
+
|
|
948
|
+
&.p-focus {
|
|
949
|
+
background-color: var(--first) !important;
|
|
950
|
+
color: #ffffff !important;
|
|
951
|
+
}
|
|
952
|
+
}
|
|
953
|
+
|
|
954
|
+
// PrimeNG Autocomplete option selected (for p-autocomplete components)
|
|
955
|
+
.p-autocomplete-option-selected {
|
|
956
|
+
background-color: var(--first) !important;
|
|
957
|
+
color: #ffffff !important;
|
|
958
|
+
|
|
959
|
+
&.p-focus {
|
|
960
|
+
background-color: var(--first) !important;
|
|
961
|
+
color: #ffffff !important;
|
|
962
|
+
}
|
|
963
|
+
}
|
|
964
|
+
|
|
965
|
+
// PrimeNG Chip/Token styles (for autocomplete chips)
|
|
966
|
+
.p-chip,
|
|
967
|
+
.p-autocomplete-token,
|
|
968
|
+
p-chip {
|
|
969
|
+
background-color: var(--first) !important;
|
|
970
|
+
color: #ffffff !important;
|
|
971
|
+
|
|
972
|
+
.p-chip-remove-icon {
|
|
973
|
+
color: #ffffff !important;
|
|
974
|
+
}
|
|
975
|
+
}
|
|
976
|
+
|
|
977
|
+
// PrimeNG Autocomplete dropdown button
|
|
978
|
+
.p-autocomplete-dropdown,
|
|
979
|
+
button.p-autocomplete-dropdown {
|
|
980
|
+
background-color: var(--first) !important;
|
|
981
|
+
border-color: var(--first) !important;
|
|
982
|
+
color: #ffffff !important;
|
|
983
|
+
|
|
984
|
+
svg,
|
|
985
|
+
.p-icon,
|
|
986
|
+
i {
|
|
987
|
+
color: #ffffff !important;
|
|
988
|
+
fill: #ffffff !important;
|
|
989
|
+
}
|
|
990
|
+
|
|
991
|
+
&:hover {
|
|
992
|
+
background-color: var(--first) !important;
|
|
993
|
+
border-color: var(--first) !important;
|
|
994
|
+
}
|
|
995
|
+
}
|
|
996
|
+
|
|
997
|
+
// PrimeNG Autocomplete input border color
|
|
998
|
+
.p-autocomplete {
|
|
999
|
+
.p-autocomplete-input-multiple,
|
|
1000
|
+
.p-inputtext {
|
|
1001
|
+
&:hover {
|
|
1002
|
+
border-color: var(--first) !important;
|
|
1003
|
+
}
|
|
1004
|
+
|
|
1005
|
+
&:focus,
|
|
1006
|
+
&.p-focus {
|
|
1007
|
+
border-color: var(--first) !important;
|
|
1008
|
+
box-shadow: 0 0 0 0.2rem rgba(23, 105, 225, 0.25) !important;
|
|
1009
|
+
}
|
|
1010
|
+
}
|
|
1011
|
+
|
|
1012
|
+
&:not(.p-disabled).p-focus .p-autocomplete-input-multiple,
|
|
1013
|
+
&:not(.p-disabled):hover .p-autocomplete-input-multiple {
|
|
1014
|
+
border-color: var(--first) !important;
|
|
1015
|
+
}
|
|
1016
|
+
}
|
|
1017
|
+
|
|
1018
|
+
// PrimeNG Multiselect option selected (for p-multiselect components)
|
|
1019
|
+
.p-multiselect-option-selected {
|
|
1020
|
+
background-color: var(--first) !important;
|
|
1021
|
+
color: #ffffff !important;
|
|
1022
|
+
|
|
1023
|
+
&.p-focus {
|
|
1024
|
+
background-color: var(--first) !important;
|
|
1025
|
+
color: #ffffff !important;
|
|
1026
|
+
}
|
|
1027
|
+
}
|
|
1028
|
+
|
|
1029
|
+
// PrimeNG Checkbox checked (for multiselect checkboxes)
|
|
1030
|
+
.p-checkbox-checked .p-checkbox-box,
|
|
1031
|
+
.p-checkbox.p-checkbox-checked .p-checkbox-box {
|
|
1032
|
+
background-color: var(--first) !important;
|
|
1033
|
+
border-color: var(--first) !important;
|
|
1034
|
+
}
|
|
1035
|
+
|
|
1036
|
+
// PrimeNG Tab menu item active
|
|
1037
|
+
.p-tabmenuitem-active {
|
|
1038
|
+
background-color: var(--tabs_bg) !important;
|
|
1039
|
+
color: var(--tabs_text) !important;
|
|
1040
|
+
|
|
1041
|
+
a,
|
|
1042
|
+
.p-menuitem-link {
|
|
1043
|
+
background-color: var(--tabs_bg) !important;
|
|
1044
|
+
color: var(--tabs_text) !important;
|
|
1045
|
+
}
|
|
1046
|
+
}
|
|
1047
|
+
|
|
1048
|
+
// PrimeNG Paginator page selected
|
|
1049
|
+
.p-paginator-page.p-paginator-page-selected,
|
|
1050
|
+
.p-paginator-page.p-highlight {
|
|
1051
|
+
background-color: var(--tabs_bg) !important;
|
|
1052
|
+
border-color: var(--tabs_bg) !important;
|
|
1053
|
+
color: var(--tabs_text) !important;
|
|
1054
|
+
}
|
|
1055
|
+
|
|
1056
|
+
// PrimeNG Datepicker day selected - direct global style
|
|
1057
|
+
.p-datepicker-day-selected {
|
|
1058
|
+
background-color: var(--first) !important;
|
|
1059
|
+
color: #ffffff !important;
|
|
1060
|
+
}
|
|
1061
|
+
|
|
1062
|
+
.p-datepicker {
|
|
1063
|
+
table {
|
|
1064
|
+
td {
|
|
1065
|
+
span.p-datepicker-day-selected,
|
|
1066
|
+
&.p-datepicker-day-selected > span {
|
|
1067
|
+
background-color: var(--first) !important;
|
|
1068
|
+
color: #ffffff !important;
|
|
673
1069
|
}
|
|
674
1070
|
}
|
|
675
1071
|
}
|
|
@@ -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
|
}
|