116 lines
3.3 KiB
SCSS
116 lines
3.3 KiB
SCSS
@mixin button_border($rightbottom, $topleft) {
|
|
border: $rightbottom;
|
|
border-top: $topleft;
|
|
border-left: $topleft;
|
|
}
|
|
|
|
@mixin col-count($colCount, $colSpacing) {
|
|
column-count: $colCount;
|
|
column-gap: $colSpacing;
|
|
-webkit-column-count: $colCount;
|
|
-webkit-column-gap: $colSpacing;
|
|
-moz-column-count: $colCount;
|
|
-moz-column-gap: $colSpacing;
|
|
}
|
|
|
|
@mixin size($height, $width) {
|
|
height: $height;
|
|
width: $width;
|
|
}
|
|
|
|
@mixin square($size) {
|
|
@include size($size, $size);
|
|
}
|
|
|
|
@mixin border-radius($radius) {
|
|
border-radius: $radius;
|
|
-webkit-border-radius: $radius;
|
|
-moz-border-radius: $radius;
|
|
}
|
|
|
|
@mixin border-top-left-radius($radius) {
|
|
border-top-left-radius: $radius;
|
|
-webkit-border-top-left-radius: $radius;
|
|
-moz-border-radius-topleft: $radius;
|
|
}
|
|
|
|
@mixin border-top-right-radius($radius) {
|
|
border-top-right-radius: $radius;
|
|
-webkit-border-top-right-radius: $radius;
|
|
-moz-border-radius-topright: $radius;
|
|
}
|
|
|
|
@mixin border-bottom-right-radius($radius) {
|
|
border-bottom-right-radius: $radius;
|
|
-webkit-border-bottom-right-radius: $radius;
|
|
-moz-border-radius-bottomright: $radius;
|
|
}
|
|
|
|
@mixin border-bottom-left-radius($radius) {
|
|
border-bottom-left-radius: $radius;
|
|
-webkit-border-bottom-left-radius: $radius;
|
|
-moz-border-radius-bottomleft: $radius;
|
|
}
|
|
|
|
@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){
|
|
background-size: $size;
|
|
-webkit-background-size: $size;
|
|
-moz-background-size: $size;
|
|
-o-background-size: $size;
|
|
}
|
|
|
|
@mixin box-sizing($boxsize) {
|
|
box-sizing: $boxsize;
|
|
-webkit-box-sizing: $boxsize;
|
|
-moz-box-sizing: $boxsize;
|
|
-ms-box-sizing: $boxsize;
|
|
-o-box-sizing: $boxsize;
|
|
-khtml-box-sizing: $boxsize;
|
|
}
|
|
|
|
@mixin horizontal-gradient($startColour, $endColour) {
|
|
background-color: $endColour;
|
|
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: 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;
|
|
}
|