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

fix: revert aria-current='false'

Browse source
This commit is contained in:
Lucas Larroche 2023-04-02 10:06:26 +07:00
parent 65bedda83a
commit 395ceca401
5 changed files with 33 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

2
scss/components/_dropdown.scss
View file

@ -177,7 +177,7 @@
&:focus, &:focus,
&:active, &:active,
&:focus-visible, &:focus-visible,
&[aria-current]:not([aria-current="false"]) { &[aria-current] {
background-color: var(#{$✨}dropdown-hover-background-color); background-color: var(#{$✨}dropdown-hover-background-color);
} }
} }

2
scss/components/_modal.scss
View file

@ -93,7 +93,7 @@
transition: opacity var(#{$✨}transition); transition: opacity var(#{$✨}transition);
} }
&:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) { &:is([aria-current], :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
} }

2
scss/components/_nav.scss
View file

@ -96,7 +96,7 @@
} }
// Minimal support for aria-current // Minimal support for aria-current
& a[aria-current]:not([aria-current="false"]) { & a[aria-current] {
background-color: transparent; background-color: transparent;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;

60
scss/content/_button.scss
View file

@ -24,8 +24,8 @@
// Correct the inability to style buttons in iOS and Safari // Correct the inability to style buttons in iOS and Safari
button, button,
[type="submit"], [type="submit"],
input[type="reset"], [type="reset"],
input[type="button"] { [type="button"] {
-webkit-appearance: button; -webkit-appearance: button;
} }
@ -34,9 +34,9 @@
button, button,
[type="submit"], [type="submit"],
input[type="reset"], [type="reset"],
input[type="button"], [type="button"],
input[type="file"]::file-selector-button, [type="file"]::file-selector-button,
[role="button"] { [role="button"] {
#{$✨}background-color: var(#{$✨}primary-background); #{$✨}background-color: var(#{$✨}primary-background);
#{$✨}border-color: var(#{$✨}primary-border); #{$✨}border-color: var(#{$✨}primary-border);
@ -62,7 +62,7 @@
color var(#{$✨}transition), box-shadow var(#{$✨}transition); color var(#{$✨}transition), box-shadow var(#{$✨}transition);
} }
&:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) { &:is([aria-current], :hover, :active, :focus) {
#{$✨}background-color: var(#{$✨}primary-background-hover); #{$✨}background-color: var(#{$✨}primary-background-hover);
#{$✨}border-color: var(#{$✨}primary-border-hover); #{$✨}border-color: var(#{$✨}primary-border-hover);
#{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); #{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
@ -76,23 +76,23 @@
} }
[type="submit"], [type="submit"],
input[type="reset"], [type="reset"],
input[type="button"] { [type="button"] {
margin-bottom: var(#{$✨}spacing); margin-bottom: var(#{$✨}spacing);
} }
// .secondary, .contrast & .outline // .secondary, .contrast & .outline
@if $enable-classes { @if $enable-classes {
// Secondary // Secondary
:is(button, [type="submit"], input[type="button"], [role="button"]).secondary, :is(button, [type="submit"], [type="button"], [role="button"]).secondary,
input[type="reset"], [type="reset"],
input[type="file"]::file-selector-button { [type="file"]::file-selector-button {
#{$✨}background-color: var(#{$✨}secondary-background); #{$✨}background-color: var(#{$✨}secondary-background);
#{$✨}border-color: var(#{$✨}secondary-border); #{$✨}border-color: var(#{$✨}secondary-border);
#{$✨}color: var(#{$✨}secondary-inverse); #{$✨}color: var(#{$✨}secondary-inverse);
cursor: pointer; cursor: pointer;
&:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) { &:is([aria-current], :hover, :active, :focus) {
#{$✨}background-color: var(#{$✨}secondary-background-hover); #{$✨}background-color: var(#{$✨}secondary-background-hover);
#{$✨}border-color: var(#{$✨}secondary-border-hover); #{$✨}border-color: var(#{$✨}secondary-border-hover);
#{$✨}color: var(#{$✨}secondary-inverse); #{$✨}color: var(#{$✨}secondary-inverse);
@ -105,12 +105,12 @@
} }
// Contrast // Contrast
:is(button, [type="submit"], input[type="button"], [role="button"]).contrast { :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
#{$✨}background-color: var(#{$✨}contrast-background); #{$✨}background-color: var(#{$✨}contrast-background);
#{$✨}border-color: var(#{$✨}contrast-border); #{$✨}border-color: var(#{$✨}contrast-border);
#{$✨}color: var(#{$✨}contrast-inverse); #{$✨}color: var(#{$✨}contrast-inverse);
&:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) { &:is([aria-current], :hover, :active, :focus) {
#{$✨}background-color: var(#{$✨}contrast-background-hover); #{$✨}background-color: var(#{$✨}contrast-background-hover);
#{$✨}border-color: var(#{$✨}contrast-border-hover); #{$✨}border-color: var(#{$✨}contrast-border-hover);
#{$✨}color: var(#{$✨}contrast-inverse); #{$✨}color: var(#{$✨}contrast-inverse);
@ -123,47 +123,47 @@
} }
// Outline (primary) // Outline (primary)
:is(button, [type="submit"], input[type="button"], [role="button"]).outline, :is(button, [type="submit"], [type="button"], [role="button"]).outline,
input[type="reset"].outline { [type="reset"].outline {
#{$✨}background-color: transparent; #{$✨}background-color: transparent;
#{$✨}color: var(#{$✨}primary); #{$✨}color: var(#{$✨}primary);
#{$✨}border-color: currentColor; #{$✨}border-color: currentColor;
&:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) { &:is([aria-current], :hover, :active, :focus) {
#{$✨}background-color: transparent; #{$✨}background-color: transparent;
#{$✨}color: var(#{$✨}primary-hover); #{$✨}color: var(#{$✨}primary-hover);
} }
} }
// Outline (secondary) // Outline (secondary)
:is(button, [type="submit"], input[type="button"], [role="button"]).outline.secondary, :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
input[type="reset"].outline { [type="reset"].outline {
#{$✨}color: var(#{$✨}secondary); #{$✨}color: var(#{$✨}secondary);
#{$✨}border-color: currentColor; #{$✨}border-color: currentColor;
&:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) { &:is([aria-current], :hover, :active, :focus) {
#{$✨}color: var(#{$✨}secondary-hover); #{$✨}color: var(#{$✨}secondary-hover);
} }
} }
// Outline (contrast) // Outline (contrast)
:is(button, [type="submit"], input[type="button"], [role="button"]).outline.contrast { :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
#{$✨}color: var(#{$✨}contrast); #{$✨}color: var(#{$✨}contrast);
&:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) { &:is([aria-current], :hover, :active, :focus) {
#{$✨}color: var(#{$✨}contrast-hover); #{$✨}color: var(#{$✨}contrast-hover);
} }
} }
} @else { } @else {
// Secondary button without .class // Secondary button without .class
input[type="reset"], [type="reset"],
input[type="file"]::file-selector-button { [type="file"]::file-selector-button {
#{$✨}background-color: var(#{$✨}secondary); #{$✨}background-color: var(#{$✨}secondary);
#{$✨}border-color: var(#{$✨}secondary); #{$✨}border-color: var(#{$✨}secondary);
#{$✨}color: var(#{$✨}secondary-inverse); #{$✨}color: var(#{$✨}secondary-inverse);
cursor: pointer; cursor: pointer;
&:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) { &:is([aria-current], :hover, :active, :focus) {
#{$✨}background-color: var(#{$✨}secondary-hover); #{$✨}background-color: var(#{$✨}secondary-hover);
#{$✨}border-color: var(#{$✨}secondary-hover); #{$✨}border-color: var(#{$✨}secondary-hover);
} }
@ -176,15 +176,9 @@
} }
// Button [disabled] // Button [disabled]
:where( :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
button,
[type="submit"],
input[type="reset"],
input[type="button"],
[role="button"]
)[disabled],
:where(fieldset[disabled]) :where(fieldset[disabled])
:is(button, [type="submit"], input[type="button"], input[type="reset"], [role="button"]) { :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
} }

6
scss/content/_link.scss
View file

@ -23,7 +23,7 @@
text-decoration var(#{$✨}transition), box-shadow var(#{$✨}transition); text-decoration var(#{$✨}transition), box-shadow var(#{$✨}transition);
} }
&:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) { &:is([aria-current], :hover, :active, :focus) {
#{$✨}color: var(#{$✨}primary-hover); #{$✨}color: var(#{$✨}primary-hover);
#{$✨}underline: var(#{$✨}primary-underline-hover); #{$✨}underline: var(#{$✨}primary-underline-hover);
#{$✨}text-decoration: underline; #{$✨}text-decoration: underline;
@ -39,7 +39,7 @@
#{$✨}color: var(#{$✨}secondary); #{$✨}color: var(#{$✨}secondary);
#{$✨}underline: var(#{$✨}secondary-underline); #{$✨}underline: var(#{$✨}secondary-underline);
&:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) { &:is([aria-current], :hover, :active, :focus) {
#{$✨}color: var(#{$✨}secondary-hover); #{$✨}color: var(#{$✨}secondary-hover);
#{$✨}underline: var(#{$✨}secondary-underline-hover); #{$✨}underline: var(#{$✨}secondary-underline-hover);
} }
@ -50,7 +50,7 @@
#{$✨}color: var(#{$✨}contrast); #{$✨}color: var(#{$✨}contrast);
#{$✨}underline: var(#{$✨}contrast-underline); #{$✨}underline: var(#{$✨}contrast-underline);
&:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) { &:is([aria-current], :hover, :active, :focus) {
#{$✨}color: var(#{$✨}contrast-hover); #{$✨}color: var(#{$✨}contrast-hover);
#{$✨}underline: var(#{$✨}contrast-underline-hover); #{$✨}underline: var(#{$✨}contrast-underline-hover);
} }