1 | // Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. |
---|
2 | // Example: @include transition (all, 2.0s, ease-in-out); |
---|
3 | // @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s)); |
---|
4 | // @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s)); |
---|
5 | |
---|
6 | @mixin transition ($properties...) { |
---|
7 | @if length($properties) >= 1 { |
---|
8 | @include prefixer(transition, $properties, webkit moz spec); |
---|
9 | } |
---|
10 | |
---|
11 | @else { |
---|
12 | $properties: all 0.15s ease-out 0; |
---|
13 | @include prefixer(transition, $properties, webkit moz spec); |
---|
14 | } |
---|
15 | } |
---|
16 | |
---|
17 | @mixin transition-property ($properties...) { |
---|
18 | -webkit-transition-property: transition-property-names($properties, 'webkit'); |
---|
19 | -moz-transition-property: transition-property-names($properties, 'moz'); |
---|
20 | transition-property: transition-property-names($properties, false); |
---|
21 | } |
---|
22 | |
---|
23 | @mixin transition-duration ($times...) { |
---|
24 | @include prefixer(transition-duration, $times, webkit moz spec); |
---|
25 | } |
---|
26 | |
---|
27 | @mixin transition-timing-function ($motions...) { |
---|
28 | // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() |
---|
29 | @include prefixer(transition-timing-function, $motions, webkit moz spec); |
---|
30 | } |
---|
31 | |
---|
32 | @mixin transition-delay ($times...) { |
---|
33 | @include prefixer(transition-delay, $times, webkit moz spec); |
---|
34 | } |
---|