Notify button - incorrect hover colors
Closed this issue · 1 comments
swashbuck commented
Subject of the issue
The Notify button hover states are incorrect and do not use @notify-btn-hover
or @notify-btn-inverted-hover
.
Your environment
- FW 5.33.10
- Vanilla theme 9.13.1
Steps to reproduce
- Enable the language picker using the JSON from the example.json
- Override the notify button colors in your theme (see below)
- Select an initial language
- Click the language icon in the navbar to change the language
- Hover over the buttons in the popup
Color variables to use:
@notify-btn: white;
@notify-btn-inverted: magenta;
@notify-btn-hover: magenta;
@notify-btn-inverted-hover: red;
Expected behaviour
Button hover states should use the colors defined by @notify-btn-hover
or @notify-btn-inverted-hover
Actual behaviour
Hover colors are being overridden by this style in less/core/buttons.less. That selector is more specific than the selector in less/core/notify.less. So, it ends up using @btn-color-hover
and @btn-color-inverted-hover
instead.
kirsty-hames commented
Good spot @swashbuck and this is one of many reasons why we need to review/update our approach on Adapt buttons (see existing issue #469).
Meanwhile, we could resolve the issue by applying the same :not
logic to .notify__btn
as per .btn-text
.