@charset "utf-8";

@import "mixin";
@import "variables";

//button reset 前台4套按钮样式
@mixin button {
    .btn {
        @include inline-block;

        vertical-align: middle;
        border: 0;
        text-align: center;
        background-color: #fff;
        cursor: pointer;
        font-size: 12px;
    }
}

//1根据按钮大小区分
@mixin btnSize($size, $width, $height, $borderColor, $fontSize: 12px) {
    .btn-#{$size} {
        width: $width;
        font-size: $fontSize;

        @if $size == large {
            height: $height - 3px;
            border-bottom: 3px $borderColor solid;
        }
        @else {
            height: $height - 2px;
            border-bottom: 2px $borderColor solid;
        }
    }

    //兼容ie7下a标签
    a.btn-#{$size} {
        @if $size == large {
            line-height: $height - 3px;
        }
        @else if $size == small {
            line-height: $height - 2px;
        }
    }
}

//红色major  蓝色minor
@mixin btnStyle($style, $backgroundColor, $fontColor: #fff) {
    .btn-#{$style} {
        background-color: $backgroundColor;
        color: $fontColor;

        &[disabled] {
            background-color: #999;
        }

        &:hover {
            color: #fff;
        }
    }
}

//2按钮默认样式渐变颜色

@mixin btnPop($borderColor, $startColor, $endColor) {
    .btn-pop {
        min-width: 60px;
        height: 26px;
        line-height: 26px;
        border: 1px $borderColor solid;
        color: #666;
        padding: 0 10px;

        @include linear-gradient(top, $startColor, $endColor);
    }
}

//3适用于连接的button

@mixin btnLink($type, $borderColor: #ddd, $borderbottom: #eee, $fontSize: 12px) {
    .btn-link-#{$type} {
        border-bottom: 2px $borderbottom solid;

        .txt {
            font-size: $fontSize;
            display: block;
            border: 1px $borderColor solid;
            color: #666;

            @if $type == small {
                padding: 1px 10px;
            }
            @else if $type == normal {
                padding: 5px 20px;
            }
        }
    }
}

//纯颜色按钮 适用于文字连接
@mixin btnText($color: $linkColor) {
    .btn-text {
        color: $color;
    }
}