Skip to content

Conversation

@endorama
Copy link

@endorama endorama commented Oct 7, 2020

When the .loading class is applied to a .tooltip, the loading element is wrongly positioned. This is due to the left and top rules in the .tooltip::after class.

Solution to this issue is to set !important to left and top rules in the .loading::after class.

Fixes #649

When the `.loading` class is applied to a `.tooltip`, the loading element
is wrongly positioned. This is due to the `left` and `top` rules in the
`.tooltip::after` class.

Solution to this issue is to set `!important` to `left` and `top` rules
in the `.loading::after` class.

Fixes picturepan2#649
padding: 0;
position: absolute;
top: 50%;
top: 50% !important; // !important fixes https://github.com/picturepan2/spectre/issues/649
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important should not be used

display: block;
height: $unit-4;
left: 50%;
left: 50% !important; // !important fixes https://github.com/picturepan2/spectre/issues/649
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important should not be used

@endorama
Copy link
Author

endorama commented Oct 7, 2020

If !important should be removed a possible solution may be to use a specific selector targetting the .tooltip + .loading combination. Let me know if that is a preferred solution.

@davestewart davestewart mentioned this pull request Sep 20, 2023
29 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Loading class on buttons with tooltip create wrong effect

1 participant