Sha256: 62d45f9c4d75c5fdacb13cc92d5451bc58fb52f5c4ca46aeac81e3e14ece8f2c
Contents?: true
Size: 1.4 KB
Versions: 33
Compression:
Stored size: 1.4 KB
Contents
/// Creates a spinning transition by rotating the element. The `turn` unit is used to specify how far to rotate. `1turn` is equal to a 360-degree spin.
/// @param {Keyword} $state [in] - State to transition to.
/// @param {Boolean} $direction [cw] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise).
/// @param {Number} $amount [0.75turn] - Amount to element the element.
/// @param {Boolean} $fade [false] - Set to `true` to fade the element in or out simultaneously.
/// @param {Duration} $duration [null] - Length (speed) of the transition.
/// @param {Keyword|Function} $timing [null] - Easing of the transition.
/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
@mixin mui-spin(
$state: in,
$direction: cw,
$amount: 0.75turn,
$fade: map-get($motion-ui-settings, spin-and-fade),
$duration: null,
$timing: null,
$delay: null
) {
$spin: spin($state, $direction, $amount);
@include transition-start($state) {
@include transition-basics($duration, $timing, $delay);
@include -mui-keyframe-get($spin, 0);
@if $fade {
transition-property: transform, opacity;
opacity: if($state == in, 0, 1);
} @else {
transition-property: transform, opacity;
}
}
@include transition-end($state) {
@include -mui-keyframe-get($spin, 100);
@if $fade {
opacity: if($state == in, 1, 0);
}
}
}
Version data entries
33 entries across 33 versions & 4 rubygems