161 lines
3.3 KiB
SCSS
161 lines
3.3 KiB
SCSS
//backgroud
|
|
@mixin background($position: center,$size: cover,$repeat: no-repeat) {
|
|
background: {
|
|
position: $position;
|
|
repeat: $repeat;
|
|
size: $size;
|
|
}
|
|
}
|
|
|
|
//transition
|
|
@mixin transition($time) {
|
|
-webkit-transition: all $time ease-out 0s;
|
|
-moz-transition: all $time ease-out 0s;
|
|
-ms-transition: all $time ease-out 0s;
|
|
-o-transition: all $time ease-out 0s;
|
|
transition: all $time ease-out 0s;
|
|
}
|
|
|
|
// transform
|
|
@mixin transform($transforms) {
|
|
-webkit-transform: $transforms;
|
|
-moz-transform: $transforms;
|
|
-ms-transform: $transforms;
|
|
transform: $transforms;
|
|
}
|
|
|
|
//border
|
|
@mixin border-radius($man) {
|
|
-webkit-border-radius: $man;
|
|
-moz-border-radius: $man;
|
|
border-radius: $man;
|
|
}
|
|
|
|
// Flexbox display
|
|
@mixin flexbox() {
|
|
display: -webkit-box;
|
|
display: -moz-box;
|
|
display: -ms-flexbox;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
|
|
// Box shadows
|
|
@mixin box-shadow($shadow) {
|
|
-webkit-box-shadow: $shadow;
|
|
-moz-box-shadow: $shadow;
|
|
box-shadow: $shadow;
|
|
}
|
|
|
|
//before-left-top
|
|
@mixin before-left-top($width, $height, $background, $left, $top) {
|
|
position: relative;
|
|
&::before{
|
|
position: absolute;
|
|
content: '';
|
|
width: $width;
|
|
height: $height;
|
|
background: $background;
|
|
left: $left;
|
|
top: $top;
|
|
}
|
|
}
|
|
|
|
//before-left-bottom
|
|
@mixin before-left-bottom($width, $height, $background, $left, $bottom) {
|
|
position: relative;
|
|
&::before{
|
|
position: absolute;
|
|
content: '';
|
|
width: $width;
|
|
height: $height;
|
|
background: $background;
|
|
left: $left;
|
|
bottom: $bottom;
|
|
}
|
|
}
|
|
|
|
//before-right-top
|
|
@mixin before-right-bottom($width, $height, $background, $right, $bottom) {
|
|
position: relative;
|
|
&::before{
|
|
position: absolute;
|
|
content: '';
|
|
width: $width;
|
|
height: $height;
|
|
background: $background;
|
|
right: $right;
|
|
bottom: $bottom;
|
|
}
|
|
}
|
|
|
|
//before-right-bottom
|
|
@mixin before-right-top($width, $height, $background, $right, $top) {
|
|
position: relative;
|
|
&::before{
|
|
position: absolute;
|
|
content: '';
|
|
width: $width;
|
|
height: $height;
|
|
background: $background;
|
|
right: $right;
|
|
top: $top;
|
|
}
|
|
}
|
|
|
|
//after-left-top
|
|
@mixin after-left-top($width, $height, $background, $left, $top) {
|
|
position: relative;
|
|
&::after{
|
|
position: absolute;
|
|
content: '';
|
|
width: $width;
|
|
height: $height;
|
|
background: $background;
|
|
left: $left;
|
|
top: $top;
|
|
}
|
|
}
|
|
|
|
//after-left-bottom
|
|
@mixin after-left-bottom($width, $height, $background, $left, $bottom) {
|
|
position: relative;
|
|
&::after{
|
|
position: absolute;
|
|
content: '';
|
|
width: $width;
|
|
height: $height;
|
|
background: $background;
|
|
left: $left;
|
|
bottom: $bottom;
|
|
}
|
|
}
|
|
|
|
//after-right-top
|
|
@mixin after-right-bottom($width, $height, $background, $right, $bottom) {
|
|
position: relative;
|
|
&::after{
|
|
position: absolute;
|
|
content: '';
|
|
width: $width;
|
|
height: $height;
|
|
background: $background;
|
|
right: $right;
|
|
bottom: $bottom;
|
|
}
|
|
}
|
|
|
|
//after-right-bottom
|
|
@mixin after-right-top($width, $height, $background, $right, $top) {
|
|
position: relative;
|
|
&::after{
|
|
position: absolute;
|
|
content: '';
|
|
width: $width;
|
|
height: $height;
|
|
background: $background;
|
|
right: $right;
|
|
top: $top;
|
|
}
|
|
}
|
|
|