box-shadow() mixin allow 'null' and drop support 'none' with multiple…

… args (twbs#30394) * Support 'null' and drop `none` with multiple args * Output a warning when use 'none' with multiple arguments * Add migration note * Update migration.md Co-authored-by: Mark Otto <[email protected]> Co-authored-by: XhmikosR <[email protected]>
Shehab2121 · Aug 4, 2020 · e8566e1 · e8566e1
1 parent 9181c84
commit e8566e1
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 9 deletions.
diff --git 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
@@ -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