Skip to content

Commit

Permalink
transition() mixin prevent redundant 'transition: none' and pass `nul…
Browse files Browse the repository at this point in the history
…l` (twbs#30391)

* Prevent redundant 'none' for prefers-reduced-motion

* Output warning when use 'none' or 'null' with multiple arguments

* Fix for libsass(node-sass)
  • Loading branch information
ysds authored and olsza committed Oct 3, 2020
1 parent 2aaecf4 commit ad6825d
Showing 1 changed file with 14 additions and 4 deletions.
18 changes: 14 additions & 4 deletions scss/mixins/_transition.scss
@@ -1,13 +1,23 @@
// stylelint-disable property-blacklist
@mixin transition($transition...) {
@if length($transition) == 0 {
$transition: $transition-base;
}

@if length($transition) > 1 {
@each $value in $transition {
@if $value == null or $value == none {
@warn "The keyword 'none' or 'null' must be used as a single argument.";
}
}
}

@if $enable-transitions {
@if length($transition) == 0 {
transition: $transition-base;
} @else {
@if nth($transition, 1) != null {
transition: $transition;
}

@if $enable-prefers-reduced-motion-media-query {
@if $enable-prefers-reduced-motion-media-query and nth($transition, 1) != null and nth($transition, 1) != none {
@media (prefers-reduced-motion: reduce) {
transition: none;
}
Expand Down

0 comments on commit ad6825d

Please sign in to comment.