mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-24 03:43:23 +01:00
Code Issues Releases Wiki 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 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);
}