mirror of https://github.com/twbs/bootstrap.git
				
				
				
			box-shadow() mixin allow 'null' and drop support 'none' with multiple args (#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 <markd.otto@gmail.com> Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
		
							parent
							
								
									9181c84f0f
								
							
						
					
					
						commit
						e8566e10c7
					
				| 
						 | 
				
			
			@ -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;
 | 
			
		||||
    }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue