_box-shadow.less 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. //@mixin box-shadow($shadow...) {
  2. // @if $enable-shadows {
  3. // $result: ();
  4. //
  5. // @if (length($shadow) == 1) {
  6. // // We can pass `@include box-shadow(none);`
  7. // $result: $shadow;
  8. // } @else {
  9. // // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`
  10. // @for $i from 1 through length($shadow) {
  11. // @if nth($shadow, $i) != "none" {
  12. // $result: append($result, nth($shadow, $i), "comma");
  13. // }
  14. // }
  15. // }
  16. // @if (length($result) > 0) {
  17. // box-shadow: $result;
  18. // }
  19. // }
  20. //}
  21. #box-shadow(@shadows...) {
  22. & when (@enable-shadows) {
  23. // LESS PORT: Handle cases of single values like `none`.
  24. & when (length(@shadows) = 1) {
  25. box-shadow: @shadows;
  26. }
  27. // LESS PORT: In order to output the shadows correctly we have to iterate over the list and
  28. // use Less’s merge feature. Without this, shadows will be output space-separated instead of
  29. // comma-separated. Also, since a single shadow can be misinterpreted as multiple shadows
  30. // (since it will have a length > 1) we have to include a check for the length of the first
  31. // item in the list. If the length is greater than 1, then we have a list of separate shadows.
  32. // If the the length is 1, then we’re looking at the first value of a single shadow, so we
  33. // output `@shadows` as-is.
  34. & when (length(@shadows) > 1) and (length(extract(@shadows, 1)) = 1) {
  35. // We can pass `@include box-shadow(none);`
  36. box-shadow: @shadows;
  37. }
  38. & when (length(@shadows) > 1) and (length(extract(@shadows, 1)) > 1) {
  39. each(@shadows, #(@shadow) {
  40. box-shadow+: @shadow;
  41. });
  42. }
  43. }
  44. }