search

picturepan2 / spectre

Spectre.css - A Lightweight, Responsive and Modern CSS Framework
https://picturepan2.github.io/spectre/
MIT License
11.31k stars 804 forks source link

Loading class on buttons with tooltip create wrong effect #649

Open endorama opened 3 years ago

endorama commented 3 years ago

Hello, while applying loading to a btn with a tooltip configured I observe this behaviour:

Screenshot from 2020-09-21 23-38-10

Apart from the tooltip class, all other tooltip position modifier are affecting the loader.

I'm using spectre.css v0.5.9.

endorama commented 3 years ago

This is due to the left: 100% rule assigned to tooltip-<mod>::after. The rule is applied to move the tooltip away from the button itself, but breaks the loader.

I was able to solve this by setting left: 50% !important and top: 50% !important in the .loading::after class.

Screenshot from 2020-09-21 23-47-18

A (probably unwanted) side effect of applying the loading class to a btn with tooltip is also that the tooltip is not displayed, I suspect due to a conflict of CSS rules. I don't think this is an issue (is somewhat expected due to the CSS only nature of the framework).

I can provide a PR if interested in the fix.

nodgear commented 3 years ago

@endorama can you make a pull request with the fix?

endorama commented 3 years ago

Absolutely yes. I just wanted to open an issue first to discuss it before rushing an implementation.

PS: I see this repo is not participating in Hacktoberfest (from this year is opt-in), you may be interested in checking that out.