/* * ----- NOTE ----- * file `app/assets/stylesheets/wallaby/core.scss` will be automatically generated by * `yarn build:scss` to bundle all the imports from `app/stylesheets/wallaby/core.scss` * Please DO NOT try to modify this generated file. * ---------------- */ /*! * Bootstrap v4.6.2 (https://getbootstrap.com/) * Copyright 2011-2022 The Bootstrap Authors * Copyright 2011-2022 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ // Bootstrap functions // // Utility mixins and functions for evaluating source code across our variables, maps, and mixins. // Ascending // Used to evaluate Sass maps like our grid breakpoints. @mixin _assert-ascending($map, $map-name) { $prev-key: null; $prev-num: null; @each $key, $num in $map { @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" { // Do nothing } @else if not comparable($prev-num, $num) { @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !"; } @else if $prev-num >= $num { @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !"; } $prev-key: $key; $prev-num: $num; } } // Starts at zero // Used to ensure the min-width of the lowest breakpoint starts at 0. @mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") { @if length($map) > 0 { $values: map-values($map); $first-value: nth($values, 1); @if $first-value != 0 { @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}."; } } } // Replace `$search` with `$replace` in `$string` // Used on our SVG icon backgrounds for custom forms. // // @author Hugo Giraudel // @param {String} $string - Initial string // @param {String} $search - Substring to replace // @param {String} $replace ('') - New value // @return {String} - Updated string @function str-replace($string, $search, $replace: "") { $index: str-index($string, $search); @if $index { @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); } @return $string; } // See https://codepen.io/kevinweber/pen/dXWoRw // // Requires the use of quotes around data URIs. @function escape-svg($string) { @if str-index($string, "data:image/svg+xml") { @each $char, $encoded in $escaped-characters { // Do not escape the url brackets @if str-index($string, "url(") == 1 { $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}"); } @else { $string: str-replace($string, $char, $encoded); } } } @return $string; } // Color contrast @function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) { $r: red($color); $g: green($color); $b: blue($color); $yiq: (($r * 299) + ($g * 587) + ($b * 114)) * .001; @if ($yiq >= $yiq-contrasted-threshold) { @return $dark; } @else { @return $light; } } // Retrieve color Sass maps @function color($key: "blue") { @return map-get($colors, $key); } @function theme-color($key: "primary") { @return map-get($theme-colors, $key); } @function gray($key: "100") { @return map-get($grays, $key); } // Request a theme color level @function theme-color-level($color-name: "primary", $level: 0) { $color: theme-color($color-name); $color-base: if($level > 0, $black, $white); $level: abs($level); @return mix($color-base, $color, $level * $theme-color-interval); } // Return valid calc @function add($value1, $value2, $return-calc: true) { @if $value1 == null { @return $value2; } @if $value2 == null { @return $value1; } @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) { @return $value1 + $value2; } @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2); } @function subtract($value1, $value2, $return-calc: true) { @if $value1 == null and $value2 == null { @return null; } @if $value1 == null { @return -$value2; } @if $value2 == null { @return $value1; } @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) { @return $value1 - $value2; } @if type-of($value2) != number { $value2: unquote("(") + $value2 + unquote(")"); } @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2); } @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; } // 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 $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; $grays: () !default; $grays: map-merge( ( "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 ), $grays ); $blue: #007bff !default; $indigo: #6610f2 !default; $purple: #6f42c1 !default; $pink: #e83e8c !default; $red: #dc3545 !default; $orange: #fd7e14 !default; $yellow: #ffc107 !default; $green: #28a745 !default; $teal: #20c997 !default; $cyan: #17a2b8 !default; $colors: () !default; $colors: map-merge( ( "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 ), $colors ); $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-800 !default; $theme-colors: () !default; $theme-colors: map-merge( ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark ), $theme-colors ); // Set a specific jump point for requesting color jumps $theme-color-interval: 8% !default; // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255. $yiq-contrasted-threshold: 150 !default; // Customize the light and dark text colors for use in our YIQ color contrast function. $yiq-text-dark: $gray-900 !default; $yiq-text-light: $white !default; // 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-prefers-reduced-motion-media-query: true !default; $enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS $enable-grid-classes: true !default; $enable-pointer-cursor-for-buttons: true !default; $enable-print-styles: true !default; $enable-responsive-font-sizes: false !default; $enable-validation-icons: true !default; $enable-deprecation-messages: true !default; // 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. $spacer: 1rem !default; $spacers: () !default; $spacers: map-merge( ( 0: 0, 1: ($spacer * .25), 2: ($spacer * .5), 3: $spacer, 4: ($spacer * 1.5), 5: ($spacer * 3) ), $spacers ); // This variable affects the `.h-*` and `.w-*` classes. $sizes: () !default; $sizes: map-merge( ( 25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto ), $sizes ); // Body // // Settings for the `` element. $body-bg: $white !default; $body-color: $gray-900 !default; // Links // // Style anchor elements. $link-color: theme-color("primary") !default; $link-decoration: none !default; $link-hover-color: darken($link-color, 15%) !default; $link-hover-decoration: underline !default; // Darken percentage for links with `.text-*` class (e.g. `.text-success`) $emphasized-link-hover-darken-percentage: 15% !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. $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !default; @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. $container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px ) !default; @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: 30px !default; $grid-row-columns: 6 !default; // Components // // Define common padding and border radius sizes and more. $line-height-lg: 1.5 !default; $line-height-sm: 1.5 !default; $border-width: 1px !default; $border-color: $gray-300 !default; $border-radius: .25rem !default; $border-radius-lg: .3rem !default; $border-radius-sm: .2rem !default; $rounded-pill: 50rem !default; $box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default; $box-shadow: 0 .5rem 1rem rgba($black, .15) !default; $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default; $component-active-color: $white !default; $component-active-bg: theme-color("primary") !default; $caret-width: .3em !default; $caret-vertical-align: $caret-width * .85 !default; $caret-spacing: $caret-width * .85 !default; $transition-base: all .2s ease-in-out !default; $transition-fade: opacity .15s linear !default; $transition-collapse: height .35s ease !default; $transition-collapse-width: width .35s ease !default; $embed-responsive-aspect-ratios: () !default; $embed-responsive-aspect-ratios: join( ( (21 9), (16 9), (4 3), (1 1), ), $embed-responsive-aspect-ratios ); // Typography // // Font, line-height, and color for body text, headings, and more. // stylelint-disable value-keyword-case $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "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; $font-family-base: $font-family-sans-serif !default; // stylelint-enable value-keyword-case $font-size-base: 1rem !default; // Assumes the browser default, typically `16px` $font-size-lg: $font-size-base * 1.25 !default; $font-size-sm: $font-size-base * .875 !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; $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; $headings-margin-bottom: $spacer * .5 !default; $headings-font-family: null !default; $headings-font-weight: 500 !default; $headings-line-height: 1.2 !default; $headings-color: null !default; $display1-size: 6rem !default; $display2-size: 5.5rem !default; $display3-size: 4.5rem !default; $display4-size: 3.5rem !default; $display1-weight: 300 !default; $display2-weight: 300 !default; $display3-weight: 300 !default; $display4-weight: 300 !default; $display-line-height: $headings-line-height !default; $lead-font-size: $font-size-base * 1.25 !default; $lead-font-weight: 300 !default; $small-font-size: .875em !default; $text-muted: $gray-600 !default; $blockquote-small-color: $gray-600 !default; $blockquote-small-font-size: $small-font-size !default; $blockquote-font-size: $font-size-base * 1.25 !default; $hr-border-color: rgba($black, .1) !default; $hr-border-width: $border-width !default; $mark-padding: .2em !default; $dt-font-weight: $font-weight-bold !default; $kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default; $nested-kbd-font-weight: $font-weight-bold !default; $list-inline-padding: .5rem !default; $mark-bg: #fcf8e3 !default; $hr-margin-y: $spacer !default; // Tables // // Customizes the `.table` component with basic values, each used across all table variations. $table-cell-padding: .75rem !default; $table-cell-padding-sm: .3rem !default; $table-color: $body-color !default; $table-bg: null !default; $table-accent-bg: rgba($black, .05) !default; $table-hover-color: $table-color !default; $table-hover-bg: rgba($black, .075) !default; $table-active-bg: $table-hover-bg !default; $table-border-width: $border-width !default; $table-border-color: $border-color !default; $table-head-bg: $gray-200 !default; $table-head-color: $gray-700 !default; $table-th-font-weight: null !default; $table-dark-color: $white !default; $table-dark-bg: $gray-800 !default; $table-dark-accent-bg: rgba($white, .05) !default; $table-dark-hover-color: $table-dark-color !default; $table-dark-hover-bg: rgba($white, .075) !default; $table-dark-border-color: lighten($table-dark-bg, 7.5%) !default; $table-striped-order: odd !default; $table-caption-color: $text-muted !default; $table-bg-level: -9 !default; $table-border-level: -6 !default; // Buttons + Forms // // Shared variables that are reassigned to `$input-` and `$btn-` specific 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: .2rem !default; $input-btn-focus-color: rgba($component-active-bg, .25) !default; $input-btn-focus-box-shadow: 0 0 0 $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-line-height-sm: $line-height-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-line-height-lg: $line-height-lg !default; $input-btn-border-width: $border-width !default; // Buttons // // For each of Bootstrap's buttons, define text, background, and border color. $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-line-height-sm: $input-btn-line-height-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-line-height-lg: $input-btn-line-height-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-disabled-color: $gray-600 !default; $btn-block-spacing-y: .5rem !default; // Allows for customizing button radius independently from global border radius $btn-border-radius: $border-radius !default; $btn-border-radius-lg: $border-radius-lg !default; $btn-border-radius-sm: $border-radius-sm !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; // Forms $label-margin-bottom: .5rem !default; $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-line-height-sm: $input-btn-line-height-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-line-height-lg: $input-btn-line-height-lg !default; $input-bg: $white !default; $input-disabled-bg: $gray-200 !default; $input-color: $gray-700 !default; $input-border-color: $gray-400 !default; $input-border-width: $input-btn-border-width !default; $input-box-shadow: inset 0 1px 1px rgba($black, .075) !default; $input-border-radius: $border-radius !default; $input-border-radius-lg: $border-radius-lg !default; $input-border-radius-sm: $border-radius-sm !default; $input-focus-bg: $input-bg !default; $input-focus-border-color: lighten($component-active-bg, 25%) !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-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default; $input-height-lg: add($input-line-height-lg * 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-text-margin-top: .25rem !default; $form-check-input-gutter: 1.25rem !default; $form-check-input-margin-y: .3rem !default; $form-check-input-margin-x: .25rem !default; $form-check-inline-margin-x: .75rem !default; $form-check-inline-input-margin-x: .3125rem !default; $form-grid-gutter-width: 10px !default; $form-group-margin-bottom: 1rem !default; $input-group-addon-color: $input-color !default; $input-group-addon-bg: $gray-200 !default; $input-group-addon-border-color: $input-border-color !default; $custom-forms-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; $custom-control-gutter: .5rem !default; $custom-control-spacer-x: 1rem !default; $custom-control-cursor: null !default; $custom-control-indicator-size: 1rem !default; $custom-control-indicator-bg: $input-bg !default; $custom-control-indicator-bg-size: 50% 50% !default; $custom-control-indicator-box-shadow: $input-box-shadow !default; $custom-control-indicator-border-color: $gray-500 !default; $custom-control-indicator-border-width: $input-border-width !default; $custom-control-label-color: null !default; $custom-control-indicator-disabled-bg: $input-disabled-bg !default; $custom-control-label-disabled-color: $gray-600 !default; $custom-control-indicator-checked-color: $component-active-color !default; $custom-control-indicator-checked-bg: $component-active-bg !default; $custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default; $custom-control-indicator-checked-box-shadow: null !default; $custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default; $custom-control-indicator-focus-box-shadow: $input-focus-box-shadow !default; $custom-control-indicator-focus-border-color: $input-focus-border-color !default; $custom-control-indicator-active-color: $component-active-color !default; $custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default; $custom-control-indicator-active-box-shadow: null !default; $custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default; $custom-checkbox-indicator-border-radius: $border-radius !default; $custom-checkbox-indicator-icon-checked: url("data:image/svg+xml,") !default; $custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; $custom-checkbox-indicator-icon-indeterminate: url("data:image/svg+xml,") !default; $custom-checkbox-indicator-indeterminate-box-shadow: null !default; $custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default; $custom-radio-indicator-border-radius: 50% !default; $custom-radio-indicator-icon-checked: url("data:image/svg+xml,") !default; $custom-switch-width: $custom-control-indicator-size * 1.75 !default; $custom-switch-indicator-border-radius: $custom-control-indicator-size * .5 !default; $custom-switch-indicator-size: subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default; $custom-select-padding-y: $input-padding-y !default; $custom-select-padding-x: $input-padding-x !default; $custom-select-font-family: $input-font-family !default; $custom-select-font-size: $input-font-size !default; $custom-select-height: $input-height !default; $custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator $custom-select-font-weight: $input-font-weight !default; $custom-select-line-height: $input-line-height !default; $custom-select-color: $input-color !default; $custom-select-disabled-color: $gray-600 !default; $custom-select-bg: $input-bg !default; $custom-select-disabled-bg: $gray-200 !default; $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions $custom-select-indicator-color: $gray-800 !default; $custom-select-indicator: url("data:image/svg+xml,") !default; $custom-select-background: escape-svg($custom-select-indicator) right $custom-select-padding-x center / $custom-select-bg-size no-repeat !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon) $custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default; $custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default; $custom-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default; $custom-select-border-width: $input-border-width !default; $custom-select-border-color: $input-border-color !default; $custom-select-border-radius: $border-radius !default; $custom-select-box-shadow: inset 0 1px 2px rgba($black, .075) !default; $custom-select-focus-border-color: $input-focus-border-color !default; $custom-select-focus-width: $input-focus-width !default; $custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width $input-btn-focus-color !default; $custom-select-padding-y-sm: $input-padding-y-sm !default; $custom-select-padding-x-sm: $input-padding-x-sm !default; $custom-select-font-size-sm: $input-font-size-sm !default; $custom-select-height-sm: $input-height-sm !default; $custom-select-padding-y-lg: $input-padding-y-lg !default; $custom-select-padding-x-lg: $input-padding-x-lg !default; $custom-select-font-size-lg: $input-font-size-lg !default; $custom-select-height-lg: $input-height-lg !default; $custom-range-track-width: 100% !default; $custom-range-track-height: .5rem !default; $custom-range-track-cursor: pointer !default; $custom-range-track-bg: $gray-300 !default; $custom-range-track-border-radius: 1rem !default; $custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; $custom-range-thumb-width: 1rem !default; $custom-range-thumb-height: $custom-range-thumb-width !default; $custom-range-thumb-bg: $component-active-bg !default; $custom-range-thumb-border: 0 !default; $custom-range-thumb-border-radius: 1rem !default; $custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default; $custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default; $custom-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in IE/Edge $custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default; $custom-range-thumb-disabled-bg: $gray-500 !default; $custom-file-height: $input-height !default; $custom-file-height-inner: $input-height-inner !default; $custom-file-focus-border-color: $input-focus-border-color !default; $custom-file-focus-box-shadow: $input-focus-box-shadow !default; $custom-file-disabled-bg: $input-disabled-bg !default; $custom-file-padding-y: $input-padding-y !default; $custom-file-padding-x: $input-padding-x !default; $custom-file-line-height: $input-line-height !default; $custom-file-font-family: $input-font-family !default; $custom-file-font-weight: $input-font-weight !default; $custom-file-color: $input-color !default; $custom-file-bg: $input-bg !default; $custom-file-border-width: $input-border-width !default; $custom-file-border-color: $input-border-color !default; $custom-file-border-radius: $input-border-radius !default; $custom-file-box-shadow: $input-box-shadow !default; $custom-file-button-color: $custom-file-color !default; $custom-file-button-bg: $input-group-addon-bg !default; $custom-file-text: ( en: "Browse" ) !default; // Form validation $form-feedback-margin-top: $form-text-margin-top !default; $form-feedback-font-size: $small-font-size !default; $form-feedback-valid-color: theme-color("success") !default; $form-feedback-invalid-color: theme-color("danger") !default; $form-feedback-icon-valid-color: $form-feedback-valid-color !default; $form-feedback-icon-valid: url("data:image/svg+xml,") !default; $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; $form-feedback-icon-invalid: url("data:image/svg+xml,") !default; $form-validation-states: () !default; $form-validation-states: map-merge( ( "valid": ( "color": $form-feedback-valid-color, "icon": $form-feedback-icon-valid ), "invalid": ( "color": $form-feedback-invalid-color, "icon": $form-feedback-icon-invalid ), ), $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. $zindex-dropdown: 1000 !default; $zindex-sticky: 1020 !default; $zindex-fixed: 1030 !default; $zindex-modal-backdrop: 1040 !default; $zindex-modal: 1050 !default; $zindex-popover: 1060 !default; $zindex-tooltip: 1070 !default; // Navs $nav-link-padding-y: .5rem !default; $nav-link-padding-x: 1rem !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; $nav-divider-color: $gray-200 !default; $nav-divider-margin-y: $spacer * .5 !default; // Navbar $navbar-padding-y: $spacer * .5 !default; $navbar-padding-x: $spacer !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-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-nav-scroll-max-height: 75vh !default; $navbar-dark-color: rgba($white, .5) !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,") !default; $navbar-dark-toggler-border-color: rgba($white, .1) !default; $navbar-light-color: rgba($black, .5) !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,") !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; // Dropdowns // // Dropdown menu container and contents. $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: $gray-200 !default; $dropdown-divider-margin-y: $nav-divider-margin-y !default; $dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default; $dropdown-link-color: $gray-900 !default; $dropdown-link-hover-color: darken($gray-900, 5%) !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: .25rem !default; $dropdown-item-padding-x: 1.5rem !default; $dropdown-header-color: $gray-600 !default; $dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default; // Pagination $pagination-padding-y: .5rem !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-line-height: 1.25 !default; $pagination-color: $link-color !default; $pagination-bg: $white !default; $pagination-border-width: $border-width !default; $pagination-border-color: $gray-300 !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-border-radius-sm: $border-radius-sm !default; $pagination-border-radius-lg: $border-radius-lg !default; // Jumbotron $jumbotron-padding: 2rem !default; $jumbotron-color: null !default; $jumbotron-bg: $gray-200 !default; // Cards $card-spacer-y: .75rem !default; $card-spacer-x: 1.25rem !default; $card-border-width: $border-width !default; $card-border-radius: $border-radius !default; $card-border-color: rgba($black, .125) !default; $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !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: 1.25rem !default; $card-group-margin: $grid-gutter-width * .5 !default; $card-deck-margin: $card-group-margin !default; $card-columns-count: 3 !default; $card-columns-gap: 1.25rem !default; $card-columns-margin: $card-spacer-y !default; // Tooltips $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: .25rem !default; $tooltip-padding-x: .5rem !default; $tooltip-margin: 0 !default; $tooltip-arrow-width: .8rem !default; $tooltip-arrow-height: .4rem !default; $tooltip-arrow-color: $tooltip-bg !default; // Form tooltips must come after regular tooltips $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: $line-height-base !default; $form-feedback-tooltip-opacity: $tooltip-opacity !default; $form-feedback-tooltip-border-radius: $tooltip-border-radius !default; // Popovers $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: 0 .25rem .5rem rgba($black, .2) !default; $popover-header-bg: darken($popover-bg, 3%) !default; $popover-header-color: $headings-color !default; $popover-header-padding-y: .5rem !default; $popover-header-padding-x: .75rem !default; $popover-body-color: $body-color !default; $popover-body-padding-y: $popover-header-padding-y !default; $popover-body-padding-x: $popover-header-padding-x !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; // Toasts $toast-max-width: 350px !default; $toast-padding-x: .75rem !default; $toast-padding-y: .25rem !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(0, 0, 0, .1) !default; $toast-border-radius: .25rem !default; $toast-box-shadow: 0 .25rem .75rem rgba($black, .1) !default; $toast-header-color: $gray-600 !default; $toast-header-background-color: rgba($white, .85) !default; $toast-header-border-color: rgba(0, 0, 0, .05) !default; // Badges $badge-font-size: 75% !default; $badge-font-weight: $font-weight-bold !default; $badge-padding-y: .25em !default; $badge-padding-x: .4em !default; $badge-border-radius: $border-radius !default; $badge-transition: $btn-transition !default; $badge-focus-width: $input-btn-focus-width !default; $badge-pill-padding-x: .6em !default; // Use a higher than normal value to ensure completely rounded edges when // customizing padding or font-size on labels. $badge-pill-border-radius: 10rem !default; // Modals // Padding applied to the modal body $modal-inner-padding: 1rem !default; // Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding $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: 0 .25rem .5rem rgba($black, .5) !default; $modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !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: 1rem !default; $modal-header-padding-x: 1rem !default; $modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility $modal-xl: 1140px !default; $modal-lg: 800px !default; $modal-md: 500px !default; $modal-sm: 300px !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; // Alerts // // Define alert colors, border radius, and padding. $alert-padding-y: .75rem !default; $alert-padding-x: 1.25rem !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-level: -10 !default; $alert-border-level: -9 !default; $alert-color-level: 6 !default; // Progress bars $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: inset 0 .1rem .1rem rgba($black, .1) !default; $progress-bar-color: $white !default; $progress-bar-bg: theme-color("primary") !default; $progress-bar-animation-timing: 1s linear infinite !default; $progress-bar-transition: width .6s ease !default; // List group $list-group-color: null !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: .75rem !default; $list-group-item-padding-x: 1.25rem !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; // Image thumbnails $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: 0 1px 2px rgba($black, .075) !default; // Figures $figure-caption-font-size: 90% !default; $figure-caption-color: $gray-600 !default; // Breadcrumbs $breadcrumb-font-size: null !default; $breadcrumb-padding-y: .75rem !default; $breadcrumb-padding-x: 1rem !default; $breadcrumb-item-padding: .5rem !default; $breadcrumb-margin-bottom: 1rem !default; $breadcrumb-bg: $gray-200 !default; $breadcrumb-divider-color: $gray-600 !default; $breadcrumb-active-color: $gray-600 !default; $breadcrumb-divider: quote("/") !default; $breadcrumb-border-radius: $border-radius !default; // Carousel $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-active-bg: $white !default; $carousel-indicator-transition: opacity .6s ease !default; $carousel-caption-width: 70% !default; $carousel-caption-color: $white !default; $carousel-control-icon-width: 20px !default; $carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default; $carousel-control-next-icon-bg: url("data:image/svg+xml,") !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`) // Spinners $spinner-width: 2rem !default; $spinner-height: $spinner-width !default; $spinner-vertical-align: -.125em !default; $spinner-border-width: .25em !default; $spinner-width-sm: 1rem !default; $spinner-height-sm: $spinner-width-sm !default; $spinner-border-width-sm: .2em !default; // Close $close-font-size: $font-size-base * 1.5 !default; $close-font-weight: $font-weight-bold !default; $close-color: $black !default; $close-text-shadow: 0 1px 0 $white !default; // Code $code-font-size: 87.5% !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: $gray-900 !default; $pre-scrollable-max-height: 340px !default; // Utilities $displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default; $overflows: auto, hidden !default; $positions: static, relative, absolute, fixed, sticky !default; $user-selects: all, auto, none !default; // Printing $print-page-size: a3 !default; $print-body-min-width: map-get($grid-breakpoints, "lg") !default; // Toggles // // Used in conjunction with global variables to enable certain theme features. // Vendor // stylelint-disable property-blacklist, scss/dollar-variable-default // SCSS RFS mixin // // Automated responsive font sizes // // Licensed under MIT (https://github.com/twbs/rfs/blob/v8.x/LICENSE) // Configuration // Base font size $rfs-base-font-size: 1.25rem !default; $rfs-font-size-unit: rem !default; @if $rfs-font-size-unit != rem and $rfs-font-size-unit != px { @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`."; } // Breakpoint at where font-size starts 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 font size 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."; } // 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-responsive-font-sizes to false $enable-responsive-font-sizes: true !default; // Cache $rfs-base-font-size unit $rfs-base-font-size-unit: unit($rfs-base-font-size); @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-font-size for calculations @if $rfs-base-font-size-unit == "px" { $rfs-base-font-size: divide($rfs-base-font-size, $rfs-base-font-size * 0 + 1); } @else if $rfs-base-font-size-unit == "rem" { $rfs-base-font-size: divide($rfs-base-font-size, divide($rfs-base-font-size * 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)); } // Internal mixin that adds disable classes to the selector if needed. @mixin _rfs-disable-class { @if $rfs-class == "disable" { // Adding an extra class increases specificity, which prevents the media query to override the font size &, .disable-responsive-font-size &, &.disable-responsive-font-size { @content; } } @else { @content; } } // Internal mixin that adds enable classes to the selector if needed. @mixin _rfs-enable-class { @if $rfs-class == "enable" { .enable-responsive-font-size &, &.enable-responsive-font-size { @content; } } @else { @content; } } // Internal mixin used to determine which media query needs to be used @mixin _rfs-media-query($mq-value) { @if $rfs-two-dimensional { @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) { @content; } } @else { @media (max-width: #{$mq-value}) { @content; } } } // Responsive font size mixin @mixin rfs($fs, $important: false) { // Cache $fs unit $fs-unit: if(type-of($fs) == "number", unit($fs), false); // Add !important suffix if needed $rfs-suffix: if($important, " !important", ""); // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value @if not $fs-unit or $fs-unit != "" and $fs-unit != "px" and $fs-unit != "rem" or $fs == 0 { font-size: #{$fs}#{$rfs-suffix}; } @else { // Remove unit from $fs for calculations @if $fs-unit == "px" { $fs: divide($fs, $fs * 0 + 1); } @else if $fs-unit == "rem" { $fs: divide($fs, divide($fs * 0 + 1, $rfs-rem-value)); } // Set default font size $rfs-static: if($rfs-font-size-unit == rem, #{divide($fs, $rfs-rem-value)}rem, #{$fs}px); // Only add the media query if the font size is bigger than the minimum font size @if $fs <= $rfs-base-font-size or not $enable-responsive-font-sizes { font-size: #{$rfs-static}#{$rfs-suffix}; } @else { // Calculate the minimum font size for $fs $fs-min: $rfs-base-font-size + divide($fs - $rfs-base-font-size, $rfs-factor); // Calculate difference between $fs and the minimum font size $fs-diff: $fs - $fs-min; // Base font-size formatting $min-width: if($rfs-font-size-unit == rem, #{divide($fs-min, $rfs-rem-value)}rem, #{$fs-min}px); // 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($fs-diff * 100, $rfs-breakpoint)}#{$variable-unit}; // Set the calculated font-size $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix}; // Breakpoint formatting $mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit}); @include _rfs-disable-class { font-size: #{$rfs-static}#{$rfs-suffix}; } @include _rfs-media-query($mq-value) { @include _rfs-enable-class { font-size: $rfs-fluid; } // Include safari iframe resize fix if needed min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null); } } } } // The font-size & responsive-font-size mixins use RFS to rescale the font size @mixin font-size($fs, $important: false) { @include rfs($fs, $important); } @mixin responsive-font-size($fs, $important: false) { @include rfs($fs, $important); } // Deprecate // 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}."; } } // Utilities // 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); @return if($n != null and $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. Null for the largest (last) breakpoint. // The maximum value is calculated as the minimum of the next one less 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(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // 767.98px @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { $next: breakpoint-next($name, $breakpoints); @return if($next, breakpoint-min($next, $breakpoints) - .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); $max: breakpoint-max($name, $breakpoints); @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($name, $breakpoints) { @content; } } } // Hover mixin and `$enable-hover-media-query` are deprecated. // // Originally added during our alphas and maintained during betas, this mixin was // designed to prevent `:hover` stickiness on iOS-an issue where hover styles // would persist after initial touch. // // For backward compatibility, we've kept these mixins and updated them to // always return their regular pseudo-classes instead of a shimmed media query. // // Issue: https://github.com/twbs/bootstrap/issues/25195 @mixin hover() { &:hover { @content; } } @mixin hover-focus() { &:hover, &:focus { @content; } } @mixin plain-hover-focus() { &, &:hover, &:focus { @content; } } @mixin hover-focus-active() { &:hover, &:focus, &:active { @content; } } // 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; } // Retina image // // Short retina mixin for setting background-image and -size. @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { background-image: url($file-1x); // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio, // but doesn't convert dppx=>dpi. // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard. // Compatibility info: https://caniuse.com/css-media-resolution @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx only screen and (min-resolution: 2dppx) { // Standardized background-image: url($file-2x); background-size: $width-1x $height-1x; } @include deprecate("`img-retina()`", "v4.3.0", "v5"); } @mixin badge-variant($bg) { color: color-yiq($bg); background-color: $bg; @at-root a#{&} { @include hover-focus() { color: color-yiq($bg); background-color: darken($bg, 10%); } &:focus, &.focus { outline: 0; box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5); } } } // Resize anything @mixin resizable($direction) { overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` resize: $direction; // Options: horizontal, vertical, both } // Only display content to screen readers // // 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 sr-only() { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686 overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } // Use in conjunction with .sr-only to only display content when it's focused. // // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 // // Credit: HTML5 Boilerplate @mixin sr-only-focusable() { &:active, &:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; } } // Sizing shortcuts @mixin size($width, $height: $width) { width: $width; height: $height; @include deprecate("`size()`", "v4.3.0", "v5"); } @mixin reset-text() { font-family: $font-family-base; // We deliberately do NOT reset font-size or 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; white-space: normal; word-spacing: normal; line-break: auto; } // stylelint-disable declaration-no-important // Typography @mixin text-emphasis-variant($parent, $color, $ignore-warning: false) { #{$parent} { color: $color !important; } @if $emphasized-link-hover-darken-percentage != 0 { a#{$parent} { @include hover-focus() { color: darken($color, $emphasized-link-hover-darken-percentage) !important; } } } @include deprecate("`text-emphasis-variant()`", "v4.4.0", "v5", $ignore-warning); } // CSS image replacement @mixin text-hide($ignore-warning: false) { // stylelint-disable-next-line font-family-no-missing-generic-family-keyword font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; @include deprecate("`text-hide()`", "v4.1.0", "v5", $ignore-warning); } // Text truncate // Requires inline-block or block for proper styling @mixin text-truncate() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } // stylelint-disable declaration-no-important // Visibility @mixin invisible($visibility) { visibility: $visibility !important; @include deprecate("`invisible()`", "v4.3.0", "v5"); } // Components @mixin alert-variant($background, $border, $color) { color: $color; @include gradient-bg($background); border-color: $border; hr { border-top-color: darken($border, 5%); } .alert-link { color: darken($color, 10%); } } // Button variants // // Easily pump out default styles, as well as :hover, :focus, :active, // and disabled options for all buttons @mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) { color: color-yiq($background); @include gradient-bg($background); border-color: $border; @include box-shadow($btn-box-shadow); @include hover() { color: color-yiq($hover-background); @include gradient-bg($hover-background); border-color: $hover-border; } &:focus, &.focus { color: color-yiq($hover-background); @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-yiq($background), $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-yiq($background), $border, 15%), .5); } } // Disabled comes first so active can properly restyle &.disabled, &:disabled { color: color-yiq($background); background-color: $background; border-color: $border; // Remove CSS gradients if they're enabled @if $enable-gradients { background-image: none; } } &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle { color: color-yiq($active-background); background-color: $active-background; @if $enable-gradients { background-image: none; // Remove the gradient for the pressed/active state } border-color: $active-border; &:focus { @if $enable-shadows and $btn-active-box-shadow != none { @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $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-yiq($background), $border, 15%), .5); } } } } @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) { color: $color; border-color: $color; @include hover() { color: $color-hover; background-color: $active-background; border-color: $active-border; } &:focus, &.focus { box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); } &.disabled, &:disabled { color: $color; background-color: transparent; } &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle { color: color-yiq($active-background); background-color: $active-background; border-color: $active-border; &:focus { @if $enable-shadows and $btn-active-box-shadow != none { @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); } } } } // Button sizes @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { padding: $padding-y $padding-x; @include font-size($font-size); line-height: $line-height; // Manually declare to provide an override to the browser default @include border-radius($border-radius, 0); } @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-right() { border-top: $caret-width solid transparent; border-right: 0; border-bottom: $caret-width solid transparent; border-left: $caret-width solid; } @mixin caret-left() { 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 == right { @include caret-right(); } } @if $direction == left { &::after { display: none; } &::before { display: inline-block; margin-right: $caret-spacing; vertical-align: $caret-vertical-align; content: ""; @include caret-left(); } } &:empty::after { margin-left: 0; } } } // Pagination @mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { .page-link { padding: $padding-y $padding-x; @include font-size($font-size); line-height: $line-height; } .page-item { &:first-child { .page-link { @include border-left-radius($border-radius); } } &:last-child { .page-link { @include border-right-radius($border-radius); } } } } // 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 @mixin list-group-item-variant($state, $background, $color) { .list-group-item-#{$state} { color: $color; background-color: $background; &.list-group-item-action { @include hover-focus() { color: $color; background-color: darken($background, 5%); } &.active { color: $white; background-color: $color; border-color: $color; } } } } // Horizontal dividers // // Dividers (basically an hr) within dropdowns and nav lists @mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y, $ignore-warning: false) { height: 0; margin: $margin-y 0; overflow: hidden; border-top: 1px solid $color; @include deprecate("The `nav-divider()` mixin", "v4.4.0", "v5", $ignore-warning); } // Form control focus state // // Generate a customized focus state and for any input with the specified color, // which defaults to the `$input-focus-border-color` variable. // // We highly encourage you to not customize the default value, but instead use // this to tweak colors on an as-needed basis. This aesthetic change is based on // WebKit's default styles, but applicable to a wider range of browsers. Its // usability and accessibility should be taken into account with any change. // // Example usage: change the default blue border and shadow to white for better // contrast against a dark gray background. @mixin form-control-focus($ignore-warning: false) { &:focus { color: $input-focus-color; background-color: $input-focus-bg; border-color: $input-focus-border-color; outline: 0; @if $enable-shadows { @include box-shadow($input-box-shadow, $input-focus-box-shadow); } @else { // Avoid using mixin so we can pass custom focus shadow properly box-shadow: $input-focus-box-shadow; } } @include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning); } // 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 @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) { .#{$state}-feedback { display: none; width: 100%; margin-top: $form-feedback-margin-top; @include font-size($form-feedback-font-size); color: $color; } .#{$state}-tooltip { position: absolute; top: 100%; left: 0; 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: color-yiq($color); background-color: rgba($color, $form-feedback-tooltip-opacity); @include border-radius($form-feedback-tooltip-border-radius); // See https://github.com/twbs/bootstrap/pull/31557 // Align tooltip to form elements .form-row > .col > &, .form-row > [class*="col-"] > & { left: $form-grid-gutter-width * .5; } } @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 !important; // stylelint-disable-line declaration-no-important 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: 0 0 0 $input-focus-width rgba($color, .25); } } } // stylelint-disable-next-line selector-no-qualifying-type select.form-control { @include form-validation-state-selector($state) { @if $enable-validation-icons { padding-right: $input-padding-x * 4 !important; // stylelint-disable-line declaration-no-important background-position: right $input-padding-x * 2 center; } } } // 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; } } } .custom-select { @include form-validation-state-selector($state) { border-color: $color; @if $enable-validation-icons { padding-right: $custom-select-feedback-icon-padding-right !important; // stylelint-disable-line declaration-no-important background: $custom-select-background, $custom-select-bg escape-svg($icon) $custom-select-feedback-icon-position / $custom-select-feedback-icon-size no-repeat; } &:focus { border-color: $color; box-shadow: 0 0 0 $input-focus-width rgba($color, .25); } } } .form-check-input { @include form-validation-state-selector($state) { ~ .form-check-label { color: $color; } ~ .#{$state}-feedback, ~ .#{$state}-tooltip { display: block; } } } .custom-control-input { @include form-validation-state-selector($state) { ~ .custom-control-label { color: $color; &::before { border-color: $color; } } &:checked { ~ .custom-control-label::before { border-color: lighten($color, 10%); @include gradient-bg(lighten($color, 10%)); } } &:focus { ~ .custom-control-label::before { box-shadow: 0 0 0 $input-focus-width rgba($color, .25); } &:not(:checked) ~ .custom-control-label::before { border-color: $color; } } } } // custom file .custom-file-input { @include form-validation-state-selector($state) { ~ .custom-file-label { border-color: $color; } &:focus { ~ .custom-file-label { border-color: $color; box-shadow: 0 0 0 $input-focus-width rgba($color, .25); } } } } } // Tables @mixin table-row-variant($state, $background, $border: null) { // Exact selectors below required to override `.table-striped` and prevent // inheritance to nested tables. .table-#{$state} { &, > th, > td { background-color: $background; } @if $border != null { th, td, thead th, tbody + tbody { border-color: $border; } } } // Hover states for `.table-hover` // Note: this is not available for cells or rows within `thead` or `tfoot`. .table-hover { $hover-background: darken($background, 5%); .table-#{$state} { @include hover() { background-color: $hover-background; > td, > th { background-color: $hover-background; } } } } } // Skins // stylelint-disable declaration-no-important // Contextual backgrounds @mixin bg-variant($parent, $color, $ignore-warning: false) { #{$parent} { background-color: $color !important; } a#{$parent}, button#{$parent} { @include hover-focus() { background-color: darken($color, 10%) !important; } } @include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning); } @mixin bg-gradient-variant($parent, $color, $ignore-warning: false) { #{$parent} { background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important; } @include deprecate("The `bg-gradient-variant` mixin", "v4.5.0", "v5", $ignore-warning); } // 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; } @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) { @if $enable-rounded { border-top-left-radius: valid-radius($radius); border-top-right-radius: valid-radius($radius); } } @mixin border-right-radius($radius) { @if $enable-rounded { border-top-right-radius: valid-radius($radius); border-bottom-right-radius: valid-radius($radius); } } @mixin border-bottom-radius($radius) { @if $enable-rounded { border-bottom-right-radius: valid-radius($radius); border-bottom-left-radius: valid-radius($radius); } } @mixin border-left-radius($radius) { @if $enable-rounded { border-top-left-radius: valid-radius($radius); border-bottom-left-radius: valid-radius($radius); } } @mixin border-top-left-radius($radius) { @if $enable-rounded { border-top-left-radius: valid-radius($radius); } } @mixin border-top-right-radius($radius) { @if $enable-rounded { border-top-right-radius: valid-radius($radius); } } @mixin border-bottom-right-radius($radius) { @if $enable-rounded { border-bottom-right-radius: valid-radius($radius); } } @mixin border-bottom-left-radius($radius) { @if $enable-rounded { border-bottom-left-radius: valid-radius($radius); } } @mixin box-shadow($shadow...) { @if $enable-shadows { $result: (); @if (length($shadow) == 1) { // We can pass `@include box-shadow(none);` $result: $shadow; } @else { // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;` @for $i from 1 through length($shadow) { @if nth($shadow, $i) != "none" { $result: append($result, nth($shadow, $i), "comma"); } } } @if (length($result) > 0) { box-shadow: $result; } } } // Gradients @mixin gradient-bg($color) { @if $enable-gradients { background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x; } @else { background-color: $color; } } // 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); background-repeat: repeat-x; } // 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: 0%, $end-percent: 100%) { background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); background-repeat: repeat-x; } @mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) { background-image: linear-gradient($deg, $start-color, $end-color); background-repeat: repeat-x; } @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); background-repeat: no-repeat; } @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); background-repeat: no-repeat; } @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) { background-image: radial-gradient(circle, $inner-color, $outer-color); background-repeat: no-repeat; } @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); } // 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-prefers-reduced-motion-media-query and nth($transition, 1) != null and nth($transition, 1) != none { @media (prefers-reduced-motion: reduce) { transition: none; } } } } // Layout @mixin clearfix() { &::after { display: block; clear: both; content: ""; } } // 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) { // Common properties for all breakpoints %grid-column { position: relative; width: 100%; padding-right: $gutter * .5; padding-left: $gutter * .5; } @each $breakpoint in map-keys($breakpoints) { $infix: breakpoint-infix($breakpoint, $breakpoints); @if $columns > 0 { // Allow columns to stretch full width below their breakpoints @for $i from 1 through $columns { .col#{$infix}-#{$i} { @extend %grid-column; } } } .col#{$infix}, .col#{$infix}-auto { @extend %grid-column; } @include media-breakpoint-up($breakpoint, $breakpoints) { // Provide basic `.col-{bp}` classes for equal-width flexbox columns .col#{$infix} { flex-basis: 0; flex-grow: 1; max-width: 100%; } @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); } } } .order#{$infix}-first { order: -1; } .order#{$infix}-last { order: $columns + 1; } @for $i from 0 through $columns { .order#{$infix}-#{$i} { order: $i; } } @if $columns > 0 { // `$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); } } } } } } } /// Grid system // // Generate semantic grid columns with these mixins. @mixin make-container($gutter: $grid-gutter-width) { width: 100%; padding-right: $gutter * .5; padding-left: $gutter * .5; margin-right: auto; margin-left: auto; } @mixin make-row($gutter: $grid-gutter-width) { display: flex; flex-wrap: wrap; margin-right: -$gutter * .5; margin-left: -$gutter * .5; } // For each breakpoint, define the maximum width of the container in a media query @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) { @each $breakpoint, $container-max-width in $max-widths { @include media-breakpoint-up($breakpoint, $breakpoints) { max-width: $container-max-width; } } @include deprecate("The `make-container-max-widths` mixin", "v4.5.2", "v5"); } @mixin make-col-ready($gutter: $grid-gutter-width) { position: relative; // Prevent columns from becoming too narrow when at smaller grid tiers by // always setting `width: 100%;`. This works because we use `flex` values // later on to override this initial width. width: 100%; padding-right: $gutter * .5; padding-left: $gutter * .5; } @mixin make-col($size, $columns: $grid-columns) { flex: 0 0 percentage(divide($size, $columns)); // Add a `max-width` to ensure content within each column does not blow out // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari // do not appear to require this. max-width: percentage(divide($size, $columns)); } @mixin make-col-auto() { flex: 0 0 auto; width: auto; max-width: 100%; // Reset earlier grid tiers } @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 divide(100%, $count); max-width: divide(100%, $count); } } // stylelint-disable declaration-no-important @mixin float-left() { float: left !important; @include deprecate("The `float-left` mixin", "v4.3.0", "v5"); } @mixin float-right() { float: right !important; @include deprecate("The `float-right` mixin", "v4.3.0", "v5"); } @mixin float-none() { float: none !important; @include deprecate("The `float-none` mixin", "v4.3.0", "v5"); } :root { // Custom variable values only support SassScript inside `#{}`. @each $color, $value in $colors { --#{$color}: #{$value}; } @each $color, $value in $theme-colors { --#{$color}: #{$value}; } @each $bp, $value in $grid-breakpoints { --breakpoint-#{$bp}: #{$value}; } // Use `inspect` for lists so that quoted items keep the quotes. // See https://github.com/sass/sass/issues/2383#issuecomment-336349172 --font-family-sans-serif: #{inspect($font-family-sans-serif)}; --font-family-monospace: #{inspect($font-family-monospace)}; } // 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 // // 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`. // 2. Change the default font family in all browsers. // 3. Correct the line height in all browsers. // 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. // 5. Change the default tap highlight to be completely transparent in iOS. *, *::before, *::after { box-sizing: border-box; // 1 } html { font-family: sans-serif; // 2 line-height: 1.15; // 3 -webkit-text-size-adjust: 100%; // 4 -webkit-tap-highlight-color: rgba($black, 0); // 5 } // Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers) // TODO: remove in v5 // stylelint-disable-next-line selector-list-comma-newline-after article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } // Body // // 1. Remove the margin in all browsers. // 2. As a best practice, apply a default `background-color`. // 3. Set an explicit initial text-align value so that we can later use // the `inherit` value on things like `` elements. body { margin: 0; // 1 font-family: $font-family-base; @include font-size($font-size-base); font-weight: $font-weight-base; line-height: $line-height-base; color: $body-color; text-align: left; // 3 background-color: $body-bg; // 2 } // Future-proof rule: in browsers that support :focus-visible, suppress the focus outline // on elements that programmatically receive focus but wouldn't normally show a visible // focus outline. In general, this would mean that the outline is only applied if the // interaction that led to the element receiving programmatic focus was a keyboard interaction, // or the browser has somehow determined that the user is primarily a keyboard user and/or // wants focus outlines to always be presented. // // See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible // and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ [tabindex="-1"]:focus:not(:focus-visible) { outline: 0 !important; } // Content grouping // // 1. Add the correct box sizing in Firefox. // 2. Show the overflow in Edge and IE. hr { box-sizing: content-box; // 1 height: 0; // 1 overflow: visible; // 2 } // // Typography // // Remove top margins from headings // // By default, `

`-`

` all receive top and bottom margins. We nuke the top // margin for easier control within type scales as it avoids margin collapsing. // stylelint-disable-next-line selector-list-comma-newline-after h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: $headings-margin-bottom; } // Reset margins on paragraphs // // Similarly, the top margin on `

`s get reset. However, we also reset the // bottom margin to use `rem` units instead of `em`. p { margin-top: 0; margin-bottom: $paragraph-margin-bottom; } // Abbreviations // // 1. Duplicate behavior to the data-* attribute for our tooltip plugin // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. // 3. Add explicit cursor to indicate changed behavior. // 4. Remove the bottom border in Firefox 39-. // 5. Prevent the text-decoration to be skipped. abbr[title], abbr[data-original-title] { // 1 text-decoration: underline; // 2 text-decoration: underline dotted; // 2 cursor: help; // 3 border-bottom: 0; // 4 text-decoration-skip-ink: none; // 5 } address { margin-bottom: 1rem; font-style: normal; line-height: inherit; } ol, ul, dl { margin-top: 0; margin-bottom: 1rem; } ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; } dt { font-weight: $dt-font-weight; } dd { margin-bottom: .5rem; margin-left: 0; // Undo browser default } blockquote { margin: 0 0 1rem; } b, strong { font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari } small { @include font-size(80%); // Add the correct font size in all browsers } // // Prevent `sub` and `sup` elements from affecting the line height in // all browsers. // sub, sup { position: relative; @include font-size(75%); line-height: 0; vertical-align: baseline; } sub { bottom: -.25em; } sup { top: -.5em; } // // Links // a { color: $link-color; text-decoration: $link-decoration; background-color: transparent; // Remove the gray background on active links in IE 10. @include hover() { color: $link-hover-color; text-decoration: $link-hover-decoration; } } // And undo these styles for placeholder links/named anchors (without href). // It would be more straightforward to just use a[href] in previous block, but that // causes specificity issues in many other styles that are too complex to fix. // See https://github.com/twbs/bootstrap/issues/19402 a:not([href]):not([class]) { color: inherit; text-decoration: none; @include hover() { color: inherit; text-decoration: none; } } // // Code // pre, code, kbd, samp { font-family: $font-family-monospace; @include font-size(1em); // Correct the odd `em` font sizing in all browsers. } pre { // Remove browser default top margin margin-top: 0; // Reset browser default of `1em` to use `rem`s margin-bottom: 1rem; // Don't allow content to break outside overflow: auto; // Disable auto-hiding scrollbar in IE & legacy Edge to avoid overlap, // making it impossible to interact with the content -ms-overflow-style: scrollbar; } // // Figures // figure { // Apply a consistent margin strategy (matches our type styles). margin: 0 0 1rem; } // // Images and content // img { vertical-align: middle; border-style: none; // Remove the border on images inside links in IE 10-. } svg { // Workaround for the SVG overflow bug in IE10/11 is still required. // See https://github.com/twbs/bootstrap/issues/26878 overflow: hidden; vertical-align: middle; } // // Tables // table { border-collapse: collapse; // Prevent double borders } caption { padding-top: $table-cell-padding; padding-bottom: $table-cell-padding; color: $table-caption-color; text-align: left; caption-side: bottom; } // 1. Removes font-weight bold by inheriting // 2. Matches default `` alignment by inheriting `text-align`. // 3. Fix alignment for Safari th { font-weight: $table-th-font-weight; // 1 text-align: inherit; // 2 text-align: -webkit-match-parent; // 3 } // // Forms // label { // Allow labels to use `margin` for spacing. display: inline-block; margin-bottom: $label-margin-bottom; } // Remove the default `border-radius` that macOS Chrome adds. // // Details at https://github.com/twbs/bootstrap/issues/24093 button { // stylelint-disable-next-line property-disallowed-list border-radius: 0; } // Explicitly remove focus outline in Chromium when it shouldn't be // visible (e.g. as result of mouse click or touch tap). It already // should be doing this automatically, but seems to currently be // confused and applies its very visible two-tone outline anyway. button:focus:not(:focus-visible) { outline: 0; } input, button, select, optgroup, textarea { margin: 0; // Remove the margin in Firefox and Safari font-family: inherit; @include font-size(inherit); line-height: inherit; } button, input { overflow: visible; // Show the overflow in Edge } button, select { text-transform: none; // Remove the inheritance of text transform in Firefox } // Set the cursor for non-`