fix: Make aria-current selector more specific on links

This commit is contained in:
Brian Espinosa 2023-10-20 12:10:00 -07:00
parent 8ba5740b8a
commit 55d5e9d879
14 changed files with 9715 additions and 1225 deletions

View file

@ -62,7 +62,7 @@
color var(#{$}transition), box-shadow var(#{$}transition);
}
&:is([aria-current], :hover, :active, :focus) {
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$✨}background-color: var(#{$}primary-hover-background);
#{$✨}border-color: var(#{$}primary-hover-border);
#{$✨}box-shadow: var(#{$}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
@ -92,7 +92,7 @@
#{$✨}color: var(#{$}secondary-inverse);
cursor: pointer;
&:is([aria-current], :hover, :active, :focus) {
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$✨}background-color: var(#{$}secondary-hover-background);
#{$✨}border-color: var(#{$}secondary-hover-border);
#{$✨}color: var(#{$}secondary-inverse);
@ -110,7 +110,7 @@
#{$✨}border-color: var(#{$}contrast-border);
#{$✨}color: var(#{$}contrast-inverse);
&:is([aria-current], :hover, :active, :focus) {
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$✨}background-color: var(#{$}contrast-hover-background);
#{$✨}border-color: var(#{$}contrast-hover-border);
#{$✨}color: var(#{$}contrast-inverse);
@ -129,7 +129,7 @@
#{$✨}color: var(#{$}primary);
#{$✨}border-color: currentColor;
&:is([aria-current], :hover, :active, :focus) {
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$✨}background-color: transparent;
#{$✨}color: var(#{$}primary-hover);
}
@ -141,7 +141,7 @@
#{$✨}color: var(#{$}secondary);
#{$✨}border-color: currentColor;
&:is([aria-current], :hover, :active, :focus) {
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$✨}color: var(#{$}secondary-hover);
}
}
@ -150,7 +150,7 @@
:is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
#{$✨}color: var(#{$}contrast);
&:is([aria-current], :hover, :active, :focus) {
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$✨}color: var(#{$}contrast-hover);
}
}
@ -163,7 +163,7 @@
#{$✨}color: var(#{$}secondary-inverse);
cursor: pointer;
&:is([aria-current], :hover, :active, :focus) {
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$✨}background-color: var(#{$}secondary-hover);
#{$✨}border-color: var(#{$}secondary-hover);
}