topic Re: Set the hover background color of a widget (home, compass, zoom) post-4.28 in ArcGIS JavaScript Maps SDK Questions

Set the hover background color of a widget (home, compass, zoom) post-4.28

Dirk_Vandervoort — Wed, 04 Dec 2024 20:10:23 GMT

I want my widget buttons to be green by default, and turn red when a cursor hovers over the widget button.

You'd think the following css would do the trick. It did at 4.27:

.esri-widget--button:hover{ background-color: red!important; } .esri-widget{ background-color: green!important; }

Here is a codepen that illustrates the issue. Check out the flashing widget buttons. The map info bar is style because it's an esri-widget:

https://codepen.io/dirkvandervoort/pen/qEWbEBv

Change 4.31to 4.27 in the codepen and you will see what I mean.

Can you help me style my buttons?

Re: Set the hover background color of a widget (home, compass, zoom) post-4.28

ColleenDixon — Wed, 04 Dec 2024 21:29:56 GMT

I can get hover by setting the calcite var inside the esri-widget class like below:

I am not 100% sure this color will not show up where you will randomly not expect it, depending on how it's used inside and outside the dom:

/* Start Map Button Styling*/

/* Overwrite the calcite color system for widgets */

.esri-widget {

--calcite-color-foreground-2: red;

}

You SHOULD be able to set --calcite-color-foreground-3: green; in the same way, but I am seeing "--calcite-color-foreground-3 not defined" in the Developer Tools

ETA: Pretty sure this has to do with the dom changes that I've heard were introduced in 4.28 (we just recently started using 4 so didn't have 4.27). Since this is inside the dom now, CSS won't permeate it, but the vars are pulled in by ESRI

Re: Set the hover background color of a widget (home, compass, zoom) post-4.28

ColleenDixon — Wed, 04 Dec 2024 21:45:48 GMT

Edit to above, maybe not the shadow-dom issue, but rather additional styling that is more specific than the styling you had.

I was able to get the background color on the non-hover by targeting styling with more specifity:

.esri-widget--button:is(calcite-button):not(:hover) {

background-color: green !important;

}

Re: Set the hover background color of a widget (home, compass, zoom) post-4.28

Dirk_Vandervoort — Wed, 04 Dec 2024 23:23:47 GMT

Getting there: https://codepen.io/dirkvandervoort/pen/qEWbEBv

That's an odd combination. I wish I could get the button to go back to it's non-hover state.

I'm looking at the 4.28 update documentation to see if I can get a clue.

Thanks Colleen.

Re: Set the hover background color of a widget (home, compass, zoom) post-4.28

ReneRubalcava — Thu, 05 Dec 2024 18:09:22 GMT

You can try adjusting some of the calcite css variables. It takes a little inspection to see what variables are used where. But this works.

.esri-widget--button { --calcite-icon-color: white; background-color: red; } .esri-widget--button:hover { --calcite-icon-color: blue; --calcite-color-foreground-2: green; }

https://codepen.io/odoe/pen/JoPGYBB?editors=1000

Re: Set the hover background color of a widget (home, compass, zoom) post-4.28

Dirk_Vandervoort — Fri, 06 Dec 2024 12:42:41 GMT

Pardon my cynicism Rene, but

--calcite-color-foreground-2

to change a hover background color?

Re: Set the hover background color of a widget (home, compass, zoom) post-4.28

ReneRubalcava — Fri, 06 Dec 2024 16:55:44 GMT

There's some work being done on calcite and core side for css variables like this, so at some point will be able to get conventions down as intended.