diff options
Diffstat (limited to 'vendor/twbs/bootstrap/scss/mixins')
| -rw-r--r-- | vendor/twbs/bootstrap/scss/mixins/_alert.scss | 10 | ||||
| -rw-r--r-- | vendor/twbs/bootstrap/scss/mixins/_banner.scss | 9 | ||||
| -rw-r--r-- | vendor/twbs/bootstrap/scss/mixins/_breakpoints.scss | 16 | ||||
| -rw-r--r-- | vendor/twbs/bootstrap/scss/mixins/_buttons.scss | 127 | ||||
| -rw-r--r-- | vendor/twbs/bootstrap/scss/mixins/_container.scss | 6 | ||||
| -rw-r--r-- | vendor/twbs/bootstrap/scss/mixins/_forms.scss | 8 | ||||
| -rw-r--r-- | vendor/twbs/bootstrap/scss/mixins/_gradients.scss | 2 | ||||
| -rw-r--r-- | vendor/twbs/bootstrap/scss/mixins/_grid.scss | 24 | ||||
| -rw-r--r-- | vendor/twbs/bootstrap/scss/mixins/_pagination.scss | 29 | ||||
| -rw-r--r-- | vendor/twbs/bootstrap/scss/mixins/_reset-text.scss | 2 | ||||
| -rw-r--r-- | vendor/twbs/bootstrap/scss/mixins/_table-variants.scss | 21 | ||||
| -rw-r--r-- | vendor/twbs/bootstrap/scss/mixins/_utilities.scss | 16 |
12 files changed, 110 insertions, 160 deletions
diff --git a/vendor/twbs/bootstrap/scss/mixins/_alert.scss b/vendor/twbs/bootstrap/scss/mixins/_alert.scss index f3eb59511..231f068ec 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_alert.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_alert.scss @@ -1,8 +1,12 @@ // scss-docs-start alert-variant-mixin @mixin alert-variant($background, $border, $color) { - color: $color; - @include gradient-bg($background); - border-color: $border; + --#{$prefix}alert-color: #{$color}; + --#{$prefix}alert-bg: #{$background}; + --#{$prefix}alert-border-color: #{$border}; + + @if $enable-gradients { + background-image: var(--#{$prefix}gradient); + } .alert-link { color: shade-color($color, 20%); diff --git a/vendor/twbs/bootstrap/scss/mixins/_banner.scss b/vendor/twbs/bootstrap/scss/mixins/_banner.scss new file mode 100644 index 000000000..0f14bf149 --- /dev/null +++ b/vendor/twbs/bootstrap/scss/mixins/_banner.scss @@ -0,0 +1,9 @@ +@mixin bsBanner($file, $suffix:"") { + /*! + * Bootstrap #{$file} v5.2.0 (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) + */ +} + diff --git a/vendor/twbs/bootstrap/scss/mixins/_breakpoints.scss b/vendor/twbs/bootstrap/scss/mixins/_breakpoints.scss index cdc8034eb..286be893d 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_breakpoints.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_breakpoints.scss @@ -2,7 +2,7 @@ // // 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) +// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px) // // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. @@ -10,9 +10,9 @@ // // >> breakpoint-next(sm) // md -// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)) // md -// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl)) +// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl)) // md @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { $n: index($breakpoint-names, $name); @@ -24,7 +24,7 @@ // Minimum breakpoint width. Null for the smallest (first) breakpoint. // -// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)) // 576px @function breakpoint-min($name, $breakpoints: $grid-breakpoints) { $min: map-get($breakpoints, $name); @@ -38,7 +38,7 @@ // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. // See https://bugs.webkit.org/show_bug.cgi?id=178261 // -// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)) // 767.98px @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { $max: map-get($breakpoints, $name); @@ -48,9 +48,9 @@ // 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)) +// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)) // "" (Returns a blank string) -// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)) // "-sm" @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); @@ -109,7 +109,7 @@ @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { $min: breakpoint-min($name, $breakpoints); $next: breakpoint-next($name, $breakpoints); - $max: breakpoint-max($next); + $max: breakpoint-max($next, $breakpoints); @if $min != null and $max != null { @media (min-width: $min) and (max-width: $max) { diff --git a/vendor/twbs/bootstrap/scss/mixins/_buttons.scss b/vendor/twbs/bootstrap/scss/mixins/_buttons.scss index b67499668..cf087fda7 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_buttons.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_buttons.scss @@ -18,59 +18,20 @@ $disabled-border: $border, $disabled-color: color-contrast($disabled-background) ) { - color: $color; - @include gradient-bg($background); - border-color: $border; - @include box-shadow($btn-box-shadow); - - &:hover { - color: $hover-color; - @include gradient-bg($hover-background); - border-color: $hover-border; - } - - .btn-check:focus + &, - &:focus { - color: $hover-color; - @include gradient-bg($hover-background); - border-color: $hover-border; - @if $enable-shadows { - @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5)); - } @else { - // Avoid using mixin so we can pass custom focus shadow properly - box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); - } - } - - .btn-check:checked + &, - .btn-check:active + &, - &:active, - &.active, - .show > &.dropdown-toggle { - color: $active-color; - background-color: $active-background; - // Remove CSS gradients if they're enabled - background-image: if($enable-gradients, none, null); - border-color: $active-border; - - &:focus { - @if $enable-shadows { - @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5)); - } @else { - // Avoid using mixin so we can pass custom focus shadow properly - box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); - } - } - } - - &:disabled, - &.disabled { - color: $disabled-color; - background-color: $disabled-background; - // Remove CSS gradients if they're enabled - background-image: if($enable-gradients, none, null); - border-color: $disabled-border; - } + --#{$prefix}btn-color: #{$color}; + --#{$prefix}btn-bg: #{$background}; + --#{$prefix}btn-border-color: #{$border}; + --#{$prefix}btn-hover-color: #{$hover-color}; + --#{$prefix}btn-hover-bg: #{$hover-background}; + --#{$prefix}btn-hover-border-color: #{$hover-border}; + --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))}; + --#{$prefix}btn-active-color: #{$active-color}; + --#{$prefix}btn-active-bg: #{$active-background}; + --#{$prefix}btn-active-border-color: #{$active-border}; + --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow}; + --#{$prefix}btn-disabled-color: #{$disabled-color}; + --#{$prefix}btn-disabled-bg: #{$disabled-background}; + --#{$prefix}btn-disabled-border-color: #{$disabled-border}; } // scss-docs-end btn-variant-mixin @@ -82,52 +43,28 @@ $active-border: $color, $active-color: color-contrast($active-background) ) { - color: $color; - border-color: $color; - - &:hover { - color: $color-hover; - background-color: $active-background; - border-color: $active-border; - } - - .btn-check:focus + &, - &:focus { - box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); - } - - .btn-check:checked + &, - .btn-check:active + &, - &:active, - &.active, - &.dropdown-toggle.show { - color: $active-color; - background-color: $active-background; - border-color: $active-border; - - &:focus { - @if $enable-shadows { - @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5)); - } @else { - // Avoid using mixin so we can pass custom focus shadow properly - box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); - } - } - } - - &:disabled, - &.disabled { - color: $color; - background-color: transparent; - } + --#{$prefix}btn-color: #{$color}; + --#{$prefix}btn-border-color: #{$color}; + --#{$prefix}btn-hover-color: #{$color-hover}; + --#{$prefix}btn-hover-bg: #{$active-background}; + --#{$prefix}btn-hover-border-color: #{$active-border}; + --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)}; + --#{$prefix}btn-active-color: #{$active-color}; + --#{$prefix}btn-active-bg: #{$active-background}; + --#{$prefix}btn-active-border-color: #{$active-border}; + --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow}; + --#{$prefix}btn-disabled-color: #{$color}; + --#{$prefix}btn-disabled-bg: transparent; + --#{$prefix}btn-disabled-border-color: #{$color}; + --#{$prefix}gradient: none; } // scss-docs-end btn-outline-variant-mixin // scss-docs-start btn-size-mixin @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { - padding: $padding-y $padding-x; - @include font-size($font-size); - // Manually declare to provide an override to the browser default - @include border-radius($border-radius, 0); + --#{$prefix}btn-padding-y: #{$padding-y}; + --#{$prefix}btn-padding-x: #{$padding-x}; + @include rfs($font-size, --#{$prefix}btn-font-size); + --#{$prefix}btn-border-radius: #{$border-radius}; } // scss-docs-end btn-size-mixin diff --git a/vendor/twbs/bootstrap/scss/mixins/_container.scss b/vendor/twbs/bootstrap/scss/mixins/_container.scss index ee6044d0d..b9f33519e 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_container.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_container.scss @@ -1,9 +1,11 @@ // Container mixins @mixin make-container($gutter: $container-padding-x) { + --#{$prefix}gutter-x: #{$gutter}; + --#{$prefix}gutter-y: 0; width: 100%; - padding-right: var(--#{$variable-prefix}gutter-x, #{$gutter}); - padding-left: var(--#{$variable-prefix}gutter-x, #{$gutter}); + padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list + padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list margin-right: auto; margin-left: auto; } diff --git a/vendor/twbs/bootstrap/scss/mixins/_forms.scss b/vendor/twbs/bootstrap/scss/mixins/_forms.scss index dc5bdb0b9..81cd2e3ac 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_forms.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_forms.scss @@ -104,6 +104,14 @@ } } + .form-control-color { + @include form-validation-state-selector($state) { + @if $enable-validation-icons { + width: add($form-color-width, $input-height-inner); + } + } + } + .form-check-input { @include form-validation-state-selector($state) { border-color: $color; diff --git a/vendor/twbs/bootstrap/scss/mixins/_gradients.scss b/vendor/twbs/bootstrap/scss/mixins/_gradients.scss index 44167d1b8..608e18df2 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_gradients.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_gradients.scss @@ -5,7 +5,7 @@ background-color: $color; @if $enable-gradients { - background-image: var(--#{$variable-prefix}gradient); + background-image: var(--#{$prefix}gradient); } } // scss-docs-end gradient-bg-mixin diff --git a/vendor/twbs/bootstrap/scss/mixins/_grid.scss b/vendor/twbs/bootstrap/scss/mixins/_grid.scss index aea51abaf..38e2239fd 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_grid.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_grid.scss @@ -3,17 +3,17 @@ // Generate semantic grid columns with these mixins. @mixin make-row($gutter: $grid-gutter-width) { - --#{$variable-prefix}gutter-x: #{$gutter}; - --#{$variable-prefix}gutter-y: 0; + --#{$prefix}gutter-x: #{$gutter}; + --#{$prefix}gutter-y: 0; display: flex; flex-wrap: wrap; // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed - margin-top: calc(-1 * var(--#{$variable-prefix}gutter-y)); // stylelint-disable-line function-disallowed-list - margin-right: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list - margin-left: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list + margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list + margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list + margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list } -@mixin make-col-ready($gutter: $grid-gutter-width) { +@mixin make-col-ready() { // Add box sizing if only the grid is loaded box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null); // Prevent columns from becoming too narrow when at smaller grid tiers by @@ -22,9 +22,9 @@ flex-shrink: 0; width: 100%; max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid - padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list - padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list - margin-top: var(--#{$variable-prefix}gutter-y); + padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list + padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list + margin-top: var(--#{$prefix}gutter-y); } @mixin make-col($size: false, $columns: $grid-columns) { @@ -51,7 +51,7 @@ // 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 +// number of columns. Supports wrapping to new lines, but does not do a Masonry // style grid. @mixin row-cols($count) { > * { @@ -114,12 +114,12 @@ @each $key, $value in $gutters { .g#{$infix}-#{$key}, .gx#{$infix}-#{$key} { - --#{$variable-prefix}gutter-x: #{$value}; + --#{$prefix}gutter-x: #{$value}; } .g#{$infix}-#{$key}, .gy#{$infix}-#{$key} { - --#{$variable-prefix}gutter-y: #{$value}; + --#{$prefix}gutter-y: #{$value}; } } } diff --git a/vendor/twbs/bootstrap/scss/mixins/_pagination.scss b/vendor/twbs/bootstrap/scss/mixins/_pagination.scss index 3101b380d..0d657964f 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_pagination.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_pagination.scss @@ -2,30 +2,9 @@ // scss-docs-start pagination-mixin @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) { - .page-link { - padding: $padding-y $padding-x; - @include font-size($font-size); - } - - .page-item { - @if $pagination-margin-start == (-$pagination-border-width) { - &:first-child { - .page-link { - @include border-start-radius($border-radius); - } - } - - &:last-child { - .page-link { - @include border-end-radius($border-radius); - } - } - } @else { - //Add border-radius to all pageLinks in case they have left margin - .page-link { - @include border-radius($border-radius); - } - } - } + --#{$prefix}pagination-padding-x: #{$padding-x}; + --#{$prefix}pagination-padding-y: #{$padding-y}; + @include rfs($font-size, --#{$prefix}pagination-font-size); + --#{$prefix}pagination-border-radius: #{$border-radius}; } // scss-docs-end pagination-mixin diff --git a/vendor/twbs/bootstrap/scss/mixins/_reset-text.scss b/vendor/twbs/bootstrap/scss/mixins/_reset-text.scss index 354f5648b..f5bd1afec 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_reset-text.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_reset-text.scss @@ -11,7 +11,7 @@ text-transform: none; letter-spacing: normal; word-break: normal; - word-spacing: normal; white-space: normal; + word-spacing: normal; line-break: auto; } diff --git a/vendor/twbs/bootstrap/scss/mixins/_table-variants.scss b/vendor/twbs/bootstrap/scss/mixins/_table-variants.scss index 9fd0fb02a..ae43ec63d 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_table-variants.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_table-variants.scss @@ -5,17 +5,20 @@ $hover-bg: mix($color, $background, percentage($table-hover-bg-factor)); $striped-bg: mix($color, $background, percentage($table-striped-bg-factor)); $active-bg: mix($color, $background, percentage($table-active-bg-factor)); + $border-color: mix($color, $background, percentage($table-border-factor)); - --#{$variable-prefix}table-bg: #{$background}; - --#{$variable-prefix}table-striped-bg: #{$striped-bg}; - --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)}; - --#{$variable-prefix}table-active-bg: #{$active-bg}; - --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)}; - --#{$variable-prefix}table-hover-bg: #{$hover-bg}; - --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)}; + --#{$prefix}table-color: #{$color}; + --#{$prefix}table-bg: #{$background}; + --#{$prefix}table-border-color: #{$border-color}; + --#{$prefix}table-striped-bg: #{$striped-bg}; + --#{$prefix}table-striped-color: #{color-contrast($striped-bg)}; + --#{$prefix}table-active-bg: #{$active-bg}; + --#{$prefix}table-active-color: #{color-contrast($active-bg)}; + --#{$prefix}table-hover-bg: #{$hover-bg}; + --#{$prefix}table-hover-color: #{color-contrast($hover-bg)}; - color: $color; - border-color: mix($color, $background, percentage($table-border-factor)); + color: var(--#{$prefix}table-color); + border-color: var(--#{$prefix}table-border-color); } } // scss-docs-end table-variant diff --git a/vendor/twbs/bootstrap/scss/mixins/_utilities.scss b/vendor/twbs/bootstrap/scss/mixins/_utilities.scss index e871b4233..0eadc50b5 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_utilities.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_utilities.scss @@ -20,6 +20,9 @@ $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1)); $property-class: if($property-class == null, "", $property-class); + // Use custom CSS variable name if present, otherwise default to `class` + $css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class)); + // State params to generate pseudo-classes $state: if(map-has-key($utility, state), map-get($utility, state), ()); @@ -52,20 +55,20 @@ @if $is-css-var { .#{$property-class + $infix + $property-class-modifier} { - --#{$variable-prefix}#{$property-class}: #{$value}; + --#{$prefix}#{$css-variable-name}: #{$value}; } @each $pseudo in $state { .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { - --#{$variable-prefix}#{$property-class}: #{$value}; + --#{$prefix}#{$css-variable-name}: #{$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}; + @each $local-var, $variable in $is-local-vars { + --#{$prefix}#{$local-var}: #{$variable}; } } #{$property}: $value if($enable-important-utilities, !important, null); @@ -75,6 +78,11 @@ @each $pseudo in $state { .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { @each $property in $properties { + @if $is-local-vars { + @each $local-var, $variable in $is-local-vars { + --#{$prefix}#{$local-var}: #{$variable}; + } + } #{$property}: $value if($enable-important-utilities, !important, null); } } |