_transition.less 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. //@mixin transition($transition...) {
  2. // @if $enable-transitions {
  3. // @if length($transition) == 0 {
  4. // transition: $transition-base;
  5. // } @else {
  6. // transition: $transition;
  7. // }
  8. // }
  9. //
  10. // @if $enable-prefers-reduced-motion-media-query {
  11. // @media (prefers-reduced-motion: reduce) {
  12. // transition: none;
  13. // }
  14. // }
  15. //}
  16. #transition(@transition...) {
  17. & when (length(@transition) = 0) {
  18. @transition: @transition-base;
  19. }
  20. & when (length(@transition) > 1) {
  21. each(@transition, #(@value) {
  22. & when (@value = ~"") or (@value = none) {
  23. warn("The keyword 'none' or '~\"\"' must be used as a single argument.");
  24. }
  25. });
  26. }
  27. & when (@enable-transitions) {
  28. & when (length(@transition) = 0) {
  29. transition: @transition-base;
  30. }
  31. // LESS PORT: In order to output the transitions correctly we have to iterate over the list and
  32. // use Less’s merge feature. Without this, transitions will be output space-separated instead of
  33. // comma-separated. Also, since a single transition can be misinterpreted as multiple transitions
  34. // (since it will have a length > 1) we have to include a check for the length of the first item
  35. // in the list. If the length is greater than 1, then we have a list of separate transitions. If
  36. // the the length is 1, then we’re looking at the first value of a single transition, so we
  37. // output `@transition` as-is.
  38. & when (length(@transition) > 0) and (length(extract(@transition, 1)) = 1) {
  39. transition: @transition;
  40. }
  41. & when (length(@transition) > 0) and (length(extract(@transition, 1)) > 1) {
  42. each(@transition, #(@transition) {
  43. transition+: @transition;
  44. });
  45. }
  46. & when (@enable-prefers-reduced-motion-media-query) and (length(@transition) > 0) and not (extract(@transition, 1) = ~"") and not (extract(@transition, 1) = none) {
  47. @media (prefers-reduced-motion: reduce) {
  48. transition: none;
  49. }
  50. }
  51. }
  52. }