@posiwise/core-styles 1.0.3 → 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 +1 -1
- package/scss/_dynamic-styles.scss +36 -0
- package/scss/dashboard/_tabs.scss +84 -5
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 {
|
|
@@ -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
|
|