mirror of https://github.com/twbs/bootstrap.git
New forms and buttons (#41708)
This commit is contained in:
Mark Otto
Mark Otto
parent
5f910f4a09
commit
98d6c80cd9
|
|
@ -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 *;
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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,<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
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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 {
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
@forward "button-variables";
|
||||
@forward "button";
|
||||
@forward "button-group";
|
||||
@forward "close";
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 *;
|
||||
@use "../mixins/focus-ring" as *;
|
||||
@use "../mixins/transition" as *;
|
||||
@use "form-variables" as *;
|
||||
|
||||
//
|
||||
// Check/radio
|
||||
//
|
||||
// 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 {
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 *;
|
||||
|
||||
// Select
|
||||
//
|
||||
// Replaces the browser default select with a custom one, mostly pulled from
|
||||
// https://primer.github.io/.
|
||||
// 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
|
||||
|
||||
@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],
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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,<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
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
// .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;
|
||||
}
|
||||
}
|
||||
// @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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// &: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) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -192,7 +192,7 @@ document.querySelectorAll('.btn').forEach(buttonElement => {
|
|||
|
||||
<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.
|
||||
|
||||
|
|
@ -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`.
|
||||
|
||||
<ScssDocs name="btn-variant-loops" file="scss/_buttons.scss" />
|
||||
<ScssDocs name="btn-variant-loops" file="scss/buttons/_button.scss" />
|
||||
|
|
|
|||
|
|
@ -31,8 +31,8 @@ Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to inv
|
|||
|
||||
<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" />
|
||||
|
|
|
|||
|
|
@ -304,8 +304,8 @@ Different variants of `.btn`, such as the various outlined styles, are supported
|
|||
|
||||
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" />
|
||||
|
|
|
|||
|
|
@ -157,4 +157,4 @@ When working with the Bootstrap grid system, be sure to place form elements with
|
|||
|
||||
### Sass variables
|
||||
|
||||
<ScssDocs name="form-floating-variables" file="scss/_variables.scss" />
|
||||
<ScssDocs name="form-floating-variables" file="scss/forms/_floating-labels.scss" />
|
||||
|
|
|
|||
|
|
@ -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).
|
||||
|
||||
<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" />
|
||||
|
|
|
|||
|
|
@ -302,4 +302,4 @@ Input groups include support for custom selects and custom file inputs. Browser
|
|||
|
||||
### Sass variables
|
||||
|
||||
<ScssDocs name="input-group-variables" file="scss/_variables.scss" />
|
||||
<ScssDocs name="input-group-variables" file="scss/forms/_input-group.scss" />
|
||||
|
|
|
|||
|
|
@ -57,4 +57,4 @@ The value of the range input can be shown using the `output` element and a bit o
|
|||
|
||||
### Sass variables
|
||||
|
||||
<ScssDocs name="form-range-variables" file="scss/_variables.scss" />
|
||||
<ScssDocs name="form-range-variables" file="scss/forms/_form-range.scss" />
|
||||
|
|
|
|||
|
|
@ -66,4 +66,4 @@ Add the `disabled` boolean attribute on a select to give it a grayed out appeara
|
|||
|
||||
### Sass variables
|
||||
|
||||
<ScssDocs name="form-select-variables" file="scss/_variables.scss" />
|
||||
<ScssDocs name="form-select-variables" file="scss/forms/_form-select.scss" />
|
||||
|
|
|
|||
|
|
@ -347,23 +347,23 @@ These variables are also color mode adaptive, meaning they change color while in
|
|||
|
||||
### 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.
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ toc: true
|
|||
|
||||
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
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue