@posiwise/core-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/package.json +9 -9
- package/scss/_dynamic-styles.scss +149 -64
- package/scss/dashboard/_tabs.scss +18 -4
- package/scss/shared/_prime-ng.scss +32 -3
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
2
|
+
"name": "@posiwise/core-styles",
|
|
3
|
+
"version": "1.0.11",
|
|
4
|
+
"main": "index.js",
|
|
5
|
+
"scripts": {
|
|
6
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
7
|
+
},
|
|
8
|
+
"author": "",
|
|
9
|
+
"license": "ISC",
|
|
10
|
+
"description": ""
|
|
11
11
|
}
|
|
@@ -11,9 +11,17 @@
|
|
|
11
11
|
--second: rgb(54 194 131);
|
|
12
12
|
--text: rgb(34 34 34);
|
|
13
13
|
|
|
14
|
-
// PrimeNG
|
|
15
|
-
--p-datepicker-dropdown-
|
|
16
|
-
--p-datepicker-
|
|
14
|
+
// PrimeNG Datepicker: solid primary trigger, white icon (input-group style)
|
|
15
|
+
--p-datepicker-dropdown-background: var(--first);
|
|
16
|
+
--p-datepicker-dropdown-border-color: var(--first);
|
|
17
|
+
--p-datepicker-dropdown-color: #ffffff;
|
|
18
|
+
--p-datepicker-dropdown-hover-background: var(--tabs_sub_bg);
|
|
19
|
+
--p-datepicker-dropdown-hover-border-color: var(--tabs_sub_bg);
|
|
20
|
+
--p-datepicker-dropdown-hover-color: #ffffff;
|
|
21
|
+
--p-datepicker-dropdown-active-background: var(--tabs_sub_bg);
|
|
22
|
+
--p-datepicker-dropdown-active-border-color: var(--tabs_sub_bg);
|
|
23
|
+
--p-datepicker-dropdown-active-color: #ffffff;
|
|
24
|
+
--p-datepicker-trigger-color: #ffffff;
|
|
17
25
|
--p-button-text-color: var(--first);
|
|
18
26
|
|
|
19
27
|
// PrimeNG Select option selected CSS variables override
|
|
@@ -166,8 +174,8 @@
|
|
|
166
174
|
--p-tabs-tab-active-background: var(--tabs_bg);
|
|
167
175
|
--p-tabs-tab-active-color: var(--tabs_text);
|
|
168
176
|
--p-tabs-tab-color: var(--tabs_bg);
|
|
169
|
-
/*
|
|
170
|
-
--p-tabs-active-bar-background:
|
|
177
|
+
/* Ink bar hidden — solid active tab + full-width border-bottom only (avoids stepped line with flex gap) */
|
|
178
|
+
--p-tabs-active-bar-background: transparent;
|
|
171
179
|
|
|
172
180
|
.p-tablist {
|
|
173
181
|
border-bottom: 4px solid var(--tabs_bg);
|
|
@@ -176,7 +184,7 @@
|
|
|
176
184
|
background: transparent !important;
|
|
177
185
|
}
|
|
178
186
|
.p-tablist-active-bar {
|
|
179
|
-
|
|
187
|
+
display: none !important;
|
|
180
188
|
}
|
|
181
189
|
.p-tab {
|
|
182
190
|
color: var(--tabs_bg);
|
|
@@ -407,8 +415,21 @@
|
|
|
407
415
|
}
|
|
408
416
|
}
|
|
409
417
|
|
|
410
|
-
.p-autocomplete-input-multiple
|
|
411
|
-
|
|
418
|
+
.p-autocomplete-input-multiple {
|
|
419
|
+
&:hover {
|
|
420
|
+
border-color: var(--first) !important;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
&:focus,
|
|
424
|
+
&.p-focus,
|
|
425
|
+
&:focus-within {
|
|
426
|
+
border-color: var(--first) !important;
|
|
427
|
+
// One ring only: theme + this box-shadow read as a double “line” under the field
|
|
428
|
+
box-shadow: none !important;
|
|
429
|
+
}
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
.p-autocomplete-input:not(.p-autocomplete-input-multiple) {
|
|
412
433
|
&:hover {
|
|
413
434
|
border-color: var(--first) !important;
|
|
414
435
|
}
|
|
@@ -416,7 +437,22 @@
|
|
|
416
437
|
&:focus,
|
|
417
438
|
&.p-focus {
|
|
418
439
|
border-color: var(--first) !important;
|
|
419
|
-
box-shadow:
|
|
440
|
+
box-shadow: none !important;
|
|
441
|
+
}
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
// PrimeNG 21: chip textbox is input.p-autocomplete-input (not always .p-inputtext)
|
|
445
|
+
.p-autocomplete-input-chip input,
|
|
446
|
+
.p-autocomplete-input-chip .p-inputtext,
|
|
447
|
+
.p-autocomplete-input-chip .p-autocomplete-input {
|
|
448
|
+
border: 0 !important;
|
|
449
|
+
box-shadow: none !important;
|
|
450
|
+
|
|
451
|
+
&:focus,
|
|
452
|
+
&.p-focus {
|
|
453
|
+
border: 0 !important;
|
|
454
|
+
box-shadow: none !important;
|
|
455
|
+
outline: none !important;
|
|
420
456
|
}
|
|
421
457
|
}
|
|
422
458
|
}
|
|
@@ -740,6 +776,12 @@
|
|
|
740
776
|
text-transform: uppercase;
|
|
741
777
|
}
|
|
742
778
|
|
|
779
|
+
.pw-label-style.info-circle {
|
|
780
|
+
&::after {
|
|
781
|
+
top: -7px;
|
|
782
|
+
}
|
|
783
|
+
}
|
|
784
|
+
|
|
743
785
|
.toast-container {
|
|
744
786
|
position: fixed !important;
|
|
745
787
|
}
|
|
@@ -818,34 +860,47 @@
|
|
|
818
860
|
}
|
|
819
861
|
}
|
|
820
862
|
|
|
821
|
-
// PrimeNG
|
|
822
|
-
.p-
|
|
863
|
+
// PrimeNG Datepicker trigger: solid primary + white calendar icon (attached to input)
|
|
864
|
+
.p-datepicker {
|
|
823
865
|
.p-datepicker-trigger,
|
|
824
866
|
.p-datepicker-dropdown {
|
|
825
|
-
background-color:
|
|
826
|
-
border
|
|
827
|
-
color:
|
|
867
|
+
background-color: var(--first) !important;
|
|
868
|
+
border: 1px solid var(--first) !important;
|
|
869
|
+
color: #ffffff !important;
|
|
828
870
|
|
|
829
871
|
&:hover {
|
|
830
|
-
background-color:
|
|
831
|
-
border-color: var(--
|
|
872
|
+
background-color: var(--tabs_sub_bg) !important;
|
|
873
|
+
border-color: var(--tabs_sub_bg) !important;
|
|
874
|
+
color: #ffffff !important;
|
|
832
875
|
}
|
|
833
876
|
|
|
834
|
-
// Icon/SVG color - target all possible icon elements
|
|
835
877
|
svg,
|
|
836
878
|
.p-icon,
|
|
837
879
|
i,
|
|
838
880
|
calendaricon {
|
|
839
|
-
color:
|
|
840
|
-
fill:
|
|
881
|
+
color: #ffffff !important;
|
|
882
|
+
fill: #ffffff !important;
|
|
841
883
|
}
|
|
842
884
|
|
|
843
|
-
// Target SVG paths and elements specifically
|
|
844
885
|
svg path,
|
|
845
886
|
svg circle,
|
|
846
887
|
svg rect,
|
|
847
888
|
svg polygon,
|
|
848
889
|
svg * {
|
|
890
|
+
fill: #ffffff !important;
|
|
891
|
+
stroke: #ffffff !important;
|
|
892
|
+
}
|
|
893
|
+
}
|
|
894
|
+
|
|
895
|
+
.p-datepicker-input-icon-container {
|
|
896
|
+
background: transparent !important;
|
|
897
|
+
color: var(--first) !important;
|
|
898
|
+
|
|
899
|
+
.p-datepicker-input-icon,
|
|
900
|
+
.p-icon,
|
|
901
|
+
svg,
|
|
902
|
+
svg * {
|
|
903
|
+
color: var(--first) !important;
|
|
849
904
|
fill: var(--first) !important;
|
|
850
905
|
stroke: var(--first) !important;
|
|
851
906
|
}
|
|
@@ -909,60 +964,50 @@
|
|
|
909
964
|
}
|
|
910
965
|
}
|
|
911
966
|
|
|
912
|
-
//
|
|
913
|
-
p-
|
|
914
|
-
.p-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
color: white !important;
|
|
921
|
-
|
|
922
|
-
svg,
|
|
923
|
-
.p-icon,
|
|
924
|
-
i,
|
|
925
|
-
calendaricon,
|
|
926
|
-
* {
|
|
927
|
-
color: white !important;
|
|
928
|
-
fill: white !important;
|
|
929
|
-
stroke: white !important;
|
|
930
|
-
}
|
|
967
|
+
// Datepicker trigger (global): solid primary + white icon — wins over Aura surface tokens
|
|
968
|
+
button.p-datepicker-trigger,
|
|
969
|
+
button.p-datepicker-dropdown,
|
|
970
|
+
p-datepicker .p-datepicker-dropdown,
|
|
971
|
+
.p-datepicker .p-datepicker-dropdown {
|
|
972
|
+
background-color: var(--first) !important;
|
|
973
|
+
border: 1px solid var(--first) !important;
|
|
974
|
+
color: #ffffff !important;
|
|
931
975
|
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
svg * {
|
|
937
|
-
fill: white !important;
|
|
938
|
-
stroke: white !important;
|
|
939
|
-
}
|
|
976
|
+
&:hover {
|
|
977
|
+
background-color: var(--tabs_sub_bg) !important;
|
|
978
|
+
border-color: var(--tabs_sub_bg) !important;
|
|
979
|
+
color: #ffffff !important;
|
|
940
980
|
}
|
|
941
|
-
}
|
|
942
981
|
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
color: var(--first) !important;
|
|
982
|
+
&:active {
|
|
983
|
+
background-color: var(--tabs_sub_bg) !important;
|
|
984
|
+
border-color: var(--tabs_sub_bg) !important;
|
|
985
|
+
}
|
|
948
986
|
|
|
949
987
|
svg,
|
|
950
988
|
.p-icon,
|
|
951
989
|
i,
|
|
952
|
-
calendaricon
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
stroke: var(--first) !important;
|
|
990
|
+
calendaricon {
|
|
991
|
+
color: #ffffff !important;
|
|
992
|
+
fill: #ffffff !important;
|
|
993
|
+
stroke: #ffffff !important;
|
|
957
994
|
}
|
|
958
995
|
|
|
959
996
|
svg path,
|
|
997
|
+
svg circle,
|
|
998
|
+
svg rect,
|
|
999
|
+
svg polygon,
|
|
960
1000
|
svg * {
|
|
961
|
-
fill:
|
|
962
|
-
stroke:
|
|
1001
|
+
fill: #ffffff !important;
|
|
1002
|
+
stroke: #ffffff !important;
|
|
963
1003
|
}
|
|
964
1004
|
}
|
|
965
1005
|
|
|
1006
|
+
// Adjacent input + dropdown: Prime removes border-start on dropdown; keep seam clean
|
|
1007
|
+
.p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-dropdown {
|
|
1008
|
+
border-inline-start: 0 none !important;
|
|
1009
|
+
}
|
|
1010
|
+
|
|
966
1011
|
.body-quill {
|
|
967
1012
|
border-width: 0 !important;
|
|
968
1013
|
}
|
|
@@ -1048,10 +1093,22 @@ button.p-autocomplete-dropdown {
|
|
|
1048
1093
|
}
|
|
1049
1094
|
}
|
|
1050
1095
|
|
|
1051
|
-
// PrimeNG Autocomplete
|
|
1096
|
+
// PrimeNG Autocomplete: primary border on outer list only; no extra box-shadow (avoids double line with theme)
|
|
1052
1097
|
.p-autocomplete {
|
|
1053
|
-
.p-autocomplete-input-multiple
|
|
1054
|
-
|
|
1098
|
+
.p-autocomplete-input-multiple {
|
|
1099
|
+
&:hover {
|
|
1100
|
+
border-color: var(--first) !important;
|
|
1101
|
+
}
|
|
1102
|
+
|
|
1103
|
+
&:focus,
|
|
1104
|
+
&.p-focus,
|
|
1105
|
+
&:focus-within {
|
|
1106
|
+
border-color: var(--first) !important;
|
|
1107
|
+
box-shadow: none !important;
|
|
1108
|
+
}
|
|
1109
|
+
}
|
|
1110
|
+
|
|
1111
|
+
.p-autocomplete-input:not(.p-autocomplete-input-multiple) {
|
|
1055
1112
|
&:hover {
|
|
1056
1113
|
border-color: var(--first) !important;
|
|
1057
1114
|
}
|
|
@@ -1059,13 +1116,41 @@ button.p-autocomplete-dropdown {
|
|
|
1059
1116
|
&:focus,
|
|
1060
1117
|
&.p-focus {
|
|
1061
1118
|
border-color: var(--first) !important;
|
|
1062
|
-
box-shadow:
|
|
1119
|
+
box-shadow: none !important;
|
|
1120
|
+
}
|
|
1121
|
+
}
|
|
1122
|
+
|
|
1123
|
+
.p-autocomplete-input-chip input,
|
|
1124
|
+
.p-autocomplete-input-chip .p-inputtext,
|
|
1125
|
+
.p-autocomplete-input-chip .p-autocomplete-input {
|
|
1126
|
+
border: 0 !important;
|
|
1127
|
+
box-shadow: none !important;
|
|
1128
|
+
|
|
1129
|
+
&:focus,
|
|
1130
|
+
&.p-focus {
|
|
1131
|
+
border: 0 !important;
|
|
1132
|
+
box-shadow: none !important;
|
|
1133
|
+
outline: none !important;
|
|
1063
1134
|
}
|
|
1064
1135
|
}
|
|
1065
1136
|
|
|
1066
1137
|
&:not(.p-disabled).p-focus .p-autocomplete-input-multiple,
|
|
1067
1138
|
&:not(.p-disabled):hover .p-autocomplete-input-multiple {
|
|
1068
1139
|
border-color: var(--first) !important;
|
|
1140
|
+
box-shadow: none !important;
|
|
1141
|
+
}
|
|
1142
|
+
}
|
|
1143
|
+
|
|
1144
|
+
// Multiselect autocomplete + dropdown: full height, no inset shadow reading as a horizontal rule under chips
|
|
1145
|
+
.p-autocomplete:has(.p-autocomplete-dropdown) {
|
|
1146
|
+
align-items: stretch;
|
|
1147
|
+
|
|
1148
|
+
.p-autocomplete-input-multiple {
|
|
1149
|
+
box-shadow: none !important;
|
|
1150
|
+
}
|
|
1151
|
+
|
|
1152
|
+
.p-autocomplete-dropdown {
|
|
1153
|
+
align-self: stretch;
|
|
1069
1154
|
}
|
|
1070
1155
|
}
|
|
1071
1156
|
|
|
@@ -52,8 +52,8 @@
|
|
|
52
52
|
--p-tabs-tab-active-background: #{map-get($primary, base)};
|
|
53
53
|
--p-tabs-tab-active-color: rgb(255 255 255);
|
|
54
54
|
--p-tabs-tab-color: #{map-get($primary, base)};
|
|
55
|
-
/*
|
|
56
|
-
--p-tabs-active-bar-background:
|
|
55
|
+
/* Ink bar removed: active tab uses solid fill + .p-tablist border-bottom; ink bar misaligns with gap/border */
|
|
56
|
+
--p-tabs-active-bar-background: transparent;
|
|
57
57
|
|
|
58
58
|
.p-tablist {
|
|
59
59
|
background: $background-nav-tabs;
|
|
@@ -65,12 +65,14 @@
|
|
|
65
65
|
display: flex;
|
|
66
66
|
gap: 0;
|
|
67
67
|
}
|
|
68
|
+
/* Space between tab labels (PrimeNG Tabs: flex row is .p-tablist-tab-list) */
|
|
68
69
|
.p-tablist-tab-list {
|
|
69
70
|
background: transparent !important;
|
|
71
|
+
flex-wrap: wrap;
|
|
72
|
+
row-gap: 6px;
|
|
70
73
|
}
|
|
71
|
-
/* Active bar (inkbar) under selected tab - override PrimeNG default green */
|
|
72
74
|
.p-tablist-active-bar {
|
|
73
|
-
|
|
75
|
+
display: none !important;
|
|
74
76
|
}
|
|
75
77
|
|
|
76
78
|
.p-tab {
|
|
@@ -83,6 +85,12 @@
|
|
|
83
85
|
font-weight: 400;
|
|
84
86
|
line-height: 1.3;
|
|
85
87
|
text-transform: uppercase;
|
|
88
|
+
/* PrimeNG Tabs: icon + label must share a flex row so FA icons align with text (matches TabMenu look). */
|
|
89
|
+
display: inline-flex !important;
|
|
90
|
+
flex-direction: row;
|
|
91
|
+
align-items: center;
|
|
92
|
+
justify-content: center;
|
|
93
|
+
gap: 0.429em;
|
|
86
94
|
|
|
87
95
|
&:hover {
|
|
88
96
|
background-color: transparent !important;
|
|
@@ -100,6 +108,10 @@
|
|
|
100
108
|
/* Match .p-tabmenu .p-menuitem-text: icon spacing and label typography */
|
|
101
109
|
i {
|
|
102
110
|
font-size: 10px;
|
|
111
|
+
line-height: 1;
|
|
112
|
+
display: inline-flex;
|
|
113
|
+
align-items: center;
|
|
114
|
+
justify-content: center;
|
|
103
115
|
}
|
|
104
116
|
span {
|
|
105
117
|
font-size: 14px;
|
|
@@ -107,6 +119,8 @@
|
|
|
107
119
|
line-height: 1.3;
|
|
108
120
|
margin-right: 0.429em;
|
|
109
121
|
text-transform: uppercase;
|
|
122
|
+
display: inline-flex;
|
|
123
|
+
align-items: center;
|
|
110
124
|
}
|
|
111
125
|
}
|
|
112
126
|
}
|
|
@@ -1508,12 +1508,29 @@ body {
|
|
|
1508
1508
|
}
|
|
1509
1509
|
}
|
|
1510
1510
|
|
|
1511
|
-
p-
|
|
1511
|
+
p-datepicker.ng-dirty.ng-invalid {
|
|
1512
1512
|
> .ui-calendar {
|
|
1513
1513
|
> .ui-inputtext {
|
|
1514
1514
|
border-color: $invalidInput;
|
|
1515
1515
|
}
|
|
1516
1516
|
}
|
|
1517
|
+
|
|
1518
|
+
// PrimeNG 21+ (p-datepicker host — no inner .ui-calendar)
|
|
1519
|
+
.p-datepicker-input {
|
|
1520
|
+
border-color: $invalidInput;
|
|
1521
|
+
}
|
|
1522
|
+
}
|
|
1523
|
+
|
|
1524
|
+
// PrimeNG 21 DatePicker host is inline-flex; Bootstrap .d-block uses display:block !important and breaks input + dropdown trigger layout
|
|
1525
|
+
p-datepicker.d-block {
|
|
1526
|
+
display: inline-flex !important;
|
|
1527
|
+
width: 100%;
|
|
1528
|
+
max-width: 100%;
|
|
1529
|
+
}
|
|
1530
|
+
|
|
1531
|
+
// PrimeNG 21+: <p-datepicker> is the .p-datepicker.p-inputwrapper root (legacy p-calendar used an inner span). :has() rules in @primeuix/styles expect this host to wrap .p-datepicker-input + .p-datepicker-dropdown.
|
|
1532
|
+
p-datepicker.p-datepicker {
|
|
1533
|
+
max-width: 100%;
|
|
1517
1534
|
}
|
|
1518
1535
|
|
|
1519
1536
|
p-chips.ng-dirty.ng-invalid {
|
|
@@ -2999,21 +3016,33 @@ body {
|
|
|
2999
3016
|
}
|
|
3000
3017
|
}
|
|
3001
3018
|
|
|
3002
|
-
.p-sortable-column-icon
|
|
3019
|
+
// PrimeNG 21+: .p-datatable-sort-icon replaces legacy .p-sortable-column-icon
|
|
3020
|
+
.p-datatable-sort-icon {
|
|
3003
3021
|
color: rgb(255 255 255) !important;
|
|
3004
3022
|
|
|
3023
|
+
width: var(--p-icon-size);
|
|
3024
|
+
height: var(--p-icon-size);
|
|
3005
3025
|
&:hover {
|
|
3006
3026
|
color: rgb(255 255 255) !important;
|
|
3007
3027
|
}
|
|
3028
|
+
|
|
3029
|
+
svg {
|
|
3030
|
+
fill: currentColor;
|
|
3031
|
+
}
|
|
3008
3032
|
}
|
|
3009
3033
|
|
|
3010
|
-
.p-sortable-column-icon.p-highlight
|
|
3034
|
+
// Sorted column: replaces .p-sortable-column-icon.p-highlight
|
|
3035
|
+
.p-datatable-thead > tr > th.p-datatable-column-sorted .p-datatable-sort-icon {
|
|
3011
3036
|
background-color: $ng-primary-color !important;
|
|
3012
3037
|
color: rgb(255 255 255) !important;
|
|
3013
3038
|
|
|
3014
3039
|
&:hover {
|
|
3015
3040
|
color: rgb(255 255 255) !important;
|
|
3016
3041
|
}
|
|
3042
|
+
|
|
3043
|
+
svg {
|
|
3044
|
+
fill: currentColor;
|
|
3045
|
+
}
|
|
3017
3046
|
}
|
|
3018
3047
|
|
|
3019
3048
|
.ui-column-resizer-helper {
|