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

12
scss/content/_button.scss
View file

@ -66,7 +66,8 @@
box-shadow var(#{$css-var-prefix}transition);
}
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
&:is([aria-current]:not([aria-current="false"])),
&:is(:hover, :active, :focus) {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-hover-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover-border);
#{$css-var-prefix}box-shadow: var(
@ -76,7 +77,8 @@
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
}
&:focus {
&:focus,
&:is([aria-current]:not([aria-current="false"])):focus {
#{$css-var-prefix}box-shadow:
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
@ -106,7 +108,8 @@
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
}
&:focus {
&:focus,
&:is([aria-current]:not([aria-current="false"])):focus {
#{$css-var-prefix}box-shadow:
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
@ -125,7 +128,8 @@
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
}
&:focus {
&:focus,
&:is([aria-current]:not([aria-current="false"])):focus {
#{$css-var-prefix}box-shadow:
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}contrast-focus);

2
scss/content/_link.scss
View file

@ -6,7 +6,7 @@
* Link
*/
a,
a:not([role="button"]),
[role="link"] {
#{$css-var-prefix}color: var(#{$css-var-prefix}primary);
#{$css-var-prefix}background-color: transparent;