mirror of
https://github.com/picocss/pico
synced 2025-08-12 20:36:41 +00:00
fix: Make aria-current selector more specific on links
This commit is contained in:
parent
8ba5740b8a
commit
55d5e9d879
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
2422
css/pico.classless.min.css
vendored
2422
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
1136
css/pico.css
1136
css/pico.css
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
2385
css/pico.fluid.classless.min.css
vendored
2385
css/pico.fluid.classless.min.css
vendored
File diff suppressed because one or more lines are too long
2818
css/pico.min.css
vendored
2818
css/pico.min.css
vendored
File diff suppressed because one or more lines are too long
@ -177,7 +177,7 @@
|
||||
&:focus,
|
||||
&:active,
|
||||
&:focus-visible,
|
||||
&[aria-current] {
|
||||
&[aria-current]:not([aria-current="false"]) {
|
||||
background-color: var(#{$✨}dropdown-hover-background-color);
|
||||
}
|
||||
}
|
||||
|
@ -93,7 +93,7 @@
|
||||
transition: opacity var(#{$✨}transition);
|
||||
}
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
@ -96,7 +96,7 @@
|
||||
}
|
||||
|
||||
// Minimal support for aria-current
|
||||
& a[aria-current] {
|
||||
& a[aria-current]:not([aria-current="false"]) {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -23,7 +23,7 @@
|
||||
text-decoration var(#{$✨}transition), box-shadow var(#{$✨}transition);
|
||||
}
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$✨}color: var(#{$✨}primary-hover);
|
||||
#{$✨}underline: var(#{$✨}primary-hover-underline);
|
||||
#{$✨}text-decoration: underline;
|
||||
@ -39,7 +39,7 @@
|
||||
#{$✨}color: var(#{$✨}secondary);
|
||||
#{$✨}underline: var(#{$✨}secondary-underline);
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$✨}color: var(#{$✨}secondary-hover);
|
||||
#{$✨}underline: var(#{$✨}secondary-hover-underline);
|
||||
}
|
||||
@ -50,7 +50,7 @@
|
||||
#{$✨}color: var(#{$✨}contrast);
|
||||
#{$✨}underline: var(#{$✨}contrast-underline);
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
||||
#{$✨}color: var(#{$✨}contrast-hover);
|
||||
#{$✨}underline: var(#{$✨}contrast-hover-underline);
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user