@mixin clearfix {
    *zoom: 1;
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

%clearfix {
    @include clearfix;
}

@mixin inline-block($valign: middle) {
    display: inline-block;
    vertical-align: $valign;
    *vertical-align: $valign;
    *display: inline;
    *zoom: 1;
}

%inline-block {
    @include inline-block;
}

@mixin cutxt {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

%cutxt {
    @include cutxt;
}

@mixin box-with-shadow {
    border: 1px solid #ced3d9;
    border-radius: 3px;
    box-shadow: 3px 3px 5px rgba(0, 33, 66, 0.2);
}

@mixin perfix ($property, $value) {
    #{$property}: #{$value};
    -moz-#{$property}: #{$value};
    /* Firefox 4 */
    -webkit-#{$property}: #{$value};
    /* Safari 和 Chrome */
    -o-#{$property}: #{$value};
    /* Opera */
}

@mixin keyframes ($animateName) {
    @keyframes #{$animateName} {
        @content;
    }
    @-webkit-keyframes #{$animateName} {
        @content;
    }
    @-moz-keyframes #{$animateName} {
        @content;
    }
    @-o-keyframes #{$animateName} {
        @content;
    }
}

@mixin input-text {
    box-sizing: border-box;
    padding: 6px 10px;
    border: 1px solid #ced3d9;
    border-radius: 3px;
    color: inherit;
    vertical-align: middle;
    height: 30px;
    line-height: 16px;
    font-size: 12px;
    background-color: #fff;
    &:hover {
        border-color: #a1aab2;
        outline: 0;
    }
    &:focus {
        border-color: #1470cc;
        outline: 0;
    }
    &.error {
        border-color: #e64545;
    }
    &:disabled,
    &.disabled {
        border-color: #ced3d9;
        background-color: #edf0f2;
        cursor: not-allowed;
    }
}