@posiwise/core-styles 1.0.2 → 1.0.4
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
|
@@ -148,6 +148,7 @@
|
|
|
148
148
|
.p-tabmenuitem-active {
|
|
149
149
|
background-color: var(--tabs_bg) !important;
|
|
150
150
|
color: var(--tabs_text) !important;
|
|
151
|
+
border-color: var(--tabs_bg) !important;
|
|
151
152
|
|
|
152
153
|
a,
|
|
153
154
|
.p-menuitem-link {
|
|
@@ -157,6 +158,41 @@
|
|
|
157
158
|
}
|
|
158
159
|
}
|
|
159
160
|
}
|
|
161
|
+
|
|
162
|
+
/* PrimeNG 19 Tabs - match TabMenu theme (--tabs_bg / --tabs_text) */
|
|
163
|
+
.p-tabs {
|
|
164
|
+
margin-top: 40px;
|
|
165
|
+
/* Force active tab colors via design tokens and selectors */
|
|
166
|
+
--p-tabs-tab-active-background: var(--tabs_bg);
|
|
167
|
+
--p-tabs-tab-active-color: var(--tabs_text);
|
|
168
|
+
--p-tabs-tab-color: var(--tabs_bg);
|
|
169
|
+
/* Active bar (inkbar) under selected tab - match tabs_bg, not green */
|
|
170
|
+
--p-tabs-active-bar-background: var(--tabs_bg);
|
|
171
|
+
|
|
172
|
+
.p-tablist {
|
|
173
|
+
border-bottom: 4px solid var(--tabs_bg);
|
|
174
|
+
}
|
|
175
|
+
.p-tablist-tab-list {
|
|
176
|
+
background: transparent !important;
|
|
177
|
+
}
|
|
178
|
+
.p-tablist-active-bar {
|
|
179
|
+
background: var(--tabs_bg) !important;
|
|
180
|
+
}
|
|
181
|
+
.p-tab {
|
|
182
|
+
color: var(--tabs_bg);
|
|
183
|
+
&.p-highlight,
|
|
184
|
+
&[aria-selected='true'] {
|
|
185
|
+
background-color: var(--tabs_bg) !important;
|
|
186
|
+
color: var(--tabs_text) !important;
|
|
187
|
+
border: 0;
|
|
188
|
+
border-color: var(--tabs_bg) !important;
|
|
189
|
+
&:hover {
|
|
190
|
+
background-color: var(--tabs_bg) !important;
|
|
191
|
+
color: var(--tabs_text) !important;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
}
|
|
160
196
|
}
|
|
161
197
|
|
|
162
198
|
.custom-tooltip .tooltip-inner {
|
|
@@ -1097,7 +1133,10 @@ button.p-autocomplete-dropdown {
|
|
|
1097
1133
|
box-shadow: 0 0 0 0.1rem var(--tabs_bg) !important;
|
|
1098
1134
|
outline: none !important;
|
|
1099
1135
|
}
|
|
1100
|
-
.p-dropdown:not(.p-disabled).p-focus
|
|
1136
|
+
.p-dropdown:not(.p-disabled).p-focus,
|
|
1137
|
+
.p-select:not(.p-disabled).p-focus,
|
|
1138
|
+
.p-inputwrapper.p-select.p-focus,
|
|
1139
|
+
.p-inputwrapper.p-select.p-inputwrapper-focus {
|
|
1101
1140
|
border-color: var(--tabs_bg) !important; /* Change to your custom color */
|
|
1102
1141
|
box-shadow: 0 0 0 0.1rem var(--tabs_bg) !important; /* Adjust as needed */
|
|
1103
1142
|
outline: none !important; /* Keep the outline removed */
|
|
@@ -30,10 +30,89 @@
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
+
/* Tab style shared by TabMenu and Tabs (active state) */
|
|
34
|
+
.tab-style {
|
|
35
|
+
background-color: map-get($primary, base) !important;
|
|
36
|
+
box-shadow: none !important;
|
|
37
|
+
color: rgb(255 255 255) !important;
|
|
38
|
+
|
|
39
|
+
&:hover {
|
|
40
|
+
background-color: map-get($primary, base) !important;
|
|
41
|
+
color: rgb(255 255 255) !important;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
33
45
|
/* New Style of tabs begin here */
|
|
34
46
|
.pw-tab {
|
|
47
|
+
/* PrimeNG 19 Tabs (replaces TabMenu) - match previous TabMenu design */
|
|
48
|
+
.p-tabs {
|
|
49
|
+
border: 0;
|
|
50
|
+
margin-top: 40px;
|
|
51
|
+
/* Design tokens so PrimeNG applies active tab styling */
|
|
52
|
+
--p-tabs-tab-active-background: #{map-get($primary, base)};
|
|
53
|
+
--p-tabs-tab-active-color: rgb(255 255 255);
|
|
54
|
+
--p-tabs-tab-color: #{map-get($primary, base)};
|
|
55
|
+
/* Active bar (inkbar) under selected tab - use tabs_bg so it's not green */
|
|
56
|
+
--p-tabs-active-bar-background: var(--tabs_bg);
|
|
57
|
+
|
|
58
|
+
.p-tablist {
|
|
59
|
+
background: $background-nav-tabs;
|
|
60
|
+
border-bottom: 4px solid map-get($primary, base);
|
|
61
|
+
flex-wrap: wrap;
|
|
62
|
+
justify-content: flex-start;
|
|
63
|
+
overflow: hidden;
|
|
64
|
+
padding: 0;
|
|
65
|
+
display: flex;
|
|
66
|
+
gap: 0;
|
|
67
|
+
}
|
|
68
|
+
.p-tablist-tab-list {
|
|
69
|
+
background: transparent !important;
|
|
70
|
+
}
|
|
71
|
+
/* Active bar (inkbar) under selected tab - override PrimeNG default green */
|
|
72
|
+
.p-tablist-active-bar {
|
|
73
|
+
background: var(--tabs_bg) !important;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.p-tab {
|
|
77
|
+
border: 0;
|
|
78
|
+
padding: 6px !important;
|
|
79
|
+
background: transparent;
|
|
80
|
+
border-radius: 0;
|
|
81
|
+
color: map-get($primary, base);
|
|
82
|
+
font-size: 14px;
|
|
83
|
+
font-weight: 400;
|
|
84
|
+
line-height: 1.3;
|
|
85
|
+
text-transform: uppercase;
|
|
86
|
+
|
|
87
|
+
&:hover {
|
|
88
|
+
background-color: transparent !important;
|
|
89
|
+
color: rgb(34 34 34) !important;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* PrimeNG 19 may use .p-highlight or aria-selected for active tab */
|
|
93
|
+
&.p-highlight,
|
|
94
|
+
&[aria-selected='true'] {
|
|
95
|
+
@extend .tab-style;
|
|
96
|
+
border: 0;
|
|
97
|
+
border-color: var(--tabs_bg);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/* Match .p-tabmenu .p-menuitem-text: icon spacing and label typography */
|
|
101
|
+
i {
|
|
102
|
+
font-size: 10px;
|
|
103
|
+
}
|
|
104
|
+
span {
|
|
105
|
+
font-size: 14px;
|
|
106
|
+
font-weight: 400;
|
|
107
|
+
line-height: 1.3;
|
|
108
|
+
margin-right: .429em;
|
|
109
|
+
text-transform: uppercase;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
35
114
|
.p-tabmenu {
|
|
36
|
-
border: 0
|
|
115
|
+
border: 0;
|
|
37
116
|
margin-top: 0;
|
|
38
117
|
|
|
39
118
|
.p-tabmenu-nav {
|
|
@@ -45,12 +124,12 @@
|
|
|
45
124
|
padding: 0;
|
|
46
125
|
|
|
47
126
|
.p-tabmenuitem-active {
|
|
127
|
+
border: 0;
|
|
48
128
|
border-color: var(--tabs_bg) !important;
|
|
49
|
-
color: black;
|
|
50
129
|
}
|
|
51
130
|
|
|
52
131
|
.p-tabmenuitem {
|
|
53
|
-
border: 0
|
|
132
|
+
border: 0;
|
|
54
133
|
margin: 0;
|
|
55
134
|
padding: 0;
|
|
56
135
|
|
|
@@ -72,7 +151,7 @@
|
|
|
72
151
|
}
|
|
73
152
|
|
|
74
153
|
&.p-highlight {
|
|
75
|
-
border-bottom: 0
|
|
154
|
+
border-bottom: 0;
|
|
76
155
|
|
|
77
156
|
a {
|
|
78
157
|
@extend .tab-style;
|
|
@@ -110,7 +189,7 @@
|
|
|
110
189
|
|
|
111
190
|
.table-title {
|
|
112
191
|
ul {
|
|
113
|
-
border: 0
|
|
192
|
+
border: 0 !important;
|
|
114
193
|
}
|
|
115
194
|
}
|
|
116
195
|
|
|
@@ -512,9 +512,10 @@ body {
|
|
|
512
512
|
width: 100%;
|
|
513
513
|
}
|
|
514
514
|
|
|
515
|
-
/* PrimeNG 19: Support both old (ui-*)
|
|
515
|
+
/* PrimeNG 19: Support both old (ui-*), new (p-*), and Select (p-select) class names */
|
|
516
516
|
.ui-dropdown,
|
|
517
|
-
.p-dropdown
|
|
517
|
+
.p-dropdown,
|
|
518
|
+
.p-select {
|
|
518
519
|
background: rgb(255 255 255);
|
|
519
520
|
border: 1px solid $ui-input-text;
|
|
520
521
|
transition:
|
|
@@ -534,12 +535,14 @@ body {
|
|
|
534
535
|
}
|
|
535
536
|
|
|
536
537
|
.ui-dropdown-label,
|
|
537
|
-
.p-dropdown-label
|
|
538
|
+
.p-dropdown-label,
|
|
539
|
+
.p-select-label {
|
|
538
540
|
padding-right: 2em;
|
|
539
541
|
}
|
|
540
542
|
|
|
541
543
|
.ui-dropdown-trigger,
|
|
542
|
-
.p-dropdown-trigger
|
|
544
|
+
.p-dropdown-trigger,
|
|
545
|
+
.p-select-trigger {
|
|
543
546
|
background-color: rgb(255 255 255);
|
|
544
547
|
color: $font-color-main;
|
|
545
548
|
line-height: 2em;
|
|
@@ -549,7 +552,8 @@ body {
|
|
|
549
552
|
}
|
|
550
553
|
|
|
551
554
|
&:not(.ui-state-disabled):not(.p-disabled).ui-state-focus,
|
|
552
|
-
&:not(.p-disabled).p-focus
|
|
555
|
+
&:not(.p-disabled).p-focus,
|
|
556
|
+
&.p-inputwrapper-focus {
|
|
553
557
|
border-color: $toggleButton;
|
|
554
558
|
box-shadow: 0 0 6px 0 rgb(0 0 0 / 16%);
|
|
555
559
|
outline: 0 none;
|