/*------------------------------------------------------ # MIXINS --------------------------------------------------------*/ // @include border-radius(4px) @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } // Center block @mixin center-block { display: block; margin-left: auto; margin-right: auto; } // @include font-size(16,24) @mixin font-size($sizeValue: 16, $line: $sizeValue * 1.5) { font-size: ($sizeValue) + px; line-height: ($line) + px; font-size: ($sizeValue / 16) + rem; line-height: ($line / 16) + rem; } // @include transition(color .3s ease); @mixin transition($args...) { -webkit-transition: $args; -moz-transition: $args; -ms-transition: $args; -o-transition: $args; transition: $args; } // @include opacity(0.8); @mixin opacity($opacity) { opacity: $opacity; $opacity-ie: $opacity * 100; filter: alpha(opacity=$opacity-ie); //IE8 } // @extend %clearfix; %clearfix { *zoom: 1; &:before, &:after { content: " "; display: table; } &:after { clear: both; } } // @include link-colors($primary_color,$secondary_color); @mixin link-colors($normal, $hover) { color: $normal; &:visited { color: $normal; } &:hover, &:focus { color: $hover; } } // @include box-shadow(0,0, 2px, rgba(0, 0, 0, 0.25), $inset: false) @mixin box-shadow($top, $left, $blur, $color, $inset: false) { @if $inset { -webkit-box-shadow:inset $top $left $blur $color; -moz-box-shadow:inset $top $left $blur $color; box-shadow:inset $top $left $blur $color; } @else { -webkit-box-shadow: $top $left $blur $color; -moz-box-shadow: $top $left $blur $color; box-shadow: $top $left $blur $color; } }