@mixin border($position:null,$color:$border-color) {
@if $position != null { border-#{$position}: 1px solid $color; } @else { border: 1px solid $color; }
}
@mixin square($width, $height: $width) {
width: $width; height: $height;
}
@mixin bg-size($width, $height: null) {
@if $height == null { // use $width to set background to "cover" -webkit-background-size: $width; -moz-background-size: $width; -ms-background-size: $width; -o-background-size: $width; background-size: $width; } @else { -webkit-background-size: $width $height; -moz-background-size: $width $height; -ms-background-size: $width $height; -o-background-size: $width $height; background-size: $width $height; }
}
@mixin border-radius($top-left, $top-right: null, $bottom-right: null, $bottom-left: null) {
@if $top-right == null { -webkit-border-radius: $top-left; -moz-border-radius: $top-left; -o-border-radius: $top-left; border-radius: $top-left; } @else { -webkit-border-radius: $top-left $top-right $bottom-right $bottom-left; -moz-border-radius: $top-left $top-right $bottom-right $bottom-left; -o-border-radius: $top-left $top-right $bottom-right $bottom-left; border-radius: $top-left $top-right $bottom-right $bottom-left; }
}
@mixin text-shadow($x, $y, $blur, $color) {
-webkit-text-shadow: $x $y $blur $color; -moz-text-shadow: $x $y $blur $color; -o-text-shadow: $x $y $blur $color; text-shadow: $x $y $blur $color;
}
@mixin transition($style, $duration, $ease: ease-in-out, $delay: 0s) {
-webkit-transition: $style $duration $ease; -moz-transition: $style $duration $ease; -o-transition: $style $duration $ease; transition: $style $duration $ease;
}
@mixin rotate($deg) {
-webkit-transform: rotate($deg); -moz-transform: rotate($deg); -ms-transform: rotate($deg); -o-transform: rotate($deg); transform: rotate($deg);
}
@mixin link-underline($height : 2px) {
color: $link-color; cursor: pointer; text-decoration: none; padding-bottom: 2px; position: relative; &:before { content: ""; position: absolute; left: 0; bottom: 0; right: 100%; background: $link-color; height: $height; @include transition(right, .2s); } &:hover, &:focus, &:active, &.active { text-decoration: none; color: $link-hover; &:before { right: 0; } }
}