web/src/scss/_utility.scss

72 lines
1.3 KiB
SCSS

// box-shadow
@mixin box-shadow($value...) {
-webkit-box-shadow: $value;
-moz-box-shadow: $value;
box-shadow: $value;
}
// border-radius
@mixin border-radius($corner...) {
-webkit-border-radius: $corner;
-moz-border-radius: $corner;
border-radius: $corner;
}
@mixin clearfix() {
&:after {
content: '';
display: block;
clear: both;
visibility: hidden;
}
}
@mixin transform($value) {
-webkit-transform: $value;
-moz-transform: $value;
-ms-transform: $value;
-o-transform: $value;
transform: $value;
}
@mixin transition($value...) {
-webkit-transition: $value;
-moz-transition: $value;
-ms-transition: $value;
-o-transition: $value;
transition: $value;
}
@mixin animation($value) {
animation: $value;
-webkit-animation: $value;
}
@mixin linear-gradient($direct, $colors) {
background: linear-gradient($direct, $colors);
background: -webkit-linear-gradient($direct, $colors);
background: -moz-linear-gradient($direct, $colors);
}
@mixin backdrop-filter($value) {
backdrop-filter: $value;
-webkit-backdrop-filter: $value;
}
/*
Extension
*/
.unselectable {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn-like {
&:active {
@include transform(translateY(2px));
}
}