Select to view content in your preferred language

Custom color of Icon in accordion

1030
2
02-16-2023 09:12 AM
nnolasco
New Contributor II

I am building out an accordion drop down menu and I was able to figure out how to overwrite the Title color but I am stuck getting the icon/chevron to match.  I am guessing I need to the line of code in Bold Italic.  To Over write the default text color I had to use what is in bold in the second line.Capture.PNG

 

<calcite-accordion appearance="transparent" icon-position="start" icon-type="chevron" scale="l" selection-mode="single">


<calcite-accordion-item item-title="Accordion Title" style="background-color:#949494; --calcite-ui-text-2: #ffffff; border-bottom:1px solid #949494">




<ul><li style="background-color: rgb(255, 255, 255); color: rgb(0, 55, 100);">
Accordion body text</li><li style="background-color: rgb(255, 255, 255); color: rgb(0, 55, 100);"><br></li><li style="background-color: rgb(255, 255, 255); color: rgb(0, 55, 100);"><br></li><li style="background-color: rgb(255, 255, 255); color: rgb(0, 55, 100);"><br></li><li style="background-color: rgb(255, 255, 255); color: rgb(0, 55, 100);">
</li></ul>


</calcite-accordion-item>
</calcite-accordion>
</div></div>

2 Replies
BenLimburn
New Contributor II

I'm stuck on this as well. It would be nice to know how to make the title text bigger too!