rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-15 15:29:22 +01:00
Code Issues Actions Packages Releases Activity

Rework button focus/active styling, with extra changes for checks/radios (#37026)

Browse Source 
* 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>
This commit is contained in:
Patrick H. Lauke 2022-09-04 17:59:14 +01:00 committed by GitHub
parent b8880e5eec
commit 32c457db4b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
scss/_buttons.scss
View File

@ -40,18 +40,19 @@
@include box-shadow(var(--#{$prefix}btn-box-shadow)); @include box-shadow(var(--#{$prefix}btn-box-shadow));
@include transition($btn-transition); @include transition($btn-transition);
&:hover { :not(.btn-check) + &:hover,
&:first-child:hover {
color: var(--#{$prefix}btn-hover-color); color: var(--#{$prefix}btn-hover-color);
text-decoration: if($link-hover-decoration == underline, none, null); text-decoration: if($link-hover-decoration == underline, none, null);
background-color: var(--#{$prefix}btn-hover-bg); background-color: var(--#{$prefix}btn-hover-bg);
border-color: var(--#{$prefix}btn-hover-border-color); border-color: var(--#{$prefix}btn-hover-border-color);
} }
.btn-check:focus + &, &:focus-visible {
&:focus {
color: var(--#{$prefix}btn-hover-color); color: var(--#{$prefix}btn-hover-color);
@include gradient-bg(var(--#{$prefix}btn-hover-bg)); @include gradient-bg(var(--#{$prefix}btn-hover-bg));
border-color: var(--#{$prefix}btn-hover-border-color); border-color: var(--#{$prefix}btn-hover-border-color);
outline: 0;
// Avoid using mixin so we can pass custom focus shadow properly // Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows { @if $enable-shadows {
box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow); box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
@ -60,14 +61,20 @@
} }
} }
.btn-check:focus:not(:focus-visible) + &, .btn-check:focus-visible + & {
&:focus:not(:focus-visible) { border-color: var(--#{$prefix}btn-hover-border-color);
outline: 0; 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:checked + &,
.btn-check:active + &, :not(.btn-check) + &:active,
&:active, &:first-child:active,
&.active, &.active,
&.show { &.show {
color: var(--#{$prefix}btn-active-color); color: var(--#{$prefix}btn-active-color);
@ -77,7 +84,7 @@
border-color: var(--#{$prefix}btn-active-border-color); border-color: var(--#{$prefix}btn-active-border-color);
@include box-shadow(var(--#{$prefix}btn-active-shadow)); @include box-shadow(var(--#{$prefix}btn-active-shadow));
&:focus { &:focus-visible {
// Avoid using mixin so we can pass custom focus shadow properly // Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows { @if $enable-shadows {
box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow); box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
@ -162,11 +169,11 @@
text-decoration: $link-decoration; text-decoration: $link-decoration;
&:hover, &:hover,
&:focus { &:focus-visible {
text-decoration: $link-hover-decoration; text-decoration: $link-hover-decoration;
} }
&:focus { &:focus-visible {
color: var(--#{$prefix}btn-color); color: var(--#{$prefix}btn-color);
} }