/** * Mixin Toolbox * Created by Esko Cruzeta * https://github.com/EskoCruz/sass-mixin-toolbox */ /*// box shadow */ /* offset-x | offset-y | blur-radius | spread-radius | color | inset */ @mixin box-shadow ($top, $left, $blur, $spread, $color, $inset: false) { @if $inset { -webkit-box-shadow:inset $top $left $blur $spread $color; -moz-box-shadow:inset $top $left $blur $spread $color; box-shadow:inset $top $left $blur $spread $color; } @else { -webkit-box-shadow: $top $left $blur $spread $color; -moz-box-shadow: $top $left $blur $spread $color; box-shadow: $top $left $blur $spread $color; } } /*// border radius */ @mixin border-radius ($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } /*// generic transform */ @mixin transform ($transforms) { -moz-transform: $transforms; -o-transform: $transforms; -ms-transform: $transforms; -webkit-transform: $transforms; transform: $transforms; } /*// scale */ @mixin scale ($scale) { @include transform(scale($scale)); } /*// translate */ @mixin translate ($x, $y) { @include transform(translate($x, $y)); } /*// skew */ @mixin skew ($x, $y) { @include transform(skew(#{$x}deg, #{$y}deg)); } /*// rotate */ @mixin rotate ($deg) { @include transform(rotate(#{$deg}deg)); } /*// rotateX */ @mixin rotateX ($deg) { @include transform(rotate(#{$deg}deg)); } /*// rotateY */ @mixin rotateY ($deg) { @include transform(rotate(#{$deg}deg)); } /*// rotateZ */ @mixin rotateZ ($deg) { @include transform(rotate(#{$deg}deg)); } /*// rotate 3D */ @mixin rotateXYZ ($x, $y, $z) { @include transform(rotateX(#{$x}deg), rotateY(#{$y}deg), rotateZ(#{$z}deg)); } /*// perspective */ @mixin perspective ($perspective) { @include transform(perspective($perspective)); } @mixin perspective-rotateXYZ (){ @include transform(perspective($perspective)); } /*// transform origin */ @mixin transform-origin ($origin) { -moz-transform-origin: $origin; -o-transform-origin: $origin; -ms-transform-origin: $origin; -webkit-transform-origin: $origin; transform-origin: $origin; } /*// background linear gradient - top to bottom */ /* top | bottom */ @mixin background-grad($top, $bottom) { background: -webkit-linear-gradient($top, $bottom); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient($top, $bottom); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient($top, $bottom); /* For Firefox 3.6 to 15 */ background: linear-gradient($top, $bottom); /* Standard syntax */ }