diff options
| author | Patrick H. Lauke <redux@splintered.co.uk> | 2022-09-04 19:59:14 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-09-04 19:59:14 +0300 |
| commit | 32c457db4b6ff389efbd35772b24746c7ffb0b6d (patch) | |
| tree | 55e7b5761f619d7456c8902230e4bd1f4d85a602 /scss | |
| parent | b8880e5eec6bb4f33578578ba2413f0d91424382 (diff) | |
Rework button focus/active styling, with extra changes for checks/radios (#37026)
* Replace :focus styles with :focus-visible
* Remove :active / .active styles
* Don't apply :hover styles for `.btn` that follows a `.btn-check`
This removes a large part of the visual confusion of button checks/radios - that you currently have to move your mouse away from them to see what they actually changed to (checked or unchecked)
* Reintroduce :active, but *not* for button checks/radios
* Sort focus styling specifically for button checks/radios
don't change background on focus, just give it the border/outline. again, avoids confusion whether something is checked or not while focused
* Re-add `outline:0` which was lost when resolving last merge conflict
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_buttons.scss | 27 |
1 files changed, 17 insertions, 10 deletions
diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 09bdf032b8..89483d5764 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -40,18 +40,19 @@ @include box-shadow(var(--#{$prefix}btn-box-shadow)); @include transition($btn-transition); - &:hover { + :not(.btn-check) + &:hover, + &:first-child:hover { color: var(--#{$prefix}btn-hover-color); text-decoration: if($link-hover-decoration == underline, none, null); background-color: var(--#{$prefix}btn-hover-bg); border-color: var(--#{$prefix}btn-hover-border-color); } - .btn-check:focus + &, - &:focus { + &:focus-visible { color: var(--#{$prefix}btn-hover-color); @include gradient-bg(var(--#{$prefix}btn-hover-bg)); border-color: var(--#{$prefix}btn-hover-border-color); + outline: 0; // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow); @@ -60,14 +61,20 @@ } } - .btn-check:focus:not(:focus-visible) + &, - &:focus:not(:focus-visible) { + .btn-check:focus-visible + & { + border-color: var(--#{$prefix}btn-hover-border-color); outline: 0; + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows { + box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow); + } @else { + box-shadow: var(--#{$prefix}btn-focus-box-shadow); + } } .btn-check:checked + &, - .btn-check:active + &, - &:active, + :not(.btn-check) + &:active, + &:first-child:active, &.active, &.show { color: var(--#{$prefix}btn-active-color); @@ -77,7 +84,7 @@ border-color: var(--#{$prefix}btn-active-border-color); @include box-shadow(var(--#{$prefix}btn-active-shadow)); - &:focus { + &:focus-visible { // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow); @@ -162,11 +169,11 @@ text-decoration: $link-decoration; &:hover, - &:focus { + &:focus-visible { text-decoration: $link-hover-decoration; } - &:focus { + &:focus-visible { color: var(--#{$prefix}btn-color); } |