Select to view content in your preferred language

Popup button focus color

561
2
Jump to solution
02-08-2024 07:12 AM
Jeff-Reinhart
Regular Contributor

How do I get the popup buttons to have the same outline color on focus using CSS only? Using version 4.28.

I was able to get the Dock button and the Zoom To button to a custom color on focus using:

calcite-action {
  --calcite-ui-focus-color: red;
}

However, the Collapse and Close buttons are not affected.

Please see this codepen for example. When you click the map, the popup will appear and the title will be highlighted. Press the tab key to get to the Dock, Collapse, Close, and Zoom To. Dock and Zoom To will be red, Collapse and Close will be the stock blue.

I have tried multiple different selectors to style these buttons on focus but have been unsuccessful. I noticed that Dock and Zoom To are not in a shadow DOM (at least their calcite-action parents are not) while Collapse and Close are buried under two shadow roots each. I suspect this is the reason for the difficulty.

I have read @JoelBennett's post here and while that is some excellent work, it seems ridiculous to need JavaScript to get this simple styling done.

0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Honored Contributor

Try updating it from the :root of your css

:root {
    --calcite-ui-focus-color: red;
}

 That should do it, but it's global for everywhere that token is used, so keep that in mind.

View solution in original post

2 Replies
ReneRubalcava
Honored Contributor

Try updating it from the :root of your css

:root {
    --calcite-ui-focus-color: red;
}

 That should do it, but it's global for everywhere that token is used, so keep that in mind.

Jeff-Reinhart
Regular Contributor

That works for my example. I have a little more digging to do for the actual Angular implementation, but we can call this resolved. Thanks!

0 Kudos