mirror of
https://github.com/picocss/pico
synced 2025-08-10 03:16:20 +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
2424
css/pico.classless.min.css
vendored
2424
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
1138
css/pico.css
1138
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
2387
css/pico.fluid.classless.min.css
vendored
2387
css/pico.fluid.classless.min.css
vendored
File diff suppressed because one or more lines are too long
2820
css/pico.min.css
vendored
2820
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