I'm trying to target a panel bar and overwrite the kendo default styling on the header for just this one specific component using a local SCSS file. Unfortunately, no level of targeting seems to affect the actual component on the page. At present the default UI theme is in place, I'm looking to implement the following styling if possible to make the background transparent and look as below:
Any help would be really appreciated!
local.html
<div class="panelbar-wrapper">
<kendo-panelbar>
<kendo-panelbar-item
title="Example" [expanded]="true">
<ng-template kendoPanelBarContent>
local.scss
.k-panelbar .k-panelbar-item.k-panelbar-header.k-level-0 .k-link.k-selected{
background-image: none !important;
color: #303030 !important;
background: transparent !important;
}
.k-panelbar .k-panelbar-item.k-panelbar-header.k-level-0 .k-link{
color: #303030 !important;
}