_sass/taiga/_mixins.scss

@use "settings";

// =========== Mixins

// Animations
// Example: .element { @include animation(keyframe-name, 500ms, default); }
@mixin animation ($name: true, $duration: true, $timing_function: true, $delay: false, $iteration_count: false, $direction: false) {
    @if $name { -webkit-animation-name: $name; -moz-animation-name: $name; -ms-animation-name: $name; }
    @if $duration { -webkit-animation-duration: $duration; -moz-animation-duration: $duration; -ms-animation-duration: $duration; }
    @if $timing_function { -webkit-animation-timing-function: $timing_function; -moz-animation-timing-function: $timing_function;  -ms-animation-timing-function: $timing_function; }
    @if $delay { -webkit-animation-delay: $delay; -moz-animation-delay: $delay; -ms-animation-delay: $delay; }
    @if $iteration_count { -webkit-animation-iteration-count: $iteration_count; -moz-animation-iteration-count: $iteration_count; -ms-animation-iteration-count: $iteration_count; }
    @if $direction { -webkit-animation-direction: $direction; -moz-animation-direction: $direction; -ms-animation-direction: $direction; }
}

// Backface-visibility
// Example: .element { @include backface-visibility(hidden); }
@mixin backface-visibility($backface) {
    -webkit-backface-visibility: $backface;
    -moz-backface-visibility: $backface;
    -ms-backface-visibility: $backface;
    backface-visibility: $backface;
}

// Border-radius
// Example: .element { @include border-radius($border-radius-10); }
@mixin border-radius($radius) {
    background-clip: padding-box;
    border-radius: $radius;
}

// Box-sizing
// Example: .element { @include box-sizing(border-box); }
@mixin box-sizing($box) {
    -webkit-box-sizing: $box;
    -moz-box-sizing: $box;
    box-sizing: $box;
}

// Media queries
// Example: @include breakpoint($breakpoint-20) { your properties }
@mixin breakpoint($breakpoint, $property-name : settings.$breakpoint-property) {
    @media ($property-name: $breakpoint) {
        @content;
    }
}

// Filters
// Example: .element { @include filter(grayscale(50%)); }
@mixin filter($filter) {
    -webkit-filter: $filter;
    -moz-filter: $filter;
    filter: $filter;
}

// Retina image
// Example: .element { @include image-2x("logo2x.png", 2em, 1em); }
@mixin retina($image, $width, $height) {
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
        background-image: url($image);
        background-size: $width $height;
    }
}

// Perspective
// Example: .element { @include perspective(1000); }
@mixin perspective($perspective) {
    -webkit-perspective: $perspective;
    -moz-perspective: $perspective;
    perspective: $perspective;
}

// Transform
// Example: .element { @include transform(translateX(1em)); }
@mixin transform($transform) {
    -webkit-transform: $transform;
    -moz-transform: $transform;
    -ms-transform: $transform;
    transform: $transform;
}

// Transition
// Example: .element { @include transition(background 500ms ease-in); }
@mixin transition($transition) {
    -webkit-transition: $transition;
    -moz-transition: $transition;
    transition: $transition;
}

// Columns
// Example: .element { @include columns(2, 1em)); }
@mixin columns($count, $gap) {
    -webkit-column-count: $count;
    -webkit-column-gap : $gap;
    -moz-column-count: $count;
    -moz-column-gap: $gap;
    column-count: $count;
    column-gap: $gap;
}

// Column rule
// Example: .element { @include column-rule(1px, solid, #000); }
@mixin columns-rule($size, $style, $color) {
    -webkit-column-rule-width: $size;
    -webkit-column-rule-style: $style;
    -webkit-column-rule-color: $color;
    -moz-column-rule-width: $size;
    -moz-column-rule-style: $style;
    -moz-column-rule-color: $color;
    column-rule-width: $size;
    column-rule-style: $style;
    column-rule-color: $color;
}

// Gradient
// Example: .element { @include gradient(top, #000, #fff); }
@mixin gradient($side, $start, $end) {
    background-color: $end;
    background-image: -webkit-linear-gradient($side, $start, $end);
    background-image: -moz-linear-gradient($side, $start, $end);
    background-image: -ms-linear-gradient($side, $start, $end);
    background-image: linear-gradient($side, $start, $end);
}