root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

New focus styles

This commit is contained in:
Mark Otto 2025-04-14 10:00:57 -07:00
parent 509332ee40
commit a9822ac21c
5 changed files with 25 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
scss/_root.scss
View File

@ -133,9 +133,10 @@
// Focus styles // Focus styles
// scss-docs-start root-focus-variables // scss-docs-start root-focus-variables
--#{$prefix}focus-ring-width: #{$focus-ring-width}; --#{$prefix}focus-ring-width: 3px;
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity}; --#{$prefix}focus-ring-offset: -1px;
--#{$prefix}focus-ring-color: #{$focus-ring-color}; --#{$prefix}focus-ring-color: var(--#{$prefix}primary-focus-ring);
--#{$prefix}focus-ring: var(--#{$prefix}focus-ring-width) solid var(--#{$prefix}focus-ring-color);
// scss-docs-end root-focus-variables // scss-docs-end root-focus-variables
// scss-docs-start root-form-validation-variables // scss-docs-start root-form-validation-variables

2
scss/_theme.scss
View File

@ -36,7 +36,7 @@ $new-theme-colors: (
"bg-muted": light-dark(var(--#{$prefix}blue-200), var(--#{$prefix}blue-800)), "bg-muted": light-dark(var(--#{$prefix}blue-200), var(--#{$prefix}blue-800)),
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}blue-200), var(--#{$prefix}blue-300)), var(--#{$prefix}blue-700)), // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}blue-200), var(--#{$prefix}blue-300)), var(--#{$prefix}blue-700)),
"border": light-dark(var(--#{$prefix}blue-300), var(--#{$prefix}blue-600)), "border": light-dark(var(--#{$prefix}blue-300), var(--#{$prefix}blue-600)),
"focus-ring": color-mix(in oklch, var(--#{$prefix}blue-500) 50%, transparent), "focus-ring": color-mix(in oklch, var(--#{$prefix}blue-500) 50%, var(--#{$prefix}bg-0)),
"contrast": var(--#{$prefix}white) "contrast": var(--#{$prefix}white)
), ),
"accent": ( "accent": (

14
scss/forms/_form-control.scss
View File

@ -3,8 +3,9 @@
@use "../vendor/rfs" as *; @use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *; @use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *; @use "../mixins/box-shadow" as *;
@use "../mixins/transition" as *; @use "../mixins/focus-ring" as *;
@use "../mixins/gradients" as *; @use "../mixins/gradients" as *;
@use "../mixins/transition" as *;
// //
// General form controls (plus a few specific high-level interventions) // General form controls (plus a few specific high-level interventions)
@ -14,6 +15,7 @@
.form-control { .form-control {
display: block; display: block;
width: 100%; width: 100%;
height: 2.85rem;
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
font-family: $input-font-family; font-family: $input-font-family;
@include font-size($input-font-size); @include font-size($input-font-size);
@ -43,14 +45,8 @@
&:focus { &:focus {
color: $input-focus-color; color: $input-focus-color;
background-color: $input-focus-bg; background-color: $input-focus-bg;
border-color: $input-focus-border-color; // border-color: $input-focus-border-color;
outline: 0; @include focus-ring($offset: true);
@if $enable-shadows {
@include box-shadow($input-box-shadow, $input-focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $input-focus-box-shadow;
}
} }
&::-webkit-date-and-time-value { &::-webkit-date-and-time-value {

11
scss/forms/_form-select.scss
View File

@ -3,8 +3,9 @@
@use "../vendor/rfs" as *; @use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *; @use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *; @use "../mixins/box-shadow" as *;
@use "../mixins/transition" as *;
@use "../mixins/color-mode" as *; @use "../mixins/color-mode" as *;
@use "../mixins/focus-ring" as *;
@use "../mixins/transition" as *;
// Select // Select
// //
@ -36,13 +37,7 @@
&:focus { &:focus {
border-color: $form-select-focus-border-color; border-color: $form-select-focus-border-color;
outline: 0; @include focus-ring($offset: true);
@if $enable-shadows {
@include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $form-select-focus-box-shadow;
}
} }
&[multiple], &[multiple],

12
scss/mixins/_focus-ring.scss Normal file
View File

@ -0,0 +1,12 @@
@use "../config" as *;
@mixin focus-ring($offset: false, $color: null) {
@if $color != null {
outline: var(--#{$prefix}focus-ring-width) solid #{$color};
} @else {
outline: var(--#{$prefix}focus-ring);
}
@if $offset {
outline-offset: var(--#{$prefix}focus-ring-offset);
}
}