@use "sass:string";
@use "config" as *;
@use "variables" as *;
+@use "functions" as *;
@use "mixins/border-radius" as *;
@use "vendor/rfs" as *;
// @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;
// 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
@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(
// 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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>") !default;
-$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
-
-$form-switch-checked-color: $component-active-color !default;
-$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/></svg>") !default;
-$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
-$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !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
// 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";
-@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
--- /dev/null
+@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
@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
//
--#{$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};
--#{$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;
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 + &,
@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,
--#{$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 {
-@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;
--- /dev/null
+@forward "button-variables";
+@forward "button";
+@forward "button-group";
+@forward "close";
@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 {
@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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>") !default;
+$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
+
+$form-switch-checked-color: $component-active-color !default;
+$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
+$form-switch-checked-bg-position: right center !default;
+// scss-docs-end form-switch-variables
@layer forms {
.form-check {
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 {
@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)
//
}
// 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 {
+@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 {
@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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !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 {
@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],
+@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 {
--- /dev/null
+@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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/></svg>") !default;
+$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
+$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !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
@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 {
.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;
}
@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 {
@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
}
}
- .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) {
@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);
}
}
--- /dev/null
+@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);
+ }
+}
<CSSVariables component="Buttons" className="btn" />
-<ScssDocs name="btn-css-vars" file="scss/_buttons.scss" />
+<ScssDocs name="btn-css-vars" file="scss/buttons/_button.scss" />
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.
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`.
-<ScssDocs name="btn-variant-loops" file="scss/_buttons.scss" />
+<ScssDocs name="btn-variant-loops" file="scss/buttons/_button.scss" />
<CSSVariables component="Close button" className="btn-close" />
-<ScssDocs name="close-css-vars" file="scss/_close.scss" />
+<ScssDocs name="close-css-vars" file="scss/buttons/_close.scss" />
### Sass variables
-<ScssDocs name="close-variables" file="scss/_close.scss" />
+<ScssDocs name="close-variables" file="scss/buttons/_close.scss" />
Variables for checks:
-<ScssDocs name="form-check-variables" file="scss/_variables.scss" />
+<ScssDocs name="form-check-variables" file="scss/forms/_form-check.scss" />
Variables for switches:
-<ScssDocs name="form-switch-variables" file="scss/_variables.scss" />
+<ScssDocs name="form-switch-variables" file="scss/forms/_form-check.scss" />
### Sass variables
-<ScssDocs name="form-floating-variables" file="scss/_variables.scss" />
+<ScssDocs name="form-floating-variables" file="scss/forms/_floating-labels.scss" />
`$input-*` are shared across most of our form controls (and not buttons).
-<ScssDocs name="form-input-variables" file="scss/_variables.scss" />
+<ScssDocs name="form-input-variables" file="scss/forms/_form-variables.scss" />
`$form-label-*` and `$form-text-*` are for our `<label>`s and `.form-text` component.
-<ScssDocs name="form-label-variables" file="scss/_variables.scss" />
+<ScssDocs name="form-label-variables" file="scss/forms/_labels.scss" />
-<ScssDocs name="form-text-variables" file="scss/_variables.scss" />
+<ScssDocs name="form-text-variables" file="scss/forms/_form-text.scss" />
`$form-file-*` are for file input.
-<ScssDocs name="form-file-variables" file="scss/_variables.scss" />
+<ScssDocs name="form-file-variables" file="scss/forms/_form-variables.scss" />
### Sass variables
-<ScssDocs name="input-group-variables" file="scss/_variables.scss" />
+<ScssDocs name="input-group-variables" file="scss/forms/_input-group.scss" />
### Sass variables
-<ScssDocs name="form-range-variables" file="scss/_variables.scss" />
+<ScssDocs name="form-range-variables" file="scss/forms/_form-range.scss" />
### Sass variables
-<ScssDocs name="form-select-variables" file="scss/_variables.scss" />
+<ScssDocs name="form-select-variables" file="scss/forms/_form-select.scss" />
### Sass variables
-<ScssDocs name="form-feedback-variables" file="scss/_variables.scss" />
+<ScssDocs name="form-feedback-variables" file="scss/forms/_form-variables.scss" />
-<ScssDocs name="form-validation-colors" file="scss/_variables.scss" />
+<ScssDocs name="form-validation-colors" file="scss/forms/_form-variables.scss" />
-<ScssDocs name="form-validation-colors-dark" file="scss/_variables.scss" />
+{/* <ScssDocs name="form-validation-colors-dark" file="scss/_variables.scss" /> */}
### Sass mixins
Two mixins are combined, through our [loop](#sass-loops), to generate our form validation feedback styles.
-<ScssDocs name="form-validation-mixins" file="scss/mixins/_forms.scss" />
+<ScssDocs name="form-validation-mixins" file="scss/forms/_validation.scss" />
### Sass maps
This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states.
-<ScssDocs name="form-validation-states" file="scss/_variables.scss" />
+<ScssDocs name="form-validation-states" file="scss/forms/_form-variables.scss" />
Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles.
import { getData } from '@libs/data'
-The `.focus-ring` helper removes the default `outline` on `:focus`, replacing it with a `box-shadow` that can be more broadly customized. The new shadow is made up of a series of CSS variables, inherited from the `:root` level, that can be modified for any element or component.
+The `.focus-ring` helper modifies the default `outline` for focus states with one that can be more easily customized. The new focus ring is made up of a series of CSS variables, inherited from the `:root` level, that can be modified for any element or component.
## Example
projects / thirdparty / bootstrap.git / commitdiff
