商艳涛 / programming · Files

// Flexbox layout
@mixin display{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}
@mixin flex($num){
    -webkit-box-flex: $num;
        -webkit-flex: $num;
       -moz-box-flex: $num;
           -moz-flex: $num;
            -ms-flex: $num;
                flex: $num;
}

@mixin flex-direction($value: row) {
    @if $value==row-reverse {
        -webkit-box-direction: reverse;
           -webkit-box-orient: horizontal;
    }
    @else if $value==column {
        -webkit-box-direction: normal;
           -webkit-box-orient: vertical;
    }
    @else if $value==column-reverse {
        -webkit-box-direction: reverse;
           -webkit-box-orient: vertical;
    }
    @else {
        -webkit-box-direction: normal;
           -webkit-box-orient: horizontal;
    }
       -webkit-flex-direction: $value;
          -moz-flex-direction: $value;
           -ms-flex-direction: $value;
               flex-direction: $value;
}

@mixin flex-wrap($value: nowrap) {
    // No Webkit Box fallback.
    -webkit-flex-wrap: $value;
       -moz-flex-wrap: $value;
    @if $value==nowrap {
        -ms-flex-wrap: none;
    }
    @else {
        -ms-flex-wrap: $value;
    }
            flex-wrap: $value;
}

@mixin flex-flow($values: (row nowrap)) {
    // No Webkit Box fallback.
    -webkit-flex-flow: $values;
       -moz-flex-flow: $values;
        -ms-flex-flow: $values;
            flex-flow: $values;
}

@mixin justify-content($value: stretch) {
    @if $value==flex-start {
        -webkit-box-pack: start;
           -ms-flex-pack: start;
    }
    @else if $value==flex-end {
        -webkit-box-pack: end;
           -ms-flex-pack: end;
    }
    @else if $value==space-between {
        -webkit-box-pack: justify;
           -ms-flex-pack: justify;
    }
    @else {
        -webkit-box-pack: $value;
           -ms-flex-pack: $value;
    }
    -webkit-justify-content: $value;
       -moz-justify-content: $value;
            justify-content: $value;
}

@mixin align-items($value: stretch) {
    @if $value==flex-start {
        -webkit-box-align: start;
           -ms-flex-align: start;
    }
    @else if $value==flex-end {
        -webkit-box-align: end;
           -ms-flex-align: end;
    }
    @else {
        -webkit-box-align: $value;
           -ms-flex-align: $value;
    }
      -webkit-align-items: $value;
         -moz-align-items: $value;
              align-items: $value;
}

@mixin align-content($value: stretch) {
     -webkit-align-content: $value;
        -moz-align-content: $value;
    @if $value==flex-start {
        -ms-flex-line-pack: start;
    }
    @else if $value==flex-end {
        -ms-flex-line-pack: end;
    }
    @else {
        -ms-flex-line-pack: $value;
    }
             align-content: $value;
}

@mixin align-self($value: auto) {
         -webkit-align-self: $value;
            -moz-align-self: $value;
    @if $value==flex-start {
        -ms-flex-item-align: start;
    }
    @else if $value==flex-end {
        -ms-flex-item-align: end;
    }
    @else {
        -ms-flex-item-align: $value;
    }
                 align-self: $value;
}

@mixin flex-order($n) {
                -webkit-order: $n;
               -ms-flex-order: $n;
                        order: $n;
    -webkit-box-ordinal-group: $n;
}





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


// 变换
@mixin _transform($value, $prefixs: webkit moz ms o spec) {
    @each $prefix in $prefixs {
        @if $prefix==webkit {
            @if $ea-prefix-for-webkit {
                -webkit-transform: $value;
            }
        }
        @else if $prefix==moz {
            @if $ea-prefix-for-mozilla {
                -moz-transform: $value;
            }
        }
        @else if $prefix==ms {
            @if $ea-prefix-for-microsoft {
                -ms-transform: $value;
            }
        }
        @else if $prefix==o {
            @if $ea-prefix-for-opera {
                -o-transform: $value;
            }
        }
        @else if $prefix==spec {
            @if $ea-prefix-for-spec {
                transform: $value;
            }
        }
        @else {
            @warn "Unrecognized prefix: #{$prefix}";
        }
    }
}


// 过渡
@mixin _transition($value, $prefixs: webkit moz ms o spec) {
    @each $prefix in $prefixs {
        @if $prefix==webkit {
            @if $ea-prefix-for-webkit {
                -webkit-transition: $value;
            }
        }
        @else if $prefix==moz {
            @if $ea-prefix-for-mozilla {
                -moz-transition: $value;
            }
        }
        @else if $prefix==ms {
            @if $ea-prefix-for-microsoft {
                -ms-transition: $value;
            }
        }
        @else if $prefix==o {
            @if $ea-prefix-for-opera {
                -o-transition: $value;
            }
        }
        @else if $prefix==spec {
            @if $ea-prefix-for-spec {
                transition: $value;
            }
        }
        @else {
            @warn "Unrecognized prefix: #{$prefix}";
        }
    }
}