// Focus styles
// scss-docs-start root-focus-variables
- --#{$prefix}focus-ring-width: #{$focus-ring-width};
- --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
- --#{$prefix}focus-ring-color: #{$focus-ring-color};
+ --#{$prefix}focus-ring-width: 3px;
+ --#{$prefix}focus-ring-offset: -1px;
+ --#{$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-start root-form-validation-variables
"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)),
"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)
),
"accent": (
@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
-@use "../mixins/transition" as *;
+@use "../mixins/focus-ring" as *;
@use "../mixins/gradients" as *;
+@use "../mixins/transition" as *;
//
// General form controls (plus a few specific high-level interventions)
.form-control {
display: block;
width: 100%;
+ height: 2.85rem;
padding: $input-padding-y $input-padding-x;
font-family: $input-font-family;
@include font-size($input-font-size);
&:focus {
color: $input-focus-color;
background-color: $input-focus-bg;
- border-color: $input-focus-border-color;
- outline: 0;
- @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;
- }
+ // border-color: $input-focus-border-color;
+ @include focus-ring($offset: true);
}
&::-webkit-date-and-time-value {
@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
-@use "../mixins/transition" as *;
@use "../mixins/color-mode" as *;
+@use "../mixins/focus-ring" as *;
+@use "../mixins/transition" as *;
// Select
//
&:focus {
border-color: $form-select-focus-border-color;
- outline: 0;
- @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;
- }
+ @include focus-ring($offset: true);
}
&[multiple],
--- /dev/null
+@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);
+ }
+}