diff options
Diffstat (limited to 'vendor/twbs/bootstrap/scss')
29 files changed, 555 insertions, 85 deletions
diff --git a/vendor/twbs/bootstrap/scss/_buttons.scss b/vendor/twbs/bootstrap/scss/_buttons.scss index ee4287c92..fc72cde4d 100644 --- a/vendor/twbs/bootstrap/scss/_buttons.scss +++ b/vendor/twbs/bootstrap/scss/_buttons.scss @@ -4,6 +4,7 @@ .btn { display: inline-block; + align-self: center; font-family: $btn-font-family; font-weight: $btn-font-weight; line-height: $btn-line-height; diff --git a/vendor/twbs/bootstrap/scss/_card.scss b/vendor/twbs/bootstrap/scss/_card.scss index b077858c4..22890f5c9 100644 --- a/vendor/twbs/bootstrap/scss/_card.scss +++ b/vendor/twbs/bootstrap/scss/_card.scss @@ -13,6 +13,7 @@ background-clip: border-box; border: $card-border-width solid $card-border-color; @include border-radius($card-border-radius); + @include box-shadow($card-box-shadow); > hr { margin-right: 0; @@ -65,7 +66,7 @@ .card-link { &:hover { - text-decoration: none; + text-decoration: if($link-hover-decoration == underline, none, null); } + .card-link { diff --git a/vendor/twbs/bootstrap/scss/_functions.scss b/vendor/twbs/bootstrap/scss/_functions.scss index 870f36790..30539b393 100644 --- a/vendor/twbs/bootstrap/scss/_functions.scss +++ b/vendor/twbs/bootstrap/scss/_functions.scss @@ -32,6 +32,47 @@ } } +// Colors +@function to-rgb($value) { + @return red($value), green($value), blue($value); +} + +// stylelint-disable scss/dollar-variable-pattern +@function rgba-css-var($identifier, $target) { + @if $identifier == "body" and $target == "bg" { + @return rgba(var(--#{$variable-prefix}#{$identifier}-bg-rgb), var(--#{$variable-prefix}#{$target}-opacity)); + } @if $identifier == "body" and $target == "text" { + @return rgba(var(--#{$variable-prefix}#{$identifier}-color-rgb), var(--#{$variable-prefix}#{$target}-opacity)); + } @else { + @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity)); + } +} + +@function map-loop($map, $func, $args...) { + $_map: (); + + @each $key, $value in $map { + // allow to pass the $key and $value of the map as an function argument + $_args: (); + @each $arg in $args { + $_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg))); + } + + $_map: map-merge($_map, ($key: call(get-function($func), $_args...))); + } + + @return $_map; +} +// stylelint-enable scss/dollar-variable-pattern + +@function varify($list) { + $result: null; + @each $entry in $list { + $result: append($result, var(--#{$variable-prefix}#{$entry}), space); + } + @return $result; +} + // Internal Bootstrap function to turn maps into its negative variant. // It prefixes the keys with `n` and makes the value negative. @function negativify-map($map) { @@ -55,6 +96,16 @@ @return $result; } +// Merge multiple maps +@function map-merge-multiple($maps...) { + $merged-maps: (); + + @each $map in $maps { + $merged-maps: map-merge($merged-maps, $map); + } + @return $merged-maps; +} + // Replace `$search` with `$replace` in `$string` // Used on our SVG icon backgrounds for custom forms. // @@ -181,14 +232,6 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 @return $value1 + $value2; } - @if type-of($value1) != number { - $value1: unquote("(") + $value1 + unquote(")"); - } - - @if type-of($value2) != number { - $value2: unquote("(") + $value2 + unquote(")"); - } - @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2); } @@ -209,10 +252,6 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 @return $value1 - $value2; } - @if type-of($value1) != number { - $value1: unquote("(") + $value1 + unquote(")"); - } - @if type-of($value2) != number { $value2: unquote("(") + $value2 + unquote(")"); } diff --git a/vendor/twbs/bootstrap/scss/_grid.scss b/vendor/twbs/bootstrap/scss/_grid.scss index 5686f31fe..27fd55847 100644 --- a/vendor/twbs/bootstrap/scss/_grid.scss +++ b/vendor/twbs/bootstrap/scss/_grid.scss @@ -12,6 +12,17 @@ } } +@if $enable-cssgrid { + .grid { + display: grid; + grid-template-rows: repeat(var(--#{$variable-prefix}rows, 1), 1fr); + grid-template-columns: repeat(var(--#{$variable-prefix}columns, #{$grid-columns}), 1fr); + gap: var(--#{$variable-prefix}gap, #{$grid-gutter-width}); + + @include make-cssgrid(); + } +} + // Columns // diff --git a/vendor/twbs/bootstrap/scss/_helpers.scss b/vendor/twbs/bootstrap/scss/_helpers.scss index 8f566d12f..4a989f5a5 100644 --- a/vendor/twbs/bootstrap/scss/_helpers.scss +++ b/vendor/twbs/bootstrap/scss/_helpers.scss @@ -2,6 +2,8 @@ @import "helpers/colored-links"; @import "helpers/ratio"; @import "helpers/position"; +@import "helpers/stacks"; @import "helpers/visually-hidden"; @import "helpers/stretched-link"; @import "helpers/text-truncation"; +@import "helpers/vr"; diff --git a/vendor/twbs/bootstrap/scss/_mixins.scss b/vendor/twbs/bootstrap/scss/_mixins.scss index eec085789..af1f74f72 100644 --- a/vendor/twbs/bootstrap/scss/_mixins.scss +++ b/vendor/twbs/bootstrap/scss/_mixins.scss @@ -22,6 +22,7 @@ // Components @import "mixins/alert"; +@import "mixins/backdrop"; @import "mixins/buttons"; @import "mixins/caret"; @import "mixins/pagination"; diff --git a/vendor/twbs/bootstrap/scss/_modal.scss b/vendor/twbs/bootstrap/scss/_modal.scss index 77473085c..21e1258f5 100644 --- a/vendor/twbs/bootstrap/scss/_modal.scss +++ b/vendor/twbs/bootstrap/scss/_modal.scss @@ -85,17 +85,7 @@ // Modal background .modal-backdrop { - position: fixed; - top: 0; - left: 0; - z-index: $zindex-modal-backdrop; - width: 100vw; - height: 100vh; - background-color: $modal-backdrop-bg; - - // Fade for backdrop - &.fade { opacity: 0; } - &.show { opacity: $modal-backdrop-opacity; } + @include overlay-backdrop($zindex-modal-backdrop, $modal-backdrop-bg, $modal-backdrop-opacity); } // Modal header diff --git a/vendor/twbs/bootstrap/scss/_navbar.scss b/vendor/twbs/bootstrap/scss/_navbar.scss index 2ccef11b7..001dfc988 100644 --- a/vendor/twbs/bootstrap/scss/_navbar.scss +++ b/vendor/twbs/bootstrap/scss/_navbar.scss @@ -193,13 +193,42 @@ .navbar-toggler { display: none; } + + .offcanvas-header { + display: none; + } + + .offcanvas { + position: inherit; + bottom: 0; + z-index: 1000; + flex-grow: 1; + visibility: visible !important; // stylelint-disable-line declaration-no-important + background-color: transparent; + border-right: 0; + border-left: 0; + @include transition(none); + transform: none; + } + .offcanvas-top, + .offcanvas-bottom { + height: auto; + border-top: 0; + border-bottom: 0; + } + + .offcanvas-body { + display: flex; + flex-grow: 0; + padding: 0; + overflow-y: visible; + } } } } } // scss-docs-end navbar-expand-loop - // Navbar themes // // Styles for switching between navbars with light or dark background. diff --git a/vendor/twbs/bootstrap/scss/_offcanvas.scss b/vendor/twbs/bootstrap/scss/_offcanvas.scss index 91db68643..a089c2a08 100644 --- a/vendor/twbs/bootstrap/scss/_offcanvas.scss +++ b/vendor/twbs/bootstrap/scss/_offcanvas.scss @@ -14,6 +14,10 @@ @include transition(transform $offcanvas-transition-duration ease-in-out); } +.offcanvas-backdrop { + @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity); +} + .offcanvas-header { display: flex; align-items: center; diff --git a/vendor/twbs/bootstrap/scss/_placeholders.scss b/vendor/twbs/bootstrap/scss/_placeholders.scss new file mode 100644 index 000000000..2f647cc9b --- /dev/null +++ b/vendor/twbs/bootstrap/scss/_placeholders.scss @@ -0,0 +1,51 @@ +.placeholder { + display: inline-block; + min-height: 1em; + vertical-align: middle; + cursor: wait; + background-color: currentColor; + opacity: $placeholder-opacity-max; + + &.btn::before { + display: inline-block; + content: ""; + } +} + +// Sizing +.placeholder-xs { + min-height: .6em; +} + +.placeholder-sm { + min-height: .8em; +} + +.placeholder-lg { + min-height: 1.2em; +} + +// Animation +.placeholder-glow { + .placeholder { + animation: placeholder-glow 2s ease-in-out infinite; + } +} + +@keyframes placeholder-glow { + 50% { + opacity: $placeholder-opacity-min; + } +} + +.placeholder-wave { + mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%); + mask-size: 200% 100%; + animation: placeholder-wave 2s linear infinite; +} + +@keyframes placeholder-wave { + 100% { + mask-position: -200% 0%; + } +} diff --git a/vendor/twbs/bootstrap/scss/_reboot.scss b/vendor/twbs/bootstrap/scss/_reboot.scss index 352046988..79fedc6ca 100644 --- a/vendor/twbs/bootstrap/scss/_reboot.scss +++ b/vendor/twbs/bootstrap/scss/_reboot.scss @@ -26,7 +26,9 @@ // null by default, thus nothing is generated. :root { - font-size: $font-size-root; + @if $font-size-root != null { + font-size: var(--#{$variable-prefix}root-font-size); + } @if $enable-smooth-scroll { @media (prefers-reduced-motion: no-preference) { @@ -43,18 +45,20 @@ // 3. Prevent adjustments of font size after orientation changes in iOS. // 4. Change the default tap highlight to be completely transparent in iOS. +// scss-docs-start reboot-body-rules 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: $body-text-align; - background-color: $body-bg; // 2 + font-family: var(--#{$variable-prefix}body-font-family); + @include font-size(var(--#{$variable-prefix}body-font-size)); + font-weight: var(--#{$variable-prefix}body-font-weight); + line-height: var(--#{$variable-prefix}body-line-height); + color: var(--#{$variable-prefix}body-color); + text-align: var(--#{$variable-prefix}body-text-align); + background-color: var(--#{$variable-prefix}body-bg); // 2 -webkit-text-size-adjust: 100%; // 3 -webkit-tap-highlight-color: rgba($black, 0); // 4 } +// scss-docs-end reboot-body-rules // Content grouping diff --git a/vendor/twbs/bootstrap/scss/_root.scss b/vendor/twbs/bootstrap/scss/_root.scss index 768d6343f..5e138e97b 100644 --- a/vendor/twbs/bootstrap/scss/_root.scss +++ b/vendor/twbs/bootstrap/scss/_root.scss @@ -1,16 +1,54 @@ :root { - // Custom variable values only support SassScript inside `#{}`. + // 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}; } - // Use `inspect` for lists so that quoted items keep the quotes. + @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 } diff --git a/vendor/twbs/bootstrap/scss/_tables.scss b/vendor/twbs/bootstrap/scss/_tables.scss index 92556ba05..e10e4c4e4 100644 --- a/vendor/twbs/bootstrap/scss/_tables.scss +++ b/vendor/twbs/bootstrap/scss/_tables.scss @@ -39,8 +39,8 @@ } // Highlight border color between thead, tbody and tfoot. - > :not(:last-child) > :last-child > * { - border-bottom-color: $table-group-separator-color; + > :not(:first-child) { + border-top: (2 * $table-border-width) solid $table-group-separator-color; } } @@ -91,6 +91,10 @@ > :not(caption) > * > * { border-bottom-width: 0; } + + > :not(:first-child) { + border-top-width: 0; + } } // Zebra-striping @@ -98,7 +102,7 @@ // Default zebra-stripe styles (alternating gray and transparent backgrounds) .table-striped { - > tbody > tr:nth-of-type(#{$table-striped-order}) { + > tbody > tr:nth-of-type(#{$table-striped-order}) > * { --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg); color: var(--#{$variable-prefix}table-striped-color); } @@ -118,7 +122,7 @@ // Placed here since it has to come after the potential zebra striping .table-hover { - > tbody > tr:hover { + > tbody > tr:hover > * { --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg); color: var(--#{$variable-prefix}table-hover-color); } diff --git a/vendor/twbs/bootstrap/scss/_toasts.scss b/vendor/twbs/bootstrap/scss/_toasts.scss index 717aae576..0a2d6ec87 100644 --- a/vendor/twbs/bootstrap/scss/_toasts.scss +++ b/vendor/twbs/bootstrap/scss/_toasts.scss @@ -10,11 +10,11 @@ box-shadow: $toast-box-shadow; @include border-radius($toast-border-radius); - &:not(.showing):not(.show) { + &.showing { opacity: 0; } - &.hide { + &:not(.show) { display: none; } } diff --git a/vendor/twbs/bootstrap/scss/_transitions.scss b/vendor/twbs/bootstrap/scss/_transitions.scss index 2905df45c..bfb26aa8a 100644 --- a/vendor/twbs/bootstrap/scss/_transitions.scss +++ b/vendor/twbs/bootstrap/scss/_transitions.scss @@ -17,5 +17,11 @@ height: 0; overflow: hidden; @include transition($transition-collapse); + + &.collapse-horizontal { + width: 0; + height: auto; + @include transition($transition-collapse-width); + } } // scss-docs-end collapse-classes diff --git a/vendor/twbs/bootstrap/scss/_utilities.scss b/vendor/twbs/bootstrap/scss/_utilities.scss index 3c927cf59..960d6f1ad 100644 --- a/vendor/twbs/bootstrap/scss/_utilities.scss +++ b/vendor/twbs/bootstrap/scss/_utilities.scss @@ -24,6 +24,19 @@ $utilities: map-merge( ) ), // 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, @@ -501,32 +514,55 @@ $utilities: map-merge( "color": ( property: color, class: text, + local-vars: ( + "text-opacity": 1 + ), values: map-merge( - $theme-colors, + $utilities-text-colors, ( - "white": $white, - "body": $body-color, "muted": $text-muted, - "black-50": rgba($black, .5), - "white-50": rgba($white, .5), + "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( - $theme-colors, + $utilities-bg-colors, ( - "body": $body-bg, - "white": $white, "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, diff --git a/vendor/twbs/bootstrap/scss/_variables.scss b/vendor/twbs/bootstrap/scss/_variables.scss index 06dfa4a4d..f33b804a1 100644 --- a/vendor/twbs/bootstrap/scss/_variables.scss +++ b/vendor/twbs/bootstrap/scss/_variables.scss @@ -90,6 +90,10 @@ $theme-colors: ( ) !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; @@ -198,6 +202,126 @@ $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 @@ -221,6 +345,7 @@ $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; @@ -280,6 +405,38 @@ $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 // @@ -397,6 +554,7 @@ $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 @@ -692,7 +850,7 @@ $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: $white !default; +$input-bg: $body-bg !default; $input-disabled-bg: $gray-200 !default; $input-disabled-border-color: null !default; @@ -725,6 +883,8 @@ $input-height-sm: add($input-line-height * 1em, add($input $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 @@ -764,7 +924,7 @@ $form-check-inline-margin-end: 1rem !default; // scss-docs-end form-check-variables // scss-docs-start form-switch-variables -$form-switch-color: rgba(0, 0, 0, .25) !default; +$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; @@ -812,7 +972,7 @@ $form-select-feedback-icon-size: $input-height-inner-half $input-height-i $form-select-border-width: $input-border-width !default; $form-select-border-color: $input-border-color !default; -$form-select-border-radius: $border-radius !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; @@ -822,10 +982,12 @@ $form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focu $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 @@ -906,9 +1068,10 @@ $form-validation-states: ( $zindex-dropdown: 1000 !default; $zindex-sticky: 1020 !default; $zindex-fixed: 1030 !default; -$zindex-modal-backdrop: 1040 !default; -$zindex-offcanvas: 1050 !default; -$zindex-modal: 1060 !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 @@ -1006,7 +1169,7 @@ $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($gray-900, 10%) !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; @@ -1078,6 +1241,13 @@ $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 @@ -1085,8 +1255,9 @@ $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-radius: $border-radius !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; @@ -1126,7 +1297,7 @@ $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-color !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; @@ -1203,14 +1374,14 @@ $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-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(0, 0, 0, .05) !default; +$toast-header-border-color: rgba($black, .05) !default; // scss-docs-end toast-variables @@ -1452,6 +1623,8 @@ $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 diff --git a/vendor/twbs/bootstrap/scss/bootstrap-grid.scss b/vendor/twbs/bootstrap/scss/bootstrap-grid.scss index bcd8c19cf..b5f43309d 100644 --- a/vendor/twbs/bootstrap/scss/bootstrap-grid.scss +++ b/vendor/twbs/bootstrap/scss/bootstrap-grid.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap Grid v5.0.2 (https://getbootstrap.com/) + * Bootstrap Grid v5.1.2 (https://getbootstrap.com/) * Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) @@ -18,6 +18,8 @@ $include-column-box-sizing: true !default; @import "vendor/rfs"; +@import "root"; + @import "containers"; @import "grid"; diff --git a/vendor/twbs/bootstrap/scss/bootstrap-reboot.scss b/vendor/twbs/bootstrap/scss/bootstrap-reboot.scss index 72444f6c1..ae6fb7ba1 100644 --- a/vendor/twbs/bootstrap/scss/bootstrap-reboot.scss +++ b/vendor/twbs/bootstrap/scss/bootstrap-reboot.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap Reboot v5.0.2 (https://getbootstrap.com/) + * Bootstrap Reboot v5.1.2 (https://getbootstrap.com/) * Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) @@ -8,8 +8,6 @@ @import "functions"; @import "variables"; -// Prevent the usage of custom properties since we don't add them to `:root` in reboot -$font-family-base: $font-family-sans-serif; // stylelint-disable-line scss/dollar-variable-default -$font-family-code: $font-family-monospace; // stylelint-disable-line scss/dollar-variable-default @import "mixins"; +@import "root"; @import "reboot"; diff --git a/vendor/twbs/bootstrap/scss/bootstrap-utilities.scss b/vendor/twbs/bootstrap/scss/bootstrap-utilities.scss index ab2d0e701..95a42199b 100644 --- a/vendor/twbs/bootstrap/scss/bootstrap-utilities.scss +++ b/vendor/twbs/bootstrap/scss/bootstrap-utilities.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap Utilities v5.0.2 (https://getbootstrap.com/) + * Bootstrap Utilities v5.1.2 (https://getbootstrap.com/) * Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) diff --git a/vendor/twbs/bootstrap/scss/bootstrap.scss b/vendor/twbs/bootstrap/scss/bootstrap.scss index eb047a3f2..e17b27475 100644 --- a/vendor/twbs/bootstrap/scss/bootstrap.scss +++ b/vendor/twbs/bootstrap/scss/bootstrap.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap v5.0.2 (https://getbootstrap.com/) + * Bootstrap v5.1.2 (https://getbootstrap.com/) * Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) @@ -43,6 +43,7 @@ @import "carousel"; @import "spinners"; @import "offcanvas"; +@import "placeholders"; // Helpers @import "helpers"; diff --git a/vendor/twbs/bootstrap/scss/forms/_form-control.scss b/vendor/twbs/bootstrap/scss/forms/_form-control.scss index 9728b91f3..96423c530 100644 --- a/vendor/twbs/bootstrap/scss/forms/_form-control.scss +++ b/vendor/twbs/bootstrap/scss/forms/_form-control.scss @@ -199,7 +199,7 @@ textarea { // stylelint-enable selector-no-qualifying-type .form-control-color { - max-width: 3rem; + width: $form-color-width; height: auto; // Override fixed browser height padding: $input-padding-y; diff --git a/vendor/twbs/bootstrap/scss/forms/_form-select.scss b/vendor/twbs/bootstrap/scss/forms/_form-select.scss index 4506a979a..153ff6cd5 100644 --- a/vendor/twbs/bootstrap/scss/forms/_form-select.scss +++ b/vendor/twbs/bootstrap/scss/forms/_form-select.scss @@ -60,6 +60,7 @@ padding-bottom: $form-select-padding-y-sm; padding-left: $form-select-padding-x-sm; @include font-size($form-select-font-size-sm); + @include border-radius($form-select-border-radius-sm); } .form-select-lg { @@ -67,4 +68,5 @@ padding-bottom: $form-select-padding-y-lg; padding-left: $form-select-padding-x-lg; @include font-size($form-select-font-size-lg); + @include border-radius($form-select-border-radius-lg); } diff --git a/vendor/twbs/bootstrap/scss/helpers/_stacks.scss b/vendor/twbs/bootstrap/scss/helpers/_stacks.scss new file mode 100644 index 000000000..6cd237ae6 --- /dev/null +++ b/vendor/twbs/bootstrap/scss/helpers/_stacks.scss @@ -0,0 +1,15 @@ +// scss-docs-start stacks +.hstack { + display: flex; + flex-direction: row; + align-items: center; + align-self: stretch; +} + +.vstack { + display: flex; + flex: 1 1 auto; + flex-direction: column; + align-self: stretch; +} +// scss-docs-end stacks diff --git a/vendor/twbs/bootstrap/scss/helpers/_vr.scss b/vendor/twbs/bootstrap/scss/helpers/_vr.scss new file mode 100644 index 000000000..37f864777 --- /dev/null +++ b/vendor/twbs/bootstrap/scss/helpers/_vr.scss @@ -0,0 +1,8 @@ +.vr { + display: inline-block; + align-self: stretch; + width: 1px; + min-height: 1em; + background-color: currentColor; + opacity: $hr-opacity; +} diff --git a/vendor/twbs/bootstrap/scss/mixins/_backdrop.scss b/vendor/twbs/bootstrap/scss/mixins/_backdrop.scss new file mode 100644 index 000000000..9705ae9ee --- /dev/null +++ b/vendor/twbs/bootstrap/scss/mixins/_backdrop.scss @@ -0,0 +1,14 @@ +// 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; } +} diff --git a/vendor/twbs/bootstrap/scss/mixins/_grid.scss b/vendor/twbs/bootstrap/scss/mixins/_grid.scss index ff6941c46..aea51abaf 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_grid.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_grid.scss @@ -7,9 +7,10 @@ --#{$variable-prefix}gutter-y: 0; display: flex; flex-wrap: wrap; - margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list - margin-right: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list - margin-left: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list + // 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) { @@ -66,8 +67,8 @@ @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { @each $breakpoint in map-keys($breakpoints) { - // .row-cols defaults must all appear before .col overrides so they can be overridden. $infix: breakpoint-infix($breakpoint, $breakpoints); + @include media-breakpoint-up($breakpoint, $breakpoints) { // Provide basic `.col-{bp}` classes for equal-width flexbox columns .col#{$infix} { @@ -85,13 +86,7 @@ } } } - } - } - - @each $breakpoint in map-keys($breakpoints) { - $infix: breakpoint-infix($breakpoint, $breakpoints); - @include media-breakpoint-up($breakpoint, $breakpoints) { .col#{$infix}-auto { @include make-col-auto(); } @@ -130,3 +125,27 @@ } } } + +@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; + } + } + } + } + } +} diff --git a/vendor/twbs/bootstrap/scss/mixins/_utilities.scss b/vendor/twbs/bootstrap/scss/mixins/_utilities.scss index 4d2370a0b..e871b4233 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_utilities.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_utilities.scss @@ -41,25 +41,46 @@ } } + $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 */ } - .#{$property-class + $infix + $property-class-modifier} { - @each $property in $properties { - #{$property}: $value if($enable-important-utilities, !important, null); + + @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} { + @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 */ } diff --git a/vendor/twbs/bootstrap/scss/mixins/_visually-hidden.scss b/vendor/twbs/bootstrap/scss/mixins/_visually-hidden.scss index ed7bc9c13..4fc7f49d6 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_visually-hidden.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_visually-hidden.scss @@ -3,7 +3,7 @@ // 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://hugogiraudel.com/2016/10/13/css-hide-and-seek/ +// See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/ @mixin visually-hidden() { position: absolute !important; |