diff options
Diffstat (limited to 'vendor/twbs/bootstrap/scss/mixins')
28 files changed, 288 insertions, 548 deletions
diff --git a/vendor/twbs/bootstrap/scss/mixins/_alert.scss b/vendor/twbs/bootstrap/scss/mixins/_alert.scss index db5a7eb45..f3eb59511 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_alert.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_alert.scss @@ -1,13 +1,11 @@ +// scss-docs-start alert-variant-mixin @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%); + color: shade-color($color, 20%); } } +// scss-docs-end alert-variant-mixin diff --git a/vendor/twbs/bootstrap/scss/mixins/_background-variant.scss b/vendor/twbs/bootstrap/scss/mixins/_background-variant.scss deleted file mode 100644 index 80580189a..000000000 --- a/vendor/twbs/bootstrap/scss/mixins/_background-variant.scss +++ /dev/null @@ -1,23 +0,0 @@ -// 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); -} diff --git a/vendor/twbs/bootstrap/scss/mixins/_badge.scss b/vendor/twbs/bootstrap/scss/mixins/_badge.scss deleted file mode 100644 index f1c499141..000000000 --- a/vendor/twbs/bootstrap/scss/mixins/_badge.scss +++ /dev/null @@ -1,17 +0,0 @@ -@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); - } - } -} diff --git a/vendor/twbs/bootstrap/scss/mixins/_border-radius.scss b/vendor/twbs/bootstrap/scss/mixins/_border-radius.scss index 4fad91d67..616decbce 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_border-radius.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_border-radius.scss @@ -14,6 +14,7 @@ @return $return; } +// scss-docs-start border-radius-mixins @mixin border-radius($radius: $border-radius, $fallback-border-radius: false) { @if $enable-rounded { border-radius: valid-radius($radius); @@ -23,54 +24,55 @@ } } -@mixin border-top-radius($radius) { +@mixin border-top-radius($radius: $border-radius) { @if $enable-rounded { border-top-left-radius: valid-radius($radius); border-top-right-radius: valid-radius($radius); } } -@mixin border-right-radius($radius) { +@mixin border-end-radius($radius: $border-radius) { @if $enable-rounded { border-top-right-radius: valid-radius($radius); border-bottom-right-radius: valid-radius($radius); } } -@mixin border-bottom-radius($radius) { +@mixin border-bottom-radius($radius: $border-radius) { @if $enable-rounded { border-bottom-right-radius: valid-radius($radius); border-bottom-left-radius: valid-radius($radius); } } -@mixin border-left-radius($radius) { +@mixin border-start-radius($radius: $border-radius) { @if $enable-rounded { border-top-left-radius: valid-radius($radius); border-bottom-left-radius: valid-radius($radius); } } -@mixin border-top-left-radius($radius) { +@mixin border-top-start-radius($radius: $border-radius) { @if $enable-rounded { border-top-left-radius: valid-radius($radius); } } -@mixin border-top-right-radius($radius) { +@mixin border-top-end-radius($radius: $border-radius) { @if $enable-rounded { border-top-right-radius: valid-radius($radius); } } -@mixin border-bottom-right-radius($radius) { +@mixin border-bottom-end-radius($radius: $border-radius) { @if $enable-rounded { border-bottom-right-radius: valid-radius($radius); } } -@mixin border-bottom-left-radius($radius) { +@mixin border-bottom-start-radius($radius: $border-radius) { @if $enable-rounded { border-bottom-left-radius: valid-radius($radius); } } +// scss-docs-end border-radius-mixins diff --git a/vendor/twbs/bootstrap/scss/mixins/_box-shadow.scss b/vendor/twbs/bootstrap/scss/mixins/_box-shadow.scss index 0726d4359..4172541f3 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_box-shadow.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_box-shadow.scss @@ -2,17 +2,15 @@ @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"); - } + @each $value in $shadow { + @if $value != null { + $result: append($result, $value, "comma"); + } + @if $value == none and length($shadow) > 1 { + @warn "The keyword 'none' must be used as a single argument."; } } + @if (length($result) > 0) { box-shadow: $result; } diff --git a/vendor/twbs/bootstrap/scss/mixins/_breakpoints.scss b/vendor/twbs/bootstrap/scss/mixins/_breakpoints.scss index 23a5de96b..cdc8034eb 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_breakpoints.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_breakpoints.scss @@ -16,7 +16,10 @@ // 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); + @if not $n { + @error "breakpoint `#{$name}` not found in `#{$breakpoints}`"; + } + @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); } // Minimum breakpoint width. Null for the smallest (first) breakpoint. @@ -28,18 +31,18 @@ @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. +// Maximum breakpoint width. +// The maximum value is reduced by 0.02px to work around the limitations of +// `min-` and `max-` prefixes and viewports with fractional widths. // See https://www.w3.org/TR/mediaqueries-4/#mq-min-max // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. // See https://bugs.webkit.org/show_bug.cgi?id=178261 // -// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// >> breakpoint-max(md, (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); + $max: map-get($breakpoints, $name); + @return if($max and $max > 0, $max - .02, null); } // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front. @@ -104,8 +107,9 @@ // 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); + $min: breakpoint-min($name, $breakpoints); + $next: breakpoint-next($name, $breakpoints); + $max: breakpoint-max($next); @if $min != null and $max != null { @media (min-width: $min) and (max-width: $max) { @@ -116,7 +120,7 @@ @content; } } @else if $min == null { - @include media-breakpoint-down($name, $breakpoints) { + @include media-breakpoint-down($next, $breakpoints) { @content; } } diff --git a/vendor/twbs/bootstrap/scss/mixins/_buttons.scss b/vendor/twbs/bootstrap/scss/mixins/_buttons.scss index d6235aa27..c06fa4a98 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_buttons.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_buttons.scss @@ -3,94 +3,110 @@ // 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); +// scss-docs-start btn-variant-mixin +@mixin button-variant( + $background, + $border, + $color: color-contrast($background), + $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)), + $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)), + $hover-color: color-contrast($hover-background), + $active-background: if($color == $color-contrast-light, shade-color($background,$btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)), + $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)), + $active-color: color-contrast($active-background), + $disabled-background: $background, + $disabled-border: $border, + $disabled-color: color-contrast($disabled-background) +) { + color: $color; @include gradient-bg($background); border-color: $border; @include box-shadow($btn-box-shadow); - @include hover() { - color: color-yiq($hover-background); + &:hover { + color: $hover-color; @include gradient-bg($hover-background); border-color: $hover-border; } - &:focus, - &.focus { - color: color-yiq($hover-background); + .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-yiq($background), $border, 15%), .5)); + @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-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; + box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); } } - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active, + .btn-check:checked + &, + .btn-check:active + &, + &:active, + &.active, .show > &.dropdown-toggle { - color: color-yiq($active-background); + color: $active-color; background-color: $active-background; - @if $enable-gradients { - background-image: none; // Remove the gradient for the pressed/active state - } + // Remove CSS gradients if they're enabled + background-image: if($enable-gradients, none, null); 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)); + @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-yiq($background), $border, 15%), .5); + box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); } } } + + &:disabled, + &.disabled { + color: $disabled-color; + background-color: $disabled-background; + // Remove CSS gradients if they're enabled + background-image: if($enable-gradients, none, null); + border-color: $disabled-border; + } } +// scss-docs-end btn-variant-mixin -@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) { +// scss-docs-start btn-outline-variant-mixin +@mixin button-outline-variant( + $color, + $color-hover: color-contrast($color), + $active-background: $color, + $active-border: $color, + $active-color: color-contrast($active-background) +) { color: $color; border-color: $color; - @include hover() { + &:hover { color: $color-hover; background-color: $active-background; border-color: $active-border; } - &:focus, - &.focus { + .btn-check: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); + .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 and $btn-active-box-shadow != none { + @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 @@ -98,13 +114,20 @@ } } } + + &:disabled, + &.disabled { + color: $color; + background-color: transparent; + } } +// scss-docs-end btn-outline-variant-mixin -// Button sizes -@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { +// 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); - line-height: $line-height; // Manually declare to provide an override to the browser default @include border-radius($border-radius, 0); } +// scss-docs-end btn-size-mixin diff --git a/vendor/twbs/bootstrap/scss/mixins/_caret.scss b/vendor/twbs/bootstrap/scss/mixins/_caret.scss index 27466495b..4b0f0360b 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_caret.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_caret.scss @@ -1,25 +1,26 @@ -@mixin caret-down() { +// scss-docs-start caret-mixins +@mixin caret-down { border-top: $caret-width solid; border-right: $caret-width solid transparent; border-bottom: 0; border-left: $caret-width solid transparent; } -@mixin caret-up() { +@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() { +@mixin caret-end { border-top: $caret-width solid transparent; border-right: 0; border-bottom: $caret-width solid transparent; border-left: $caret-width solid; } -@mixin caret-left() { +@mixin caret-start { border-top: $caret-width solid transparent; border-right: $caret-width solid; border-bottom: $caret-width solid transparent; @@ -36,12 +37,12 @@ @include caret-down(); } @else if $direction == up { @include caret-up(); - } @else if $direction == right { - @include caret-right(); + } @else if $direction == end { + @include caret-end(); } } - @if $direction == left { + @if $direction == start { &::after { display: none; } @@ -51,7 +52,7 @@ margin-right: $caret-spacing; vertical-align: $caret-vertical-align; content: ""; - @include caret-left(); + @include caret-start(); } } @@ -60,3 +61,4 @@ } } } +// scss-docs-end caret-mixins diff --git a/vendor/twbs/bootstrap/scss/mixins/_clearfix.scss b/vendor/twbs/bootstrap/scss/mixins/_clearfix.scss index 11a977b73..ffc62bb28 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_clearfix.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_clearfix.scss @@ -1,3 +1,4 @@ +// scss-docs-start clearfix @mixin clearfix() { &::after { display: block; @@ -5,3 +6,4 @@ content: ""; } } +// scss-docs-end clearfix diff --git a/vendor/twbs/bootstrap/scss/mixins/_float.scss b/vendor/twbs/bootstrap/scss/mixins/_float.scss deleted file mode 100644 index 6b376a258..000000000 --- a/vendor/twbs/bootstrap/scss/mixins/_float.scss +++ /dev/null @@ -1,14 +0,0 @@ -// 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"); -} diff --git a/vendor/twbs/bootstrap/scss/mixins/_forms.scss b/vendor/twbs/bootstrap/scss/mixins/_forms.scss index a32163049..dc5bdb0b9 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_forms.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_forms.scss @@ -1,33 +1,7 @@ -// 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 + +// scss-docs-start form-validation-mixins @mixin form-validation-state-selector($state) { @if ($state == "valid" or $state == "invalid") { .was-validated #{if(&, "&", "")}:#{$state}, @@ -41,19 +15,26 @@ } } -@mixin form-validation-state($state, $color, $icon) { +@mixin form-validation-state( + $state, + $color, + $icon, + $tooltip-color: color-contrast($color), + $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity), + $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity) +) { .#{$state}-feedback { display: none; width: 100%; margin-top: $form-feedback-margin-top; @include font-size($form-feedback-font-size); + font-style: $form-feedback-font-style; color: $color; } .#{$state}-tooltip { position: absolute; top: 100%; - left: 0; z-index: 5; display: none; max-width: 100%; // Contain to parent when possible @@ -61,16 +42,9 @@ 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); + color: $tooltip-color; + background-color: $tooltip-bg-color; @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 / 2; - } } @include form-validation-state-selector($state) { @@ -94,7 +68,7 @@ &:focus { border-color: $color; - box-shadow: 0 0 0 $input-focus-width rgba($color, .25); + box-shadow: $focus-box-shadow; } } } @@ -109,77 +83,62 @@ } } - .custom-select { + .form-select { @include form-validation-state-selector($state) { border-color: $color; @if $enable-validation-icons { - padding-right: $custom-select-feedback-icon-padding-right; - background: $custom-select-background, $custom-select-bg escape-svg($icon) $custom-select-feedback-icon-position / $custom-select-feedback-icon-size no-repeat; + &:not([multiple]):not([size]), + &:not([multiple])[size="1"] { + padding-right: $form-select-feedback-icon-padding-end; + background-image: escape-svg($form-select-indicator), escape-svg($icon); + background-position: $form-select-bg-position, $form-select-feedback-icon-position; + background-size: $form-select-bg-size, $form-select-feedback-icon-size; + } } &:focus { border-color: $color; - box-shadow: 0 0 0 $input-focus-width rgba($color, .25); + box-shadow: $focus-box-shadow; } } } .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; - } - } + border-color: $color; &:checked { - ~ .custom-control-label::before { - border-color: lighten($color, 10%); - @include gradient-bg(lighten($color, 10%)); - } + background-color: $color; } &:focus { - ~ .custom-control-label::before { - box-shadow: 0 0 0 $input-focus-width rgba($color, .25); - } + box-shadow: $focus-box-shadow; + } - &:not(:checked) ~ .custom-control-label::before { - border-color: $color; - } + ~ .form-check-label { + color: $color; } } } + .form-check-inline .form-check-input { + ~ .#{$state}-feedback { + margin-left: .5em; + } + } - // custom file - .custom-file-input { + .input-group .form-control, + .input-group .form-select { @include form-validation-state-selector($state) { - ~ .custom-file-label { - border-color: $color; + @if $state == "valid" { + z-index: 1; + } @else if $state == "invalid" { + z-index: 2; } - &:focus { - ~ .custom-file-label { - border-color: $color; - box-shadow: 0 0 0 $input-focus-width rgba($color, .25); - } + z-index: 3; } } } } +// scss-docs-end form-validation-mixins diff --git a/vendor/twbs/bootstrap/scss/mixins/_gradients.scss b/vendor/twbs/bootstrap/scss/mixins/_gradients.scss index 88c4d64b7..44167d1b8 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_gradients.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_gradients.scss @@ -1,45 +1,47 @@ // Gradients -@mixin gradient-bg($color) { +// scss-docs-start gradient-bg-mixin +@mixin gradient-bg($color: null) { + background-color: $color; + @if $enable-gradients { - background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x; - } @else { - background-color: $color; + background-image: var(--#{$variable-prefix}gradient); } } +// scss-docs-end gradient-bg-mixin +// scss-docs-start gradient-mixins // Horizontal gradient, from left to right // // Creates two color stops, start and end, by specifying a color and position for each color stop. @mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); - 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%) { +@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) { background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); - 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); } +// scss-docs-end gradient-mixins diff --git a/vendor/twbs/bootstrap/scss/mixins/_grid-framework.scss b/vendor/twbs/bootstrap/scss/mixins/_grid-framework.scss deleted file mode 100644 index 6fc8e8561..000000000 --- a/vendor/twbs/bootstrap/scss/mixins/_grid-framework.scss +++ /dev/null @@ -1,80 +0,0 @@ -// 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 / 2; - padding-left: $gutter / 2; - } - - @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); - } - } - } - } - } - } -} diff --git a/vendor/twbs/bootstrap/scss/mixins/_grid.scss b/vendor/twbs/bootstrap/scss/mixins/_grid.scss index 19babc09f..d757eac74 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_grid.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_grid.scss @@ -2,53 +2,43 @@ // // Generate semantic grid columns with these mixins. -@mixin make-container($gutter: $grid-gutter-width) { - width: 100%; - padding-right: $gutter / 2; - padding-left: $gutter / 2; - margin-right: auto; - margin-left: auto; -} - @mixin make-row($gutter: $grid-gutter-width) { + --#{$variable-prefix}gutter-x: #{$gutter}; + --#{$variable-prefix}gutter-y: 0; display: flex; flex-wrap: wrap; - margin-right: -$gutter / 2; - margin-left: -$gutter / 2; -} - -// 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"); + margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list + margin-right: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list + margin-left: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list } @mixin make-col-ready($gutter: $grid-gutter-width) { - position: relative; + // Add box sizing if only the grid is loaded + box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null); // Prevent columns from becoming too narrow when at smaller grid tiers by - // always setting `width: 100%;`. This works because we use `flex` values + // always setting `width: 100%;`. This works because we set the width // later on to override this initial width. + flex-shrink: 0; width: 100%; - padding-right: $gutter / 2; - padding-left: $gutter / 2; + max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid + padding-right: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list + padding-left: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list + margin-top: var(--#{$variable-prefix}gutter-y); } -@mixin make-col($size, $columns: $grid-columns) { - flex: 0 0 percentage($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($size / $columns); +@mixin make-col($size: false, $columns: $grid-columns) { + @if $size { + flex: 0 0 auto; + width: percentage($size / $columns); + } @else { + flex: 1 1 0; + max-width: 100%; + } } @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) { @@ -63,7 +53,73 @@ // style grid. @mixin row-cols($count) { > * { - flex: 0 0 100% / $count; - max-width: 100% / $count; + flex: 0 0 auto; + width: 100% / $count; + } +} + +// Framework grid generation +// +// Used only by Bootstrap to generate the correct number of grid classes given +// any value of `$grid-columns`. + +@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { + @each $breakpoint in map-keys($breakpoints) { + $infix: breakpoint-infix($breakpoint, $breakpoints); + + @include media-breakpoint-up($breakpoint, $breakpoints) { + // Provide basic `.col-{bp}` classes for equal-width flexbox columns + .col#{$infix} { + flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 + } + + .row-cols#{$infix}-auto > * { + @include make-col-auto(); + } + + @if $grid-row-columns > 0 { + @for $i from 1 through $grid-row-columns { + .row-cols#{$infix}-#{$i} { + @include row-cols($i); + } + } + } + + .col#{$infix}-auto { + @include make-col-auto(); + } + + @if $columns > 0 { + @for $i from 1 through $columns { + .col#{$infix}-#{$i} { + @include make-col($i, $columns); + } + } + + // `$columns - 1` because offsetting by the width of an entire row isn't possible + @for $i from 0 through ($columns - 1) { + @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0 + .offset#{$infix}-#{$i} { + @include make-col-offset($i, $columns); + } + } + } + } + + // Gutters + // + // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns. + @each $key, $value in $gutters { + .g#{$infix}-#{$key}, + .gx#{$infix}-#{$key} { + --#{$variable-prefix}gutter-x: #{$value}; + } + + .g#{$infix}-#{$key}, + .gy#{$infix}-#{$key} { + --#{$variable-prefix}gutter-y: #{$value}; + } + } + } } } diff --git a/vendor/twbs/bootstrap/scss/mixins/_hover.scss b/vendor/twbs/bootstrap/scss/mixins/_hover.scss deleted file mode 100644 index 409f8244e..000000000 --- a/vendor/twbs/bootstrap/scss/mixins/_hover.scss +++ /dev/null @@ -1,37 +0,0 @@ -// 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; - } -} diff --git a/vendor/twbs/bootstrap/scss/mixins/_image.scss b/vendor/twbs/bootstrap/scss/mixins/_image.scss index 3aaa0d704..e1df779f8 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_image.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_image.scss @@ -7,30 +7,10 @@ // // Keep images from scaling beyond the width of their parents. -@mixin img-fluid() { +@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"); -} diff --git a/vendor/twbs/bootstrap/scss/mixins/_list-group.scss b/vendor/twbs/bootstrap/scss/mixins/_list-group.scss index 0da353156..e55415f2b 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_list-group.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_list-group.scss @@ -1,14 +1,16 @@ // List Groups +// scss-docs-start list-group-mixin @mixin list-group-item-variant($state, $background, $color) { .list-group-item-#{$state} { color: $color; background-color: $background; &.list-group-item-action { - @include hover-focus() { + &:hover, + &:focus { color: $color; - background-color: darken($background, 5%); + background-color: shade-color($background, 10%); } &.active { @@ -19,3 +21,4 @@ } } } +// scss-docs-end list-group-mixin diff --git a/vendor/twbs/bootstrap/scss/mixins/_lists.scss b/vendor/twbs/bootstrap/scss/mixins/_lists.scss index 251cb0733..251856266 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_lists.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_lists.scss @@ -1,7 +1,7 @@ // Lists // Unstyled keeps list items block level, just removes default browser padding and list-style -@mixin list-unstyled() { +@mixin list-unstyled { padding-left: 0; list-style: none; } diff --git a/vendor/twbs/bootstrap/scss/mixins/_nav-divider.scss b/vendor/twbs/bootstrap/scss/mixins/_nav-divider.scss deleted file mode 100644 index 3e0cceafe..000000000 --- a/vendor/twbs/bootstrap/scss/mixins/_nav-divider.scss +++ /dev/null @@ -1,11 +0,0 @@ -// 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); -} diff --git a/vendor/twbs/bootstrap/scss/mixins/_pagination.scss b/vendor/twbs/bootstrap/scss/mixins/_pagination.scss index af8e16d6a..3101b380d 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_pagination.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_pagination.scss @@ -1,22 +1,31 @@ // Pagination -@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { +// 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); - line-height: $line-height; } .page-item { - &:first-child { - .page-link { - @include border-left-radius($border-radius); + @if $pagination-margin-start == (-$pagination-border-width) { + &:first-child { + .page-link { + @include border-start-radius($border-radius); + } } - } - &:last-child { + + &: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-right-radius($border-radius); + @include 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 15b4407a0..354f5648b 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_reset-text.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_reset-text.scss @@ -1,6 +1,6 @@ -@mixin reset-text() { +@mixin reset-text { font-family: $font-family-base; - // We deliberately do NOT reset font-size or word-wrap. + // We deliberately do NOT reset font-size or overflow-wrap / word-wrap. font-style: normal; font-weight: $font-weight-normal; line-height: $line-height-base; diff --git a/vendor/twbs/bootstrap/scss/mixins/_screen-reader.scss b/vendor/twbs/bootstrap/scss/mixins/_screen-reader.scss deleted file mode 100644 index 6913442b8..000000000 --- a/vendor/twbs/bootstrap/scss/mixins/_screen-reader.scss +++ /dev/null @@ -1,34 +0,0 @@ -// Only display content to screen readers -// -// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ -// See: https://hugogiraudel.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; - } -} diff --git a/vendor/twbs/bootstrap/scss/mixins/_size.scss b/vendor/twbs/bootstrap/scss/mixins/_size.scss deleted file mode 100644 index 69e056d2c..000000000 --- a/vendor/twbs/bootstrap/scss/mixins/_size.scss +++ /dev/null @@ -1,7 +0,0 @@ -// Sizing shortcuts - -@mixin size($width, $height: $width) { - width: $width; - height: $height; - @include deprecate("`size()`", "v4.3.0", "v5"); -} diff --git a/vendor/twbs/bootstrap/scss/mixins/_table-row.scss b/vendor/twbs/bootstrap/scss/mixins/_table-row.scss deleted file mode 100644 index 1ccde6b6c..000000000 --- a/vendor/twbs/bootstrap/scss/mixins/_table-row.scss +++ /dev/null @@ -1,39 +0,0 @@ -// 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; - } - } - } - } -} diff --git a/vendor/twbs/bootstrap/scss/mixins/_text-emphasis.scss b/vendor/twbs/bootstrap/scss/mixins/_text-emphasis.scss deleted file mode 100644 index 5eb8a5515..000000000 --- a/vendor/twbs/bootstrap/scss/mixins/_text-emphasis.scss +++ /dev/null @@ -1,17 +0,0 @@ -// 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); -} diff --git a/vendor/twbs/bootstrap/scss/mixins/_text-hide.scss b/vendor/twbs/bootstrap/scss/mixins/_text-hide.scss deleted file mode 100644 index 3a923011e..000000000 --- a/vendor/twbs/bootstrap/scss/mixins/_text-hide.scss +++ /dev/null @@ -1,11 +0,0 @@ -// 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); -} diff --git a/vendor/twbs/bootstrap/scss/mixins/_transition.scss b/vendor/twbs/bootstrap/scss/mixins/_transition.scss index 54870bf6a..d437f6d8f 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_transition.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_transition.scss @@ -17,7 +17,7 @@ transition: $transition; } - @if $enable-prefers-reduced-motion-media-query and nth($transition, 1) != null and nth($transition, 1) != none { + @if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none { @media (prefers-reduced-motion: reduce) { transition: none; } diff --git a/vendor/twbs/bootstrap/scss/mixins/_visibility.scss b/vendor/twbs/bootstrap/scss/mixins/_visibility.scss deleted file mode 100644 index f17467311..000000000 --- a/vendor/twbs/bootstrap/scss/mixins/_visibility.scss +++ /dev/null @@ -1,8 +0,0 @@ -// stylelint-disable declaration-no-important - -// Visibility - -@mixin invisible($visibility) { - visibility: $visibility !important; - @include deprecate("`invisible()`", "v4.3.0", "v5"); -} |