mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-24 18:26:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: aria-current and focus buttons

Browse source 
Fix for #416
This commit is contained in:
Lucas Larroche 2024-01-04 21:32:34 +07:00
parent 9a18b46e12
commit 75f7ca32dd
11 changed files with 87 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

32
css/pico.classless.css
View file

@ -736,7 +736,7 @@ figure figcaption {
/**
* Link
*/
a,
a:not([role=button]),
[role=link] {
--pico-color: var(--pico-primary);
--pico-background-color: transparent;
@ -752,13 +752,13 @@ a,
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
}
a:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
a:not([role=button]):is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
[role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
--pico-color: var(--pico-primary-hover);
--pico-underline: var(--pico-primary-hover-underline);
--pico-text-decoration: underline;
}
a:focus-visible,
a:not([role=button]):focus-visible,
[role=link]:focus-visible {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
}
@ -1003,23 +1003,33 @@ button,
user-select: none;
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
}
button:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
[type=submit]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
[type=reset]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
[type=button]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
[type=file]::file-selector-button:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
[role=button]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
button:is([aria-current]:not([aria-current=false])), button:is(:hover, :active, :focus),
[type=submit]:is([aria-current]:not([aria-current=false])),
[type=submit]:is(:hover, :active, :focus),
[type=reset]:is([aria-current]:not([aria-current=false])),
[type=reset]:is(:hover, :active, :focus),
[type=button]:is([aria-current]:not([aria-current=false])),
[type=button]:is(:hover, :active, :focus),
[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])),
[type=file]::file-selector-button:is(:hover, :active, :focus),
[role=button]:is([aria-current]:not([aria-current=false])),
[role=button]:is(:hover, :active, :focus) {
--pico-background-color: var(--pico-primary-hover-background);
--pico-border-color: var(--pico-primary-hover-border);
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
--pico-color: var(--pico-primary-inverse);
}
button:focus,
button:focus, button:is([aria-current]:not([aria-current=false])):focus,
[type=submit]:focus,
[type=submit]:is([aria-current]:not([aria-current=false])):focus,
[type=reset]:focus,
[type=reset]:is([aria-current]:not([aria-current=false])):focus,
[type=button]:focus,
[type=button]:is([aria-current]:not([aria-current=false])):focus,
[type=file]::file-selector-button:focus,
[role=button]:focus {
[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus,
[role=button]:focus,
[role=button]:is([aria-current]:not([aria-current=false])):focus {
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
}