@posiwise/core-styles 1.0.3 → 1.0.5
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 +46 -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 {
|
|
@@ -694,6 +730,16 @@
|
|
|
694
730
|
.container-fluid.pw-tab.overflow-hidden {
|
|
695
731
|
margin-top: -12px;
|
|
696
732
|
}
|
|
733
|
+
|
|
734
|
+
/* Same look as form label – use on <span> when a11y requires no <label> (e.g. aria-labelledby only) */
|
|
735
|
+
.pw-label-style {
|
|
736
|
+
color: gray;
|
|
737
|
+
font-size: 0.75rem;
|
|
738
|
+
font-weight: 500;
|
|
739
|
+
letter-spacing: 2px;
|
|
740
|
+
text-transform: uppercase;
|
|
741
|
+
}
|
|
742
|
+
|
|
697
743
|
.toast-container {
|
|
698
744
|
position: fixed !important;
|
|
699
745
|
}
|
|
@@ -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: 0.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
|
|