diff --git a/scss/mixins/_box-shadow.scss b/scss/mixins/_box-shadow.scss index 0726d4359a..4172541f3f 100644 --- a/scss/mixins/_box-shadow.scss +++ b/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/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md index 75108d3ca7..afb320fae1 100644 --- a/site/content/docs/5.0/migration.md +++ b/site/content/docs/5.0/migration.md @@ -110,6 +110,7 @@ Changes to our source Sass files and compiled CSS. - The `bg-gradient-variant()` mixin is removed since the `.bg-gradient` class can now be used to add gradients to elements instead of the `.bg-gradient-*` classes. - The `media-breakpoint-down()` uses the breakpoint itself instead of the next breakpoint. Use `media-breakpoint-down(lg)` instead of `media-breakpoint-down(md)` to target viewports smaller than the `lg` breakpoint. - The `media-breakpoint-between()` mixin's second parameter also uses the breakpoint itself instead of the next breakpoint. Use `media-between(sm, lg)` instead of `media-breakpoint-between(sm, md)` to target viewports between the `sm` and `lg` breakpoints. +- The `box-shadow()` mixin now better supports `none` and `null` with multiple arguments. Now you can pass multiple arguements with either value, and get the expected output. [See #30394](https://github.com/twbs/bootstrap/pull/30394). ### JavaScript