@posiwise/core-styles 1.0.10 → 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 +147 -69
- 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,12 +776,11 @@
|
|
|
740
776
|
text-transform: uppercase;
|
|
741
777
|
}
|
|
742
778
|
|
|
743
|
-
.pw-label-style.info-circle {
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
779
|
+
.pw-label-style.info-circle {
|
|
780
|
+
&::after {
|
|
781
|
+
top: -7px;
|
|
782
|
+
}
|
|
747
783
|
}
|
|
748
|
-
}
|
|
749
784
|
|
|
750
785
|
.toast-container {
|
|
751
786
|
position: fixed !important;
|
|
@@ -825,34 +860,47 @@
|
|
|
825
860
|
}
|
|
826
861
|
}
|
|
827
862
|
|
|
828
|
-
// PrimeNG
|
|
829
|
-
.p-
|
|
863
|
+
// PrimeNG Datepicker trigger: solid primary + white calendar icon (attached to input)
|
|
864
|
+
.p-datepicker {
|
|
830
865
|
.p-datepicker-trigger,
|
|
831
866
|
.p-datepicker-dropdown {
|
|
832
|
-
background-color:
|
|
833
|
-
border
|
|
834
|
-
color:
|
|
867
|
+
background-color: var(--first) !important;
|
|
868
|
+
border: 1px solid var(--first) !important;
|
|
869
|
+
color: #ffffff !important;
|
|
835
870
|
|
|
836
871
|
&:hover {
|
|
837
|
-
background-color:
|
|
838
|
-
border-color: var(--
|
|
872
|
+
background-color: var(--tabs_sub_bg) !important;
|
|
873
|
+
border-color: var(--tabs_sub_bg) !important;
|
|
874
|
+
color: #ffffff !important;
|
|
839
875
|
}
|
|
840
876
|
|
|
841
|
-
// Icon/SVG color - target all possible icon elements
|
|
842
877
|
svg,
|
|
843
878
|
.p-icon,
|
|
844
879
|
i,
|
|
845
880
|
calendaricon {
|
|
846
|
-
color:
|
|
847
|
-
fill:
|
|
881
|
+
color: #ffffff !important;
|
|
882
|
+
fill: #ffffff !important;
|
|
848
883
|
}
|
|
849
884
|
|
|
850
|
-
// Target SVG paths and elements specifically
|
|
851
885
|
svg path,
|
|
852
886
|
svg circle,
|
|
853
887
|
svg rect,
|
|
854
888
|
svg polygon,
|
|
855
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;
|
|
856
904
|
fill: var(--first) !important;
|
|
857
905
|
stroke: var(--first) !important;
|
|
858
906
|
}
|
|
@@ -916,60 +964,50 @@
|
|
|
916
964
|
}
|
|
917
965
|
}
|
|
918
966
|
|
|
919
|
-
//
|
|
920
|
-
p-
|
|
921
|
-
.p-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
color: white !important;
|
|
928
|
-
|
|
929
|
-
svg,
|
|
930
|
-
.p-icon,
|
|
931
|
-
i,
|
|
932
|
-
calendaricon,
|
|
933
|
-
* {
|
|
934
|
-
color: white !important;
|
|
935
|
-
fill: white !important;
|
|
936
|
-
stroke: white !important;
|
|
937
|
-
}
|
|
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;
|
|
938
975
|
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
svg * {
|
|
944
|
-
fill: white !important;
|
|
945
|
-
stroke: white !important;
|
|
946
|
-
}
|
|
976
|
+
&:hover {
|
|
977
|
+
background-color: var(--tabs_sub_bg) !important;
|
|
978
|
+
border-color: var(--tabs_sub_bg) !important;
|
|
979
|
+
color: #ffffff !important;
|
|
947
980
|
}
|
|
948
|
-
}
|
|
949
981
|
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
color: var(--first) !important;
|
|
982
|
+
&:active {
|
|
983
|
+
background-color: var(--tabs_sub_bg) !important;
|
|
984
|
+
border-color: var(--tabs_sub_bg) !important;
|
|
985
|
+
}
|
|
955
986
|
|
|
956
987
|
svg,
|
|
957
988
|
.p-icon,
|
|
958
989
|
i,
|
|
959
|
-
calendaricon
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
stroke: var(--first) !important;
|
|
990
|
+
calendaricon {
|
|
991
|
+
color: #ffffff !important;
|
|
992
|
+
fill: #ffffff !important;
|
|
993
|
+
stroke: #ffffff !important;
|
|
964
994
|
}
|
|
965
995
|
|
|
966
996
|
svg path,
|
|
997
|
+
svg circle,
|
|
998
|
+
svg rect,
|
|
999
|
+
svg polygon,
|
|
967
1000
|
svg * {
|
|
968
|
-
fill:
|
|
969
|
-
stroke:
|
|
1001
|
+
fill: #ffffff !important;
|
|
1002
|
+
stroke: #ffffff !important;
|
|
970
1003
|
}
|
|
971
1004
|
}
|
|
972
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
|
+
|
|
973
1011
|
.body-quill {
|
|
974
1012
|
border-width: 0 !important;
|
|
975
1013
|
}
|
|
@@ -1055,10 +1093,22 @@ button.p-autocomplete-dropdown {
|
|
|
1055
1093
|
}
|
|
1056
1094
|
}
|
|
1057
1095
|
|
|
1058
|
-
// PrimeNG Autocomplete
|
|
1096
|
+
// PrimeNG Autocomplete: primary border on outer list only; no extra box-shadow (avoids double line with theme)
|
|
1059
1097
|
.p-autocomplete {
|
|
1060
|
-
.p-autocomplete-input-multiple
|
|
1061
|
-
|
|
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) {
|
|
1062
1112
|
&:hover {
|
|
1063
1113
|
border-color: var(--first) !important;
|
|
1064
1114
|
}
|
|
@@ -1066,13 +1116,41 @@ button.p-autocomplete-dropdown {
|
|
|
1066
1116
|
&:focus,
|
|
1067
1117
|
&.p-focus {
|
|
1068
1118
|
border-color: var(--first) !important;
|
|
1069
|
-
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;
|
|
1070
1134
|
}
|
|
1071
1135
|
}
|
|
1072
1136
|
|
|
1073
1137
|
&:not(.p-disabled).p-focus .p-autocomplete-input-multiple,
|
|
1074
1138
|
&:not(.p-disabled):hover .p-autocomplete-input-multiple {
|
|
1075
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;
|
|
1076
1154
|
}
|
|
1077
1155
|
}
|
|
1078
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 {
|