mixins.scss

/*MIXINS*/
@mixin transition($transition...) {
    -moz-transition: $transition;
    -o-transition: $transition;
    -webkit-transition: $transition;
    transition: $transition;
}

@mixin transition-property($property...) {
    -moz-transition-property: $property;
    -o-transition-property: $property;
    -webkit-transition-property: $property;
    transition-property: $property;
}

@mixin transition-duration($duration...) {
    -moz-transition-property: $duration;
    -o-transition-property: $duration;
    -webkit-transition-property: $duration;
    transition-property: $duration;
}

@mixin transition-timing-function($timing...) {
    -moz-transition-timing-function: $timing;
    -o-transition-timing-function: $timing;
    -webkit-transition-timing-function: $timing;
    transition-timing-function: $timing;
}

@mixin transition-delay($delay...) {
    -moz-transition-delay: $delay;
    -o-transition-delay: $delay;
    -webkit-transition-delay: $delay;
    transition-delay: $delay;
}

@mixin background-size($size) {
    -webkit-background-size: $size;
    -moz-background-size: $size;
    -o-background-size: $size;
    background-size: $size;
}

@mixin gradient($direction, $startcolor, $endcolor) {
    background-image: linear-gradient(to $direction, $startcolor 0%, $endcolor 100%);
    background-image: -o-linear-gradient($direction, $startcolor 0%, $endcolor 100%);
    background-image: -moz-linear-gradient($direction, $startcolor 0%, $endcolor 100%);
    background-image: -webkit-linear-gradient($direction, $startcolor 0%, $endcolor 100%);
    background-image: -ms-linear-gradient($direction, $startcolor 0%, $endcolor 100%);
}

// Render fontawesome icons
@mixin render-icon {
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Pro";
}