| @use "sass:color"; |
| @use "sass:string"; |
| @use "colors" as *; |
| @use "config" as *; |
| @use "functions" as *; |
| |
| // Variables |
| // |
| // Variables should follow the `$component-state-property-size` formula for |
| // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. |
| |
| // scss-docs-start theme-color-variables |
| // $primary: $blue-500 !default; |
| // $secondary: var(--#{$prefix}gray-600) !default; |
| // $success: $green-500 !default; |
| // $info: $cyan-500 !default; |
| // $warning: $yellow-500 !default; |
| // $danger: $red-500 !default; |
| // $light: var(--#{$prefix}gray-100) !default; |
| // $dark: var(--#{$prefix}gray-900) !default; |
| // scss-docs-end theme-color-variables |
| |
| // scss-docs-start theme-colors-map |
| // $theme-colors: ( |
| // "primary": $primary, |
| // "secondary": $secondary, |
| // "success": $success, |
| // "info": $info, |
| // "warning": $warning, |
| // "danger": $danger, |
| // "light": $light, |
| // "dark": $dark |
| // ) !default; |
| // scss-docs-end theme-colors-map |
| |
| // Characters which are escaped by the escape-svg function |
| $escaped-characters: ( |
| ("<", "%3c"), |
| (">", "%3e"), |
| ("#", "%23"), |
| ("(", "%28"), |
| (")", "%29"), |
| ) !default; |
| |
| // // Options |
| // // |
| // // Quickly modify global styling by enabling or disabling optional features. |
| |
| // $enable-caret: true !default; |
| // $enable-rounded: true !default; |
| // $enable-shadows: false !default; |
| // $enable-gradients: false !default; |
| // $enable-transitions: true !default; |
| // $enable-reduced-motion: true !default; |
| // $enable-smooth-scroll: true !default; |
| // $enable-grid-classes: true !default; |
| // $enable-container-classes: true !default; |
| // $enable-cssgrid: false !default; |
| // $enable-button-pointers: true !default; |
| // $enable-rfs: true !default; |
| // $enable-validation-icons: true !default; |
| // $enable-negative-margins: false !default; |
| // $enable-deprecation-messages: true !default; |
| |
| // $enable-dark-mode: true !default; |
| // $color-mode-type: data !default; // `data` or `media-query` |
| |
| // // Prefix for :root CSS variables |
| // $prefix: bs- !default; |
| |
| // $color-mode-type: "media-query" !default; |
| // $color-contrast-dark: #000 !default; |
| // $color-contrast-light: #fff !default; |
| // $min-contrast-ratio: 4.5 !default; |
| |
| |
| // Gradient |
| // |
| // The gradient which is added to components if `$enable-gradients` is `true` |
| // This gradient is also added to elements with `.bg-gradient` |
| // scss-docs-start variable-gradient |
| $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default; |
| // scss-docs-end variable-gradient |
| |
| // Spacing |
| // |
| // Control the default styling of most Bootstrap elements by modifying these |
| // variables. Mostly focused on spacing. |
| // You can add more entries to the $spacers map, should you need more variation. |
| |
| // scss-docs-start spacer-variables-maps |
| $spacer: 1rem !default; |
| $spacers: ( |
| 0: 0, |
| 1: $spacer * .25, |
| 2: $spacer * .5, |
| 3: $spacer, |
| 4: $spacer * 1.5, |
| 5: $spacer * 3, |
| ) !default; |
| // scss-docs-end spacer-variables-maps |
| |
| // Position |
| // |
| // Define the edge positioning anchors of the position utilities. |
| |
| // scss-docs-start position-map |
| $position-values: ( |
| 0: 0, |
| 50: 50%, |
| 100: 100% |
| ) !default; |
| // scss-docs-end position-map |
| |
| // Body |
| // |
| // Settings for the `<body>` element. |
| |
| $body-text-align: null !default; |
| $body-color: var(--#{$prefix}color-body) !default; |
| $body-bg: var(--#{$prefix}bg-body) !default; |
| |
| $body-secondary-color: var(--#{$prefix}color-secondary) !default; |
| $body-secondary-bg: var(--#{$prefix}bg-secondary) !default; |
| |
| $body-tertiary-color: var(--#{$prefix}color-muted) !default; |
| $body-tertiary-bg: var(--#{$prefix}bg-muted) !default; |
| |
| $body-emphasis-color: $black !default; |
| |
| // Links |
| // |
| // Style anchor elements. |
| |
| // $link-color: var !default; |
| $link-decoration: underline !default; |
| $link-underline-offset: .2em !default; |
| $link-shade-percentage: 20% !default; |
| // $link-hover-color: shift-color($link-color, $link-shade-percentage) !default; |
| // $link-hover-decoration: $link-decoration !default; |
| |
| $stretched-link-pseudo-element: after !default; |
| $stretched-link-z-index: 1 !default; |
| |
| // Icon links |
| // scss-docs-start icon-link-variables |
| $icon-link-gap: .375rem !default; |
| $icon-link-underline-offset: .25em !default; |
| $icon-link-icon-size: 1em !default; |
| $icon-link-icon-transition: .2s ease-in-out transform !default; |
| $icon-link-icon-transform: translate3d(.25em, 0, 0) !default; |
| // scss-docs-end icon-link-variables |
| |
| // Paragraphs |
| // |
| // Style p element. |
| |
| $paragraph-margin-bottom: 1rem !default; |
| |
| |
| // Components |
| // |
| // Define common padding and border radius sizes and more. |
| |
| // scss-docs-start border-variables |
| $border-width: 1px !default; |
| $border-widths: ( |
| 1: 1px, |
| 2: 2px, |
| 3: 3px, |
| 4: 4px, |
| 5: 5px |
| ) !default; |
| $border-style: solid !default; |
| $border-color: color-mix(in oklch, var(--#{$prefix}gray-100), var(--#{$prefix}gray-200)) !default; |
| $border-color-translucent: rgba($black, .175) !default; |
| // scss-docs-end border-variables |
| |
| // scss-docs-start border-radius-variables |
| $border-radius: .375rem !default; |
| $border-radius-sm: .25rem !default; |
| $border-radius-lg: .5rem !default; |
| $border-radius-xl: 1rem !default; |
| $border-radius-2xl: 2rem !default; |
| $border-radius-pill: 50rem !default; |
| // scss-docs-end border-radius-variables |
| |
| // scss-docs-start box-shadow-variables |
| $box-shadow: 0 .5rem 1rem rgba($black, .15) !default; |
| $box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default; |
| $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default; |
| $box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default; |
| // scss-docs-end box-shadow-variables |
| |
| // scss-docs-start focus-ring-variables |
| $focus-ring-width: .25rem !default; |
| $focus-ring-opacity: .25 !default; |
| $focus-ring-color: var(--#{$prefix}primary-focus-ring) !default; |
| $focus-ring-blur: 0 !default; |
| $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default; |
| // scss-docs-end focus-ring-variables |
| |
| $component-active-color: var(--#{$prefix}primary-contrast) !default; |
| $component-active-bg: var(--#{$prefix}primary-bg) !default; |
| |
| $transition-base: all .2s ease-in-out !default; |
| $transition-fade: opacity .15s linear !default; |
| // scss-docs-start collapse-transition |
| $transition-collapse: height .35s ease !default; |
| $transition-collapse-width: width .35s ease !default; |
| // scss-docs-end collapse-transition |
| |
| // scss-docs-start aspect-ratios |
| $aspect-ratios: ( |
| "auto": auto, |
| "1x1": #{"1 / 1"}, |
| "4x3": #{"4 / 3"}, |
| "16x9": #{"16 / 9"}, |
| "21x9": #{"21 / 9"} |
| ) !default; |
| // scss-docs-end aspect-ratios |
| |
| // Typography |
| // |
| // Font, line-height, and color for body text, headings, and more. |
| |
| // scss-docs-start font-variables |
| // stylelint-disable value-keyword-case |
| $font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; |
| $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; |
| // stylelint-enable value-keyword-case |
| $font-family-base: var(--#{$prefix}font-sans-serif) !default; |
| $font-family-code: var(--#{$prefix}font-monospace) !default; |
| |
| // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins |
| // $font-size-base affects the font size of the body text |
| $font-size-root: 16px !default; |
| $font-size-base: 14px !default; // Assumes the browser default, typically `16px` |
| $font-size-sm: $font-size-base * .875 !default; |
| $font-size-lg: $font-size-base * 1.25 !default; |
| |
| $font-weight-lighter: lighter !default; |
| $font-weight-light: 300 !default; |
| $font-weight-normal: 400 !default; |
| $font-weight-medium: 500 !default; |
| $font-weight-semibold: 600 !default; |
| $font-weight-bold: 700 !default; |
| $font-weight-bolder: bolder !default; |
| |
| $font-weight-base: $font-weight-normal !default; |
| |
| $line-height-base: 1.5 !default; |
| $line-height-sm: 1.25 !default; |
| $line-height-lg: 2 !default; |
| |
| $h1-font-size: var(--#{$prefix}font-size-3xl) !default; |
| $h2-font-size: var(--#{$prefix}font-size-2xl) !default; |
| $h3-font-size: var(--#{$prefix}font-size-xl) !default; |
| $h4-font-size: var(--#{$prefix}font-size-lg) !default; |
| $h5-font-size: var(--#{$prefix}font-size-md) !default; |
| $h6-font-size: var(--#{$prefix}font-size-sm) !default; |
| // scss-docs-end font-variables |
| |
| // Font sizes with line-height for utilities |
| $font-sizes: ( |
| "xs": ( |
| "font-size": var(--#{$prefix}font-size-xs), |
| "line-height": var(--#{$prefix}line-height-xs) |
| ), |
| "sm": ( |
| "font-size": var(--#{$prefix}font-size-sm), |
| "line-height": var(--#{$prefix}line-height-sm) |
| ), |
| "md": ( |
| "font-size": var(--#{$prefix}font-size-md), |
| "line-height": var(--#{$prefix}line-height-md) |
| ), |
| "lg": ( |
| "font-size": var(--#{$prefix}font-size-lg), |
| "line-height": var(--#{$prefix}line-height-lg) |
| ), |
| "xl": ( |
| "font-size": var(--#{$prefix}font-size-xl), |
| "line-height": var(--#{$prefix}line-height-xl) |
| ), |
| "2xl": ( |
| "font-size": var(--#{$prefix}font-size-2xl), |
| "line-height": var(--#{$prefix}line-height-2xl) |
| ), |
| "3xl": ( |
| "font-size": var(--#{$prefix}font-size-3xl), |
| "line-height": var(--#{$prefix}line-height-3xl) |
| ), |
| "4xl": ( |
| "font-size": var(--#{$prefix}font-size-4xl), |
| "line-height": var(--#{$prefix}line-height-4xl) |
| ), |
| "5xl": ( |
| "font-size": var(--#{$prefix}font-size-5xl), |
| "line-height": var(--#{$prefix}line-height-5xl) |
| ), |
| "6xl": ( |
| "font-size": var(--#{$prefix}font-size-6xl), |
| "line-height": var(--#{$prefix}line-height-6xl) |
| ), |
| ) !default; |
| |
| // scss-docs-start headings-variables |
| $headings-margin-bottom: $spacer * .5 !default; |
| $headings-font-family: null !default; |
| $headings-font-style: null !default; |
| $headings-font-weight: 500 !default; |
| $headings-line-height: 1.2 !default; |
| $headings-color: inherit !default; |
| // scss-docs-end headings-variables |
| |
| // scss-docs-start type-variables |
| $small-font-size: .875em !default; |
| |
| $sub-sup-font-size: .75em !default; |
| |
| $initialism-font-size: $small-font-size !default; |
| |
| $blockquote-margin-y: $spacer !default; |
| $blockquote-font-size: $font-size-base * 1.25 !default; |
| $blockquote-footer-color: var(--#{$prefix}gray-600) !default; |
| $blockquote-footer-font-size: $small-font-size !default; |
| |
| $hr-margin-y: $spacer !default; |
| $hr-color: inherit !default; |
| |
| $hr-border-color: null !default; // Allows for inherited colors |
| $hr-border-width: var(--#{$prefix}border-width) !default; |
| $hr-opacity: .25 !default; |
| |
| // scss-docs-start vr-variables |
| $vr-border-width: var(--#{$prefix}border-width) !default; |
| // scss-docs-end vr-variables |
| |
| $legend-margin-bottom: .5rem !default; |
| $legend-font-size: 1.5rem !default; |
| $legend-font-weight: null !default; |
| |
| $dt-font-weight: $font-weight-bold !default; |
| |
| $list-inline-padding: .5rem !default; |
| |
| $mark-padding: .1875em !default; |
| $mark-color: $body-color !default; |
| $mark-bg: var(--#{$prefix}yellow-100) !default; |
| // scss-docs-end type-variables |
| |
| |
| // Buttons + Forms |
| // |
| // Shared variables that are reassigned to `$input-` and `$btn-` specific variables. |
| |
| // 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: .25em !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 |
| |
| |
| // Buttons |
| // |
| // For each of Bootstrap's buttons, define text, background, and border color. |
| |
| // scss-docs-start btn-variables |
| $btn-color: var(--#{$prefix}color-body) !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: var(--#{$prefix}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 |
| |
| |
| // Z-index master list |
| // |
| // Warning: Avoid customizing these values. They're used for a bird's eye view |
| // of components dependent on the z-axis and are designed to all work together. |
| |
| // scss-docs-start zindex-stack |
| $zindex-dropdown: 1000 !default; |
| $zindex-sticky: 1020 !default; |
| $zindex-fixed: 1030 !default; |
| $zindex-offcanvas-backdrop: 1040 !default; |
| $zindex-offcanvas: 1045 !default; |
| $zindex-modal-backdrop: 1050 !default; |
| $zindex-modal: 1055 !default; |
| $zindex-popover: 1070 !default; |
| $zindex-tooltip: 1080 !default; |
| $zindex-toast: 1090 !default; |
| // scss-docs-end zindex-stack |
| |
| // scss-docs-start zindex-levels-map |
| $zindex-levels: ( |
| n1: -1, |
| 0: 0, |
| 1: 1, |
| 2: 2, |
| 3: 3 |
| ) !default; |
| // scss-docs-end zindex-levels-map |
| |
| |
| // Modals |
| |
| // scss-docs-start modal-variables |
| $modal-inner-padding: $spacer !default; |
| |
| $modal-footer-margin-between: .5rem !default; |
| |
| $modal-dialog-margin: .5rem !default; |
| $modal-dialog-margin-y-sm-up: 1.75rem !default; |
| |
| $modal-title-line-height: $line-height-base !default; |
| |
| $modal-content-color: var(--#{$prefix}color-body) !default; |
| $modal-content-bg: var(--#{$prefix}bg-body) !default; |
| $modal-content-border-color: var(--#{$prefix}border-color-translucent) !default; |
| $modal-content-border-width: var(--#{$prefix}border-width) !default; |
| $modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default; |
| $modal-content-inner-border-radius: calc(#{$modal-content-border-radius} - #{$modal-content-border-width}) !default; |
| $modal-content-box-shadow-xs: var(--#{$prefix}box-shadow-sm) !default; |
| $modal-content-box-shadow-sm-up: var(--#{$prefix}box-shadow) !default; |
| |
| $modal-backdrop-bg: $black !default; |
| $modal-backdrop-opacity: .5 !default; |
| |
| $modal-header-border-color: var(--#{$prefix}border-color) !default; |
| $modal-header-border-width: $modal-content-border-width !default; |
| $modal-header-padding-y: $modal-inner-padding !default; |
| $modal-header-padding-x: $modal-inner-padding !default; |
| $modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility |
| |
| $modal-footer-bg: null !default; |
| $modal-footer-border-color: $modal-header-border-color !default; |
| $modal-footer-border-width: $modal-header-border-width !default; |
| |
| $modal-sm: 300px !default; |
| $modal-md: 500px !default; |
| $modal-lg: 800px !default; |
| $modal-xl: 1200px !default; |
| |
| $modal-fade-transform: translate(0, -50px) !default; |
| $modal-show-transform: none !default; |
| $modal-transition: transform .3s ease-out !default; |
| $modal-scale-transform: scale(1.02) !default; |
| // scss-docs-end modal-variables |
| |
| // Offcanvas |
| |
| // scss-docs-start offcanvas-variables |
| $offcanvas-padding-y: $modal-inner-padding !default; |
| $offcanvas-padding-x: $modal-inner-padding !default; |
| $offcanvas-horizontal-width: 400px !default; |
| $offcanvas-vertical-height: 30vh !default; |
| $offcanvas-transition-duration: .3s !default; |
| $offcanvas-border-color: $modal-content-border-color !default; |
| $offcanvas-border-width: $modal-content-border-width !default; |
| $offcanvas-title-line-height: $modal-title-line-height !default; |
| $offcanvas-bg-color: var(--#{$prefix}bg-body) !default; |
| $offcanvas-color: var(--#{$prefix}color-body) !default; |
| $offcanvas-box-shadow: $modal-content-box-shadow-xs !default; |
| $offcanvas-backdrop-bg: $modal-backdrop-bg !default; |
| $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default; |
| // scss-docs-end offcanvas-variables |
| |
| // Code |
| |
| $code-font-size: 95% !default; |
| $code-color: var(--#{$prefix}secondary-text) !default; |
| |
| $kbd-padding-y: .1875rem !default; |
| $kbd-padding-x: .375rem !default; |
| $kbd-font-size: $code-font-size !default; |
| $kbd-color: var(--#{$prefix}bg-body) !default; |
| $kbd-bg: var(--#{$prefix}color-body) !default; |
| |
| $pre-color: null !default; |
| |
| // Dark color mode variables |
| // |
| // Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need. |
| |
| // |
| // Global colors |
| // |
| |
| // scss-docs-start sass-dark-mode-vars |
| // $body-color-dark: var(--#{$prefix}gray-200) !default; |
| // $body-bg-dark: var(--#{$prefix}gray-975) !default; |
| // $body-secondary-color-dark: rgba($body-color-dark, .75) !default; |
| // $body-secondary-bg-dark: var(--#{$prefix}gray-800) !default; |
| // $body-tertiary-color-dark: rgba($body-color-dark, .5) !default; |
| $body-tertiary-bg-dark: color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-900)) !default; |
| $body-emphasis-color-dark: $white !default; |
| $border-color-dark: var(--#{$prefix}gray-700) !default; |
| $border-color-translucent-dark: rgba($white, .15) !default; |
| $headings-color-dark: inherit !default; |
| // $mark-color-dark: $body-color-dark !default; |
| $mark-bg-dark: var(--#{$prefix}yellow-800) !default; |
| |
| |
| // |
| // Forms |
| // |
| |
| // scss-docs-start form-validation-colors-dark |
| $form-valid-color-dark: var(--#{$prefix}green-300) !default; |
| $form-valid-border-color-dark: var(--#{$prefix}green-300) !default; |
| $form-invalid-color-dark: var(--#{$prefix}red-300) !default; |
| $form-invalid-border-color-dark: var(--#{$prefix}red-300) !default; |
| // scss-docs-end form-validation-colors-dark |
| // scss-docs-end sass-dark-mode-vars |
