In my project, I have implemented a toggleable p-panel. The panel has a button to expand or collapse it, but when clicked, the icon on this button gets selected.
Initially, I disabled this property for buttons using css:
button:focus {
outline: none;
box-shadow: none;
}
Now, I am trying to disable this property for the icons of the panel as well. After reading about ng-deep, I attempted the following code snippet:
::ng-deep .p-panel .p-panel-titlebar-toggler {
outline: none;
box-shadow: none;
}
However, this approach did not work as expected. If anyone has any suggestions or solutions, please feel free to share them.
Edit: Here is the HTML snippet used for creating the panel:
<p-panel [toggleable]="true" [toggler]="'header'" [(collapsed)]="panelFuncionalidades" >
<ng-template pTemplate="header">
Panel de funcionalidades
</ng-template>
Here are some buttons and content inside the panel.
</p-panel>
The variable `panelFuncionalidades` is a boolean used to control the opening and closing of the panel from other parts of the application.
I am looking to remove the circle that appears around the "expand" or "collapse" buttons when they are clicked, similar to what is shown in this image https://i.sstatic.net/OLKhq.png. Although this circle disappears when clicking outside of it, I want to prevent it from appearing altogether.