@mixin border($top,$right,$bottom,$left,$color,$type) {
@if $top == 0 {}
@else{
border-top: $top $type $color;
}
@if $right == 0 {}
@else{
border-right: $right $type $color;
}
@if $bottom == 0 {}
@else{
border-bottom: $bottom $type $color;
}
@if $left == 0 {}
@else{
border-left: $left $type $color;
}
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
border-radius: $radius;
}
@mixin border-top-left-radius($radius) {
-webkit-border-top-left-radius: $radius;
-moz-border-radius-topleft: $radius;
border-top-left-radius: $radius;
}
@mixin border-top-radius($radius) {
-webkit-border-top-right-radius: $radius;
border-top-right-radius: $radius;
-webkit-border-top-left-radius: $radius;
border-top-left-radius: $radius;
}
@mixin border-top-right-radius($radius) {
-webkit-border-top-right-radius: $radius;
-moz-border-radius-topright: $radius;
border-top-right-radius: $radius;
}
@mixin border-right-radius($radius) {
-webkit-border-bottom-right-radius: $radius;
border-bottom-right-radius: $radius;
-webkit-border-top-right-radius: $radius;
border-top-right-radius: $radius;
}
@mixin border-bottom-right-radius($radius) {
-webkit-border-bottom-right-radius: $radius;
-moz-border-radius-bottomright: $radius;
border-bottom-right-radius: $radius;
}
@mixin border-bottom-radius($radius) {
-webkit-border-bottom-right-radius: $radius;
border-bottom-right-radius: $radius;
-webkit-border-bottom-left-radius: $radius;
border-bottom-left-radius: $radius;
}
@mixin border-bottom-left-radius($radius) {
-webkit-border-bottom-left-radius: $radius;
-moz-border-radius-bottomleft: $radius;
border-bottom-left-radius: $radius;
}
@mixin border-left-radius($radius) {
-webkit-border-bottom-left-radius: $radius;
border-bottom-left-radius: $radius;
-webkit-border-top-left-radius: $radius;
border-top-left-radius: $radius;
}
@mixin breakpoint($point) {
@if $point == large {
@media all and (min-width: 1200px) { @content; }
}
@else if $point == medium {
@media all and (min-width: 992px) and (max-width: 1199px) { @content; }
}
@else if $point == small {
@media all and (min-width: 768px) and (max-width: 991px) { @content; }
}
@else if $point == xsmall {
@media all and (min-width: 321px) and (max-width: 640px) { @content; }
}
@else if $point == xxsmall {
@media all and (max-width: 320px) { @content; }
}
}
@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //IE8
}
@mixin center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
@mixin font-size($sizeValue: 16 ){
font-size: $sizeValue + px; //fallback for old browsers
font-size: (0.1 * $sizeValue) + rem;
}
@mixin line-height($heightValue: 16 ){
line-height: $heightValue + px; //fallback for old browsers
line-height: (0.1 * $heightValue) + rem;
}
@mixin text-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba(0,0,0,.4)) {
text-shadow: $x $y $blur $color;
}
@mixin background-gradient($startColor: #3C3C3C, $endColor: #999999) {
background-color: $startColor;
background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
background-image: -webkit-linear-gradient(top, $startColor, $endColor);
background-image: -moz-linear-gradient(top, $startColor, $endColor);
background-image: -ms-linear-gradient(top, $startColor, $endColor);
background-image: -o-linear-gradient(top, $startColor, $endColor);
background-image: linear-gradient(top, $startColor, $endColor);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}');
}
@mixin background-horizontal($startColor: #3C3C3C, $endColor: #999999) {
background-color: $startColor;
background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
background-image: -webkit-linear-gradient(left, $startColor, $endColor);
background-image: -moz-linear-gradient(left, $startColor, $endColor);
background-image: -ms-linear-gradient(left, $startColor, $endColor);
background-image: -o-linear-gradient(left, $startColor, $endColor);
background-image: linear-gradient(left, $startColor, $endColor);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}', gradientType='1');
}
@mixin bg-cover($cover){
-webkit-background-size: $cover;
-moz-background-size: $cover;
-o-background-size: $cover;
background-size: $cover;
}
My small library of mixins
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.