Replace open/close icon with text
In this recipe, we will modify the Carousel plugin to replace the arrow > icon, for opening/hiding, the carousel with the text "Open Locations", making it more visible.
Preview:
CSS:
#overlay wdg-other-carousel .toggle-wrapper .mat-button-wrapper sh-icon {
display: none;
}
#overlay wdg-other-carousel button.carousel{
width: 200px !important;
}
#overlay wdg-other-carousel button.toggle{
border-radius: 4px 4px 0px 0px;
width: 150px;
margin-bottom: 16.5px;
transform: rotate(0deg);
}
#overlay wdg-other-carousel .toggle-wrapper .mat-button-wrapper::after {
content: 'Open Locations';
display: flex;
align-items: center;
justify-content: center;
width: 100%;
font-size: 16px;
font-weight: bold;
color: #213a8f;
}