dwweb-pc/公共/通用前端工作流/sass/lego/_button.scss

@charset "utf-8";
/*
 * @file: 按钮基础UI组件
 * @update: 2015-06-07 17:57:18
 */
 
/*
 * 默认按钮
 * @base
 * @param: button-variant(字体颜色, 背景色, 边框颜色)
 * @param: button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius)
 */

/* 按钮大小配置 */
$btn-height: 30px !default; // 按钮高度
$btn-padding-horizontal: 18px !default; // 按钮padding left/right值
$btn-font-size: 12px !default; // 按钮字号大小
$btn-radius: 2px !default; // 按钮圆角值

/* 默认按钮配色 */
$btn-color: #288ad6 !default; // 字体颜色
$btn-bg: #fff !default; // 背景色
$btn-border: #288ad6 !default; // 边框颜色

/* 禁用按钮配置 */
$disabled-btn-color: #999 !default; // 字体颜色
$disabled-btn-bg: #f5f5f5 !default; // 背景色
$disabled-btn-border: #e6e6e6 !default; // 边框颜色

.ui-btn {
    @include inline-block;
    @include button-size(($btn-height - $btn-font-size)/2 - 1, $btn-padding-horizontal, $btn-font-size, $btn-radius);
    @include button-variant($btn-color, $btn-bg, $btn-border);
    width: auto; // 宽度自适应
    line-height: 1; // 重置某些浏览器内置的私有属性默认定义的行高
    border: 1px solid; // 某些浏览器私有属性里面额外设置了border
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    *overflow: visible; // fix IE6/IE67 button随着字变宽
    user-select: none;
    transition: all .2s ease-in-out;
    
    /*
     * 激活状态
     * @state: active
     */
    &.is-active,
    &:active {
        outline: 0; // 隐藏点击时的outline
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, .08);
    }
    
    /*
     * 禁用状态
     * @state: disabled
     */
    &.is-disabled,
    &[disabled] {
        color: $disabled-btn-color;
        background-color: $disabled-btn-bg;
        border-color: $disabled-btn-border;
        &.is-hover,
        &:hover {
            cursor: not-allowed;
            color: $disabled-btn-color;
            background-color: $disabled-btn-bg;
            border-color: $disabled-btn-border;
        }
        &.is-active,
        &:active {
            box-shadow: none;
        }
    }
}
a.ui-btn {
    text-decoration: none;
    &:hover {
        text-decoration: none;
    }
}
input.ui-btn,
button.ui-btn {
    *padding: ($btn-height - $btn-font-size)/2 - 2 $btn-padding-horizontal - 1 ($btn-height - $btn-font-size)/2 - 3; // IE6/IE67在垂直方向会高出3px，水平方向多出2px
}


/*
 * 首选按钮
 * @extend: primary
 * @param:  button-variant(字体颜色, 背景色, 边框颜色)
 */

.ui-btn {
    &.ext-primary {
        @include button-variant($primary-text-color, $primary-color, $primary-color);
    }
}


/*
 * 成功按钮
 * @extend: success
 * @param:  button-variant(字体颜色, 背景色, 边框颜色)
 */

.ui-btn {
    &.ext-success {
        @include button-variant($success-text-color, $success-color, $success-color);
    }
}

/*
 * 信息按钮
 * @extend: info
 * @param:  button-variant(字体颜色, 背景色, 边框颜色)
 */

.ui-btn {
    &.ext-info {
        @include button-variant($info-text-color, $info-color, $info-color);
    }
}

/*
 * 警告按钮
 * @extend: warning
 * @param:  button-variant(字体颜色, 背景色, 边框颜色)
 */

.ui-btn {
    &.ext-warning {
        @include button-variant($warning-text-color, $warning-color, $warning-color);
    }
}

/*
 * 危险按钮
 * @extend: danger
 * @param:  button-variant(字体颜色, 背景色, 边框颜色)
 */

.ui-btn {
    &.ext-danger {
        @include button-variant($danger-text-color, $danger-color, $danger-color);
    }
}


/*
 * 块状按钮
 * @extend: block
 */
.ui-btn {
    &.ext-block {
        display: block;
        text-align: center;
    }
}