12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 |
- /**
- * Animation mixin.
- */
- @mixin animation($animate...) {
- $max: length($animate);
- $animations: '';
-
- @for $i from 1 through $max {
- $animations: #{$animations + nth($animate, $i)};
-
- @if $i < $max {
- $animations: #{$animations + ", "};
- }
- }
- -webkit-animation: $animations;
- -moz-animation: $animations;
- -o-animation: $animations;
- animation: $animations;
- }
-
- @mixin flex() {
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- }
-
- /**
- * Keyframes mixin.
- */
- @mixin keyframes($animationName) {
- @-webkit-keyframes #{$animationName} {
- @content;
- }
- @-moz-keyframes #{$animationName} {
- @content;
- }
- @-o-keyframes #{$animationName} {
- @content;
- }
- @keyframes #{$animationName} {
- @content;
- }
- }
-
- @mixin circle($diameter) {
- width: $diameter;
- height: $diameter;
- border-radius: 50%;
- }
-
- @mixin absoluteAligning($sizeX, $sizeY) {
- top: 50%;
- left: 50%;
- position: absolute;
- @include transform(translate(-#{$sizeX / 2}, -#{$sizeY / 2}))
- }
-
- @mixin transform($func) {
- -moz-transform: $func;
- -ms-transform: $func;
- -webkit-transform: $func;
- -o-transform: $func;
- transform: $func;
- }
-
- @mixin transition($transition...) {
- -moz-transition: $transition;
- -o-transition: $transition;
- -webkit-transition: $transition;
- transition: $transition;
- }
-
- @mixin box-shadow($type, $h, $y, $blur, $color) {
- -webkit-box-shadow: $type $h $y $blur $color;
- -moz-box-shadow: $type $h $y $blur $color;
- box-shadow: $type $h $y $blur $color;
- }
|