1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- // 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);
- }
|