88 lines
2.2 KiB
SCSS
88 lines
2.2 KiB
SCSS
@mixin transition($transitions) {
|
|
-webkit-transition: $transitions;
|
|
-moz-transition: $transitions;
|
|
-ms-transition: $transitions;
|
|
-o-transition: $transitions;
|
|
transition: $transitions;
|
|
}
|
|
|
|
/* this mixin makes possible to add transition to a specific vendor, example: */
|
|
/* -webkit-transition: -webkit-transform 0.5s linear; */
|
|
@mixin transitionPrefix($property, $values) {
|
|
-webkit-transition: -webkit-#{$property} #{$values};
|
|
-moz-transition: -moz-#{$property} #{$values};
|
|
-ms-transition: -ms-#{$property} #{$values};
|
|
-o-transition: -o-#{$property} #{$values};
|
|
transition: #{$property} #{$values};
|
|
}
|
|
|
|
@mixin background-gradient($from, $to) {
|
|
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, $from), color-stop(100%, $to));
|
|
background: -webkit-linear-gradient($from, $to);
|
|
background: -moz-linear-gradient($from, $to);
|
|
background: -o-linear-gradient($from, $to);
|
|
background: linear-gradient($from, $to);
|
|
}
|
|
|
|
@mixin transform ($transforms) {
|
|
-moz-transform: $transforms;
|
|
-o-transform: $transforms;
|
|
-ms-transform: $transforms;
|
|
-webkit-transform: $transforms;
|
|
transform: $transforms;
|
|
}
|
|
|
|
@mixin transform-origin ($values) {
|
|
-webkit-transform-origin: $values;
|
|
-moz-transform-origin: $values;
|
|
-o-transform-origin: $values;
|
|
-ms-transform-origin: $values;
|
|
transform-origin: $values;
|
|
}
|
|
|
|
@mixin placeholder {
|
|
&::-webkit-input-placeholder {@content}
|
|
&:-moz-placeholder {@content}
|
|
&::-moz-placeholder {@content}
|
|
&:-ms-input-placeholder {@content}
|
|
}
|
|
|
|
@mixin animation($animations) {
|
|
-webkit-animation: $animations;
|
|
-moz-animation: $animations;
|
|
-o-animation: $animations;
|
|
-ms-animation: $animations;
|
|
animation: $animations;
|
|
}
|
|
|
|
@mixin animationDelay($value) {
|
|
-webkit-animation-delay: $value;
|
|
-moz-animation-delay: $value;
|
|
-o-animation-delay: $value;
|
|
-ms-animation-delay: $value;
|
|
animation-delay: $value;
|
|
}
|
|
|
|
@mixin animationDuration($value) {
|
|
-webkit-animation-duration: $value;
|
|
-moz-animation-duration: $value;
|
|
-o-animation-duration: $value;
|
|
animation-duration: $value;
|
|
}
|
|
|
|
@mixin keyFrame($name) {
|
|
@-webkit-keyframes $name{
|
|
@content
|
|
}
|
|
@-moz-keyframes $name{
|
|
@content
|
|
}
|
|
@-o-keyframes $name{
|
|
@content
|
|
}
|
|
@keyframes $name{
|
|
@content
|
|
}
|
|
}
|
|
|