diff --git a/scss/components/_dropdown.scss b/scss/components/_dropdown.scss index f76e976b..c7d19c82 100644 --- a/scss/components/_dropdown.scss +++ b/scss/components/_dropdown.scss @@ -177,7 +177,7 @@ &:focus, &:active, &:focus-visible, - &[aria-current]:not([aria-current="false"]) { + &[aria-current] { background-color: var(#{$✨}dropdown-hover-background-color); } } diff --git a/scss/components/_modal.scss b/scss/components/_modal.scss index 72a88899..b5bf6661 100644 --- a/scss/components/_modal.scss +++ b/scss/components/_modal.scss @@ -93,7 +93,7 @@ transition: opacity var(#{$✨}transition); } - &:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) { + &:is([aria-current], :hover, :active, :focus) { opacity: 1; } } diff --git a/scss/components/_nav.scss b/scss/components/_nav.scss index 0e25700f..69585101 100644 --- a/scss/components/_nav.scss +++ b/scss/components/_nav.scss @@ -96,7 +96,7 @@ } // Minimal support for aria-current - & a[aria-current]:not([aria-current="false"]) { + & a[aria-current] { background-color: transparent; color: inherit; text-decoration: none; diff --git a/scss/content/_button.scss b/scss/content/_button.scss index 29c4f863..3d9b5680 100644 --- a/scss/content/_button.scss +++ b/scss/content/_button.scss @@ -24,8 +24,8 @@ // Correct the inability to style buttons in iOS and Safari button, [type="submit"], - input[type="reset"], - input[type="button"] { + [type="reset"], + [type="button"] { -webkit-appearance: button; } @@ -34,9 +34,9 @@ button, [type="submit"], - input[type="reset"], - input[type="button"], - input[type="file"]::file-selector-button, + [type="reset"], + [type="button"], + [type="file"]::file-selector-button, [role="button"] { #{$✨}background-color: var(#{$✨}primary-background); #{$✨}border-color: var(#{$✨}primary-border); @@ -62,7 +62,7 @@ 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); #{$✨}border-color: var(#{$✨}primary-border-hover); #{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); @@ -76,23 +76,23 @@ } [type="submit"], - input[type="reset"], - input[type="button"] { + [type="reset"], + [type="button"] { margin-bottom: var(#{$✨}spacing); } // .secondary, .contrast & .outline @if $enable-classes { // Secondary - :is(button, [type="submit"], input[type="button"], [role="button"]).secondary, - input[type="reset"], - input[type="file"]::file-selector-button { + :is(button, [type="submit"], [type="button"], [role="button"]).secondary, + [type="reset"], + [type="file"]::file-selector-button { #{$✨}background-color: var(#{$✨}secondary-background); #{$✨}border-color: var(#{$✨}secondary-border); #{$✨}color: var(#{$✨}secondary-inverse); cursor: pointer; - &:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) { + &:is([aria-current], :hover, :active, :focus) { #{$✨}background-color: var(#{$✨}secondary-background-hover); #{$✨}border-color: var(#{$✨}secondary-border-hover); #{$✨}color: var(#{$✨}secondary-inverse); @@ -105,12 +105,12 @@ } // 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); #{$✨}border-color: var(#{$✨}contrast-border); #{$✨}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); #{$✨}border-color: var(#{$✨}contrast-border-hover); #{$✨}color: var(#{$✨}contrast-inverse); @@ -123,47 +123,47 @@ } // Outline (primary) - :is(button, [type="submit"], input[type="button"], [role="button"]).outline, - input[type="reset"].outline { + :is(button, [type="submit"], [type="button"], [role="button"]).outline, + [type="reset"].outline { #{$✨}background-color: transparent; #{$✨}color: var(#{$✨}primary); #{$✨}border-color: currentColor; - &:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) { + &:is([aria-current], :hover, :active, :focus) { #{$✨}background-color: transparent; #{$✨}color: var(#{$✨}primary-hover); } } // Outline (secondary) - :is(button, [type="submit"], input[type="button"], [role="button"]).outline.secondary, - input[type="reset"].outline { + :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary, + [type="reset"].outline { #{$✨}color: var(#{$✨}secondary); #{$✨}border-color: currentColor; - &:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) { + &:is([aria-current], :hover, :active, :focus) { #{$✨}color: var(#{$✨}secondary-hover); } } // 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); - &:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) { + &:is([aria-current], :hover, :active, :focus) { #{$✨}color: var(#{$✨}contrast-hover); } } } @else { // Secondary button without .class - input[type="reset"], - input[type="file"]::file-selector-button { + [type="reset"], + [type="file"]::file-selector-button { #{$✨}background-color: var(#{$✨}secondary); #{$✨}border-color: var(#{$✨}secondary); #{$✨}color: var(#{$✨}secondary-inverse); cursor: pointer; - &:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) { + &:is([aria-current], :hover, :active, :focus) { #{$✨}background-color: var(#{$✨}secondary-hover); #{$✨}border-color: var(#{$✨}secondary-hover); } @@ -176,15 +176,9 @@ } // Button [disabled] - :where( - button, - [type="submit"], - input[type="reset"], - input[type="button"], - [role="button"] - )[disabled], + :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[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; pointer-events: none; } diff --git a/scss/content/_link.scss b/scss/content/_link.scss index 3b13ac82..48001e62 100644 --- a/scss/content/_link.scss +++ b/scss/content/_link.scss @@ -23,7 +23,7 @@ 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); #{$✨}underline: var(#{$✨}primary-underline-hover); #{$✨}text-decoration: underline; @@ -39,7 +39,7 @@ #{$✨}color: var(#{$✨}secondary); #{$✨}underline: var(#{$✨}secondary-underline); - &:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) { + &:is([aria-current], :hover, :active, :focus) { #{$✨}color: var(#{$✨}secondary-hover); #{$✨}underline: var(#{$✨}secondary-underline-hover); } @@ -50,7 +50,7 @@ #{$✨}color: var(#{$✨}contrast); #{$✨}underline: var(#{$✨}contrast-underline); - &:is([aria-current], :hover, :active, :focus):not([aria-current="false"]) { + &:is([aria-current], :hover, :active, :focus) { #{$✨}color: var(#{$✨}contrast-hover); #{$✨}underline: var(#{$✨}contrast-underline-hover); }