From: Mark Otto Date: Wed, 17 Sep 2025 00:05:34 +0000 (-0700) Subject: New forms and buttons (#41708) X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=98d6c80cd98d9569988ece5fcb46ea41ae30ddae;p=thirdparty%2Fbootstrap.git New forms and buttons (#41708) --- diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss index 99de799661..efbfe37e39 100644 --- a/scss/_breadcrumb.scss +++ b/scss/_breadcrumb.scss @@ -1,6 +1,7 @@ @use "sass:string"; @use "config" as *; @use "variables" as *; +@use "functions" as *; @use "mixins/border-radius" as *; @use "vendor/rfs" as *; diff --git a/scss/_root.scss b/scss/_root.scss index 8681380daf..31523403b2 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -6,6 +6,7 @@ // @use "maps" as *; @use "vendor/rfs" as *; @use "mixins/color-mode" as *; +@use "forms/form-variables" as *; // mdo-do: do we need theme? @layer colors, theme, config, root, reboot, layout, content, forms, components, helpers, custom, utilities; @@ -173,9 +174,15 @@ // 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: #{$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 diff --git a/scss/_utilities.scss b/scss/_utilities.scss index eb84b39096..607c1da901 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -5,6 +5,13 @@ @use "functions" as *; @use "theme" as *; +// add: +// - placeItems +// - double check css grid helpers +// +// update: +// - focus-ring if needed + $utilities: () !default; // stylelint-disable-next-line scss/dollar-variable-default $utilities: map.merge( diff --git a/scss/_variables.scss b/scss/_variables.scss index b5242681dc..a56412b50d 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -453,267 +453,6 @@ $btn-active-border-tint-amount: 10% !default; // scss-docs-end btn-variables -// Forms - -// scss-docs-start form-text-variables -$form-text-margin-top: .25rem !default; -$form-text-font-size: $small-font-size !default; -$form-text-font-style: null !default; -$form-text-font-weight: null !default; -$form-text-color: var(--#{$prefix}secondary-color) !default; -// scss-docs-end form-text-variables - -// scss-docs-start form-label-variables -$form-label-margin-bottom: .5rem !default; -$form-label-font-size: null !default; -$form-label-font-style: null !default; -$form-label-font-weight: null !default; -$form-label-color: null !default; -// scss-docs-end form-label-variables - -// scss-docs-start form-input-variables -$input-padding-y: $input-btn-padding-y !default; -$input-padding-x: $input-btn-padding-x !default; -$input-font-family: $input-btn-font-family !default; -$input-font-size: $input-btn-font-size !default; -$input-font-weight: $font-weight-base !default; -$input-line-height: $input-btn-line-height !default; - -$input-padding-y-sm: $input-btn-padding-y-sm !default; -$input-padding-x-sm: $input-btn-padding-x-sm !default; -$input-font-size-sm: $input-btn-font-size-sm !default; - -$input-padding-y-lg: $input-btn-padding-y-lg !default; -$input-padding-x-lg: $input-btn-padding-x-lg !default; -$input-font-size-lg: $input-btn-font-size-lg !default; - -$input-bg: var(--#{$prefix}body-bg) !default; -$input-disabled-color: null !default; -$input-disabled-bg: var(--#{$prefix}secondary-bg) !default; -$input-disabled-border-color: null !default; - -$input-color: var(--#{$prefix}body-color) !default; -$input-border-color: var(--#{$prefix}border-color) !default; -$input-border-width: $input-btn-border-width !default; -$input-box-shadow: var(--#{$prefix}box-shadow-inset) !default; - -$input-border-radius: var(--#{$prefix}border-radius) !default; -$input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default; -$input-border-radius-lg: var(--#{$prefix}border-radius-lg) !default; - -$input-focus-bg: $input-bg !default; -$input-focus-border-color: tint-color($component-active-bg, 50%) !default; -$input-focus-color: $input-color !default; -$input-focus-width: $input-btn-focus-width !default; -$input-focus-box-shadow: $input-btn-focus-box-shadow !default; - -$input-placeholder-color: var(--#{$prefix}secondary-color) !default; -$input-plaintext-color: var(--#{$prefix}body-color) !default; - -$input-height-border: calc(#{$input-border-width} * 2) !default; - -$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default; -$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default; -$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default; - -$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default; -$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default; -$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default; - -$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; - -$form-color-width: 3rem !default; -// scss-docs-end form-input-variables - -// scss-docs-start form-check-variables -$form-check-input-width: 1em !default; -$form-check-min-height: $font-size-base * $line-height-base !default; -$form-check-padding-start: $form-check-input-width + .5em !default; -$form-check-margin-bottom: .125rem !default; -$form-check-label-color: null !default; -$form-check-label-cursor: null !default; -$form-check-transition: null !default; - -$form-check-input-active-filter: brightness(90%) !default; - -$form-check-input-bg: $input-bg !default; -$form-check-input-border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !default; -$form-check-input-border-radius: .25em !default; -$form-check-radio-border-radius: 50% !default; -$form-check-input-focus-border: $input-focus-border-color !default; -$form-check-input-focus-box-shadow: $focus-ring-box-shadow !default; - -$form-check-input-checked-color: $component-active-color !default; -$form-check-input-checked-bg-color: $component-active-bg !default; -$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default; -$form-check-input-checked-bg-image: url("data:image/svg+xml,") !default; -$form-check-radio-checked-bg-image: url("data:image/svg+xml,") !default; - -$form-check-input-indeterminate-color: $component-active-color !default; -$form-check-input-indeterminate-bg-color: $component-active-bg !default; -$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default; -$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,") !default; - -$form-check-input-disabled-opacity: .5 !default; -$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default; -$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default; - -$form-check-inline-margin-end: 1rem !default; -// scss-docs-end form-check-variables - -// scss-docs-start form-switch-variables -$form-switch-color: rgba($black, .25) !default; -$form-switch-width: 2em !default; -$form-switch-padding-start: $form-switch-width + .5em !default; -$form-switch-bg-image: url("data:image/svg+xml,") !default; -$form-switch-border-radius: $form-switch-width !default; -$form-switch-transition: background-position .15s ease-in-out !default; - -$form-switch-focus-color: $input-focus-border-color !default; -$form-switch-focus-bg-image: url("data:image/svg+xml,") !default; - -$form-switch-checked-color: $component-active-color !default; -$form-switch-checked-bg-image: url("data:image/svg+xml,") !default; -$form-switch-checked-bg-position: right center !default; -// scss-docs-end form-switch-variables - -// scss-docs-start input-group-variables -$input-group-addon-padding-y: $input-padding-y !default; -$input-group-addon-padding-x: $input-padding-x !default; -$input-group-addon-font-weight: $input-font-weight !default; -$input-group-addon-color: $input-color !default; -$input-group-addon-bg: var(--#{$prefix}tertiary-bg) !default; -$input-group-addon-border-color: $input-border-color !default; -// scss-docs-end input-group-variables - -// scss-docs-start form-select-variables -$form-select-padding-y: $input-padding-y !default; -$form-select-padding-x: $input-padding-x !default; -$form-select-font-family: $input-font-family !default; -$form-select-font-size: $input-font-size !default; -$form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extra padding for background-image -$form-select-font-weight: $input-font-weight !default; -$form-select-line-height: $input-line-height !default; -$form-select-color: $input-color !default; -$form-select-bg: $input-bg !default; -$form-select-disabled-color: null !default; -$form-select-disabled-bg: $input-disabled-bg !default; -$form-select-disabled-border-color: $input-disabled-border-color !default; -$form-select-bg-position: right $form-select-padding-x center !default; -$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions -$form-select-indicator-color: $gray-800 !default; -$form-select-indicator: url("data:image/svg+xml,") !default; - -$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default; -$form-select-feedback-icon-position: center right $form-select-indicator-padding !default; -$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default; - -$form-select-border-width: $input-border-width !default; -$form-select-border-color: $input-border-color !default; -$form-select-border-radius: $input-border-radius !default; -$form-select-box-shadow: var(--#{$prefix}box-shadow-inset) !default; - -$form-select-focus-border-color: $input-focus-border-color !default; -$form-select-focus-width: $input-focus-width !default; -$form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color !default; - -$form-select-padding-y-sm: $input-padding-y-sm !default; -$form-select-padding-x-sm: $input-padding-x-sm !default; -$form-select-font-size-sm: $input-font-size-sm !default; -$form-select-border-radius-sm: $input-border-radius-sm !default; - -$form-select-padding-y-lg: $input-padding-y-lg !default; -$form-select-padding-x-lg: $input-padding-x-lg !default; -$form-select-font-size-lg: $input-font-size-lg !default; -$form-select-border-radius-lg: $input-border-radius-lg !default; - -$form-select-transition: $input-transition !default; -// scss-docs-end form-select-variables - -// scss-docs-start form-range-variables -$form-range-track-width: 100% !default; -$form-range-track-height: .5rem !default; -$form-range-track-cursor: pointer !default; -$form-range-track-bg: var(--#{$prefix}secondary-bg) !default; -$form-range-track-border-radius: 1rem !default; -$form-range-track-box-shadow: var(--#{$prefix}box-shadow-inset) !default; - -$form-range-thumb-width: 1rem !default; -$form-range-thumb-height: $form-range-thumb-width !default; -$form-range-thumb-bg: $component-active-bg !default; -$form-range-thumb-border: 0 !default; -$form-range-thumb-border-radius: 1rem !default; -$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default; -$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default; -$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge -$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default; -$form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color) !default; -$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; -// scss-docs-end form-range-variables - -// scss-docs-start form-file-variables -$form-file-button-color: $input-color !default; -$form-file-button-bg: var(--#{$prefix}tertiary-bg) !default; -$form-file-button-hover-bg: var(--#{$prefix}secondary-bg) !default; -// scss-docs-end form-file-variables - -// scss-docs-start form-floating-variables -$form-floating-height: add(3.5rem, $input-height-border) !default; -$form-floating-line-height: 1.25 !default; -$form-floating-padding-x: $input-padding-x !default; -$form-floating-padding-y: 1rem !default; -$form-floating-input-padding-t: 1.625rem !default; -$form-floating-input-padding-b: .625rem !default; -$form-floating-label-height: 1.5em !default; -$form-floating-label-opacity: .65 !default; -$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default; -$form-floating-label-disabled-color: $gray-600 !default; -$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default; -// scss-docs-end form-floating-variables - -// Form validation - -// scss-docs-start form-feedback-variables -$form-feedback-margin-top: $form-text-margin-top !default; -$form-feedback-font-size: $form-text-font-size !default; -$form-feedback-font-style: $form-text-font-style !default; -$form-feedback-valid-color: $success !default; -$form-feedback-invalid-color: $danger !default; - -$form-feedback-icon-valid-color: $form-feedback-valid-color !default; -$form-feedback-icon-valid: url("data:image/svg+xml,") !default; -$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; -$form-feedback-icon-invalid: url("data:image/svg+xml,") !default; -// scss-docs-end form-feedback-variables - -// scss-docs-start form-validation-colors -$form-valid-color: $form-feedback-valid-color !default; -$form-valid-border-color: $form-feedback-valid-color !default; -$form-invalid-color: $form-feedback-invalid-color !default; -$form-invalid-border-color: $form-feedback-invalid-color !default; -// scss-docs-end form-validation-colors - -// scss-docs-start form-validation-states -$form-validation-states: ( - "valid": ( - "color": var(--#{$prefix}form-valid-color), - "icon": $form-feedback-icon-valid, - "tooltip-color": #fff, - "tooltip-bg-color": var(--#{$prefix}success), - "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity), - "border-color": var(--#{$prefix}form-valid-border-color), - ), - "invalid": ( - "color": var(--#{$prefix}form-invalid-color), - "icon": $form-feedback-icon-invalid, - "tooltip-color": #fff, - "tooltip-bg-color": var(--#{$prefix}danger), - "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity), - "border-color": var(--#{$prefix}form-invalid-border-color), - ) -) !default; -// scss-docs-end form-validation-states - // Z-index master list // // Warning: Avoid customizing these values. They're used for a bird's eye view diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index a8b5626319..328222c48d 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -4,25 +4,19 @@ // Global CSS variables, layer definitions, and configuration @use "root"; -// Reboot & Content +// Subdir imports @use "content"; - -// Layout @use "layout"; - -// Forms @use "forms"; +@use "buttons"; // Components @use "accordion"; @use "alert"; @use "badge"; @use "breadcrumb"; -@use "buttons"; -@use "button-group"; @use "card"; @use "carousel"; -@use "close"; @use "dropdown"; @use "list-group"; @use "modal"; diff --git a/scss/_button-group.scss b/scss/buttons/_button-group.scss similarity index 96% rename from scss/_button-group.scss rename to scss/buttons/_button-group.scss index 3dce7f231c..df4af440a8 100644 --- a/scss/_button-group.scss +++ b/scss/buttons/_button-group.scss @@ -1,7 +1,8 @@ -@use "config" as *; -@use "variables" as *; -@use "mixins/border-radius" as *; -@use "mixins/box-shadow" as *; +@use "../config" as *; +@use "../variables" as *; +@use "../mixins/border-radius" as *; +@use "../mixins/box-shadow" as *; +@use "button-variables" as *; @layer components { // Make the div behave like a button diff --git a/scss/buttons/_button-variables.scss b/scss/buttons/_button-variables.scss new file mode 100644 index 0000000000..bd1005fafb --- /dev/null +++ b/scss/buttons/_button-variables.scss @@ -0,0 +1,55 @@ +@use "sass:color"; +@use "../config" as *; +@use "../colors" as *; +@use "../variables" as *; +@use "../functions" as *; +@use "../forms/form-variables" as *; + +// scss-docs-start btn-variables +$btn-color: var(--#{$prefix}body-color) !default; +$btn-padding-y: $input-btn-padding-y !default; +$btn-padding-x: $input-btn-padding-x !default; +$btn-font-family: $input-btn-font-family !default; +$btn-font-size: $input-btn-font-size !default; +$btn-line-height: $input-btn-line-height !default; +$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping + +$btn-padding-y-sm: $input-btn-padding-y-sm !default; +$btn-padding-x-sm: $input-btn-padding-x-sm !default; +$btn-font-size-sm: $input-btn-font-size-sm !default; + +$btn-padding-y-lg: $input-btn-padding-y-lg !default; +$btn-padding-x-lg: $input-btn-padding-x-lg !default; +$btn-font-size-lg: $input-btn-font-size-lg !default; + +$btn-border-width: $input-btn-border-width !default; + +$btn-font-weight: $font-weight-normal !default; +$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default; +// $btn-focus-width: $input-btn-focus-width !default; +// $btn-focus-box-shadow: $input-btn-focus-box-shadow !default; +$btn-disabled-opacity: .65 !default; +$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default; + +$btn-link-color: var(--#{$prefix}link-color) !default; +$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default; +$btn-link-disabled-color: $gray-600 !default; +$btn-link-color-contrast: color-contrast($link-color) !default; +$btn-link-focus-shadow-rgb: to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !default; + +// Allows for customizing button radius independently from global border radius +$btn-border-radius: var(--#{$prefix}border-radius) !default; +$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default; +$btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default; + +$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; + +$btn-hover-bg-shade-amount: 15% !default; +$btn-hover-bg-tint-amount: 15% !default; +$btn-hover-border-shade-amount: 20% !default; +$btn-hover-border-tint-amount: 10% !default; +$btn-active-bg-shade-amount: 20% !default; +$btn-active-bg-tint-amount: 20% !default; +$btn-active-border-shade-amount: 25% !default; +$btn-active-border-tint-amount: 10% !default; +// scss-docs-end btn-variables diff --git a/scss/_buttons.scss b/scss/buttons/_button.scss similarity index 84% rename from scss/_buttons.scss rename to scss/buttons/_button.scss index 0cf9c5462b..2bbe49459f 100644 --- a/scss/_buttons.scss +++ b/scss/buttons/_button.scss @@ -1,13 +1,15 @@ @use "sass:color"; -@use "colors" as *; -@use "config" as *; -@use "variables" as *; -@use "functions" as *; -@use "vendor/rfs" as *; -@use "mixins/border-radius" as *; -@use "mixins/box-shadow" as *; -@use "mixins/transition" as *; -@use "mixins/gradients" as *; +@use "../colors" as *; +@use "../config" as *; +@use "../variables" as *; +@use "../functions" as *; +@use "../vendor/rfs" as *; +@use "../mixins/border-radius" as *; +@use "../mixins/box-shadow" as *; +@use "../mixins/focus-ring" as *; +@use "../mixins/gradients" as *; +@use "../mixins/transition" as *; +@use "button-variables" as *; // Button variants // @@ -35,7 +37,7 @@ --#{$prefix}btn-hover-color: #{$hover-color}; --#{$prefix}btn-hover-bg: #{$hover-background}; --#{$prefix}btn-hover-border-color: #{$hover-border}; - --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(color.mix($color, $border, 15%))}; + // --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(color.mix($color, $border, 15%))}; --#{$prefix}btn-active-color: #{$active-color}; --#{$prefix}btn-active-bg: #{$active-background}; --#{$prefix}btn-active-border-color: #{$active-border}; @@ -102,7 +104,7 @@ --#{$prefix}btn-hover-border-color: transparent; --#{$prefix}btn-box-shadow: #{$btn-box-shadow}; --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity}; - --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5); + // --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5); // scss-docs-end btn-css-vars display: inline-block; @@ -142,24 +144,13 @@ 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); - } @else { - box-shadow: var(--#{$prefix}btn-focus-box-shadow); - } + @include focus-ring(true); + --#{$prefix}focus-ring-offset: 1px; } .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); - } + @include focus-ring(true); } .btn-check:checked + &, @@ -175,22 +166,12 @@ @include box-shadow(var(--#{$prefix}btn-active-shadow)); &: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); - } @else { - box-shadow: var(--#{$prefix}btn-focus-box-shadow); - } + @include focus-ring(true); } } .btn-check:checked: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); - } @else { - box-shadow: var(--#{$prefix}btn-focus-box-shadow); - } + @include focus-ring(true); } &:disabled, @@ -263,7 +244,7 @@ --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color}; --#{$prefix}btn-disabled-border-color: transparent; --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows - --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb}; + // --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb}; text-decoration: $link-decoration; @if $enable-gradients { diff --git a/scss/_close.scss b/scss/buttons/_close.scss similarity index 95% rename from scss/_close.scss rename to scss/buttons/_close.scss index 99f2632019..c765c85f9b 100644 --- a/scss/_close.scss +++ b/scss/buttons/_close.scss @@ -1,8 +1,8 @@ -@use "config" as *; -@use "colors" as *; -@use "variables" as *; -@use "mixins/border-radius" as *; -@use "mixins/color-mode" as *; +@use "../config" as *; +@use "../colors" as *; +@use "../variables" as *; +@use "../mixins/border-radius" as *; +@use "../mixins/color-mode" as *; // scss-docs-start close-variables $btn-close-width: 1em !default; diff --git a/scss/buttons/index.scss b/scss/buttons/index.scss new file mode 100644 index 0000000000..9ede0f2a6e --- /dev/null +++ b/scss/buttons/index.scss @@ -0,0 +1,4 @@ +@forward "button-variables"; +@forward "button"; +@forward "button-group"; +@forward "close"; diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss index 26edd7d868..6a0e12b521 100644 --- a/scss/forms/_floating-labels.scss +++ b/scss/forms/_floating-labels.scss @@ -1,7 +1,23 @@ @use "../config" as *; +@use "../colors" as *; @use "../variables" as *; @use "../mixins/border-radius" as *; @use "../mixins/transition" as *; +@use "form-variables" as *; + +// scss-docs-start form-floating-variables +$form-floating-height: calc(3.5rem + #{$input-height-border}) !default; +$form-floating-line-height: 1.25 !default; +$form-floating-padding-x: $input-padding-x !default; +$form-floating-padding-y: 1rem !default; +$form-floating-input-padding-t: 1.625rem !default; +$form-floating-input-padding-b: .625rem !default; +$form-floating-label-height: 1.5em !default; +$form-floating-label-opacity: .65 !default; +$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default; +$form-floating-label-disabled-color: $gray-600 !default; +$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default; +// scss-docs-end form-floating-variables @layer forms { .form-floating { diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index f8c3c7b438..bdb223f1e2 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -1,15 +1,66 @@ @use "../config" as *; +@use "../colors" as *; @use "../variables" as *; @use "../functions" as *; @use "../vendor/rfs" as *; @use "../mixins/border-radius" as *; @use "../mixins/box-shadow" as *; -@use "../mixins/transition" as *; @use "../mixins/color-mode" as *; - -// -// Check/radio -// +@use "../mixins/focus-ring" as *; +@use "../mixins/transition" as *; +@use "form-variables" as *; + +// scss-docs-start form-check-variables +$form-check-input-width: 1em !default; +$form-check-min-height: $font-size-base * $line-height-base !default; +$form-check-padding-start: $form-check-input-width + .5em !default; +$form-check-margin-bottom: .125rem !default; +$form-check-label-color: null !default; +$form-check-label-cursor: null !default; +$form-check-transition: null !default; + +$form-check-input-active-filter: brightness(90%) !default; + +$form-check-input-bg: $input-bg !default; +$form-check-input-border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !default; +$form-check-input-border-radius: .25em !default; +$form-check-radio-border-radius: 50% !default; +$form-check-input-focus-border: $input-focus-border-color !default; +$form-check-input-focus-box-shadow: $focus-ring-box-shadow !default; + +$form-check-input-checked-color: $component-active-color !default; +$form-check-input-checked-bg-color: $component-active-bg !default; +$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default; +$form-check-input-checked-bg-image: url("data:image/svg+xml,") !default; +$form-check-radio-checked-bg-image: url("data:image/svg+xml,") !default; + +$form-check-input-indeterminate-color: $component-active-color !default; +$form-check-input-indeterminate-bg-color: $component-active-bg !default; +$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default; +$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,") !default; + +$form-check-input-disabled-opacity: .5 !default; +$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default; +$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default; + +$form-check-inline-margin-end: 1rem !default; +// scss-docs-end form-check-variables + +// scss-docs-start form-switch-variables +$form-switch-color: rgba($black, .25) !default; +$form-switch-width: 1.5em !default; +$form-switch-padding-start: $form-switch-width + .5em !default; +$form-switch-bg-image: url("data:image/svg+xml,") !default; +$form-switch-border-radius: $form-switch-width !default; +$form-switch-transition: background-position .15s ease-in-out !default; + +$form-switch-focus-color: $input-focus-border-color !default; +$form-switch-focus-bg-image: url("data:image/svg+xml,") !default; + +$form-switch-checked-color: $component-active-color !default; +$form-switch-checked-bg-image: url("data:image/svg+xml,") !default; +$form-switch-checked-bg-position: right center !default; +// scss-docs-end form-switch-variables @layer forms { .form-check { @@ -67,10 +118,11 @@ filter: $form-check-input-active-filter; } - &:focus { + &:focus-visible { border-color: $form-check-input-focus-border; - outline: 0; - box-shadow: $form-check-input-focus-box-shadow; + @include focus-ring(true); + --#{$prefix}focus-ring-offset: 1px; + // box-shadow: $form-check-input-focus-box-shadow; } &:checked { diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index 19e029cf19..6f617ee0ea 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -4,8 +4,11 @@ @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 *; +@use "form-variables" as *; + // // General form controls (plus a few specific high-level interventions) // @@ -40,17 +43,11 @@ } // Customize the `:focus` state to imitate native WebKit styles. - &:focus { + &:focus-visible { 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; - } + @include focus-ring(true); } &::-webkit-date-and-time-value { diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss index 61e4a82080..2ae70a2bc0 100644 --- a/scss/forms/_form-range.scss +++ b/scss/forms/_form-range.scss @@ -1,14 +1,32 @@ +@use "../config" as *; +@use "../colors" as *; @use "../variables" as *; @use "../mixins/border-radius" as *; @use "../mixins/box-shadow" as *; @use "../mixins/transition" as *; @use "../mixins/gradients" as *; +@use "form-variables" as *; -// Range -// -// Style range inputs the same across browsers. Vendor-specific rules for pseudo -// elements cannot be mixed. As such, there are no shared styles for focus or -// active states on prefixed selectors. +// scss-docs-start form-range-variables +$form-range-track-width: 100% !default; +$form-range-track-height: .5rem !default; +$form-range-track-cursor: pointer !default; +$form-range-track-bg: var(--#{$prefix}secondary-bg) !default; +$form-range-track-border-radius: 1rem !default; +$form-range-track-box-shadow: var(--#{$prefix}box-shadow-inset) !default; + +$form-range-thumb-width: 1rem !default; +$form-range-thumb-height: $form-range-thumb-width !default; +$form-range-thumb-bg: $component-active-bg !default; +$form-range-thumb-border: 0 !default; +$form-range-thumb-border-radius: 1rem !default; +$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default; +$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default; +$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge +$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default; +$form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color) !default; +$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; +// scss-docs-end form-range-variables @layer forms { .form-range { diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss index 8b50e23fc1..5792edbcbb 100644 --- a/scss/forms/_form-select.scss +++ b/scss/forms/_form-select.scss @@ -1,15 +1,58 @@ @use "../config" as *; +@use "../colors" as *; @use "../variables" as *; +@use "../functions" as *; @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 *; +@use "form-variables" as *; + +// scss-docs-start form-select-variables +$form-select-padding-y: $input-padding-y !default; +$form-select-padding-x: $input-padding-x !default; +$form-select-font-family: $input-font-family !default; +$form-select-font-size: $input-font-size !default; +$form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extra padding for background-image +$form-select-font-weight: $input-font-weight !default; +$form-select-line-height: $input-line-height !default; +$form-select-color: $input-color !default; +$form-select-bg: $input-bg !default; +$form-select-disabled-color: null !default; +$form-select-disabled-bg: $input-disabled-bg !default; +$form-select-disabled-border-color: $input-disabled-border-color !default; +$form-select-bg-position: right $form-select-padding-x center !default; +$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions +$form-select-indicator-color: $gray-800 !default; +$form-select-indicator: url("data:image/svg+xml,") !default; + +$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default; +$form-select-feedback-icon-position: center right $form-select-indicator-padding !default; +$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default; + +$form-select-border-width: $input-border-width !default; +$form-select-border-color: $input-border-color !default; +$form-select-border-radius: $input-border-radius !default; +$form-select-box-shadow: var(--#{$prefix}box-shadow-inset) !default; -// Select -// -// Replaces the browser default select with a custom one, mostly pulled from -// https://primer.github.io/. +$form-select-focus-border-color: $input-focus-border-color !default; +$form-select-focus-width: $input-focus-width !default; +// $form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color !default; + +$form-select-padding-y-sm: $input-padding-y-sm !default; +$form-select-padding-x-sm: $input-padding-x-sm !default; +$form-select-font-size-sm: $input-font-size-sm !default; +$form-select-border-radius-sm: $input-border-radius-sm !default; + +$form-select-padding-y-lg: $input-padding-y-lg !default; +$form-select-padding-x-lg: $input-padding-x-lg !default; +$form-select-font-size-lg: $input-font-size-lg !default; +$form-select-border-radius-lg: $input-border-radius-lg !default; + +$form-select-transition: $input-transition !default; +// scss-docs-end form-select-variables @layer forms { .form-select { @@ -34,15 +77,9 @@ @include box-shadow($form-select-box-shadow); @include transition($form-select-transition); - &:focus { + &:focus-visible { 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(true); } &[multiple], diff --git a/scss/forms/_form-text.scss b/scss/forms/_form-text.scss index 721b1366b1..2c6c586320 100644 --- a/scss/forms/_form-text.scss +++ b/scss/forms/_form-text.scss @@ -1,8 +1,15 @@ +@use "../config" as *; @use "../variables" as *; @use "../vendor/rfs" as *; -// -// Form text -// +@use "form-variables" as *; + +// scss-docs-start form-text-variables +$form-text-margin-top: .25rem !default; +$form-text-font-size: $small-font-size !default; +$form-text-font-style: null !default; +$form-text-font-weight: null !default; +$form-text-color: var(--#{$prefix}secondary-color) !default; +// scss-docs-end form-text-variables @layer forms { .form-text { diff --git a/scss/forms/_form-variables.scss b/scss/forms/_form-variables.scss new file mode 100644 index 0000000000..bde73334ae --- /dev/null +++ b/scss/forms/_form-variables.scss @@ -0,0 +1,127 @@ +@use "../config" as *; +@use "../variables" as *; + +// scss-docs-start input-btn-variables +$input-btn-padding-y: .375rem !default; +$input-btn-padding-x: .75rem !default; +$input-btn-font-family: null !default; +$input-btn-font-size: $font-size-base !default; +$input-btn-line-height: $line-height-base !default; + +$input-btn-focus-width: $focus-ring-width !default; +$input-btn-focus-color-opacity: $focus-ring-opacity !default; +$input-btn-focus-color: $focus-ring-color !default; +$input-btn-focus-blur: $focus-ring-blur !default; +$input-btn-focus-box-shadow: $focus-ring-box-shadow !default; + +$input-btn-padding-y-sm: .25rem !default; +$input-btn-padding-x-sm: .5rem !default; +$input-btn-font-size-sm: $font-size-sm !default; + +$input-btn-padding-y-lg: .5rem !default; +$input-btn-padding-x-lg: 1rem !default; +$input-btn-font-size-lg: $font-size-lg !default; + +$input-btn-border-width: var(--#{$prefix}border-width) !default; +// scss-docs-end input-btn-variables + +// scss-docs-start form-input-variables +$input-padding-y: $input-btn-padding-y !default; +$input-padding-x: $input-btn-padding-x !default; +$input-font-family: $input-btn-font-family !default; +$input-font-size: $input-btn-font-size !default; +$input-font-weight: $font-weight-base !default; +$input-line-height: $input-btn-line-height !default; + +$input-padding-y-sm: $input-btn-padding-y-sm !default; +$input-padding-x-sm: $input-btn-padding-x-sm !default; +$input-font-size-sm: $input-btn-font-size-sm !default; + +$input-padding-y-lg: $input-btn-padding-y-lg !default; +$input-padding-x-lg: $input-btn-padding-x-lg !default; +$input-font-size-lg: $input-btn-font-size-lg !default; + +$input-bg: var(--#{$prefix}body-bg) !default; +$input-disabled-color: null !default; +$input-disabled-bg: var(--#{$prefix}secondary-bg) !default; +$input-disabled-border-color: null !default; + +$input-color: var(--#{$prefix}body-color) !default; +$input-border-color: var(--#{$prefix}border-color) !default; +$input-border-width: $input-btn-border-width !default; +$input-box-shadow: var(--#{$prefix}box-shadow-inset) !default; + +$input-border-radius: var(--#{$prefix}border-radius) !default; +$input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default; +$input-border-radius-lg: var(--#{$prefix}border-radius-lg) !default; + +$input-focus-bg: $input-bg !default; +$input-focus-border-color: var(--#{$prefix}primary-border) !default; +$input-focus-color: $input-color !default; +$input-focus-width: $input-btn-focus-width !default; +$input-focus-box-shadow: $input-btn-focus-box-shadow !default; + +$input-placeholder-color: var(--#{$prefix}secondary-color) !default; +$input-plaintext-color: var(--#{$prefix}body-color) !default; + +$input-height-border: calc(#{$input-border-width} * 2) !default; + +$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default; +$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default; +$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default; + +$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default; +$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default; +$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default; + +$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; + +$form-color-width: 3rem !default; +// scss-docs-end form-input-variables + +// scss-docs-start form-file-variables +$form-file-button-color: $input-color !default; +$form-file-button-bg: var(--#{$prefix}tertiary-bg) !default; +$form-file-button-hover-bg: var(--#{$prefix}secondary-bg) !default; +// scss-docs-end form-file-variables + +// scss-docs-start form-feedback-variables +$form-feedback-margin-top: .5rem !default; +$form-feedback-font-size: $font-size-sm !default; +$form-feedback-font-style: null !default; +$form-feedback-valid-color: var(--#{$prefix}success) !default; +$form-feedback-invalid-color: var(--#{$prefix}danger) !default; + +$form-feedback-icon-valid-color: $form-feedback-valid-color !default; +$form-feedback-icon-valid: url("data:image/svg+xml,") !default; +$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; +$form-feedback-icon-invalid: url("data:image/svg+xml,") !default; +// scss-docs-end form-feedback-variables + +// scss-docs-start form-validation-colors +$form-valid-color: $form-feedback-valid-color !default; +$form-valid-border-color: $form-feedback-valid-color !default; +$form-invalid-color: $form-feedback-invalid-color !default; +$form-invalid-border-color: $form-feedback-invalid-color !default; +// scss-docs-end form-validation-colors + +// scss-docs-start form-validation-states +$form-validation-states: ( + "valid": ( + "color": var(--#{$prefix}form-valid-color), + "icon": $form-feedback-icon-valid, + "tooltip-color": #fff, + "tooltip-bg-color": var(--#{$prefix}success), + "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity), + "border-color": var(--#{$prefix}form-valid-border-color), + ), + "invalid": ( + "color": var(--#{$prefix}form-invalid-color), + "icon": $form-feedback-icon-invalid, + "tooltip-color": #fff, + "tooltip-bg-color": var(--#{$prefix}danger), + "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity), + "border-color": var(--#{$prefix}form-invalid-border-color), + ) +) !default; +// scss-docs-end form-validation-states diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss index 591bf188d1..8d6de5be18 100644 --- a/scss/forms/_input-group.scss +++ b/scss/forms/_input-group.scss @@ -1,12 +1,20 @@ @use "sass:map"; @use "sass:string"; +@use "../config" as *; +@use "../colors" as *; @use "../variables" as *; @use "../vendor/rfs" as *; @use "../mixins/border-radius" as *; +@use "form-variables" as *; -// -// Base styles -// +// scss-docs-start input-group-variables +$input-group-addon-padding-y: $input-padding-y !default; +$input-group-addon-padding-x: $input-padding-x !default; +$input-group-addon-font-weight: $input-font-weight !default; +$input-group-addon-color: $input-color !default; +$input-group-addon-bg: var(--#{$prefix}tertiary-bg) !default; +$input-group-addon-border-color: $input-border-color !default; +// scss-docs-end input-group-variables @layer forms { .input-group { @@ -92,7 +100,8 @@ .input-group-lg > .form-select, .input-group-sm > .form-select { - padding-right: $form-select-padding-x + $form-select-indicator-padding; + // mdo-do: need to revisit this + // padding-right: $form-select-padding-x + $form-select-indicator-padding; } diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss index 338e1758a9..ea9b1e3fd3 100644 --- a/scss/forms/_labels.scss +++ b/scss/forms/_labels.scss @@ -1,8 +1,15 @@ @use "../variables" as *; @use "../vendor/rfs" as *; -// -// Labels -// +@use "form-variables" as *; + +// scss-docs-start form-label-variables +$form-label-margin-bottom: .5rem !default; +$form-label-font-size: null !default; +$form-label-font-style: null !default; +$form-label-font-weight: null !default; +$form-label-color: null !default; +// scss-docs-end form-label-variables + @layer forms { .form-label { diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss index cd4f6808e2..02f564f9bd 100644 --- a/scss/forms/_validation.scss +++ b/scss/forms/_validation.scss @@ -1,8 +1,10 @@ @use "../config" as *; @use "../variables" as *; +@use "../functions" as *; @use "../vendor/rfs" as *; @use "../mixins/border-radius" as *; @use "../mixins/box-shadow" as *; +@use "form-variables" as *; @use "../tooltip" as *; // bring in tooltip variables // Form validation @@ -103,31 +105,31 @@ } } - .form-select { - @include form-validation-state-selector($state) { - border-color: $border-color; - - @if $enable-validation-icons { - &:not([multiple]):not([size]), - &:not([multiple])[size="1"] { - --#{$prefix}form-select-bg-icon: #{escape-svg($icon)}; - padding-right: $form-select-feedback-icon-padding-end; - background-position: $form-select-bg-position, $form-select-feedback-icon-position; - background-size: $form-select-bg-size, $form-select-feedback-icon-size; - } - } - - &:focus { - border-color: $border-color; - @if $enable-shadows { - @include box-shadow($form-select-box-shadow, $focus-box-shadow); - } @else { - // Avoid using mixin so we can pass custom focus shadow properly - box-shadow: $focus-box-shadow; - } - } - } - } + // .form-select { + // @include form-validation-state-selector($state) { + // border-color: $border-color; + + // @if $enable-validation-icons { + // &:not([multiple]):not([size]), + // &:not([multiple])[size="1"] { + // --#{$prefix}form-select-bg-icon: #{escape-svg($icon)}; + // padding-right: $form-select-feedback-icon-padding-end; + // background-position: $form-select-bg-position, $form-select-feedback-icon-position; + // background-size: $form-select-bg-size, $form-select-feedback-icon-size; + // } + // } + + // &:focus { + // border-color: $border-color; + // @if $enable-shadows { + // @include box-shadow($form-select-box-shadow, $focus-box-shadow); + // } @else { + // // Avoid using mixin so we can pass custom focus shadow properly + // box-shadow: $focus-box-shadow; + // } + // } + // } + // } .form-control-color { @include form-validation-state-selector($state) { diff --git a/scss/helpers/_focus-ring.scss b/scss/helpers/_focus-ring.scss index 39b43704ea..02fccb7d0d 100644 --- a/scss/helpers/_focus-ring.scss +++ b/scss/helpers/_focus-ring.scss @@ -1,9 +1,7 @@ @use "../config" as *; @layer helpers { - .focus-ring:focus { - outline: 0; - // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values - box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color); + .focus-ring:focus-visible { + outline: var(--#{$prefix}focus-ring); } } diff --git a/scss/mixins/_focus-ring.scss b/scss/mixins/_focus-ring.scss new file mode 100644 index 0000000000..62fcebe322 --- /dev/null +++ b/scss/mixins/_focus-ring.scss @@ -0,0 +1,13 @@ +@use "../config" as *; +@use "../variables" 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); + } +} diff --git a/site/src/content/docs/components/buttons.mdx b/site/src/content/docs/components/buttons.mdx index 83da460bbd..4f864f7101 100644 --- a/site/src/content/docs/components/buttons.mdx +++ b/site/src/content/docs/components/buttons.mdx @@ -192,7 +192,7 @@ document.querySelectorAll('.btn').forEach(buttonElement => { - + Each `.btn-*` modifier class updates the appropriate CSS variables to minimize additional CSS rules with our `button-variant()`, `button-outline-variant()`, and `button-size()` mixins. @@ -222,4 +222,4 @@ There are three mixins for buttons: button and button outline variant mixins (bo Button variants (for regular and outline buttons) use their respective mixins with our `$theme-colors` map to generate the modifier classes in `scss/_buttons.scss`. - + diff --git a/site/src/content/docs/components/close-button.mdx b/site/src/content/docs/components/close-button.mdx index 2b64356f02..8845506b55 100644 --- a/site/src/content/docs/components/close-button.mdx +++ b/site/src/content/docs/components/close-button.mdx @@ -31,8 +31,8 @@ Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to inv - + ### Sass variables - + diff --git a/site/src/content/docs/forms/checks-radios.mdx b/site/src/content/docs/forms/checks-radios.mdx index 8557916e53..52462ae6fb 100644 --- a/site/src/content/docs/forms/checks-radios.mdx +++ b/site/src/content/docs/forms/checks-radios.mdx @@ -304,8 +304,8 @@ Different variants of `.btn`, such as the various outlined styles, are supported Variables for checks: - + Variables for switches: - + diff --git a/site/src/content/docs/forms/floating-labels.mdx b/site/src/content/docs/forms/floating-labels.mdx index dd2db0813e..bc60d079f0 100644 --- a/site/src/content/docs/forms/floating-labels.mdx +++ b/site/src/content/docs/forms/floating-labels.mdx @@ -157,4 +157,4 @@ When working with the Bootstrap grid system, be sure to place form elements with ### Sass variables - + diff --git a/site/src/content/docs/forms/form-control.mdx b/site/src/content/docs/forms/form-control.mdx index a4506543cb..2c0d0b916b 100644 --- a/site/src/content/docs/forms/form-control.mdx +++ b/site/src/content/docs/forms/form-control.mdx @@ -153,14 +153,14 @@ Learn more about [support for datalist elements](https://caniuse.com/datalist). `$input-*` are shared across most of our form controls (and not buttons). - + `$form-label-*` and `$form-text-*` are for our `