76 lines
2.1 KiB
SCSS
76 lines
2.1 KiB
SCSS
@mixin flex($alignItem, $justifyContent) {
|
|
display: -webkit-box;
|
|
display: -moz-box;
|
|
display: -ms-flexbox;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
align-items: $alignItem;
|
|
justify-content: $justifyContent;
|
|
}
|
|
@mixin grid($loop, $num, $row-gap, $col-gap) {
|
|
display: grid;
|
|
grid-template-columns: repeat($loop, $num);
|
|
gap: $row-gap $col-gap;
|
|
}
|
|
@mixin d-flex() {
|
|
display: -webkit-box;
|
|
display: -moz-box;
|
|
display: -ms-flexbox;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
@mixin centered() {
|
|
top: 50%;
|
|
left: 50%;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
-moz-transform: translate(-50%, -50%);
|
|
-ms-transform: translate(-50%, -50%);
|
|
-o-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
@mixin center($x, $y) {
|
|
-webkit-transform: translate($x,$y);
|
|
-moz-transform: translate($x,$y);
|
|
-ms-transform: translate($x,$y);
|
|
-o-transform: translate($x,$y);
|
|
transform: translate($x,$y);
|
|
}
|
|
|
|
// --------------------------
|
|
|
|
@mixin transition1 (){
|
|
-webkit-transition: all 0.1s ease;
|
|
-moz-transition : all 0.1s ease;
|
|
-ms-transition : all 0.1s ease;
|
|
-o-transition : all 0.1s ease;
|
|
transition : all 0.1s ease;
|
|
}
|
|
@mixin transition2 (){
|
|
-webkit-transition: all 0.2s ease;
|
|
-moz-transition : all 0.2s ease;
|
|
-ms-transition : all 0.2s ease;
|
|
-o-transition : all 0.2s ease;
|
|
transition : all 0.2s ease;
|
|
}
|
|
@mixin transition3 (){
|
|
-webkit-transition: all 0.3s ease;
|
|
-moz-transition : all 0.3s ease;
|
|
-ms-transition : all 0.3s ease;
|
|
-o-transition : all 0.3s ease;
|
|
transition : all 0.3s ease;
|
|
}
|
|
@mixin transition4 (){
|
|
-webkit-transition: all 0.4s ease;
|
|
-moz-transition : all 0.4s ease;
|
|
-ms-transition : all 0.4s ease;
|
|
-o-transition : all 0.4s ease;
|
|
transition : all 0.4s ease;
|
|
}
|
|
@mixin transition5 (){
|
|
-webkit-transition: all 0.5s ease;
|
|
-moz-transition : all 0.5s ease;
|
|
-ms-transition : all 0.5s ease;
|
|
-o-transition : all 0.5s ease;
|
|
transition : all 0.5s ease;
|
|
}
|