Utilities API missing local vars in pseudo states
Created by: flippidippi
Prerequisites
-
I have searched for duplicate or closed issues -
I have validated any HTML to avoid common problems -
I have read the contributing guidelines
Describe the issue
Currently, if you add state: hover
to a utility like color
, the utility won't quite work correctly because the hover state class does not include the local variable like the non-hover classes. So the --bs-text-opacity
variable isn't set.
.text-white-hover:hover {
color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}
I currently have to following as a temporary fix:
[class*=" text-"][class*="-hover "] {
--bs-text-opacity: 1
}
[class*=" bg-"][class*="-hover "] {
--bs-bg-opacity: 1
}
Reduced test cases
<p class="text-white-hover">doesn't hover to white</p>
<p class="text-white text-white-hover">does hover to white</p>
What operating system(s) are you seeing the problem on?
Linux
What browser(s) are you seeing the problem on?
Microsoft Edge
What version of Bootstrap are you using?
5.1.9