// clearfix %clearfix { &:after { content: " "; display: block; clear: both; } } // reset for list %listreset { margin: 0; padding: 0; list-style: none; } // link color @mixin link-color($color) { color: $color; &:hover, &:active, &:focus { color: lighten($color, 25%); text-decoration: none; } } // hide text @mixin hide-text { overflow: hidden; text-indent: -9999px; } // bottom links' border @mixin link-border($color) { border-bottom: 1px solid lighten($color, 25%); &:hover, &:active, &:focus { border-color: lighten($color, 30%); text-decoration: none; } } // some CSS3 style @mixin css3($property, $value) { @each $prefix in -webkit-, -moz-, '' { #{$prefix}#{$property}: $value; } } // box sizing @mixin box-sizing($type: border-box) { -webkit-box-sizing: $type; -moz-box-sizing: $type; box-sizing: $type; } // box shadow // sample: @include box-shadow(2px 2px 5px rgba(255,0,0,0.6)); @mixin box-shadow($shadows...) { -webkit-box-shadow: $shadows; box-shadow: $shadows; } // border radius @mixin border-radius($radius...) { -webkit-border-radius: $radius; border-radius: $radius; } //mask @mixin mask{ width:100%; overflow:hidden; position:relative; } // opacity @mixin opacity($opacity) { opacity: $opacity; $opacityIE: $opacity * 100; filter: alpha(opacity=$opacityIE); } // font size rem @mixin fontsize($size: 24, $base: 16) { font-size: $size + px; font-size: ($size / $base) * 1rem; } // retina images @mixin img-retina($image, $extension, $width, $height) { background: url('../images/' + $image + '.' + $extension) no-repeat; width: $width; height: $height; @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { background-image: url('../images/' + $image + '@2x' + '.' + $extension); background-size: $width $height; } } // placeholder @mixin placeholder { ::-webkit-input-placeholder {@content} ::-moz-placeholder {opacity: 1; @content} :-moz-placeholder {@content} :-ms-input-placeholder {@content} .placeholder {@content} } // full width %full-width { padding-left: 9999px; padding-right: 9999px; margin-left: -9999px; margin-right: -9999px; } // transition @mixin transition ($type:all, $time:0.4s, $ease:ease) { -moz-transition : $type $time $ease; -webkit-transition : $type $time $ease; -o-transition : $type $time $ease; transition : $type $time $ease; } // gradient @mixin linear-gradient($fromColor, $toColor) { background-color: $toColor; background-image: -webkit-linear-gradient(top, $fromColor, $toColor); background-image: -moz-linear-gradient(top, $fromColor, $toColor); background-image: -ms-linear-gradient(top, $fromColor, $toColor); background-image: -o-linear-gradient(top, $fromColor, $toColor); background-image: linear-gradient(top, $fromColor, $toColor); } @mixin transform ($deg) { transform : $deg; -moz-transform : $deg; -ms-transform : $deg; -o-transform : $deg; -webkit-transform : $deg; } @mixin scale ($multiplier) { transform : scale($multiplier); -moz-transform : scale($multiplier); -ms-transform : scale($multiplier); -o-transform : scale($multiplier); -webkit-transform : scale($multiplier); } @mixin rotate ($deg) { -moz-transform : rotate($deg); -ms-transform : rotate($deg); -o-transform : rotate($deg); -webkit-transform : rotate($deg); } @mixin skew ($deg, $deg2) { transform : skew($deg, $deg2); -moz-transform : skew($deg, $deg2); -ms-transform : skew($deg, $deg2); -o-transform : skew($deg, $deg2); -webkit-transform : skew($deg, $deg2); } @mixin font-size ($sizeValue){ font-size: $sizeValue + px; font-size: ($sizeValue / 10) + rem; } // from http://codepen.io/MichaelArestad/pen/IxFGj @mixin arrow-lazy($al-direction: top, $al-size: 10px, $al-color: #ccc, $al-center: 50%, $al-margin: -1px, $al-pseudo: before){ position: relative; border-color: $al-color; &:#{$al-pseudo} { position: absolute; content: ""; width: 0; height: 0; border-color: $al-color; @if $al-direction == "right" { top: $al-center; left: 100%; margin-left: $al-margin; margin-top: $al-size * -1; border-top: $al-size solid transparent; border-bottom: $al-size solid transparent; border-left: $al-size solid $al-color; border-left-color: inherit; } @else if $al-direction == "down" { top: 100%; left: $al-center; margin-top: $al-margin; margin-left: $al-size * -1; border-left: $al-size solid transparent; border-right: $al-size solid transparent; border-top: $al-size solid $al-color; border-top-color: inherit; } @else if $al-direction == "left" { top: $al-center; right: 100%; margin-right: $al-margin; margin-top: $al-size * -1; border-top: $al-size solid transparent; border-bottom: $al-size solid transparent; border-right:$al-size solid $al-color; border-right-color: inherit; } @else { bottom: 100%; left: $al-center; margin-bottom: $al-margin; margin-left: $al-size * -1; border-left: $al-size solid transparent; border-right: $al-size solid transparent; border-bottom: $al-size solid $al-color; border-bottom-color: inherit; } } }