@charset "UTF-8";
@import 'Variables';
//前缀
@mixin prefix-property($name, $value) {
    -webkit-#{$name}: $value;
    -moz-#{$name}: $value;
    -ms-#{$name}: $value;
    -o-#{$name}: $value;
    #{$name}: $value;
}
// box-sizing
@mixin border-box {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
//阴影
@mixin box-shadow($shadow...) {
    -webkit-box-shadow: $shadow;
    -moz-box-shadow: $shadow;
    box-shadow: $shadow;
}
// 文字省略
@mixin text-line( $num : false) {
    overflow: hidden;
    text-overflow: ellipsis;
    @if $num {
        display: -webkit-box;
        -webkit-line-clamp: $num;
        -webkit-box-orient: vertical;
    } @else {
        white-space: nowrap;
    }
}
// 清除浮动
@mixin clea-fix {
    &:after {
        content: '';
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
}
// flexbox 布局
@mixin flex-box {
    display: -webkit-box;
    display: -moz-box;
    //display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
}
@mixin flex($num : 1) {
    flex: $num;
    -webkit-flex: $num;
    box-flex: $num;
    -webkit-box-flex: $num;
}
//垂直居中
@mixin align-center {
    -webkit-align-items: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    box-flex: center;
    align-items: center;
}
//水平居中
@mixin pack-center {
    -webkit-justify-content: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
//两端对齐
@mixin pack-justify {
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
}
//border-common
@mixin border-common {
    content: '';
    display: block;
    position: absolute;
    pointer-events: none;
}
//border bottom
@mixin border-1pt-btm( $color: #e5e5e5, $width : 1px ) {
    left: 0;
    right: 0;
    bottom: 0;
    height: $width;
    background: $color;
    @include border-common;
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        & {
            @include prefix-property(transform, scaleY(0.5));
            @include prefix-property(transform-origin, 50% 100%);
        }
    }
}
// border top
@mixin border-1pt-top( $color: #e5e5e5, $width : 1 ) {
    left: 0;
    right: 0;
    top: 0;
    height: $width * 1px;
    background: $color;
    @include border-common;
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        & {
            @include prefix-property(transform, scaleY(0.5));
            @include prefix-property(transform-origin, 50% 0%);
        }
    }
}
// border left
@mixin border-1pt-left( $color: #e5e5e5, $width : 1 , $right : false) {
    top: 0;
    bottom: 0;
    left: 0;
    width: $width * 1px;
    background: $color;
    @include border-common;
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        & {
            @include prefix-property(transform, scaleX(0.5));
            @if $right == false {
                @include prefix-property(transform-origin, 0% 50%);
            } @else {
                @include prefix-property(transform-origin, 100% 50%);
            }
        }
    }
}
// border right
@mixin border-1pt-right( $color: #e5e5e5, $width : 1 , $left : false) {
    top: 0;
    bottom: 0;
    right: 0;
    width: $width * 1px;
    background: $color;
    @include border-common;
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        & {
            @include prefix-property(transform, scaleX(0.5));
            @if $left == false {
                @include prefix-property(transform-origin, 0% 50%);
            } @else {
                @include prefix-property(transform-origin, 100% 50%);
            }
        }
    }
}
// border
@mixin border-1pt( $color: #ddd, $width : 1px) {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: $width solid $color;
    @include border-common;

    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        & {
            right: -100%;
            bottom: -100%;
            @include prefix-property(transform, scale(0.5));
            @include prefix-property(transform-origin, 0% 0%);
        }
    }
}
// border-radius
@mixin radius( $radius: 3px) {
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
@mixin radius-four( $radius1, $radius2, $radius3, $radius4 ) {
    -webkit-border-radius: $radius1 $radius2 $radius3 $radius4;
    border-radius: $radius1 $radius2 $radius3 $radius4;
}
// 三角形箭头
@mixin arrow($color: #ccc, $border-width: 5px, $arrow: up) {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    @if ($arrow == up) {
        border-left: $border-width solid transparent;
        border-right: $border-width solid transparent;
        border-bottom: $border-width*1.5 solid $color;
    } @else if ($arrow == down) {
        border-left: $border-width solid transparent;
        border-right: $border-width solid transparent;
        border-top: $border-width*1.5 solid $color;
    } @else if ($arrow == left) {
        border-top: $border-width solid transparent;
        border-bottom: $border-width solid transparent;
        border-right: $border-width*1.5 solid $color;
    } @else if ($arrow == right) {
        border-top: $border-width solid transparent;
        border-bottom: $border-width solid transparent;
        border-left: $border-width*1.5 solid $color;
    }

}
@mixin radius-four( $radius1, $radius2, $radius3, $radius4 ) {
    -webkit-border-radius: $radius1 $radius2 $radius3 $radius4;
    border-radius: $radius1 $radius2 $radius3 $radius4;
}
//字体大小 颜色
@mixin font-size-color($size: 16px, $color: #333) {
    font-size: $size;
    color: $color;
}
@mixin container{
    width: 1180px;
    margin: 0 auto;
}

