Mixins & Extends

_mixins.scss

/* @group Mixins */

@mixin box-sizing($sizing: content-box) {
    -webkit-box-sizing: $sizing;
       -moz-box-sizing: $sizing;
            box-sizing: $sizing;
}

@mixin rotate($rotate: -90deg) {
    -webkit-transform: rotate($rotate);
        -ms-transform: rotate($rotate);
            transform: rotate($rotate);
}

@mixin user-select($select: none) {
    -webkit-user-select: $select;
       -moz-user-select: $select;
        -ms-user-select: $select;
            user-select: $select;
}

@mixin linear-gradient($gradient...) {
    background-image: -webkit-linear-gradient($gradient);
    background-image:         linear-gradient($gradient);
}

@mixin transition($property: width, $duration: 0.3s, $effect: ease-in-out) {
           -webkit-transition-property: $property;
           -webkit-transition-duration: $duration;
    -webkit-transition-timing-function: $effect;

           transition-property: $property;
           transition-duration: $duration;
    transition-timing-function: $effect;
}

@mixin pseudo($content: '', $position: absolute, $top: 0, $left: 0) {
    content: $content;
    position: $position;
    top: $top;
    left: $left;
}

@mixin breakpoint($point) {
    @if $point == desktop {
        @media (max-width: 1024px) {
            @content;
        }
    }
    @if $point == tablet-p {
        @media (max-width: 768px) {
            @content;
        }
    }
    @if $point == phone-l {
        @media (max-width: 480px) {
            @content;
        }
    }
    @if $point == phone-p {
        @media (max-width: 320px) {
            @content;
        }
    }
}

/* @end */


/* @group Extends */

%clear {
  clear: both;
}

%clearfix {
    &:after {
        content: '';
        display: table;
        clear: both;
    }
}

%ir {
    text-indent: -9999px;
    overflow: hidden;
}

%input-number {
    -webkit-appearance: none;
    margin: 0;
}

/* @end */