mirror of https://github.com/twbs/bootstrap.git
598 lines
22 KiB
SCSS
598 lines
22 KiB
SCSS
@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: $gray-600 !default;
|
|
$success: $green-500 !default;
|
|
$info: $cyan-500 !default;
|
|
$warning: $yellow-500 !default;
|
|
$danger: $red-500 !default;
|
|
$light: $gray-100 !default;
|
|
$dark: $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
|
|
|
|
// // scss-docs-start theme-text-variables
|
|
// $primary-text-emphasis: shade-color($primary, 60%) !default;
|
|
// $secondary-text-emphasis: shade-color($secondary, 60%) !default;
|
|
// $success-text-emphasis: shade-color($success, 60%) !default;
|
|
// $info-text-emphasis: shade-color($info, 60%) !default;
|
|
// $warning-text-emphasis: shade-color($warning, 60%) !default;
|
|
// $danger-text-emphasis: shade-color($danger, 60%) !default;
|
|
// $light-text-emphasis: $gray-700 !default;
|
|
// $dark-text-emphasis: $gray-700 !default;
|
|
// // scss-docs-end theme-text-variables
|
|
|
|
// // scss-docs-start theme-bg-subtle-variables
|
|
// $primary-bg-subtle: tint-color($primary, 80%) !default;
|
|
// $secondary-bg-subtle: tint-color($secondary, 80%) !default;
|
|
// $success-bg-subtle: tint-color($success, 80%) !default;
|
|
// $info-bg-subtle: tint-color($info, 80%) !default;
|
|
// $warning-bg-subtle: tint-color($warning, 80%) !default;
|
|
// $danger-bg-subtle: tint-color($danger, 80%) !default;
|
|
// $light-bg-subtle: color.mix($gray-100, $white) !default;
|
|
// $dark-bg-subtle: $gray-400 !default;
|
|
// // scss-docs-end theme-bg-subtle-variables
|
|
|
|
// // scss-docs-start theme-border-subtle-variables
|
|
// $primary-border-subtle: tint-color($primary, 60%) !default;
|
|
// $secondary-border-subtle: tint-color($secondary, 60%) !default;
|
|
// $success-border-subtle: tint-color($success, 60%) !default;
|
|
// $info-border-subtle: tint-color($info, 60%) !default;
|
|
// $warning-border-subtle: tint-color($warning, 60%) !default;
|
|
// $danger-border-subtle: tint-color($danger, 60%) !default;
|
|
// $light-border-subtle: $gray-200 !default;
|
|
// $dark-border-subtle: $gray-500 !default;
|
|
// // scss-docs-end theme-border-subtle-variables
|
|
|
|
// 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: $gray-900 !default;
|
|
$body-bg: $white !default;
|
|
|
|
$body-secondary-color: rgba($body-color, .75) !default;
|
|
$body-secondary-bg: $gray-200 !default;
|
|
|
|
$body-tertiary-color: rgba($body-color, .5) !default;
|
|
$body-tertiary-bg: $gray-100 !default;
|
|
|
|
$body-emphasis-color: $black !default;
|
|
|
|
// Links
|
|
//
|
|
// Style anchor elements.
|
|
|
|
$link-color: $primary !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: null !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($gray-300, $gray-400) !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-xxl: 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
|
|
|
|
$component-active-color: $white !default;
|
|
$component-active-bg: $primary !default;
|
|
|
|
// scss-docs-start focus-ring-variables
|
|
$focus-ring-width: .25rem !default;
|
|
$focus-ring-opacity: .25 !default;
|
|
$focus-ring-color: rgba($primary, $focus-ring-opacity) !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
|
|
|
|
$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: $font-size-base * 2.5 !default;
|
|
$h2-font-size: $font-size-base * 2 !default;
|
|
$h3-font-size: $font-size-base * 1.75 !default;
|
|
$h4-font-size: $font-size-base * 1.5 !default;
|
|
$h5-font-size: $font-size-base * 1.25 !default;
|
|
$h6-font-size: $font-size-base !default;
|
|
// scss-docs-end font-variables
|
|
|
|
// scss-docs-start font-sizes
|
|
$font-sizes: (
|
|
1: $h1-font-size,
|
|
2: $h2-font-size,
|
|
3: $h3-font-size,
|
|
4: $h4-font-size,
|
|
5: $h5-font-size,
|
|
6: $h6-font-size
|
|
) !default;
|
|
// scss-docs-end font-sizes
|
|
|
|
// 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 display-headings
|
|
$display-font-sizes: (
|
|
1: 5rem,
|
|
2: 4.5rem,
|
|
3: 4rem,
|
|
4: 3.5rem,
|
|
5: 3rem,
|
|
6: 2.5rem
|
|
) !default;
|
|
|
|
$display-font-family: null !default;
|
|
$display-font-style: null !default;
|
|
$display-font-weight: 300 !default;
|
|
$display-line-height: $headings-line-height !default;
|
|
// scss-docs-end display-headings
|
|
|
|
// scss-docs-start type-variables
|
|
$lead-font-size: $font-size-base * 1.25 !default;
|
|
$lead-font-weight: 300 !default;
|
|
|
|
$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: $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: $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: $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
|
|
|
|
|
|
// Buttons
|
|
//
|
|
// For each of Bootstrap's buttons, define text, background, and border color.
|
|
|
|
// 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
|
|
|
|
|
|
// 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}body-color) !default;
|
|
$modal-content-bg: var(--#{$prefix}body-bg) !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: 1140px !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}body-bg) !default;
|
|
$offcanvas-color: var(--#{$prefix}body-color) !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}body-bg) !default;
|
|
$kbd-bg: var(--#{$prefix}body-color) !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: $gray-300 !default;
|
|
$body-bg-dark: $gray-900 !default;
|
|
$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
|
|
$body-secondary-bg-dark: $gray-800 !default;
|
|
$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
|
|
$body-tertiary-bg-dark: color.mix($gray-800, $gray-900, 50%) !default;
|
|
$body-emphasis-color-dark: $white !default;
|
|
$border-color-dark: $gray-700 !default;
|
|
$border-color-translucent-dark: rgba($white, .15) !default;
|
|
$headings-color-dark: inherit !default;
|
|
$link-color-dark: tint-color($primary, 40%) !default;
|
|
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
|
|
// $code-color-dark: tint-color($code-color, 40%) !default;
|
|
$mark-color-dark: $body-color-dark !default;
|
|
$mark-bg-dark: $yellow-800 !default;
|
|
|
|
|
|
//
|
|
// Forms
|
|
//
|
|
|
|
// scss-docs-start form-validation-colors-dark
|
|
$form-valid-color-dark: $green-300 !default;
|
|
$form-valid-border-color-dark: $green-300 !default;
|
|
$form-invalid-color-dark: $red-300 !default;
|
|
$form-invalid-border-color-dark: $red-300 !default;
|
|
// scss-docs-end form-validation-colors-dark
|
|
// scss-docs-end sass-dark-mode-vars
|