Tab Widget - CSS for Tab selected

[Arun_C]

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

[Velkumar · Accepted 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

[Arun_C]

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>>
    }
}