mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-20 20:00:36 +03:00
Code Activity

Sort focus styling specifically for button checks/radios

Browse Source 
don't change background on focus, just give it the border/outline. again, avoids confusion whether something is checked or not while focused
This commit is contained in:
Patrick H. Lauke
2022-08-25 19:51:02 +01:00
parent 6ea6edd65a
commit c942ef17a5
1 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/_buttons.scss
+11 -1
View File
@@ -47,7 +47,6 @@
border-color: var(--#{$prefix}btn-hover-border-color); border-color: var(--#{$prefix}btn-hover-border-color);
} }
.btn-check:focus-visible + &,
&:focus-visible { &:focus-visible {
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));
@@ -61,6 +60,17 @@
} }
} }
.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:checked + &,
:not(.btn-check) + &:active, :not(.btn-check) + &:active,
&:first-child:active, &:first-child:active,