Community Tip - You can subscribe to a forum, label or individual post and receive email notifications when someone posts a new topic or reply. Learn more! X
Hi Team,
Following on the Tab CSS - Blog Link. I also needed to change the ptcs-tab selected header color and styling based on the customer UI requirement. I used the below given CSS, Its working properly in TWX 8.5.
But in TWX 9.4.0 its not working as expected.
.TabsArrow .widget-ptcstabset::part(tabs-tab)[selected]
{
background: #0094C8 !important;
border-bottom-color: #EEEEEE !important;
}
.TabsArrow .widget-ptcstabset::part(tabs-tab)[selected]:before
{
content: '';
width: 0;
height: 0;
border-top: 17px solid transparent;
border-bottom: 17px solid transparent;
border-left: 15px solid #EEEEEE;
position: absolute;
display: block;
top: 0;
left: 0;
}
.TabsArrow .widget-ptcstabset::part(tabs-tab)[selected]:after
{ content: '';
width: 0;
height: 0;
border-top: 17px solid #EEEEEE;
border-bottom: 17px solid #EEEEEE;
border-left: 15px solid #0094C8;
position: absolute;
display: block;
top: 0;
right:0;
}
Kindly provide some workaround for this case to fix in TWX 9.4 Versions.
Thanks & Regards,
Arun C
Solved! Go to Solution.
Hi @Arun_C
CSS Syntax got changed from TWX 9.3.4
Please follow the new syntax -
Related Article
https://www.ptc.com/en/support/article/cs377455
Tabset CSS on Tab Selected - PTC Community
/VR
Hi @Arun_C
CSS Syntax got changed from TWX 9.3.4
Please follow the new syntax -
Related Article
https://www.ptc.com/en/support/article/cs377455
Tabset CSS on Tab Selected - PTC Community
/VR
Thank You @Velkumar . After updating with syntax , now its working properly.
@supports (ptcs-style-unit: "PTCS-TAB-SET") {
[part=tabs-tab][selected] {
<<CSS>>
}
}
@supports (ptcs-style-unit: "PTCS-TAB-SET") {
[part=tabs-tab][selected]:before {
<<CSS>>
}
}
@supports (ptcs-style-unit: "PTCS-TAB-SET") {
[part=tabs-tab][selected]:after {
<<CSS>>
}
}