// Variables // // Variables should follow the `$component-state-property-size` formula for // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. // Color system // scss-docs-start gray-color-variables $white: #fff !default; $gray-100: #f8f9fa !default; $gray-200: #e9ecef !default; $gray-300: #dee2e6 !default; $gray-400: #ced4da !default; $gray-500: #adb5bd !default; $gray-600: #6c757d !default; $gray-700: #495057 !default; $gray-800: #343a40 !default; $gray-900: #212529 !default; $black: #000 !default; // scss-docs-end gray-color-variables // fusv-disable // scss-docs-start gray-colors-map $grays: ( "100": $gray-100, "200": $gray-200, "300": $gray-300, "400": $gray-400, "500": $gray-500, "600": $gray-600, "700": $gray-700, "800": $gray-800, "900": $gray-900 ) !default; // scss-docs-end gray-colors-map // fusv-enable // scss-docs-start color-variables $blue: #0d6efd !default; $indigo: #6610f2 !default; $purple: #6f42c1 !default; $pink: #d63384 !default; $red: #dc3545 !default; $orange: #fd7e14 !default; $yellow: #ffc107 !default; $green: #198754 !default; $teal: #20c997 !default; $cyan: #0dcaf0 !default; // scss-docs-end color-variables // scss-docs-start colors-map $colors: ( "blue": $blue, "indigo": $indigo, "purple": $purple, "pink": $pink, "red": $red, "orange": $orange, "yellow": $yellow, "green": $green, "teal": $teal, "cyan": $cyan, "white": $white, "gray": $gray-600, "gray-dark": $gray-800 ) !default; // scss-docs-end colors-map // scss-docs-start theme-color-variables $primary: $blue !default; $secondary: $gray-600 !default; $success: $green !default; $info: $cyan !default; $warning: $yellow !default; $danger: $red !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-colors-rgb $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default; // scss-docs-end theme-colors-rgb // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7. // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast $min-contrast-ratio: 4.5 !default; // Customize the light and dark text colors for use in our color contrast function. $color-contrast-dark: $black !default; $color-contrast-light: $white !default; // fusv-disable $blue-100: tint-color($blue, 80%) !default; $blue-200: tint-color($blue, 60%) !default; $blue-300: tint-color($blue, 40%) !default; $blue-400: tint-color($blue, 20%) !default; $blue-500: $blue !default; $blue-600: shade-color($blue, 20%) !default; $blue-700: shade-color($blue, 40%) !default; $blue-800: shade-color($blue, 60%) !default; $blue-900: shade-color($blue, 80%) !default; $indigo-100: tint-color($indigo, 80%) !default; $indigo-200: tint-color($indigo, 60%) !default; $indigo-300: tint-color($indigo, 40%) !default; $indigo-400: tint-color($indigo, 20%) !default; $indigo-500: $indigo !default; $indigo-600: shade-color($indigo, 20%) !default; $indigo-700: shade-color($indigo, 40%) !default; $indigo-800: shade-color($indigo, 60%) !default; $indigo-900: shade-color($indigo, 80%) !default; $purple-100: tint-color($purple, 80%) !default; $purple-200: tint-color($purple, 60%) !default; $purple-300: tint-color($purple, 40%) !default; $purple-400: tint-color($purple, 20%) !default; $purple-500: $purple !default; $purple-600: shade-color($purple, 20%) !default; $purple-700: shade-color($purple, 40%) !default; $purple-800: shade-color($purple, 60%) !default; $purple-900: shade-color($purple, 80%) !default; $pink-100: tint-color($pink, 80%) !default; $pink-200: tint-color($pink, 60%) !default; $pink-300: tint-color($pink, 40%) !default; $pink-400: tint-color($pink, 20%) !default; $pink-500: $pink !default; $pink-600: shade-color($pink, 20%) !default; $pink-700: shade-color($pink, 40%) !default; $pink-800: shade-color($pink, 60%) !default; $pink-900: shade-color($pink, 80%) !default; $red-100: tint-color($red, 80%) !default; $red-200: tint-color($red, 60%) !default; $red-300: tint-color($red, 40%) !default; $red-400: tint-color($red, 20%) !default; $red-500: $red !default; $red-600: shade-color($red, 20%) !default; $red-700: shade-color($red, 40%) !default; $red-800: shade-color($red, 60%) !default; $red-900: shade-color($red, 80%) !default; $orange-100: tint-color($orange, 80%) !default; $orange-200: tint-color($orange, 60%) !default; $orange-300: tint-color($orange, 40%) !default; $orange-400: tint-color($orange, 20%) !default; $orange-500: $orange !default; $orange-600: shade-color($orange, 20%) !default; $orange-700: shade-color($orange, 40%) !default; $orange-800: shade-color($orange, 60%) !default; $orange-900: shade-color($orange, 80%) !default; $yellow-100: tint-color($yellow, 80%) !default; $yellow-200: tint-color($yellow, 60%) !default; $yellow-300: tint-color($yellow, 40%) !default; $yellow-400: tint-color($yellow, 20%) !default; $yellow-500: $yellow !default; $yellow-600: shade-color($yellow, 20%) !default; $yellow-700: shade-color($yellow, 40%) !default; $yellow-800: shade-color($yellow, 60%) !default; $yellow-900: shade-color($yellow, 80%) !default; $green-100: tint-color($green, 80%) !default; $green-200: tint-color($green, 60%) !default; $green-300: tint-color($green, 40%) !default; $green-400: tint-color($green, 20%) !default; $green-500: $green !default; $green-600: shade-color($green, 20%) !default; $green-700: shade-color($green, 40%) !default; $green-800: shade-color($green, 60%) !default; $green-900: shade-color($green, 80%) !default; $teal-100: tint-color($teal, 80%) !default; $teal-200: tint-color($teal, 60%) !default; $teal-300: tint-color($teal, 40%) !default; $teal-400: tint-color($teal, 20%) !default; $teal-500: $teal !default; $teal-600: shade-color($teal, 20%) !default; $teal-700: shade-color($teal, 40%) !default; $teal-800: shade-color($teal, 60%) !default; $teal-900: shade-color($teal, 80%) !default; $cyan-100: tint-color($cyan, 80%) !default; $cyan-200: tint-color($cyan, 60%) !default; $cyan-300: tint-color($cyan, 40%) !default; $cyan-400: tint-color($cyan, 20%) !default; $cyan-500: $cyan !default; $cyan-600: shade-color($cyan, 20%) !default; $cyan-700: shade-color($cyan, 40%) !default; $cyan-800: shade-color($cyan, 60%) !default; $cyan-900: shade-color($cyan, 80%) !default; $blues: ( "blue-100": $blue-100, "blue-200": $blue-200, "blue-300": $blue-300, "blue-400": $blue-400, "blue-500": $blue-500, "blue-600": $blue-600, "blue-700": $blue-700, "blue-800": $blue-800, "blue-900": $blue-900 ) !default; $indigos: ( "indigo-100": $indigo-100, "indigo-200": $indigo-200, "indigo-300": $indigo-300, "indigo-400": $indigo-400, "indigo-500": $indigo-500, "indigo-600": $indigo-600, "indigo-700": $indigo-700, "indigo-800": $indigo-800, "indigo-900": $indigo-900 ) !default; $purples: ( "purple-100": $purple-200, "purple-200": $purple-100, "purple-300": $purple-300, "purple-400": $purple-400, "purple-500": $purple-500, "purple-600": $purple-600, "purple-700": $purple-700, "purple-800": $purple-800, "purple-900": $purple-900 ) !default; $pinks: ( "pink-100": $pink-100, "pink-200": $pink-200, "pink-300": $pink-300, "pink-400": $pink-400, "pink-500": $pink-500, "pink-600": $pink-600, "pink-700": $pink-700, "pink-800": $pink-800, "pink-900": $pink-900 ) !default; $reds: ( "red-100": $red-100, "red-200": $red-200, "red-300": $red-300, "red-400": $red-400, "red-500": $red-500, "red-600": $red-600, "red-700": $red-700, "red-800": $red-800, "red-900": $red-900 ) !default; $oranges: ( "orange-100": $orange-100, "orange-200": $orange-200, "orange-300": $orange-300, "orange-400": $orange-400, "orange-500": $orange-500, "orange-600": $orange-600, "orange-700": $orange-700, "orange-800": $orange-800, "orange-900": $orange-900 ) !default; $yellows: ( "yellow-100": $yellow-100, "yellow-200": $yellow-200, "yellow-300": $yellow-300, "yellow-400": $yellow-400, "yellow-500": $yellow-500, "yellow-600": $yellow-600, "yellow-700": $yellow-700, "yellow-800": $yellow-800, "yellow-900": $yellow-900 ) !default; $greens: ( "green-100": $green-100, "green-200": $green-200, "green-300": $green-300, "green-400": $green-400, "green-500": $green-500, "green-600": $green-600, "green-700": $green-700, "green-800": $green-800, "green-900": $green-900 ) !default; $teals: ( "teal-100": $teal-100, "teal-200": $teal-200, "teal-300": $teal-300, "teal-400": $teal-400, "teal-500": $teal-500, "teal-600": $teal-600, "teal-700": $teal-700, "teal-800": $teal-800, "teal-900": $teal-900 ) !default; $cyans: ( "cyan-100": $cyan-100, "cyan-200": $cyan-200, "cyan-300": $cyan-300, "cyan-400": $cyan-400, "cyan-500": $cyan-500, "cyan-600": $cyan-600, "cyan-700": $cyan-700, "cyan-800": $cyan-800, "cyan-900": $cyan-900 ) !default; // fusv-enable // 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-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-important-utilities: true !default; // Prefix for :root CSS variables $variable-prefix: bs- !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; $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !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-bg: $white !default; $body-color: $gray-900 !default; $body-text-align: null !default; // Utilities maps // // Extends the default `$theme-colors` maps to help create our utilities. // Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign. // scss-docs-start utilities-colors $utilities-colors: $theme-colors-rgb !default; // scss-docs-end utilities-colors // scss-docs-start utilities-text-colors $utilities-text: map-merge( $utilities-colors, ( "black": to-rgb($black), "white": to-rgb($white), "body": to-rgb($body-color) ) ) !default; $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default; // scss-docs-end utilities-text-colors // scss-docs-start utilities-bg-colors $utilities-bg: map-merge( $utilities-colors, ( "black": to-rgb($black), "white": to-rgb($white), "body": to-rgb($body-bg) ) ) !default; $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default; // scss-docs-end utilities-bg-colors // Links // // Style anchor elements. $link-color: $primary !default; $link-decoration: underline !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; // Paragraphs // // Style p element. $paragraph-margin-bottom: 1rem !default; // Grid breakpoints // // Define the minimum dimensions at which your layout will change, // adapting to different screen sizes, for use in media queries. // scss-docs-start grid-breakpoints $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default; // scss-docs-end grid-breakpoints @include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints"); // Grid containers // // Define the maximum width of `.container` for different screen sizes. // scss-docs-start container-max-widths $container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px ) !default; // scss-docs-end container-max-widths @include _assert-ascending($container-max-widths, "$container-max-widths"); // Grid columns // // Set the number of columns and specify the width of the gutters. $grid-columns: 12 !default; $grid-gutter-width: 1.5rem !default; $grid-row-columns: 6 !default; $gutters: $spacers !default; // Container padding $container-padding-x: $grid-gutter-width * .5 !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-color: $gray-300 !default; // scss-docs-end border-variables // scss-docs-start border-radius-variables $border-radius: .25rem !default; $border-radius-sm: .2rem !default; $border-radius-lg: .3rem !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 caret-variables $caret-width: .3em !default; $caret-vertical-align: $caret-width * .85 !default; $caret-spacing: $caret-width * .85 !default; // scss-docs-end caret-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 // stylelint-disable function-disallowed-list // scss-docs-start aspect-ratios $aspect-ratios: ( "1x1": 100%, "4x3": calc(3 / 4 * 100%), "16x9": calc(9 / 16 * 100%), "21x9": calc(9 / 21 * 100%) ) !default; // scss-docs-end aspect-ratios // stylelint-enable function-disallowed-list // 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", Arial, "Noto Sans", "Liberation Sans", 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(--#{$variable-prefix}font-sans-serif) !default; $font-family-code: var(--#{$variable-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: null !default; $font-size-base: 1rem !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-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: null !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-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; $text-muted: $gray-600 !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-height: $border-width !default; $hr-opacity: .25 !default; $legend-margin-bottom: .5rem !default; $legend-font-size: 1.5rem !default; $legend-font-weight: null !default; $mark-padding: .2em !default; $dt-font-weight: $font-weight-bold !default; $nested-kbd-font-weight: $font-weight-bold !default; $list-inline-padding: .5rem !default; $mark-bg: #fcf8e3 !default; // scss-docs-end type-variables // Tables // // Customizes the `.table` component with basic values, each used across all table variations. // scss-docs-start table-variables $table-cell-padding-y: .5rem !default; $table-cell-padding-x: .5rem !default; $table-cell-padding-y-sm: .25rem !default; $table-cell-padding-x-sm: .25rem !default; $table-cell-vertical-align: top !default; $table-color: $body-color !default; $table-bg: transparent !default; $table-accent-bg: transparent !default; $table-th-font-weight: null !default; $table-striped-color: $table-color !default; $table-striped-bg-factor: .05 !default; $table-striped-bg: rgba($black, $table-striped-bg-factor) !default; $table-active-color: $table-color !default; $table-active-bg-factor: .1 !default; $table-active-bg: rgba($black, $table-active-bg-factor) !default; $table-hover-color: $table-color !default; $table-hover-bg-factor: .075 !default; $table-hover-bg: rgba($black, $table-hover-bg-factor) !default; $table-border-factor: .1 !default; $table-border-width: $border-width !default; $table-border-color: $border-color !default; $table-striped-order: odd !default; $table-group-separator-color: currentColor !default; $table-caption-color: $text-muted !default; $table-bg-scale: -80% !default; // scss-docs-end table-variables // scss-docs-start table-loop $table-variants: ( "primary": shift-color($primary, $table-bg-scale), "secondary": shift-color($secondary, $table-bg-scale), "success": shift-color($success, $table-bg-scale), "info": shift-color($info, $table-bg-scale), "warning": shift-color($warning, $table-bg-scale), "danger": shift-color($danger, $table-bg-scale), "light": $light, "dark": $dark, ) !default; // scss-docs-end table-loop // 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: .25rem !default; $input-btn-focus-color-opacity: .25 !default; $input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default; $input-btn-focus-blur: 0 !default; $input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color !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: $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-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: $link-color !default; $btn-link-hover-color: $link-hover-color !default; $btn-link-disabled-color: $gray-600 !default; // Allows for customizing button radius independently from global border radius $btn-border-radius: $border-radius !default; $btn-border-radius-sm: $border-radius-sm !default; $btn-border-radius-lg: $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 // 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: $text-muted !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: $body-bg !default; $input-disabled-bg: $gray-200 !default; $input-disabled-border-color: null !default; $input-color: $body-color !default; $input-border-color: $gray-400 !default; $input-border-width: $input-btn-border-width !default; $input-box-shadow: $box-shadow-inset !default; $input-border-radius: $border-radius !default; $input-border-radius-sm: $border-radius-sm !default; $input-border-radius-lg: $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: $gray-600 !default; $input-plaintext-color: $body-color !default; $input-height-border: $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: 1px solid rgba($black, .25) !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: $input-btn-focus-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 10l3 3l6-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: $gray-200 !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: $gray-200 !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 5l6 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: $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: $gray-300 !default; $form-range-track-border-radius: 1rem !default; $form-range-track-box-shadow: $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: $gray-500 !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: $input-group-addon-bg !default; $form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !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-opacity: .65 !default; $form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !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.73L.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.1z'/></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-states $form-validation-states: ( "valid": ( "color": $form-feedback-valid-color, "icon": $form-feedback-icon-valid ), "invalid": ( "color": $form-feedback-invalid-color, "icon": $form-feedback-icon-invalid ) ) !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 // 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; // scss-docs-end zindex-stack // Navs // scss-docs-start nav-variables $nav-link-padding-y: .5rem !default; $nav-link-padding-x: 1rem !default; $nav-link-font-size: null !default; $nav-link-font-weight: null !default; $nav-link-color: $link-color !default; $nav-link-hover-color: $link-hover-color !default; $nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default; $nav-link-disabled-color: $gray-600 !default; $nav-tabs-border-color: $gray-300 !default; $nav-tabs-border-width: $border-width !default; $nav-tabs-border-radius: $border-radius !default; $nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default; $nav-tabs-link-active-color: $gray-700 !default; $nav-tabs-link-active-bg: $body-bg !default; $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default; $nav-pills-border-radius: $border-radius !default; $nav-pills-link-active-color: $component-active-color !default; $nav-pills-link-active-bg: $component-active-bg !default; // scss-docs-end nav-variables // Navbar // scss-docs-start navbar-variables $navbar-padding-y: $spacer * .5 !default; $navbar-padding-x: null !default; $navbar-nav-link-padding-x: .5rem !default; $navbar-brand-font-size: $font-size-lg !default; // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default; $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; $navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default; $navbar-brand-margin-end: 1rem !default; $navbar-toggler-padding-y: .25rem !default; $navbar-toggler-padding-x: .75rem !default; $navbar-toggler-font-size: $font-size-lg !default; $navbar-toggler-border-radius: $btn-border-radius !default; $navbar-toggler-focus-width: $btn-focus-width !default; $navbar-toggler-transition: box-shadow .15s ease-in-out !default; // scss-docs-end navbar-variables // scss-docs-start navbar-theme-variables $navbar-dark-color: rgba($white, .55) !default; $navbar-dark-hover-color: rgba($white, .75) !default; $navbar-dark-active-color: $white !default; $navbar-dark-disabled-color: rgba($white, .25) !default; $navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default; $navbar-dark-toggler-border-color: rgba($white, .1) !default; $navbar-light-color: rgba($black, .55) !default; $navbar-light-hover-color: rgba($black, .7) !default; $navbar-light-active-color: rgba($black, .9) !default; $navbar-light-disabled-color: rgba($black, .3) !default; $navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default; $navbar-light-toggler-border-color: rgba($black, .1) !default; $navbar-light-brand-color: $navbar-light-active-color !default; $navbar-light-brand-hover-color: $navbar-light-active-color !default; $navbar-dark-brand-color: $navbar-dark-active-color !default; $navbar-dark-brand-hover-color: $navbar-dark-active-color !default; // scss-docs-end navbar-theme-variables // Dropdowns // // Dropdown menu container and contents. // scss-docs-start dropdown-variables $dropdown-min-width: 10rem !default; $dropdown-padding-x: 0 !default; $dropdown-padding-y: .5rem !default; $dropdown-spacer: .125rem !default; $dropdown-font-size: $font-size-base !default; $dropdown-color: $body-color !default; $dropdown-bg: $white !default; $dropdown-border-color: rgba($black, .15) !default; $dropdown-border-radius: $border-radius !default; $dropdown-border-width: $border-width !default; $dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default; $dropdown-divider-bg: $dropdown-border-color !default; $dropdown-divider-margin-y: $spacer * .5 !default; $dropdown-box-shadow: $box-shadow !default; $dropdown-link-color: $gray-900 !default; $dropdown-link-hover-color: shade-color($dropdown-link-color, 10%) !default; $dropdown-link-hover-bg: $gray-200 !default; $dropdown-link-active-color: $component-active-color !default; $dropdown-link-active-bg: $component-active-bg !default; $dropdown-link-disabled-color: $gray-500 !default; $dropdown-item-padding-y: $spacer * .25 !default; $dropdown-item-padding-x: $spacer !default; $dropdown-header-color: $gray-600 !default; $dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default; // scss-docs-end dropdown-variables // scss-docs-start dropdown-dark-variables $dropdown-dark-color: $gray-300 !default; $dropdown-dark-bg: $gray-800 !default; $dropdown-dark-border-color: $dropdown-border-color !default; $dropdown-dark-divider-bg: $dropdown-divider-bg !default; $dropdown-dark-box-shadow: null !default; $dropdown-dark-link-color: $dropdown-dark-color !default; $dropdown-dark-link-hover-color: $white !default; $dropdown-dark-link-hover-bg: rgba($white, .15) !default; $dropdown-dark-link-active-color: $dropdown-link-active-color !default; $dropdown-dark-link-active-bg: $dropdown-link-active-bg !default; $dropdown-dark-link-disabled-color: $gray-500 !default; $dropdown-dark-header-color: $gray-500 !default; // scss-docs-end dropdown-dark-variables // Pagination // scss-docs-start pagination-variables $pagination-padding-y: .375rem !default; $pagination-padding-x: .75rem !default; $pagination-padding-y-sm: .25rem !default; $pagination-padding-x-sm: .5rem !default; $pagination-padding-y-lg: .75rem !default; $pagination-padding-x-lg: 1.5rem !default; $pagination-color: $link-color !default; $pagination-bg: $white !default; $pagination-border-width: $border-width !default; $pagination-border-radius: $border-radius !default; $pagination-margin-start: -$pagination-border-width !default; $pagination-border-color: $gray-300 !default; $pagination-focus-color: $link-hover-color !default; $pagination-focus-bg: $gray-200 !default; $pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; $pagination-focus-outline: 0 !default; $pagination-hover-color: $link-hover-color !default; $pagination-hover-bg: $gray-200 !default; $pagination-hover-border-color: $gray-300 !default; $pagination-active-color: $component-active-color !default; $pagination-active-bg: $component-active-bg !default; $pagination-active-border-color: $pagination-active-bg !default; $pagination-disabled-color: $gray-600 !default; $pagination-disabled-bg: $white !default; $pagination-disabled-border-color: $gray-300 !default; $pagination-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; $pagination-border-radius-sm: $border-radius-sm !default; $pagination-border-radius-lg: $border-radius-lg !default; // scss-docs-end pagination-variables // Placeholders // scss-docs-start placeholders $placeholder-opacity-max: .5 !default; $placeholder-opacity-min: .2 !default; // scss-docs-end placeholders // Cards // scss-docs-start card-variables $card-spacer-y: $spacer !default; $card-spacer-x: $spacer !default; $card-title-spacer-y: $spacer * .5 !default; $card-border-width: $border-width !default; $card-border-color: rgba($black, .125) !default; $card-border-radius: $border-radius !default; $card-box-shadow: null !default; $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default; $card-cap-padding-y: $card-spacer-y * .5 !default; $card-cap-padding-x: $card-spacer-x !default; $card-cap-bg: rgba($black, .03) !default; $card-cap-color: null !default; $card-height: null !default; $card-color: null !default; $card-bg: $white !default; $card-img-overlay-padding: $spacer !default; $card-group-margin: $grid-gutter-width * .5 !default; // scss-docs-end card-variables // Accordion // scss-docs-start accordion-variables $accordion-padding-y: 1rem !default; $accordion-padding-x: 1.25rem !default; $accordion-color: $body-color !default; $accordion-bg: $body-bg !default; $accordion-border-width: $border-width !default; $accordion-border-color: rgba($black, .125) !default; $accordion-border-radius: $border-radius !default; $accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default; $accordion-body-padding-y: $accordion-padding-y !default; $accordion-body-padding-x: $accordion-padding-x !default; $accordion-button-padding-y: $accordion-padding-y !default; $accordion-button-padding-x: $accordion-padding-x !default; $accordion-button-color: $accordion-color !default; $accordion-button-bg: $accordion-bg !default; $accordion-transition: $btn-transition, border-radius .15s ease !default; $accordion-button-active-bg: tint-color($component-active-bg, 90%) !default; $accordion-button-active-color: shade-color($primary, 10%) !default; $accordion-button-focus-border-color: $input-focus-border-color !default; $accordion-button-focus-box-shadow: $btn-focus-box-shadow !default; $accordion-icon-width: 1.25rem !default; $accordion-icon-color: $accordion-button-color !default; $accordion-icon-active-color: $accordion-button-active-color !default; $accordion-icon-transition: transform .2s ease-in-out !default; $accordion-icon-transform: rotate(-180deg) !default; $accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default; $accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default; // scss-docs-end accordion-variables // Tooltips // scss-docs-start tooltip-variables $tooltip-font-size: $font-size-sm !default; $tooltip-max-width: 200px !default; $tooltip-color: $white !default; $tooltip-bg: $black !default; $tooltip-border-radius: $border-radius !default; $tooltip-opacity: .9 !default; $tooltip-padding-y: $spacer * .25 !default; $tooltip-padding-x: $spacer * .5 !default; $tooltip-margin: 0 !default; $tooltip-arrow-width: .8rem !default; $tooltip-arrow-height: .4rem !default; $tooltip-arrow-color: $tooltip-bg !default; // scss-docs-end tooltip-variables // Form tooltips must come after regular tooltips // scss-docs-start tooltip-feedback-variables $form-feedback-tooltip-padding-y: $tooltip-padding-y !default; $form-feedback-tooltip-padding-x: $tooltip-padding-x !default; $form-feedback-tooltip-font-size: $tooltip-font-size !default; $form-feedback-tooltip-line-height: null !default; $form-feedback-tooltip-opacity: $tooltip-opacity !default; $form-feedback-tooltip-border-radius: $tooltip-border-radius !default; // scss-docs-end tooltip-feedback-variables // Popovers // scss-docs-start popover-variables $popover-font-size: $font-size-sm !default; $popover-bg: $white !default; $popover-max-width: 276px !default; $popover-border-width: $border-width !default; $popover-border-color: rgba($black, .2) !default; $popover-border-radius: $border-radius-lg !default; $popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default; $popover-box-shadow: $box-shadow !default; $popover-header-bg: shade-color($popover-bg, 6%) !default; $popover-header-color: $headings-color !default; $popover-header-padding-y: .5rem !default; $popover-header-padding-x: $spacer !default; $popover-body-color: $body-color !default; $popover-body-padding-y: $spacer !default; $popover-body-padding-x: $spacer !default; $popover-arrow-width: 1rem !default; $popover-arrow-height: .5rem !default; $popover-arrow-color: $popover-bg !default; $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; // scss-docs-end popover-variables // Toasts // scss-docs-start toast-variables $toast-max-width: 350px !default; $toast-padding-x: .75rem !default; $toast-padding-y: .5rem !default; $toast-font-size: .875rem !default; $toast-color: null !default; $toast-background-color: rgba($white, .85) !default; $toast-border-width: 1px !default; $toast-border-color: rgba($black, .1) !default; $toast-border-radius: $border-radius !default; $toast-box-shadow: $box-shadow !default; $toast-spacing: $container-padding-x !default; $toast-header-color: $gray-600 !default; $toast-header-background-color: rgba($white, .85) !default; $toast-header-border-color: rgba($black, .05) !default; // scss-docs-end toast-variables // Badges // scss-docs-start badge-variables $badge-font-size: .75em !default; $badge-font-weight: $font-weight-bold !default; $badge-color: $white !default; $badge-padding-y: .35em !default; $badge-padding-x: .65em !default; $badge-border-radius: $border-radius !default; // scss-docs-end badge-variables // 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: null !default; $modal-content-bg: $white !default; $modal-content-border-color: rgba($black, .2) !default; $modal-content-border-width: $border-width !default; $modal-content-border-radius: $border-radius-lg !default; $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default; $modal-content-box-shadow-xs: $box-shadow-sm !default; $modal-content-box-shadow-sm-up: $box-shadow !default; $modal-backdrop-bg: $black !default; $modal-backdrop-opacity: .5 !default; $modal-header-border-color: $border-color !default; $modal-footer-border-color: $modal-header-border-color !default; $modal-header-border-width: $modal-content-border-width !default; $modal-footer-border-width: $modal-header-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-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 // Alerts // // Define alert colors, border radius, and padding. // scss-docs-start alert-variables $alert-padding-y: $spacer !default; $alert-padding-x: $spacer !default; $alert-margin-bottom: 1rem !default; $alert-border-radius: $border-radius !default; $alert-link-font-weight: $font-weight-bold !default; $alert-border-width: $border-width !default; $alert-bg-scale: -80% !default; $alert-border-scale: -70% !default; $alert-color-scale: 40% !default; $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side // scss-docs-end alert-variables // Progress bars // scss-docs-start progress-variables $progress-height: 1rem !default; $progress-font-size: $font-size-base * .75 !default; $progress-bg: $gray-200 !default; $progress-border-radius: $border-radius !default; $progress-box-shadow: $box-shadow-inset !default; $progress-bar-color: $white !default; $progress-bar-bg: $primary !default; $progress-bar-animation-timing: 1s linear infinite !default; $progress-bar-transition: width .6s ease !default; // scss-docs-end progress-variables // List group // scss-docs-start list-group-variables $list-group-color: $gray-900 !default; $list-group-bg: $white !default; $list-group-border-color: rgba($black, .125) !default; $list-group-border-width: $border-width !default; $list-group-border-radius: $border-radius !default; $list-group-item-padding-y: $spacer * .5 !default; $list-group-item-padding-x: $spacer !default; $list-group-item-bg-scale: -80% !default; $list-group-item-color-scale: 40% !default; $list-group-hover-bg: $gray-100 !default; $list-group-active-color: $component-active-color !default; $list-group-active-bg: $component-active-bg !default; $list-group-active-border-color: $list-group-active-bg !default; $list-group-disabled-color: $gray-600 !default; $list-group-disabled-bg: $list-group-bg !default; $list-group-action-color: $gray-700 !default; $list-group-action-hover-color: $list-group-action-color !default; $list-group-action-active-color: $body-color !default; $list-group-action-active-bg: $gray-200 !default; // scss-docs-end list-group-variables // Image thumbnails // scss-docs-start thumbnail-variables $thumbnail-padding: .25rem !default; $thumbnail-bg: $body-bg !default; $thumbnail-border-width: $border-width !default; $thumbnail-border-color: $gray-300 !default; $thumbnail-border-radius: $border-radius !default; $thumbnail-box-shadow: $box-shadow-sm !default; // scss-docs-end thumbnail-variables // Figures // scss-docs-start figure-variables $figure-caption-font-size: $small-font-size !default; $figure-caption-color: $gray-600 !default; // scss-docs-end figure-variables // Breadcrumbs // scss-docs-start breadcrumb-variables $breadcrumb-font-size: null !default; $breadcrumb-padding-y: 0 !default; $breadcrumb-padding-x: 0 !default; $breadcrumb-item-padding-x: .5rem !default; $breadcrumb-margin-bottom: 1rem !default; $breadcrumb-bg: null !default; $breadcrumb-divider-color: $gray-600 !default; $breadcrumb-active-color: $gray-600 !default; $breadcrumb-divider: quote("/") !default; $breadcrumb-divider-flipped: $breadcrumb-divider !default; $breadcrumb-border-radius: null !default; // scss-docs-end breadcrumb-variables // Carousel // scss-docs-start carousel-variables $carousel-control-color: $white !default; $carousel-control-width: 15% !default; $carousel-control-opacity: .5 !default; $carousel-control-hover-opacity: .9 !default; $carousel-control-transition: opacity .15s ease !default; $carousel-indicator-width: 30px !default; $carousel-indicator-height: 3px !default; $carousel-indicator-hit-area-height: 10px !default; $carousel-indicator-spacer: 3px !default; $carousel-indicator-opacity: .5 !default; $carousel-indicator-active-bg: $white !default; $carousel-indicator-active-opacity: 1 !default; $carousel-indicator-transition: opacity .6s ease !default; $carousel-caption-width: 70% !default; $carousel-caption-color: $white !default; $carousel-caption-padding-y: 1.25rem !default; $carousel-caption-spacer: 1.25rem !default; $carousel-control-icon-width: 2rem !default; $carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default; $carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default; $carousel-transition-duration: .6s !default; $carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) $carousel-dark-indicator-active-bg: $black !default; $carousel-dark-caption-color: $black !default; $carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; // scss-docs-end carousel-variables // Spinners // scss-docs-start spinner-variables $spinner-width: 2rem !default; $spinner-height: $spinner-width !default; $spinner-vertical-align: -.125em !default; $spinner-border-width: .25em !default; $spinner-animation-speed: .75s !default; $spinner-width-sm: 1rem !default; $spinner-height-sm: $spinner-width-sm !default; $spinner-border-width-sm: .2em !default; // scss-docs-end spinner-variables // Close // scss-docs-start close-variables $btn-close-width: 1em !default; $btn-close-height: $btn-close-width !default; $btn-close-padding-x: .25em !default; $btn-close-padding-y: $btn-close-padding-x !default; $btn-close-color: $black !default; $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default; $btn-close-focus-shadow: $input-btn-focus-box-shadow !default; $btn-close-opacity: .5 !default; $btn-close-hover-opacity: .75 !default; $btn-close-focus-opacity: 1 !default; $btn-close-disabled-opacity: .25 !default; $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; // scss-docs-end close-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: $modal-content-bg !default; $offcanvas-color: $modal-content-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: $small-font-size !default; $code-color: $pink !default; $kbd-padding-y: .2rem !default; $kbd-padding-x: .4rem !default; $kbd-font-size: $code-font-size !default; $kbd-color: $white !default; $kbd-bg: $gray-900 !default; $pre-color: null !default; // stylelint-disable property-blacklist, scss/dollar-variable-default // SCSS RFS mixin // // Automated responsive values for font sizes, paddings, margins and much more // // Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE) // Configuration // Base value $rfs-base-value: 1.25rem !default; $rfs-unit: rem !default; @if $rfs-unit != rem and $rfs-unit != px { @error "`#{$rfs-unit}` is not a valid unit for $rfs-unit. Use `px` or `rem`."; } // Breakpoint at where values start decreasing if screen width is smaller $rfs-breakpoint: 1200px !default; $rfs-breakpoint-unit: px !default; @if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem { @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`."; } // Resize values based on screen height and width $rfs-two-dimensional: false !default; // Factor of decrease $rfs-factor: 10 !default; @if type-of($rfs-factor) != number or $rfs-factor <= 1 { @error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1."; } // Mode. Possibilities: "min-media-query", "max-media-query" $rfs-mode: min-media-query !default; // Generate enable or disable classes. Possibilities: false, "enable" or "disable" $rfs-class: false !default; // 1 rem = $rfs-rem-value px $rfs-rem-value: 16 !default; // Safari iframe resize bug: https://github.com/twbs/rfs/issues/14 $rfs-safari-iframe-resize-bug-fix: false !default; // Disable RFS by setting $enable-rfs to false $enable-rfs: true !default; // Cache $rfs-base-value unit $rfs-base-value-unit: unit($rfs-base-value); @function divide($dividend, $divisor, $precision: 10) { $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1); $dividend: abs($dividend); $divisor: abs($divisor); @if $dividend == 0 { @return 0; } @if $divisor == 0 { @error "Cannot divide by 0"; } $remainder: $dividend; $result: 0; $factor: 10; @while ($remainder > 0 and $precision >= 0) { $quotient: 0; @while ($remainder >= $divisor) { $remainder: $remainder - $divisor; $quotient: $quotient + 1; } $result: $result * 10 + $quotient; $factor: $factor * .1; $remainder: $remainder * 10; $precision: $precision - 1; @if ($precision < 0 and $remainder >= $divisor * 5) { $result: $result + 1; } } $result: $result * $factor * $sign; $dividend-unit: unit($dividend); $divisor-unit: unit($divisor); $unit-map: ( "px": 1px, "rem": 1rem, "em": 1em, "%": 1% ); @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) { $result: $result * map-get($unit-map, $dividend-unit); } @return $result; } // Remove px-unit from $rfs-base-value for calculations @if $rfs-base-value-unit == px { $rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1); } @else if $rfs-base-value-unit == rem { $rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value)); } // Cache $rfs-breakpoint unit to prevent multiple calls $rfs-breakpoint-unit-cache: unit($rfs-breakpoint); // Remove unit from $rfs-breakpoint for calculations @if $rfs-breakpoint-unit-cache == px { $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1); } @else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" { $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value)); } // Calculate the media query value $rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit}); $rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width); $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height); // Internal mixin used to determine which media query needs to be used @mixin _rfs-media-query { @if $rfs-two-dimensional { @if $rfs-mode == max-media-query { @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) { @content; } } @else { @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) { @content; } } } @else { @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) { @content; } } } // Internal mixin that adds disable classes to the selector if needed. @mixin _rfs-rule { @if $rfs-class == disable and $rfs-mode == max-media-query { // Adding an extra class increases specificity, which prevents the media query to override the property &, .disable-rfs &, &.disable-rfs { @content; } } @else if $rfs-class == enable and $rfs-mode == min-media-query { .enable-rfs &, &.enable-rfs { @content; } } @else { @content; } } // Internal mixin that adds enable classes to the selector if needed. @mixin _rfs-media-query-rule { @if $rfs-class == enable { @if $rfs-mode == min-media-query { @content; } @include _rfs-media-query { .enable-rfs &, &.enable-rfs { @content; } } } @else { @if $rfs-class == disable and $rfs-mode == min-media-query { .disable-rfs &, &.disable-rfs { @content; } } @include _rfs-media-query { @content; } } } // Helper function to get the formatted non-responsive value @function rfs-value($values) { // Convert to list $values: if(type-of($values) != list, ($values,), $values); $val: ''; // Loop over each value and calculate value @each $value in $values { @if $value == 0 { $val: $val + ' 0'; } @else { // Cache $value unit $unit: if(type-of($value) == "number", unit($value), false); @if $unit == px { // Convert to rem if needed $val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value); } @else if $unit == rem { // Convert to px if needed $val: $val + ' ' + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value); } @else { // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value $val: $val + ' ' + $value; } } } // Remove first space @return unquote(str-slice($val, 2)); } // Helper function to get the responsive value calculated by RFS @function rfs-fluid-value($values) { // Convert to list $values: if(type-of($values) != list, ($values,), $values); $val: ''; // Loop over each value and calculate value @each $value in $values { @if $value == 0 { $val: $val + ' 0'; } @else { // Cache $value unit $unit: if(type-of($value) == "number", unit($value), false); // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value @if not $unit or $unit != px and $unit != rem { $val: $val + ' ' + $value; } @else { // Remove unit from $value for calculations $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value))); // Only add the media query if the value is greater than the minimum value @if abs($value) <= $rfs-base-value or not $enable-rfs { $val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px); } @else { // Calculate the minimum value $value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor); // Calculate difference between $value and the minimum value $value-diff: abs($value) - $value-min; // Base value formatting $min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px); // Use negative value if needed $min-width: if($value < 0, -$min-width, $min-width); // Use `vmin` if two-dimensional is enabled $variable-unit: if($rfs-two-dimensional, vmin, vw); // Calculate the variable width between 0 and $rfs-breakpoint $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit}; // Return the calculated value $val: $val + ' calc(' + $min-width + if($value < 0, ' - ', ' + ') + $variable-width + ')'; } } } } // Remove first space @return unquote(str-slice($val, 2)); } // RFS mixin @mixin rfs($values, $property: font-size) { @if $values != null { $val: rfs-value($values); $fluidVal: rfs-fluid-value($values); // Do not print the media query if responsive & non-responsive values are the same @if $val == $fluidVal { #{$property}: $val; } @else { @include _rfs-rule { #{$property}: if($rfs-mode == max-media-query, $val, $fluidVal); // Include safari iframe resize fix if needed min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null); } @include _rfs-media-query-rule { #{$property}: if($rfs-mode == max-media-query, $fluidVal, $val); } } } } // Shorthand helper mixins @mixin font-size($value) { @include rfs($value); } @mixin padding($value) { @include rfs($value, padding); } @mixin padding-top($value) { @include rfs($value, padding-top); } @mixin padding-right($value) { @include rfs($value, padding-right); } @mixin padding-bottom($value) { @include rfs($value, padding-bottom); } @mixin padding-left($value) { @include rfs($value, padding-left); } @mixin margin($value) { @include rfs($value, margin); } @mixin margin-top($value) { @include rfs($value, margin-top); } @mixin margin-right($value) { @include rfs($value, margin-right); } @mixin margin-bottom($value) { @include rfs($value, margin-bottom); } @mixin margin-left($value) { @include rfs($value, margin-left); } // Deprecate mixin // // This mixin can be used to deprecate mixins or functions. // `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to // some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap) @mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) { @if ($enable-deprecation-messages != false and $ignore-warning != true) { @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}."; } } // Breakpoint viewport sizes and media queries. // // Breakpoints are defined as a map of (name: minimum width), order from small to large: // // (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) // // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. // Name of the next breakpoint, or null for the last breakpoint. // // >> breakpoint-next(sm) // md // >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // md // >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl)) // md @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { $n: index($breakpoint-names, $name); @if not $n { @error "breakpoint `#{$name}` not found in `#{$breakpoints}`"; } @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); } // Minimum breakpoint width. Null for the smallest (first) breakpoint. // // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // 576px @function breakpoint-min($name, $breakpoints: $grid-breakpoints) { $min: map-get($breakpoints, $name); @return if($min != 0, $min, null); } // Maximum breakpoint width. // The maximum value is reduced by 0.02px to work around the limitations of // `min-` and `max-` prefixes and viewports with fractional widths. // See https://www.w3.org/TR/mediaqueries-4/#mq-min-max // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. // See https://bugs.webkit.org/show_bug.cgi?id=178261 // // >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // 767.98px @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { $max: map-get($breakpoints, $name); @return if($max and $max > 0, $max - .02, null); } // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front. // Useful for making responsive utilities. // // >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // "" (Returns a blank string) // >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // "-sm" @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); } // Media of at least the minimum breakpoint width. No query for the smallest breakpoint. // Makes the @content apply to the given breakpoint and wider. @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { $min: breakpoint-min($name, $breakpoints); @if $min { @media (min-width: $min) { @content; } } @else { @content; } } // Media of at most the maximum breakpoint width. No query for the largest breakpoint. // Makes the @content apply to the given breakpoint and narrower. @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) { $max: breakpoint-max($name, $breakpoints); @if $max { @media (max-width: $max) { @content; } } @else { @content; } } // Media that spans multiple breakpoint widths. // Makes the @content apply between the min and max breakpoints @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { $min: breakpoint-min($lower, $breakpoints); $max: breakpoint-max($upper, $breakpoints); @if $min != null and $max != null { @media (min-width: $min) and (max-width: $max) { @content; } } @else if $max == null { @include media-breakpoint-up($lower, $breakpoints) { @content; } } @else if $min == null { @include media-breakpoint-down($upper, $breakpoints) { @content; } } } // Media between the breakpoint's minimum and maximum widths. // No minimum for the smallest breakpoint, and no maximum for the largest one. // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { $min: breakpoint-min($name, $breakpoints); $next: breakpoint-next($name, $breakpoints); $max: breakpoint-max($next); @if $min != null and $max != null { @media (min-width: $min) and (max-width: $max) { @content; } } @else if $max == null { @include media-breakpoint-up($name, $breakpoints) { @content; } } @else if $min == null { @include media-breakpoint-down($next, $breakpoints) { @content; } } } // scss-docs-start mixin-color-scheme @mixin color-scheme($name) { @media (prefers-color-scheme: #{$name}) { @content; } } // scss-docs-end mixin-color-scheme // Image Mixins // - Responsive image // - Retina image // Responsive image // // Keep images from scaling beyond the width of their parents. @mixin img-fluid { // Part 1: Set a maximum relative to the parent max-width: 100%; // Part 2: Override the height to auto, otherwise images will be stretched // when setting a width and height attribute on the img element. height: auto; } // Resize anything @mixin resizable($direction) { overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` resize: $direction; // Options: horizontal, vertical, both } // stylelint-disable declaration-no-important // Hide content visually while keeping it accessible to assistive technologies // // See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ // See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/ @mixin visually-hidden() { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686 overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } // Use to only display content when it's focused, or one of its child elements is focused // (i.e. when focus is within the element/container that the class was applied to) // // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 @mixin visually-hidden-focusable() { &:not(:focus):not(:focus-within) { @include visually-hidden(); } } @mixin reset-text { font-family: $font-family-base; // We deliberately do NOT reset font-size or overflow-wrap / word-wrap. font-style: normal; font-weight: $font-weight-normal; line-height: $line-height-base; text-align: left; // Fallback for where `start` is not supported text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; white-space: normal; line-break: auto; } // Text truncate // Requires inline-block or block for proper styling @mixin text-truncate() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } // Utility generator // Used to generate utilities & print utilities @mixin generate-utility($utility, $infix, $is-rfs-media-query: false) { $values: map-get($utility, values); // If the values are a list or string, convert it into a map @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" { $values: zip($values, $values); } @each $key, $value in $values { $properties: map-get($utility, property); // Multiple properties are possible, for example with vertical or horizontal margins or paddings @if type-of($properties) == "string" { $properties: append((), $properties); } // Use custom class if present $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1)); $property-class: if($property-class == null, "", $property-class); // State params to generate pseudo-classes $state: if(map-has-key($utility, state), map-get($utility, state), ()); $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix); // Don't prefix if value key is null (eg. with shadow class) $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, ""); @if map-get($utility, rfs) { // Inside the media query @if $is-rfs-media-query { $val: rfs-value($value); // Do not render anything if fluid and non fluid values are the same $value: if($val == rfs-fluid-value($value), null, $val); } @else { $value: rfs-fluid-value($value); } } $is-css-var: map-get($utility, css-var); $is-local-vars: map-get($utility, local-vars); $is-rtl: map-get($utility, rtl); @if $value != null { @if $is-rtl == false { /* rtl:begin:remove */ } @if $is-css-var { .#{$property-class + $infix + $property-class-modifier} { --#{$variable-prefix}#{$property-class}: #{$value}; } @each $pseudo in $state { .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { --#{$variable-prefix}#{$property-class}: #{$value}; } } } @else { .#{$property-class + $infix + $property-class-modifier} { @each $property in $properties { @if $is-local-vars { @each $local-var, $value in $is-local-vars { --#{$variable-prefix}#{$local-var}: #{$value}; } } #{$property}: $value if($enable-important-utilities, !important, null); } } @each $pseudo in $state { .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { @each $property in $properties { #{$property}: $value if($enable-important-utilities, !important, null); } } } } @if $is-rtl == false { /* rtl:end:remove */ } } } } // scss-docs-start alert-variant-mixin @mixin alert-variant($background, $border, $color) { color: $color; @include gradient-bg($background); border-color: $border; .alert-link { color: shade-color($color, 20%); } } // scss-docs-end alert-variant-mixin // Shared between modals and offcanvases @mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) { position: fixed; top: 0; left: 0; z-index: $zindex; width: 100vw; height: 100vh; background-color: $backdrop-bg; // Fade for backdrop &.fade { opacity: 0; } &.show { opacity: $backdrop-opacity; } } // Button variants // // Easily pump out default styles, as well as :hover, :focus, :active, // and disabled options for all buttons // scss-docs-start btn-variant-mixin @mixin button-variant( $background, $border, $color: color-contrast($background), $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)), $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)), $hover-color: color-contrast($hover-background), $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)), $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)), $active-color: color-contrast($active-background), $disabled-background: $background, $disabled-border: $border, $disabled-color: color-contrast($disabled-background) ) { color: $color; @include gradient-bg($background); border-color: $border; @include box-shadow($btn-box-shadow); &:hover { color: $hover-color; @include gradient-bg($hover-background); border-color: $hover-border; } .btn-check:focus + &, &:focus { color: $hover-color; @include gradient-bg($hover-background); border-color: $hover-border; @if $enable-shadows { @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5)); } @else { // Avoid using mixin so we can pass custom focus shadow properly box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); } } .btn-check:checked + &, .btn-check:active + &, &:active, &.active, .show > &.dropdown-toggle { color: $active-color; background-color: $active-background; // Remove CSS gradients if they're enabled background-image: if($enable-gradients, none, null); border-color: $active-border; &:focus { @if $enable-shadows { @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5)); } @else { // Avoid using mixin so we can pass custom focus shadow properly box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); } } } &:disabled, &.disabled { color: $disabled-color; background-color: $disabled-background; // Remove CSS gradients if they're enabled background-image: if($enable-gradients, none, null); border-color: $disabled-border; } } // scss-docs-end btn-variant-mixin // scss-docs-start btn-outline-variant-mixin @mixin button-outline-variant( $color, $color-hover: color-contrast($color), $active-background: $color, $active-border: $color, $active-color: color-contrast($active-background) ) { color: $color; border-color: $color; &:hover { color: $color-hover; background-color: $active-background; border-color: $active-border; } .btn-check:focus + &, &:focus { box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); } .btn-check:checked + &, .btn-check:active + &, &:active, &.active, &.dropdown-toggle.show { color: $active-color; background-color: $active-background; border-color: $active-border; &:focus { @if $enable-shadows { @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5)); } @else { // Avoid using mixin so we can pass custom focus shadow properly box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); } } } &:disabled, &.disabled { color: $color; background-color: transparent; } } // scss-docs-end btn-outline-variant-mixin // scss-docs-start btn-size-mixin @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { padding: $padding-y $padding-x; @include font-size($font-size); // Manually declare to provide an override to the browser default @include border-radius($border-radius, 0); } // scss-docs-end btn-size-mixin // scss-docs-start caret-mixins @mixin caret-down { border-top: $caret-width solid; border-right: $caret-width solid transparent; border-bottom: 0; border-left: $caret-width solid transparent; } @mixin caret-up { border-top: 0; border-right: $caret-width solid transparent; border-bottom: $caret-width solid; border-left: $caret-width solid transparent; } @mixin caret-end { border-top: $caret-width solid transparent; border-right: 0; border-bottom: $caret-width solid transparent; border-left: $caret-width solid; } @mixin caret-start { border-top: $caret-width solid transparent; border-right: $caret-width solid; border-bottom: $caret-width solid transparent; } @mixin caret($direction: down) { @if $enable-caret { &::after { display: inline-block; margin-left: $caret-spacing; vertical-align: $caret-vertical-align; content: ""; @if $direction == down { @include caret-down(); } @else if $direction == up { @include caret-up(); } @else if $direction == end { @include caret-end(); } } @if $direction == start { &::after { display: none; } &::before { display: inline-block; margin-right: $caret-spacing; vertical-align: $caret-vertical-align; content: ""; @include caret-start(); } } &:empty::after { margin-left: 0; } } } // scss-docs-end caret-mixins // Pagination // scss-docs-start pagination-mixin @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) { .page-link { padding: $padding-y $padding-x; @include font-size($font-size); } .page-item { @if $pagination-margin-start == (-$pagination-border-width) { &:first-child { .page-link { @include border-start-radius($border-radius); } } &:last-child { .page-link { @include border-end-radius($border-radius); } } } @else { //Add border-radius to all pageLinks in case they have left margin .page-link { @include border-radius($border-radius); } } } } // scss-docs-end pagination-mixin // Lists // Unstyled keeps list items block level, just removes default browser padding and list-style @mixin list-unstyled { padding-left: 0; list-style: none; } // List Groups // scss-docs-start list-group-mixin @mixin list-group-item-variant($state, $background, $color) { .list-group-item-#{$state} { color: $color; background-color: $background; &.list-group-item-action { &:hover, &:focus { color: $color; background-color: shade-color($background, 10%); } &.active { color: $white; background-color: $color; border-color: $color; } } } } // scss-docs-end list-group-mixin // This mixin uses an `if()` technique to be compatible with Dart Sass // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details // scss-docs-start form-validation-mixins @mixin form-validation-state-selector($state) { @if ($state == "valid" or $state == "invalid") { .was-validated #{if(&, "&", "")}:#{$state}, #{if(&, "&", "")}.is-#{$state} { @content; } } @else { #{if(&, "&", "")}.is-#{$state} { @content; } } } @mixin form-validation-state( $state, $color, $icon, $tooltip-color: color-contrast($color), $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity), $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity) ) { .#{$state}-feedback { display: none; width: 100%; margin-top: $form-feedback-margin-top; @include font-size($form-feedback-font-size); font-style: $form-feedback-font-style; color: $color; } .#{$state}-tooltip { position: absolute; top: 100%; z-index: 5; display: none; max-width: 100%; // Contain to parent when possible padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x; margin-top: .1rem; @include font-size($form-feedback-tooltip-font-size); line-height: $form-feedback-tooltip-line-height; color: $tooltip-color; background-color: $tooltip-bg-color; @include border-radius($form-feedback-tooltip-border-radius); } @include form-validation-state-selector($state) { ~ .#{$state}-feedback, ~ .#{$state}-tooltip { display: block; } } .form-control { @include form-validation-state-selector($state) { border-color: $color; @if $enable-validation-icons { padding-right: $input-height-inner; background-image: escape-svg($icon); background-repeat: no-repeat; background-position: right $input-height-inner-quarter center; background-size: $input-height-inner-half $input-height-inner-half; } &:focus { border-color: $color; box-shadow: $focus-box-shadow; } } } // stylelint-disable-next-line selector-no-qualifying-type textarea.form-control { @include form-validation-state-selector($state) { @if $enable-validation-icons { padding-right: $input-height-inner; background-position: top $input-height-inner-quarter right $input-height-inner-quarter; } } } .form-select { @include form-validation-state-selector($state) { border-color: $color; @if $enable-validation-icons { &:not([multiple]):not([size]), &:not([multiple])[size="1"] { padding-right: $form-select-feedback-icon-padding-end; background-image: escape-svg($form-select-indicator), escape-svg($icon); 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: $color; box-shadow: $focus-box-shadow; } } } .form-check-input { @include form-validation-state-selector($state) { border-color: $color; &:checked { background-color: $color; } &:focus { box-shadow: $focus-box-shadow; } ~ .form-check-label { color: $color; } } } .form-check-inline .form-check-input { ~ .#{$state}-feedback { margin-left: .5em; } } .input-group .form-control, .input-group .form-select { @include form-validation-state-selector($state) { @if $state == "valid" { z-index: 1; } @else if $state == "invalid" { z-index: 2; } &:focus { z-index: 3; } } } } // scss-docs-end form-validation-mixins // scss-docs-start table-variant @mixin table-variant($state, $background) { .table-#{$state} { $color: color-contrast(opaque($body-bg, $background)); $hover-bg: mix($color, $background, percentage($table-hover-bg-factor)); $striped-bg: mix($color, $background, percentage($table-striped-bg-factor)); $active-bg: mix($color, $background, percentage($table-active-bg-factor)); --#{$variable-prefix}table-bg: #{$background}; --#{$variable-prefix}table-striped-bg: #{$striped-bg}; --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)}; --#{$variable-prefix}table-active-bg: #{$active-bg}; --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)}; --#{$variable-prefix}table-hover-bg: #{$hover-bg}; --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)}; color: $color; border-color: mix($color, $background, percentage($table-border-factor)); } } // scss-docs-end table-variant // stylelint-disable property-disallowed-list // Single side border-radius // Helper function to replace negative values with 0 @function valid-radius($radius) { $return: (); @each $value in $radius { @if type-of($value) == number { $return: append($return, max($value, 0)); } @else { $return: append($return, $value); } } @return $return; } // scss-docs-start border-radius-mixins @mixin border-radius($radius: $border-radius, $fallback-border-radius: false) { @if $enable-rounded { border-radius: valid-radius($radius); } @else if $fallback-border-radius != false { border-radius: $fallback-border-radius; } } @mixin border-top-radius($radius: $border-radius) { @if $enable-rounded { border-top-left-radius: valid-radius($radius); border-top-right-radius: valid-radius($radius); } } @mixin border-end-radius($radius: $border-radius) { @if $enable-rounded { border-top-right-radius: valid-radius($radius); border-bottom-right-radius: valid-radius($radius); } } @mixin border-bottom-radius($radius: $border-radius) { @if $enable-rounded { border-bottom-right-radius: valid-radius($radius); border-bottom-left-radius: valid-radius($radius); } } @mixin border-start-radius($radius: $border-radius) { @if $enable-rounded { border-top-left-radius: valid-radius($radius); border-bottom-left-radius: valid-radius($radius); } } @mixin border-top-start-radius($radius: $border-radius) { @if $enable-rounded { border-top-left-radius: valid-radius($radius); } } @mixin border-top-end-radius($radius: $border-radius) { @if $enable-rounded { border-top-right-radius: valid-radius($radius); } } @mixin border-bottom-end-radius($radius: $border-radius) { @if $enable-rounded { border-bottom-right-radius: valid-radius($radius); } } @mixin border-bottom-start-radius($radius: $border-radius) { @if $enable-rounded { border-bottom-left-radius: valid-radius($radius); } } // scss-docs-end border-radius-mixins @mixin box-shadow($shadow...) { @if $enable-shadows { $result: (); @each $value in $shadow { @if $value != null { $result: append($result, $value, "comma"); } @if $value == none and length($shadow) > 1 { @warn "The keyword 'none' must be used as a single argument."; } } @if (length($result) > 0) { box-shadow: $result; } } } // Gradients // scss-docs-start gradient-bg-mixin @mixin gradient-bg($color: null) { background-color: $color; @if $enable-gradients { background-image: var(--#{$variable-prefix}gradient); } } // scss-docs-end gradient-bg-mixin // scss-docs-start gradient-mixins // Horizontal gradient, from left to right // // Creates two color stops, start and end, by specifying a color and position for each color stop. @mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); } // Vertical gradient, from top to bottom // // Creates two color stops, start and end, by specifying a color and position for each color stop. @mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) { background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); } @mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) { background-image: linear-gradient($deg, $start-color, $end-color); } @mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); } @mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); } @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) { background-image: radial-gradient(circle, $inner-color, $outer-color); } @mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) { background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); } // scss-docs-end gradient-mixins // stylelint-disable property-disallowed-list @mixin transition($transition...) { @if length($transition) == 0 { $transition: $transition-base; } @if length($transition) > 1 { @each $value in $transition { @if $value == null or $value == none { @warn "The keyword 'none' or 'null' must be used as a single argument."; } } } @if $enable-transitions { @if nth($transition, 1) != null { transition: $transition; } @if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none { @media (prefers-reduced-motion: reduce) { transition: none; } } } } // scss-docs-start clearfix @mixin clearfix() { &::after { display: block; clear: both; content: ""; } } // scss-docs-end clearfix // Container mixins @mixin make-container($gutter: $container-padding-x) { width: 100%; padding-right: var(--#{$variable-prefix}gutter-x, #{$gutter}); padding-left: var(--#{$variable-prefix}gutter-x, #{$gutter}); margin-right: auto; margin-left: auto; } // Grid system // // Generate semantic grid columns with these mixins. @mixin make-row($gutter: $grid-gutter-width) { --#{$variable-prefix}gutter-x: #{$gutter}; --#{$variable-prefix}gutter-y: 0; display: flex; flex-wrap: wrap; // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed margin-top: calc(-1 * var(--#{$variable-prefix}gutter-y)); // stylelint-disable-line function-disallowed-list margin-right: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list margin-left: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list } @mixin make-col-ready($gutter: $grid-gutter-width) { // Add box sizing if only the grid is loaded box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null); // Prevent columns from becoming too narrow when at smaller grid tiers by // always setting `width: 100%;`. This works because we set the width // later on to override this initial width. flex-shrink: 0; width: 100%; max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list margin-top: var(--#{$variable-prefix}gutter-y); } @mixin make-col($size: false, $columns: $grid-columns) { @if $size { flex: 0 0 auto; width: percentage(divide($size, $columns)); } @else { flex: 1 1 0; max-width: 100%; } } @mixin make-col-auto() { flex: 0 0 auto; width: auto; } @mixin make-col-offset($size, $columns: $grid-columns) { $num: divide($size, $columns); margin-left: if($num == 0, 0, percentage($num)); } // Row columns // // Specify on a parent element(e.g., .row) to force immediate children into NN // numberof columns. Supports wrapping to new lines, but does not do a Masonry // style grid. @mixin row-cols($count) { > * { flex: 0 0 auto; width: divide(100%, $count); } } // Framework grid generation // // Used only by Bootstrap to generate the correct number of grid classes given // any value of `$grid-columns`. @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { @each $breakpoint in map-keys($breakpoints) { $infix: breakpoint-infix($breakpoint, $breakpoints); @include media-breakpoint-up($breakpoint, $breakpoints) { // Provide basic `.col-{bp}` classes for equal-width flexbox columns .col#{$infix} { flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 } .row-cols#{$infix}-auto > * { @include make-col-auto(); } @if $grid-row-columns > 0 { @for $i from 1 through $grid-row-columns { .row-cols#{$infix}-#{$i} { @include row-cols($i); } } } .col#{$infix}-auto { @include make-col-auto(); } @if $columns > 0 { @for $i from 1 through $columns { .col#{$infix}-#{$i} { @include make-col($i, $columns); } } // `$columns - 1` because offsetting by the width of an entire row isn't possible @for $i from 0 through ($columns - 1) { @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0 .offset#{$infix}-#{$i} { @include make-col-offset($i, $columns); } } } } // Gutters // // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns. @each $key, $value in $gutters { .g#{$infix}-#{$key}, .gx#{$infix}-#{$key} { --#{$variable-prefix}gutter-x: #{$value}; } .g#{$infix}-#{$key}, .gy#{$infix}-#{$key} { --#{$variable-prefix}gutter-y: #{$value}; } } } } } @mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) { @each $breakpoint in map-keys($breakpoints) { $infix: breakpoint-infix($breakpoint, $breakpoints); @include media-breakpoint-up($breakpoint, $breakpoints) { @if $columns > 0 { @for $i from 1 through $columns { .g-col#{$infix}-#{$i} { grid-column: auto / span $i; } } // Start with `1` because `0` is and invalid value. // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible. @for $i from 1 through ($columns - 1) { .g-start#{$infix}-#{$i} { grid-column-start: $i; } } } } } } // stylelint-disable indentation // Utilities $utilities: () !default; // stylelint-disable-next-line scss/dollar-variable-default $utilities: map-merge( ( // scss-docs-start utils-vertical-align "align": ( property: vertical-align, class: align, values: baseline top middle bottom text-bottom text-top ), // scss-docs-end utils-vertical-align // scss-docs-start utils-float "float": ( responsive: true, property: float, values: ( start: left, end: right, none: none, ) ), // scss-docs-end utils-float // Opacity utilities // scss-docs-start utils-opacity "opacity": ( property: opacity, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ), // scss-docs-end utils-opacity // scss-docs-start utils-overflow "overflow": ( property: overflow, values: auto hidden visible scroll, ), // scss-docs-end utils-overflow // scss-docs-start utils-display "display": ( responsive: true, print: true, property: display, class: d, values: inline inline-block block grid table table-row table-cell flex inline-flex none ), // scss-docs-end utils-display // scss-docs-start utils-shadow "shadow": ( property: box-shadow, class: shadow, values: ( null: $box-shadow, sm: $box-shadow-sm, lg: $box-shadow-lg, none: none, ) ), // scss-docs-end utils-shadow // scss-docs-start utils-position "position": ( property: position, values: static relative absolute fixed sticky ), "top": ( property: top, values: $position-values ), "bottom": ( property: bottom, values: $position-values ), "start": ( property: left, class: start, values: $position-values ), "end": ( property: right, class: end, values: $position-values ), "translate-middle": ( property: transform, class: translate-middle, values: ( null: translate(-50%, -50%), x: translateX(-50%), y: translateY(-50%), ) ), // scss-docs-end utils-position // scss-docs-start utils-borders "border": ( property: border, values: ( null: $border-width solid $border-color, 0: 0, ) ), "border-top": ( property: border-top, values: ( null: $border-width solid $border-color, 0: 0, ) ), "border-end": ( property: border-right, class: border-end, values: ( null: $border-width solid $border-color, 0: 0, ) ), "border-bottom": ( property: border-bottom, values: ( null: $border-width solid $border-color, 0: 0, ) ), "border-start": ( property: border-left, class: border-start, values: ( null: $border-width solid $border-color, 0: 0, ) ), "border-color": ( property: border-color, class: border, values: map-merge($theme-colors, ("white": $white)) ), "border-width": ( property: border-width, class: border, values: $border-widths ), // scss-docs-end utils-borders // Sizing utilities // scss-docs-start utils-sizing "width": ( property: width, class: w, values: ( 25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto ) ), "max-width": ( property: max-width, class: mw, values: (100: 100%) ), "viewport-width": ( property: width, class: vw, values: (100: 100vw) ), "min-viewport-width": ( property: min-width, class: min-vw, values: (100: 100vw) ), "height": ( property: height, class: h, values: ( 25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto ) ), "max-height": ( property: max-height, class: mh, values: (100: 100%) ), "viewport-height": ( property: height, class: vh, values: (100: 100vh) ), "min-viewport-height": ( property: min-height, class: min-vh, values: (100: 100vh) ), // scss-docs-end utils-sizing // Flex utilities // scss-docs-start utils-flex "flex": ( responsive: true, property: flex, values: (fill: 1 1 auto) ), "flex-direction": ( responsive: true, property: flex-direction, class: flex, values: row column row-reverse column-reverse ), "flex-grow": ( responsive: true, property: flex-grow, class: flex, values: ( grow-0: 0, grow-1: 1, ) ), "flex-shrink": ( responsive: true, property: flex-shrink, class: flex, values: ( shrink-0: 0, shrink-1: 1, ) ), "flex-wrap": ( responsive: true, property: flex-wrap, class: flex, values: wrap nowrap wrap-reverse ), "gap": ( responsive: true, property: gap, class: gap, values: $spacers ), "justify-content": ( responsive: true, property: justify-content, values: ( start: flex-start, end: flex-end, center: center, between: space-between, around: space-around, evenly: space-evenly, ) ), "align-items": ( responsive: true, property: align-items, values: ( start: flex-start, end: flex-end, center: center, baseline: baseline, stretch: stretch, ) ), "align-content": ( responsive: true, property: align-content, values: ( start: flex-start, end: flex-end, center: center, between: space-between, around: space-around, stretch: stretch, ) ), "align-self": ( responsive: true, property: align-self, values: ( auto: auto, start: flex-start, end: flex-end, center: center, baseline: baseline, stretch: stretch, ) ), "order": ( responsive: true, property: order, values: ( first: -1, 0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, last: 6, ), ), // scss-docs-end utils-flex // Margin utilities // scss-docs-start utils-spacing "margin": ( responsive: true, property: margin, class: m, values: map-merge($spacers, (auto: auto)) ), "margin-x": ( responsive: true, property: margin-right margin-left, class: mx, values: map-merge($spacers, (auto: auto)) ), "margin-y": ( responsive: true, property: margin-top margin-bottom, class: my, values: map-merge($spacers, (auto: auto)) ), "margin-top": ( responsive: true, property: margin-top, class: mt, values: map-merge($spacers, (auto: auto)) ), "margin-end": ( responsive: true, property: margin-right, class: me, values: map-merge($spacers, (auto: auto)) ), "margin-bottom": ( responsive: true, property: margin-bottom, class: mb, values: map-merge($spacers, (auto: auto)) ), "margin-start": ( responsive: true, property: margin-left, class: ms, values: map-merge($spacers, (auto: auto)) ), // Negative margin utilities "negative-margin": ( responsive: true, property: margin, class: m, values: $negative-spacers ), "negative-margin-x": ( responsive: true, property: margin-right margin-left, class: mx, values: $negative-spacers ), "negative-margin-y": ( responsive: true, property: margin-top margin-bottom, class: my, values: $negative-spacers ), "negative-margin-top": ( responsive: true, property: margin-top, class: mt, values: $negative-spacers ), "negative-margin-end": ( responsive: true, property: margin-right, class: me, values: $negative-spacers ), "negative-margin-bottom": ( responsive: true, property: margin-bottom, class: mb, values: $negative-spacers ), "negative-margin-start": ( responsive: true, property: margin-left, class: ms, values: $negative-spacers ), // Padding utilities "padding": ( responsive: true, property: padding, class: p, values: $spacers ), "padding-x": ( responsive: true, property: padding-right padding-left, class: px, values: $spacers ), "padding-y": ( responsive: true, property: padding-top padding-bottom, class: py, values: $spacers ), "padding-top": ( responsive: true, property: padding-top, class: pt, values: $spacers ), "padding-end": ( responsive: true, property: padding-right, class: pe, values: $spacers ), "padding-bottom": ( responsive: true, property: padding-bottom, class: pb, values: $spacers ), "padding-start": ( responsive: true, property: padding-left, class: ps, values: $spacers ), // scss-docs-end utils-spacing // Text // scss-docs-start utils-text "font-family": ( property: font-family, class: font, values: (monospace: var(--#{$variable-prefix}font-monospace)) ), "font-size": ( rfs: true, property: font-size, class: fs, values: $font-sizes ), "font-style": ( property: font-style, class: fst, values: italic normal ), "font-weight": ( property: font-weight, class: fw, values: ( light: $font-weight-light, lighter: $font-weight-lighter, normal: $font-weight-normal, bold: $font-weight-bold, bolder: $font-weight-bolder ) ), "line-height": ( property: line-height, class: lh, values: ( 1: 1, sm: $line-height-sm, base: $line-height-base, lg: $line-height-lg, ) ), "text-align": ( responsive: true, property: text-align, class: text, values: ( start: left, end: right, center: center, ) ), "text-decoration": ( property: text-decoration, values: none underline line-through ), "text-transform": ( property: text-transform, class: text, values: lowercase uppercase capitalize ), "white-space": ( property: white-space, class: text, values: ( wrap: normal, nowrap: nowrap, ) ), "word-wrap": ( property: word-wrap word-break, class: text, values: (break: break-word), rtl: false ), // scss-docs-end utils-text // scss-docs-start utils-color "color": ( property: color, class: text, local-vars: ( "text-opacity": 1 ), values: map-merge( $utilities-text-colors, ( "muted": $text-muted, "black-50": rgba($black, .5), // deprecated "white-50": rgba($white, .5), // deprecated "reset": inherit, ) ) ), "text-opacity": ( css-var: true, class: text-opacity, values: ( 25: .25, 50: .5, 75: .75, 100: 1 ) ), // scss-docs-end utils-color // scss-docs-start utils-bg-color "background-color": ( property: background-color, class: bg, local-vars: ( "bg-opacity": 1 ), values: map-merge( $utilities-bg-colors, ( "transparent": transparent ) ) ), "bg-opacity": ( css-var: true, class: bg-opacity, values: ( 10: .1, 25: .25, 50: .5, 75: .75, 100: 1 ) ), // scss-docs-end utils-bg-color "gradient": ( property: background-image, class: bg, values: (gradient: var(--#{$variable-prefix}gradient)) ), // scss-docs-start utils-interaction "user-select": ( property: user-select, values: all auto none ), "pointer-events": ( property: pointer-events, class: pe, values: none auto, ), // scss-docs-end utils-interaction // scss-docs-start utils-border-radius "rounded": ( property: border-radius, class: rounded, values: ( null: $border-radius, 0: 0, 1: $border-radius-sm, 2: $border-radius, 3: $border-radius-lg, circle: 50%, pill: $border-radius-pill ) ), "rounded-top": ( property: border-top-left-radius border-top-right-radius, class: rounded-top, values: (null: $border-radius) ), "rounded-end": ( property: border-top-right-radius border-bottom-right-radius, class: rounded-end, values: (null: $border-radius) ), "rounded-bottom": ( property: border-bottom-right-radius border-bottom-left-radius, class: rounded-bottom, values: (null: $border-radius) ), "rounded-start": ( property: border-bottom-left-radius border-top-left-radius, class: rounded-start, values: (null: $border-radius) ), // scss-docs-end utils-border-radius // scss-docs-start utils-visibility "visibility": ( property: visibility, class: null, values: ( visible: visible, invisible: hidden, ) ) // scss-docs-end utils-visibility ), $utilities ); :root { // Note: Custom variable values only support SassScript inside `#{}`. // Colors // // Generate palettes for full colors, grays, and theme colors. @each $color, $value in $colors { --#{$variable-prefix}#{$color}: #{$value}; } @each $color, $value in $grays { --#{$variable-prefix}gray-#{$color}: #{$value}; } @each $color, $value in $theme-colors { --#{$variable-prefix}#{$color}: #{$value}; } @each $color, $value in $theme-colors-rgb { --#{$variable-prefix}#{$color}-rgb: #{$value}; } --#{$variable-prefix}white-rgb: #{to-rgb($white)}; --#{$variable-prefix}black-rgb: #{to-rgb($black)}; --#{$variable-prefix}body-color-rgb: #{to-rgb($body-color)}; --#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg)}; // Fonts // Note: Use `inspect` for lists so that quoted items keep the quotes. // See https://github.com/sass/sass/issues/2383#issuecomment-336349172 --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)}; --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)}; --#{$variable-prefix}gradient: #{$gradient}; // Root and body // stylelint-disable custom-property-empty-line-before // scss-docs-start root-body-variables @if $font-size-root != null { --#{$variable-prefix}root-font-size: #{$font-size-root}; } --#{$variable-prefix}body-font-family: #{$font-family-base}; --#{$variable-prefix}body-font-size: #{$font-size-base}; --#{$variable-prefix}body-font-weight: #{$font-weight-base}; --#{$variable-prefix}body-line-height: #{$line-height-base}; --#{$variable-prefix}body-color: #{$body-color}; @if $body-text-align != null { --#{$variable-prefix}body-text-align: #{$body-text-align}; } --#{$variable-prefix}body-bg: #{$body-bg}; // scss-docs-end root-body-variables // stylelint-enable custom-property-empty-line-before } // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix // Reboot // // Normalization of HTML elements, manually forked from Normalize.css to remove // styles targeting irrelevant browsers while applying new styles. // // Normalize is licensed MIT. https://github.com/necolas/normalize.css // Document // // Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`. *, *::before, *::after { box-sizing: border-box; } // Root // // Ability to the value of the root font sizes, affecting the value of `