@import “shared”;
// CSS Transitions // Currently only works in Webkit. // // * expected in CSS3, FireFox 3.6/7 and Opera Presto 2.3 // * We'll be prepared. // // Including this submodule sets following defaults for the mixins: // // $default-transition-property : all // $default-transition-duration : 1s // $default-transition-function : false // $default-transition-delay : false // // Override them if you like. Timing-function and delay are set to false for browser defaults (ease, 0s).
$default-transition-property: all !default;
$default-transition-duration: 1s !default;
$default-transition-function: false !default;
$default-transition-delay: false !default;
// One or more properties to transition // // * for multiple, use a comma-delimited list // * also accepts “all” or “none”
@mixin transition-property($properties: $default-transition-property) {
@include experimental(transition-property, unquote($properties), -moz, -webkit, -o, not -ms, not -khtml, official );
}
// One or more durations in seconds // // * for multiple, use a comma-delimited list // * these durations will affect the properties in the same list position
@mixin transition-duration($duration: $default-transition-duration) {
@if type-of($duration) == string { $duration: unquote($duration); } @include experimental(transition-duration, $duration, -moz, -webkit, -o, not -ms, not -khtml, official );
}
// One or more timing functions // // * [ ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)] // * For multiple, use a comma-delimited list // * These functions will effect the properties in the same list position
@mixin transition-timing-function($function: $default-transition-function) {
@include experimental(transition-timing-function, unquote($function), -moz, -webkit, -o, not -ms, not -khtml, official );
}
// One or more transition-delays in seconds // // * for multiple, use a comma-delimited list // * these delays will effect the properties in the same list position
@mixin transition-delay($delay: $default-transition-delay) {
@if type-of($delay) == string { $delay: unquote($delay); } @include experimental(transition-delay, $delay, -moz, -webkit, -o, not -ms, not -khtml, official );
}
// Transition all-in-one shorthand
@mixin transition(
$properties: $default-transition-property, $duration: $default-transition-duration, $function: $default-transition-function, $delay: $default-transition-delay
) {
@include transition-property($properties); @include transition-duration($duration); @if $function { @include transition-timing-function($function); } @if $delay { @include transition-delay($delay); }
}