72 lines
2.2 KiB
SCSS
72 lines
2.2 KiB
SCSS
|
// 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);
|
||
|
|
} @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);
|
||
|
|
}
|