/** * 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 styling placeholder **/ @mixin placeholder() { $selectors: ( "::-webkit-input-placeholder", "::-moz-placeholder", ":-moz-placeholder", ":-ms-input-placeholder" ); @each $selector in $selectors { #{$selector} { @content; } } } @mixin box-shadow($h, $y, $blur, $color, $inset: false) { @if $inset { -webkit-box-shadow: inset $h $y $blur $color; -moz-box-shadow: inset $h $y $blur $color; box-shadow: inset $h $y $blur $color; } @else { -webkit-box-shadow: $h $y $blur $color; -moz-box-shadow: $h $y $blur $color; box-shadow: $h $y $blur $color; } } @mixin no-box-shadow { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } @mixin box-sizing($box-model) { -webkit-box-sizing: $box-model; // Safari <= 5 -moz-box-sizing: $box-model; // Firefox <= 19 box-sizing: $box-model; } @mixin border-radius($radius) { -webkit-border-radius: $radius; border-radius: $radius; /* stops bg color from leaking outside the border: */ background-clip: padding-box; } @mixin opacity($opacity) { opacity: $opacity; $opacity-ie: $opacity * 100; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacity-ie); filter: alpha(opacity=$opacity-ie); //IE8 } @mixin text-truncate { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }