Skip to content
This repository
file 78 lines (65 sloc) 2.282 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
// Example: @include transition (all 2s ease-in-out);
// @include transition (opacity 1s ease-in 2s, width 2s ease-out);
// @include transition-property (transform, opacity);

@mixin transition ($properties...) {
  // Fix for vendor-prefix transform property
  $needs-prefixes: false;
  $webkit: ();
  $moz: ();
  $spec: ();

  // Create lists for vendor-prefixed transform
  @each $list in $properties {
    @if nth($list, 1) == "transform" {
      $needs-prefixes: true;
      $list1: -webkit-transform;
      $list2: -moz-transform;
      $list3: ();

      @each $var in $list {
        $list3: join($list3, $var);

        @if $var != "transform" {
          $list1: join($list1, $var);
          $list2: join($list2, $var);
        }
      }

      $webkit: append($webkit, $list1);
         $moz: append($moz, $list2);
        $spec: append($spec, $list3);
    }

    // Create lists for non-prefixed transition properties
    @else {
      $webkit: append($webkit, $list, comma);
      $moz: append($moz, $list, comma);
      $spec: append($spec, $list, comma);
    }
  }

  @if $needs-prefixes {
    -webkit-transition: $webkit;
       -moz-transition: $moz;
            transition: $spec;
  }
  @else {
    @if length($properties) >= 1 {
      @include prefixer(transition, $properties, webkit moz spec);
    }

    @else {
      $properties: all 0.15s ease-out 0s;
      @include prefixer(transition, $properties, webkit moz spec);
    }
  }
}

@mixin transition-property ($properties...) {
   -webkit-transition-property: transition-property-names($properties, 'webkit');
      -moz-transition-property: transition-property-names($properties, 'moz');
           transition-property: transition-property-names($properties, false);
}

@mixin transition-duration ($times...) {
  @include prefixer(transition-duration, $times, webkit moz spec);
}

@mixin transition-timing-function ($motions...) {
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
  @include prefixer(transition-timing-function, $motions, webkit moz spec);
}

@mixin transition-delay ($times...) {
  @include prefixer(transition-delay, $times, webkit moz spec);
}
Something went wrong with that request. Please try again.