// ----------------------------------------------------------------------

  // Transitions

// ----------------------------------------------------------------------

// example: @include single-transition(background, 1s, ease-out);

@mixin single-transition($property, $duration, $timing-function) {
  -webkit-transition: $property $duration $timing-function;
     -moz-transition: $property $duration $timing-function;
       -o-transition: $property $duration $timing-function;
          transition: $property $duration $timing-function;
}

// example: @include double-transition(background, 1s, ease-in-out, opacity, .1s, ease-in-out);

@mixin double-transition($property1, $duration1, $timing-function1, $property2, $duration2, $timing-function2) {
  -webkit-transition: $property1 $duration1 $timing-function1, $property2 $duration2 $timing-function2;
     -moz-transition: $property1 $duration1 $timing-function1, $property2 $duration2 $timing-function2;
       -o-transition: $property1 $duration1 $timing-function1, $property2 $duration2 $timing-function2;
          transition: $property1 $duration1 $timing-function1, $property2 $duration2 $timing-function2;
}

//use @include transition(color .3s ease);
@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}