Proposal to change css for active buttons

[renderpci]

Hello

I'm doing a Geoman integration with Dédalo, but we have a conflict with the CSS of both projects with .active CSS class.

I proposal to change the CSS (line 101) from:

.active .leaflet-buttons-control-button {
  box-shadow: inset 0 -1px 5px 2px rgba(81, 77, 77, 0.31);
}

to:

.active > .leaflet-buttons-control-button {
  box-shadow: inset 0 -1px 10px 1px rgb(57 56 62 / 18%);
}

For close the .active class scope of Geoman to his nodes. And I retouch a bit the shadow, I think it is more elegant... :-)

Thanks for the great project. Best.

[Falke-Design]

I'm doing a Geoman integration with Dédalo, but we have a conflict with the CSS of both projects with .active CSS class.

Can you please explain how they conflict each other?

[renderpci]

Hi Falke-Design

Yes of course:

Dédalo use .active class to define if a component was selected (when the user click inside the component to edit it). Geoman use the .active class to define if a tool was selected. So, as Geoman is used inside a component (component_geolocation) the both projects need to define the scope of the class. If the user select a tool inside geoman lib, the scope of the .active need to be only for the library buttons, if not, when the .active class of the Dédalo component is selected all buttons in Geoman show the active state and vice-versa.

My proposal is to close the scope of .active class to .leaflet-buttons-control-button, it works and I think that it doesn't has any negative effects to other CSS.

And for the shadow change... Well, it's not important, it's only a proposal... in my opinion hard shadows are ugly and tacky... but, you know, it's only my liking, I prefer soft shadows. :-)

I hope it's clear. Best