diff options
Diffstat (limited to 'vendor/twbs/bootstrap/scss/mixins')
19 files changed, 177 insertions, 128 deletions
diff --git a/vendor/twbs/bootstrap/scss/mixins/_background-variant.scss b/vendor/twbs/bootstrap/scss/mixins/_background-variant.scss index 494439d2b..80580189a 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_background-variant.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_background-variant.scss @@ -2,20 +2,22 @@ // Contextual backgrounds -@mixin bg-variant($parent, $color) { +@mixin bg-variant($parent, $color, $ignore-warning: false) { #{$parent} { background-color: $color !important; } a#{$parent}, button#{$parent} { - @include hover-focus { + @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) { +@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 index 64b29cb57..f1c499141 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_badge.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_badge.scss @@ -3,7 +3,7 @@ background-color: $bg; @at-root a#{&} { - @include hover-focus { + @include hover-focus() { color: color-yiq($bg); background-color: darken($bg, 10%); } diff --git a/vendor/twbs/bootstrap/scss/mixins/_border-radius.scss b/vendor/twbs/bootstrap/scss/mixins/_border-radius.scss index 88aeb37d8..aee9bf3d3 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_border-radius.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_border-radius.scss @@ -1,9 +1,22 @@ // stylelint-disable property-blacklist // Single side border-radius +// Helper function to replace negative values with 0 +@function valid-radius($radius) { + $return: (); + @each $value in $radius { + @if type-of($value) == number { + $return: append($return, max($value, 0)); + } @else { + $return: append($return, $value); + } + } + @return $return; +} + @mixin border-radius($radius: $border-radius, $fallback-border-radius: false) { @if $enable-rounded { - border-radius: $radius; + border-radius: valid-radius($radius); } @else if $fallback-border-radius != false { border-radius: $fallback-border-radius; @@ -12,52 +25,52 @@ @mixin border-top-radius($radius) { @if $enable-rounded { - border-top-left-radius: $radius; - border-top-right-radius: $radius; + border-top-left-radius: valid-radius($radius); + border-top-right-radius: valid-radius($radius); } } @mixin border-right-radius($radius) { @if $enable-rounded { - border-top-right-radius: $radius; - border-bottom-right-radius: $radius; + border-top-right-radius: valid-radius($radius); + border-bottom-right-radius: valid-radius($radius); } } @mixin border-bottom-radius($radius) { @if $enable-rounded { - border-bottom-right-radius: $radius; - border-bottom-left-radius: $radius; + border-bottom-right-radius: valid-radius($radius); + border-bottom-left-radius: valid-radius($radius); } } @mixin border-left-radius($radius) { @if $enable-rounded { - border-top-left-radius: $radius; - border-bottom-left-radius: $radius; + border-top-left-radius: valid-radius($radius); + border-bottom-left-radius: valid-radius($radius); } } @mixin border-top-left-radius($radius) { @if $enable-rounded { - border-top-left-radius: $radius; + border-top-left-radius: valid-radius($radius); } } @mixin border-top-right-radius($radius) { @if $enable-rounded { - border-top-right-radius: $radius; + border-top-right-radius: valid-radius($radius); } } @mixin border-bottom-right-radius($radius) { @if $enable-rounded { - border-bottom-right-radius: $radius; + border-bottom-right-radius: valid-radius($radius); } } @mixin border-bottom-left-radius($radius) { @if $enable-rounded { - border-bottom-left-radius: $radius; + border-bottom-left-radius: valid-radius($radius); } } diff --git a/vendor/twbs/bootstrap/scss/mixins/_buttons.scss b/vendor/twbs/bootstrap/scss/mixins/_buttons.scss index eee903f83..d6235aa27 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_buttons.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_buttons.scss @@ -9,7 +9,7 @@ border-color: $border; @include box-shadow($btn-box-shadow); - @include hover { + @include hover() { color: color-yiq($hover-background); @include gradient-bg($hover-background); border-color: $hover-border; @@ -17,10 +17,13 @@ &:focus, &.focus { - // Avoid using mixin so we can pass custom focus shadow properly + color: color-yiq($hover-background); + @include gradient-bg($hover-background); + border-color: $hover-border; @if $enable-shadows { - 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-yiq($background), $border, 15%), .5)); } @else { + // Avoid using mixin so we can pass custom focus shadow properly box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); } } @@ -48,10 +51,10 @@ border-color: $active-border; &:focus { - // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows and $btn-active-box-shadow != none { - box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); + @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5)); } @else { + // Avoid using mixin so we can pass custom focus shadow properly box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); } } @@ -62,7 +65,7 @@ color: $color; border-color: $color; - @include hover { + @include hover() { color: $color-hover; background-color: $active-background; border-color: $active-border; @@ -87,10 +90,10 @@ border-color: $active-border; &:focus { - // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows and $btn-active-box-shadow != none { - box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5); + @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); } } diff --git a/vendor/twbs/bootstrap/scss/mixins/_caret.scss b/vendor/twbs/bootstrap/scss/mixins/_caret.scss index 8ecef65b4..27466495b 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_caret.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_caret.scss @@ -1,25 +1,25 @@ -@mixin caret-down { +@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-right() { 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-left() { border-top: $caret-width solid transparent; border-right: $caret-width solid; border-bottom: $caret-width solid transparent; @@ -33,11 +33,11 @@ vertical-align: $caret-vertical-align; content: ""; @if $direction == down { - @include caret-down; + @include caret-down(); } @else if $direction == up { - @include caret-up; + @include caret-up(); } @else if $direction == right { - @include caret-right; + @include caret-right(); } } @@ -51,7 +51,7 @@ margin-right: $caret-spacing; vertical-align: $caret-vertical-align; content: ""; - @include caret-left; + @include caret-left(); } } diff --git a/vendor/twbs/bootstrap/scss/mixins/_float.scss b/vendor/twbs/bootstrap/scss/mixins/_float.scss index adff88e79..6b376a258 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_float.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_float.scss @@ -1,14 +1,14 @@ // stylelint-disable declaration-no-important -@mixin float-left { +@mixin float-left() { float: left !important; @include deprecate("The `float-left` mixin", "v4.3.0", "v5"); } -@mixin float-right { +@mixin float-right() { float: right !important; @include deprecate("The `float-right` mixin", "v4.3.0", "v5"); } -@mixin float-none { +@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 ea8a91a02..39b52f3ca 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_forms.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_forms.scss @@ -10,21 +10,36 @@ // // Example usage: change the default blue border and shadow to white for better // contrast against a dark gray background. -@mixin form-control-focus() { +@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; - // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { - box-shadow: $input-box-shadow, $input-focus-box-shadow; + @include box-shadow($input-box-shadow, $input-focus-box-shadow); } @else { + // Avoid using mixin so we can pass custom focus shadow properly box-shadow: $input-focus-box-shadow; } } + @include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning); } +// This mixin uses an `if()` technique to be compatible with Dart Sass +// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details +@mixin form-validation-state-selector($state) { + @if ($state == "valid" or $state == "invalid") { + .was-validated #{if(&, "&", "")}:#{$state}, + #{if(&, "&", "")}.is-#{$state} { + @content; + } + } @else { + #{if(&, "&", "")}.is-#{$state} { + @content; + } + } +} @mixin form-validation-state($state, $color, $icon) { .#{$state}-feedback { @@ -38,6 +53,7 @@ .#{$state}-tooltip { position: absolute; top: 100%; + left: 0; z-index: 5; display: none; max-width: 100%; // Contain to parent when possible @@ -50,16 +66,22 @@ @include border-radius($form-feedback-tooltip-border-radius); } + @include form-validation-state-selector($state) { + ~ .#{$state}-feedback, + ~ .#{$state}-tooltip { + display: block; + } + } + .form-control { - .was-validated &:#{$state}, - &.is-#{$state} { + @include form-validation-state-selector($state) { border-color: $color; @if $enable-validation-icons { padding-right: $input-height-inner; - background-image: $icon; + background-image: escape-svg($icon); background-repeat: no-repeat; - background-position: center right $input-height-inner-quarter; + background-position: right $input-height-inner-quarter center; background-size: $input-height-inner-half $input-height-inner-half; } @@ -67,18 +89,12 @@ border-color: $color; box-shadow: 0 0 0 $input-focus-width rgba($color, .25); } - - ~ .#{$state}-feedback, - ~ .#{$state}-tooltip { - display: block; - } } } // stylelint-disable-next-line selector-no-qualifying-type textarea.form-control { - .was-validated &:#{$state}, - &.is-#{$state} { + @include form-validation-state-selector($state) { @if $enable-validation-icons { padding-right: $input-height-inner; background-position: top $input-height-inner-quarter right $input-height-inner-quarter; @@ -87,41 +103,23 @@ } .custom-select { - .was-validated &:#{$state}, - &.is-#{$state} { + @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, $icon $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size; + background: $custom-select-background, escape-svg($icon) $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size; } &:focus { border-color: $color; box-shadow: 0 0 0 $input-focus-width rgba($color, .25); } - - ~ .#{$state}-feedback, - ~ .#{$state}-tooltip { - display: block; - } - } - } - - - .form-control-file { - .was-validated &:#{$state}, - &.is-#{$state} { - ~ .#{$state}-feedback, - ~ .#{$state}-tooltip { - display: block; - } } } .form-check-input { - .was-validated &:#{$state}, - &.is-#{$state} { + @include form-validation-state-selector($state) { ~ .form-check-label { color: $color; } @@ -134,8 +132,7 @@ } .custom-control-input { - .was-validated &:#{$state}, - &.is-#{$state} { + @include form-validation-state-selector($state) { ~ .custom-control-label { color: $color; @@ -144,11 +141,6 @@ } } - ~ .#{$state}-feedback, - ~ .#{$state}-tooltip { - display: block; - } - &:checked { ~ .custom-control-label::before { border-color: lighten($color, 10%); @@ -170,17 +162,11 @@ // custom file .custom-file-input { - .was-validated &:#{$state}, - &.is-#{$state} { + @include form-validation-state-selector($state) { ~ .custom-file-label { border-color: $color; } - ~ .#{$state}-feedback, - ~ .#{$state}-tooltip { - display: block; - } - &:focus { ~ .custom-file-label { border-color: $color; diff --git a/vendor/twbs/bootstrap/scss/mixins/_grid-framework.scss b/vendor/twbs/bootstrap/scss/mixins/_grid-framework.scss index 649c28bf7..6fc8e8561 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_grid-framework.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_grid-framework.scss @@ -15,12 +15,15 @@ @each $breakpoint in map-keys($breakpoints) { $infix: breakpoint-infix($breakpoint, $breakpoints); - // Allow columns to stretch full width below their breakpoints - @for $i from 1 through $columns { - .col#{$infix}-#{$i} { - @extend %grid-column; + @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; @@ -33,15 +36,24 @@ 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 { - flex: 0 0 auto; - width: auto; - max-width: 100%; // Reset earlier grid tiers + @include make-col-auto(); } - @for $i from 1 through $columns { - .col#{$infix}-#{$i} { - @include make-col($i, $columns); + @if $columns > 0 { + @for $i from 1 through $columns { + .col#{$infix}-#{$i} { + @include make-col($i, $columns); + } } } @@ -53,11 +65,13 @@ .order#{$infix}-#{$i} { order: $i; } } - // `$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); + @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 924eb0cfc..b72d150e4 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_grid.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_grid.scss @@ -10,6 +10,12 @@ margin-left: auto; } +@mixin make-row($gutter: $grid-gutter-width) { + 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) { @@ -18,13 +24,7 @@ max-width: $container-max-width; } } -} - -@mixin make-row($gutter: $grid-gutter-width) { - display: flex; - flex-wrap: wrap; - margin-right: -$gutter / 2; - margin-left: -$gutter / 2; + @include deprecate("The `make-container-max-widths` mixin", "v4.5.2", "v5"); } @mixin make-col-ready($gutter: $grid-gutter-width) { @@ -45,7 +45,25 @@ max-width: percentage($size / $columns); } +@mixin make-col-auto() { + flex: 0 0 auto; + width: auto; + max-width: 100%; // Reset earlier grid tiers +} + @mixin make-col-offset($size, $columns: $grid-columns) { $num: $size / $columns; margin-left: if($num == 0, 0, percentage($num)); } + +// Row columns +// +// Specify on a parent element(e.g., .row) to force immediate children into NN +// numberof columns. Supports wrapping to new lines, but does not do a Masonry +// style grid. +@mixin row-cols($count) { + & > * { + flex: 0 0 100% / $count; + max-width: 100% / $count; + } +} diff --git a/vendor/twbs/bootstrap/scss/mixins/_hover.scss b/vendor/twbs/bootstrap/scss/mixins/_hover.scss index 192f847e1..409f8244e 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_hover.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_hover.scss @@ -9,18 +9,18 @@ // // Issue: https://github.com/twbs/bootstrap/issues/25195 -@mixin hover { +@mixin hover() { &:hover { @content; } } -@mixin hover-focus { +@mixin hover-focus() { &:hover, &:focus { @content; } } -@mixin plain-hover-focus { +@mixin plain-hover-focus() { &, &:hover, &:focus { @@ -28,7 +28,7 @@ } } -@mixin hover-focus-active { +@mixin hover-focus-active() { &:hover, &:focus, &:active { diff --git a/vendor/twbs/bootstrap/scss/mixins/_image.scss b/vendor/twbs/bootstrap/scss/mixins/_image.scss index a76a6082b..c971e038b 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_image.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_image.scss @@ -7,7 +7,7 @@ // // 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 diff --git a/vendor/twbs/bootstrap/scss/mixins/_list-group.scss b/vendor/twbs/bootstrap/scss/mixins/_list-group.scss index cd47a4e9f..0da353156 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_list-group.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_list-group.scss @@ -6,7 +6,7 @@ background-color: $background; &.list-group-item-action { - @include hover-focus { + @include hover-focus() { color: $color; background-color: darken($background, 5%); } diff --git a/vendor/twbs/bootstrap/scss/mixins/_lists.scss b/vendor/twbs/bootstrap/scss/mixins/_lists.scss index 251856266..251cb0733 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 index 4fb37b622..3e0cceafe 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_nav-divider.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_nav-divider.scss @@ -2,9 +2,10 @@ // // Dividers (basically an hr) within dropdowns and nav lists -@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y) { +@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/_reset-text.scss b/vendor/twbs/bootstrap/scss/mixins/_reset-text.scss index bfa9f6e9a..15b4407a0 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_reset-text.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_reset-text.scss @@ -1,4 +1,4 @@ -@mixin reset-text { +@mixin reset-text() { font-family: $font-family-base; // We deliberately do NOT reset font-size or word-wrap. font-style: normal; diff --git a/vendor/twbs/bootstrap/scss/mixins/_screen-reader.scss b/vendor/twbs/bootstrap/scss/mixins/_screen-reader.scss index 812591bc5..21230390e 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_screen-reader.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_screen-reader.scss @@ -3,11 +3,12 @@ // See: https://a11yproject.com/posts/how-to-hide-content/ // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ -@mixin sr-only { +@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; @@ -20,7 +21,7 @@ // // Credit: HTML5 Boilerplate -@mixin sr-only-focusable { +@mixin sr-only-focusable() { &:active, &:focus { position: static; diff --git a/vendor/twbs/bootstrap/scss/mixins/_table-row.scss b/vendor/twbs/bootstrap/scss/mixins/_table-row.scss index f8d61869a..1ccde6b6c 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_table-row.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_table-row.scss @@ -26,7 +26,7 @@ $hover-background: darken($background, 5%); .table-#{$state} { - @include hover { + @include hover() { background-color: $hover-background; > td, diff --git a/vendor/twbs/bootstrap/scss/mixins/_text-emphasis.scss b/vendor/twbs/bootstrap/scss/mixins/_text-emphasis.scss index 155d6ca8c..5eb8a5515 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_text-emphasis.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_text-emphasis.scss @@ -2,15 +2,16 @@ // Typography -@mixin text-emphasis-variant($parent, $color) { +@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 { + @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/_transition.scss b/vendor/twbs/bootstrap/scss/mixins/_transition.scss index 8ce35a6b8..54553deb9 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_transition.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_transition.scss @@ -1,16 +1,26 @@ // stylelint-disable property-blacklist @mixin transition($transition...) { + @if length($transition) == 0 { + $transition: $transition-base; + } + + @if length($transition) > 1 { + @each $value in $transition { + @if $value == null or $value == none { + @warn "The keyword 'none' or 'null' must be used as a single argument."; + } + } + } + @if $enable-transitions { - @if length($transition) == 0 { - transition: $transition-base; - } @else { + @if nth($transition, 1) != null { transition: $transition; } - } - @if $enable-prefers-reduced-motion-media-query { - @media (prefers-reduced-motion: reduce) { - transition: none; + @if $enable-prefers-reduced-motion-media-query and nth($transition, 1) != null and nth($transition, 1) != none { + @media (prefers-reduced-motion: reduce) { + transition: none; + } } } } |