Describe the bug
Minal Nav-Items are not colored correctly, when custom color/theme is chosen for it. If none is set, it works as intended. Also navigation with the class "max" seems not affected.
To Reproduce
Create a Navigation looking like this, with a custom color/theme, e.g. "primary":
<nav class="bottom primary">
<a class="active">
<i>home</i>
<span>Broken</span>
</a>
<a href="link.html">
<i>calculate</i>
<span>Broken</span>
</a>
</nav>
Expected behavior
It should look like, if no custom color/theme is chosen.
Possible Fix
With the following CSS-Code I was able to fix it for "primary" and "primary-container":
nav.primary:not(.max) > a:not(.button, .chip):is(:hover, :focus, .active){
background-color: #00000000 !important;
}
nav.primary:not(.max) > a:not(.button, .chip):is(:hover, :focus, .active) > span{
color: var(--on-primary);
}
nav.primary:is(.left, .right, .top, .bottom):not(.max) > a:not(.button, .chip):is(:hover, :focus, .active) > i{
background-color: var(--primary-container);
}
nav.primary-container.fix:not(.max) > a:not(.button, .chip):is(:hover, :focus, .active){
background-color: #00000000 !important;
}
nav.primary-container.fix:not(.max) > a:not(.button, .chip):is(:hover, :focus, .active) > span{
color: var(--on-primary-container);
}
nav.primary-container:is(.left, .right, .top, .bottom):not(.max) > a:not(.button, .chip):is(:hover, :focus, .active) > i{
background-color: var(--on-primary);
}
For fixing the "primary-container"-class, there was an extra setting needed, I expect it for all other "-container"-colors. I also tried it with a very red custom color-theme, and there I also needed the extra setting, that I could see the highlighting from hovering the button. But I don't know, how and if that should be included. If there is need I also can supply an example with that custom color-theme.
Codepen
https://codepen.io/AlTrAugsburg/pen/XJbrJPZ
Includes the fixes above.
Desktop:
- OS: Linux
- Browser Firefox and Brave (Chromium)
- Version: Firefox 150.0.1 and Brave 1.89.145 with Chromium 147.0.7727.137
Describe the bug
Minal Nav-Items are not colored correctly, when custom color/theme is chosen for it. If none is set, it works as intended. Also navigation with the class "max" seems not affected.
To Reproduce
Create a Navigation looking like this, with a custom color/theme, e.g. "primary":
Expected behavior
It should look like, if no custom color/theme is chosen.
Possible Fix
With the following CSS-Code I was able to fix it for "primary" and "primary-container":
For fixing the "primary-container"-class, there was an extra setting needed, I expect it for all other "-container"-colors. I also tried it with a very red custom color-theme, and there I also needed the extra setting, that I could see the highlighting from hovering the button. But I don't know, how and if that should be included. If there is need I also can supply an example with that custom color-theme.
Codepen
https://codepen.io/AlTrAugsburg/pen/XJbrJPZ
Includes the fixes above.
Desktop: