| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
- //@mixin transition($transition...) {
- // @if $enable-transitions {
- // @if length($transition) == 0 {
- // transition: $transition-base;
- // } @else {
- // transition: $transition;
- // }
- // }
- //
- // @if $enable-prefers-reduced-motion-media-query {
- // @media (prefers-reduced-motion: reduce) {
- // transition: none;
- // }
- // }
- //}
- #transition(@transition...) {
- & when (length(@transition) = 0) {
- @transition: @transition-base;
- }
- & when (length(@transition) > 1) {
- each(@transition, #(@value) {
- & when (@value = ~"") or (@value = none) {
- warn("The keyword 'none' or '~\"\"' must be used as a single argument.");
- }
- });
- }
- & when (@enable-transitions) {
- & when (length(@transition) = 0) {
- transition: @transition-base;
- }
- // LESS PORT: In order to output the transitions correctly we have to iterate over the list and
- // use Less’s merge feature. Without this, transitions will be output space-separated instead of
- // comma-separated. Also, since a single transition can be misinterpreted as multiple transitions
- // (since it will have a length > 1) we have to include a check for the length of the first item
- // in the list. If the length is greater than 1, then we have a list of separate transitions. If
- // the the length is 1, then we’re looking at the first value of a single transition, so we
- // output `@transition` as-is.
- & when (length(@transition) > 0) and (length(extract(@transition, 1)) = 1) {
- transition: @transition;
- }
- & when (length(@transition) > 0) and (length(extract(@transition, 1)) > 1) {
- each(@transition, #(@transition) {
- transition+: @transition;
- });
- }
- & when (@enable-prefers-reduced-motion-media-query) and (length(@transition) > 0) and not (extract(@transition, 1) = ~"") and not (extract(@transition, 1) = none) {
- @media (prefers-reduced-motion: reduce) {
- transition: none;
- }
- }
- }
- }
|