Bones/scss/_mixins.scss

174 lines
6.0 KiB
SCSS
Raw Normal View History

2013-01-31 13:49:28 -05:00
@mixin button_border($rightbottom, $topleft) {
border: $rightbottom;
border-top: $topleft;
border-left: $topleft;
}
@mixin col-count($colCount, $colSpacing) {
-webkit-column-count: $colCount;
-webkit-column-gap: $colSpacing;
-moz-column-count: $colCount;
-moz-column-gap: $colSpacing;
column-count: $colCount;
column-gap: $colSpacing;
2013-01-31 13:49:28 -05:00
}
@mixin size($height, $width) {
height: $height;
width: $width;
}
@mixin square($size) {
@include size($size, $size);
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
2013-01-31 13:49:28 -05:00
}
@mixin border-top-left-radius($radius) {
-webkit-border-top-left-radius: $radius;
-moz-border-radius-topleft: $radius;
border-top-left-radius: $radius;
2013-01-31 13:49:28 -05:00
}
@mixin border-top-right-radius($radius) {
-webkit-border-top-right-radius: $radius;
-moz-border-radius-topright: $radius;
border-top-right-radius: $radius;
2013-01-31 13:49:28 -05:00
}
@mixin border-bottom-right-radius($radius) {
-webkit-border-bottom-right-radius: $radius;
-moz-border-radius-bottomright: $radius;
border-bottom-right-radius: $radius;
2013-01-31 13:49:28 -05:00
}
@mixin border-bottom-left-radius($radius) {
-webkit-border-bottom-left-radius: $radius;
-moz-border-radius-bottomleft: $radius;
border-bottom-left-radius: $radius;
2013-01-31 13:49:28 -05:00
}
@mixin border-top-radius($radius) {
@include border-top-right-radius($radius);
@include border-top-left-radius($radius);
}
@mixin border-right-radius($radius) {
@include border-top-right-radius($radius);
@include border-bottom-right-radius($radius);
}
@mixin border-bottom-radius($radius) {
@include border-bottom-right-radius($radius);
@include border-bottom-left-radius($radius);
}
@mixin border-left-radius($radius) {
@include border-top-left-radius($radius);
@include border-bottom-left-radius($radius);
}
@mixin background-size($size){
-webkit-background-size: $size;
-moz-background-size: $size;
-o-background-size: $size;
background-size: $size;
2013-01-31 13:49:28 -05:00
}
@mixin box-sizing($boxsize) {
-webkit-box-sizing: $boxsize;
-moz-box-sizing: $boxsize;
-ms-box-sizing: $boxsize;
-o-box-sizing: $boxsize;
-khtml-box-sizing: $boxsize;
box-sizing: $boxsize;
2013-01-31 13:49:28 -05:00
}
@mixin horizontal-gradient($startColour, $endColour) {
background-color: $fallback_hex_gradient_bg;
2013-01-31 13:49:28 -05:00
background-image: linear-gradient(to right, $startColour, $endColour);
background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColour), to($endColour));
background-image: -webkit-linear-gradient(left, $startColour, $endColour);
background-image: -moz-linear-gradient(left, $startColour, $endColour);
background-image: -o-linear-gradient(left, $startColour, $endColour);
background-repeat: repeat-x;
}
@mixin vertical-gradient($startColour, $endColour) {
background-color: $fallback_hex_gradient_bg;
2013-01-31 13:49:28 -05:00
background-color: mix($startColour, $endColour, 60%);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColour), to($endColour));
background-image: -webkit-linear-gradient(top, $startColour, $endColour);
background-image: -moz-linear-gradient(top, $startColour, $endColour);
background-image: -o-linear-gradient(top, $startColour, $endColour);
background-image: linear-gradient(to bottom, $startColour, $endColour);
background-repeat: repeat-x;
}
@mixin box-shadow($a, $b, $c, $colour) {
-moz-box-shadow: $a $b $c $colour;
-webkit-box-shadow: $a $b $c $colour;
box-shadow: $a $b $c $colour;
}
2013-04-23 16:29:51 -04:00
@mixin grid($grid-container-width, $grid-column-count:$column-count, $grid-gutter:$gutter) {
$grid-column-width: $grid-container-width/$grid-column-count;
.container {
width: $grid-container-width;
.one { width: (1*$grid-column-width - $grid-gutter); }
.two { width: (2*$grid-column-width - $grid-gutter); }
.three { width: (3*$grid-column-width - $grid-gutter); }
.four { width: (4*$grid-column-width - $grid-gutter); }
.five { width: (5*$grid-column-width - $grid-gutter); }
.six { width: (6*$grid-column-width - $grid-gutter); }
.seven { width: (7*$grid-column-width - $grid-gutter); }
.eight { width: (8*$grid-column-width - $grid-gutter); }
.nine { width: (9*$grid-column-width - $grid-gutter); }
.ten { width: (10*$grid-column-width - $grid-gutter); }
.eleven { width: (11*$grid-column-width - $grid-gutter); }
.twelve { width: (12*$grid-column-width - $grid-gutter); }
.thirteen { width: (13*$grid-column-width - $grid-gutter); }
.fourteen { width: (14*$grid-column-width - $grid-gutter); }
.fifteen { width: (15*$grid-column-width - $grid-gutter); }
.sixteen { width: (16*$grid-column-width - $grid-gutter); }
.one-third { width: ($grid-container-width/3) - $grid-gutter; }
.two-thirds { width: (($grid-container-width/3)*2) - $grid-gutter; }
.one-half { width: ($grid-container-width/2) - $grid-gutter; }
.one-quarter { width: ($grid-container-width/4) - $grid-gutter; }
.three-quarters {width: (($grid-container-width/4)*3) - $grid-gutter;}
2013-04-23 16:29:51 -04:00
.offset-by-one { padding-left: $grid-column-width; }
.offset-by-two { padding-left: $grid-column-width*2; }
.offset-by-three { padding-left: $grid-column-width*3; }
.offset-by-four { padding-left: $grid-column-width*4; }
.offset-by-five { padding-left: $grid-column-width*5; }
.offset-by-six { padding-left: $grid-column-width*6; }
.offset-by-seven { padding-left: $grid-column-width*7; }
.offset-by-eight { padding-left: $grid-column-width*8; }
.offset-by-nine { padding-left: $grid-column-width*9; }
.offset-by-ten { padding-left: $grid-column-width*10; }
.offset-by-eleven { padding-left: $grid-column-width*11; }
.offset-by-twelve { padding-left: $grid-column-width*12; }
.offset-by-thirteen { padding-left: $grid-column-width*13; }
.offset-by-fourteen { padding-left: $grid-column-width*14; }
.offset-by-fifteen { padding-left: $grid-column-width*15; }
}
}
@mixin clearfix {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}