bk-magic-vue/lib/ui/button.css

基于蓝鲸 Magicbox 和 Vue 的前端组件库

.bk-button{
    height:32px;
    line-height:30px;
    display:inline-block;
    outline:none;
    cursor:pointer;
    white-space:nowrap;
    -webkit-appearance:none;
    padding:0 15px;
    text-align:center;
    vertical-align:middle;
    font-size:14px;
    background-color:#fff;
    border:1px solid #c4c6cc;
    border-radius:2px;
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
    color:#63656e;
    text-decoration:none;
    -webkit-transition:background-color ease 0.3s;
    transition:background-color ease 0.3s;
    min-width:64px;
    position:relative;
}

.bk-button .bk-loading-wrapper{
        opacity:0;
    }

.bk-button .bk-button-loading{
        display:inline-block;
        vertical-align:top;
        font-size:0;
        position:absolute;
        left:50%;
        -webkit-transform:translateX(-50%);
                transform:translateX(-50%);
    }

.bk-button .bk-button-loading div{
            width:6px;
            height:6px;
            border-radius:100%;
            display:inline-block;
            vertical-align:middle;
            background-color:#fff;
            -webkit-animation:button-loading 1s infinite ease-in-out both;
                    animation:button-loading 1s infinite ease-in-out both
        }

.bk-button .bk-button-loading div + [class^="bounce"]{
                margin-left:4px;
            }

.bk-button .bk-button-loading .bounce1{
            -webkit-animation-delay:-0.72s;
                    animation-delay:-0.72s;
        }

.bk-button .bk-button-loading .bounce2{
            -webkit-animation-delay:-0.48s;
                    animation-delay:-0.48s;
        }

.bk-button .bk-button-loading .bounce3{
            -webkit-animation-delay:-0.24s;
                    animation-delay:-0.24s;
        }

.bk-button .bk-button-loading .bounce4{
            -webkit-animation-delay:0s;
                    animation-delay:0s;
        }

.bk-button .bk-button-icon-loading{
        position:relative;
        top:2px;
    }

.bk-button .bk-button-icon-loading .loading{
            width:14px;
            height:14px;
            border:2px solid;
            border-right-color:transparent;
            border-radius:50%;
            -webkit-animation:button-icon-loading 1s linear infinite;
                    animation:button-icon-loading 1s linear infinite;
            margin:-7px auto 0;
            display:inline-block;
        }

.bk-button .bk-icon{
        line-height:16px;
        min-width:14px;
        display:inline-block;
        position:relative;
        top:1px;
        font-size:22px;
    }

.bk-button.no-slot{
        padding:0 10px;
        height:32px;
        min-width:32px;
    }

.bk-button.no-slot .left-icon{
            margin-right:0;
        }

.bk-button.no-slot .right-icon{
            margin-left:0;
        }

.bk-button.bk-default:hover,
        .bk-button.bk-default.hover{
            border-color:#979ba5;
            color:#63656e;
        }

.bk-button.bk-default:active,
        .bk-button.bk-default.active{
            border-color:#3a84ff;
            color:#3a84ff;
        }

.bk-button.bk-default.is-disabled,
        .bk-button.bk-default[disabled]{
            background-color:#faf9fd;
            border-color:#dcdee5;
            color:#c4c6cc;
            cursor:not-allowed;
        }

.bk-button.bk-default.is-loading{
            cursor:default
        }

.bk-button.bk-default.is-loading:hover,
            .bk-button.bk-default.is-loading.hover{
                background-color:#fff;
                border-color:#c4c6cc;
                opacity:1;
            }

.bk-button.bk-default.is-loading:active,
            .bk-button.bk-default.is-loading.active{
                background-color:#fff;
                border-color:#c4c6cc;
            }

.bk-button.bk-default .bk-button-loading div{
                background-color:#63656e;
            }

.bk-button.bk-primary{
        background:#3a84ff;
        border-color:#3a84ff;
        color:#fff;
    }

.bk-button.bk-primary:hover,
    .bk-button.bk-primary.hover{
        background-color:#699df4;
        border-color:#699df4;
        opacity:1;
    }

.bk-button.bk-primary:active,
    .bk-button.bk-primary.active{
        background-color:#2761dd;
        border-color:#2761dd;
    }

.bk-button.bk-primary.is-disabled,
    .bk-button.bk-primary[disabled]{
        background-color:#dcdee5;
        border-color:#dcdee5;
        color:#fff;
        cursor:not-allowed;
    }

.bk-button.bk-primary.is-loading{
      cursor:default
    }

.bk-button.bk-primary.is-loading:hover,
      .bk-button.bk-primary.is-loading.hover{
          background-color:#3a84ff;
          border-color:#3a84ff;
          opacity:1;
      }

.bk-button.bk-primary.is-loading:active,
      .bk-button.bk-primary.is-loading.active{
          background-color:#3a84ff;
          border-color:#3a84ff;
      }

.bk-button.bk-primary.is-loading.is-outline .bk-button-loading div{
            background-color:#3a84ff;
          }

.bk-button.bk-primary.is-loading.is-outline:hover .bk-button-loading div, .bk-button.bk-primary.is-loading.is-outline.hover .bk-button-loading div{
              background-color:#fff;
            }

.bk-button.bk-primary.is-loading.is-outline.active .bk-button-loading div, .bk-button.bk-primary.is-loading.is-outline:active .bk-button-loading div{
              background-color:#fff;
            }

.bk-button.bk-primary.is-outline{
        color:#3a84ff;
        border-color:#3a84ff;
        background-color:#fff
    }

.bk-button.bk-primary.is-outline:hover,
        .bk-button.bk-primary.is-outline.hover{
            background-color:#3a84ff;
            border-color:#3a84ff;
            color:#fff;
        }

.bk-button.bk-primary.is-outline.active,
        .bk-button.bk-primary.is-outline:active{
            background-color:#2761dd;
            border-color:#2761dd;
            color:#fff;
        }

.bk-button.bk-primary{
    }

.bk-button.bk-success{
        background:#2dcb56;
        border-color:#2dcb56;
        color:#fff;
    }

.bk-button.bk-success:hover,
    .bk-button.bk-success.hover{
        background-color:#45e35f;
        border-color:#45e35f;
        opacity:1;
    }

.bk-button.bk-success:active,
    .bk-button.bk-success.active{
        background-color:#1ab943;
        border-color:#1ab943;
    }

.bk-button.bk-success.is-disabled,
    .bk-button.bk-success[disabled]{
        background-color:#dcdee5;
        border-color:#dcdee5;
        color:#fff;
        cursor:not-allowed;
    }

.bk-button.bk-success.is-loading{
      cursor:default
    }

.bk-button.bk-success.is-loading:hover,
      .bk-button.bk-success.is-loading.hover{
          background-color:#2dcb56;
          border-color:#2dcb56;
          opacity:1;
      }

.bk-button.bk-success.is-loading:active,
      .bk-button.bk-success.is-loading.active{
          background-color:#2dcb56;
          border-color:#2dcb56;
      }

.bk-button.bk-success.is-loading.is-outline .bk-button-loading div{
            background-color:#2dcb56;
          }

.bk-button.bk-success.is-loading.is-outline:hover .bk-button-loading div, .bk-button.bk-success.is-loading.is-outline.hover .bk-button-loading div{
              background-color:#fff;
            }

.bk-button.bk-success.is-loading.is-outline.active .bk-button-loading div, .bk-button.bk-success.is-loading.is-outline:active .bk-button-loading div{
              background-color:#fff;
            }

.bk-button.bk-success.is-outline{
        color:#2dcb56;
        border-color:#2dcb56;
        background-color:#fff
    }

.bk-button.bk-success.is-outline:hover,
        .bk-button.bk-success.is-outline.hover{
            background-color:#2dcb56;
            border-color:#2dcb56;
            color:#fff;
        }

.bk-button.bk-success.is-outline.active,
        .bk-button.bk-success.is-outline:active{
            background-color:#1ab943;
            border-color:#1ab943;
            color:#fff;
        }

.bk-button.bk-success{
    }

.bk-button.bk-warning{
        background:#ff9c01;
        border-color:#ff9c01;
        color:#fff;
    }

.bk-button.bk-warning:hover,
    .bk-button.bk-warning.hover{
        background-color:#ffb848;
        border-color:#ffb848;
        opacity:1;
    }

.bk-button.bk-warning:active,
    .bk-button.bk-warning.active{
        background-color:#eb9000;
        border-color:#eb9000;
    }

.bk-button.bk-warning.is-disabled,
    .bk-button.bk-warning[disabled]{
        background-color:#dcdee5;
        border-color:#dcdee5;
        color:#fff;
        cursor:not-allowed;
    }

.bk-button.bk-warning.is-loading{
      cursor:default
    }

.bk-button.bk-warning.is-loading:hover,
      .bk-button.bk-warning.is-loading.hover{
          background-color:#ff9c01;
          border-color:#ff9c01;
          opacity:1;
      }

.bk-button.bk-warning.is-loading:active,
      .bk-button.bk-warning.is-loading.active{
          background-color:#ff9c01;
          border-color:#ff9c01;
      }

.bk-button.bk-warning.is-loading.is-outline .bk-button-loading div{
            background-color:#ff9c01;
          }

.bk-button.bk-warning.is-loading.is-outline:hover .bk-button-loading div, .bk-button.bk-warning.is-loading.is-outline.hover .bk-button-loading div{
              background-color:#fff;
            }

.bk-button.bk-warning.is-loading.is-outline.active .bk-button-loading div, .bk-button.bk-warning.is-loading.is-outline:active .bk-button-loading div{
              background-color:#fff;
            }

.bk-button.bk-warning.is-outline{
        color:#ff9c01;
        border-color:#ff9c01;
        background-color:#fff
    }

.bk-button.bk-warning.is-outline:hover,
        .bk-button.bk-warning.is-outline.hover{
            background-color:#ff9c01;
            border-color:#ff9c01;
            color:#fff;
        }

.bk-button.bk-warning.is-outline.active,
        .bk-button.bk-warning.is-outline:active{
            background-color:#eb9000;
            border-color:#eb9000;
            color:#fff;
        }

.bk-button.bk-warning{
    }

.bk-button.bk-danger{
        background:#ea3636;
        border-color:#ea3636;
        color:#fff;
    }

.bk-button.bk-danger:hover,
    .bk-button.bk-danger.hover{
        background-color:#ff5656;
        border-color:#ff5656;
        opacity:1;
    }

.bk-button.bk-danger:active,
    .bk-button.bk-danger.active{
        background-color:#db2626;
        border-color:#db2626;
    }

.bk-button.bk-danger.is-disabled,
    .bk-button.bk-danger[disabled]{
        background-color:#dcdee5;
        border-color:#dcdee5;
        color:#fff;
        cursor:not-allowed;
    }

.bk-button.bk-danger.is-loading{
      cursor:default
    }

.bk-button.bk-danger.is-loading:hover,
      .bk-button.bk-danger.is-loading.hover{
          background-color:#ea3636;
          border-color:#ea3636;
          opacity:1;
      }

.bk-button.bk-danger.is-loading:active,
      .bk-button.bk-danger.is-loading.active{
          background-color:#ea3636;
          border-color:#ea3636;
      }

.bk-button.bk-danger.is-loading.is-outline .bk-button-loading div{
            background-color:#ea3636;
          }

.bk-button.bk-danger.is-loading.is-outline:hover .bk-button-loading div, .bk-button.bk-danger.is-loading.is-outline.hover .bk-button-loading div{
              background-color:#fff;
            }

.bk-button.bk-danger.is-loading.is-outline.active .bk-button-loading div, .bk-button.bk-danger.is-loading.is-outline:active .bk-button-loading div{
              background-color:#fff;
            }

.bk-button.bk-danger.is-outline{
        color:#ea3636;
        border-color:#ea3636;
        background-color:#fff
    }

.bk-button.bk-danger.is-outline:hover,
        .bk-button.bk-danger.is-outline.hover{
            background-color:#ea3636;
            border-color:#ea3636;
            color:#fff;
        }

.bk-button.bk-danger.is-outline.active,
        .bk-button.bk-danger.is-outline:active{
            background-color:#db2626;
            border-color:#db2626;
            color:#fff;
        }

.bk-button.bk-danger{
    }

.bk-button.bk-button-small{
        height:26px;
        line-height:24px;
        padding:0 12px;
        font-size:12px;
    }

.bk-button.bk-button-small .bk-icon{
            font-size:20px;
        }

.bk-button.bk-button-large{
        height:38px;
        line-height:36px;
        padding:0 20px;
        font-size:16px;
    }

.bk-button.bk-button-large .bk-icon{
            font-size:24px;
        }

.bk-button.is-outline.is-disabled,
        .bk-button.is-outline[disabled]{
            background-color:#fff;
            border-color:#dcdee5;
            color:#c4c6cc;
            cursor:not-allowed
        }

.bk-button.is-outline.is-disabled:hover,
            .bk-button.is-outline.is-disabled.hover,
            .bk-button.is-outline[disabled]:hover,
            .bk-button.is-outline[disabled].hover{
                background-color:#fff;
                border-color:#dcdee5;
                color:#c4c6cc;
            }

.bk-button.is-outline.is-disabled.active,
            .bk-button.is-outline.is-disabled:active,
            .bk-button.is-outline[disabled].active,
            .bk-button.is-outline[disabled]:active{
                background-color:#fff;
                border-color:#dcdee5;
                color:#c4c6cc;
            }

.bk-button-text{
    border:none;
    background:none;
    cursor:pointer;
    font-size:14px;
    color:#63656e;
    text-decoration:none;
    outline:none;
    height:22px;
    padding:0;
}

.bk-button-text .bk-loading-wrapper{
        display:inline-block;
    }

.bk-button-text .bk-button-loading{
        position:relative;
        display:inline-block;
    }

.bk-button-text .bk-button-loading .bounce{
            width:7px;
            height:7px;
            border-radius:100%;
            display:inline-block;
            background-color:#fff;
            -webkit-animation:button-loading 1.2s infinite ease-in-out both;
                    animation:button-loading 1.2s infinite ease-in-out both;
        }

.bk-button-text .bk-button-loading .bounce1{
            -webkit-animation-delay:-0.72s;
                    animation-delay:-0.72s;
        }

.bk-button-text .bk-button-loading .bounce2{
            -webkit-animation-delay:-0.48s;
                    animation-delay:-0.48s;
        }

.bk-button-text .bk-button-loading .bounce3{
            -webkit-animation-delay:-0.24s;
                    animation-delay:-0.24s;
        }

.bk-button-text .bk-button-loading .bounce4{
            -webkit-animation-delay:0s;
                    animation-delay:0s;
        }

.bk-button-text .bk-button-loading .bk-spin{
            position:relative;
            top:-1px;
        }

.bk-button-text .bk-button-icon-loading{
        position:relative;
        top:2px;
    }

.bk-button-text .bk-button-icon-loading .loading{
            width:14px;
            height:14px;
            border:2px solid;
            border-right-color:transparent;
            border-radius:50%;
            -webkit-animation:button-icon-loading 1s linear infinite;
                    animation:button-icon-loading 1s linear infinite;
            margin:-7px auto 0;
            display:inline-block;
        }

.bk-button-text .bk-icon{
        width:14px;
        height:16px;
        line-height:16px;
        min-width:14px;
        display:inline-block;
        position:relative;
        top:1px
    }

.bk-button-text .bk-icon.left-icon{
            margin-right:2px;
        }

.bk-button-text .bk-icon.right-icon{
            margin-left:2px;
        }

.bk-button-text.no-slot{
        padding:0 10px;
        height:22px;
    }

.bk-button-text.no-slot .left-icon{
            margin-right:0;
        }

.bk-button-text.no-slot .right-icon{
            margin-left:0;
        }

.bk-button-text.bk-default:hover,
        .bk-button-text.bk-default.hover{
            border-color:#979ba5;
            color:#63656e;
        }

.bk-button-text.bk-default:active,
        .bk-button-text.bk-default.active{
            border-color:#3a84ff;
            color:#3a84ff;
        }

.bk-button-text.bk-default.is-disabled,
        .bk-button-text.bk-default[disabled]{
            background-color:#fff;
            border-color:#dcdee5;
            color:#c4c6cc;
            cursor:not-allowed;
        }

.bk-button-text.bk-default.is-loading{
            cursor:default
        }

.bk-button-text.bk-default.is-loading:hover,
            .bk-button-text.bk-default.is-loading.hover{
                background-color:#fff;
                border-color:#c4c6cc;
                opacity:1;
            }

.bk-button-text.bk-default.is-loading:active,
            .bk-button-text.bk-default.is-loading.active{
                background-color:#fff;
                border-color:#c4c6cc;
            }

.bk-button-text.bk-default .bk-button-loading div{
                background-color:#63656e;
            }

.bk-button-text.bk-primary{
        color:#3a84ff
    }

.bk-button-text.bk-primary:hover,
        .bk-button-text.bk-primary.hover{
            color:#699df4;
        }

.bk-button-text.bk-primary:active,
        .bk-button-text.bk-primary.active{
            color:#2761dd;
        }

.bk-button-text.bk-success{
        color:#2dcb56
    }

.bk-button-text.bk-success:hover,
        .bk-button-text.bk-success.hover{
            color:#45e35f;
        }

.bk-button-text.bk-success:active,
        .bk-button-text.bk-success.active{
            color:#1ab943;
        }

.bk-button-text.bk-warning{
        color:#ff9c01
    }

.bk-button-text.bk-warning:hover,
        .bk-button-text.bk-warning.hover{
            color:#ffb848;
        }

.bk-button-text.bk-warning:active,
        .bk-button-text.bk-warning.active{
            color:#eb9000;
        }

.bk-button-text.bk-danger{
        color:#ea3636
    }

.bk-button-text.bk-danger:hover,
        .bk-button-text.bk-danger.hover{
            color:#ff5656;
        }

.bk-button-text.bk-danger:active,
        .bk-button-text.bk-danger.active{
            color:#db2626;
        }

.bk-button-text{
}

.bk-button-text.is-disabled,
    .bk-button-text[disabled]{
        color:#c4c6cc;
        cursor:not-allowed
    }

.bk-button-text.is-disabled:hover,
        .bk-button-text.is-disabled.hover,
        .bk-button-text[disabled]:hover,
        .bk-button-text[disabled].hover{
            color:#c4c6cc;
        }

.bk-button-text.is-disabled:active,
        .bk-button-text.is-disabled.active,
        .bk-button-text[disabled]:active,
        .bk-button-text[disabled].active{
            color:#c4c6cc;
        }

.bk-button-text.bk-button-small{
        height:26px;
        line-height:24px;
        padding:0 12px;
        font-size:12px;
    }

.bk-button-text.bk-button-large{
        height:42px;
        line-height:40px;
        padding:0 20px;
        font-size:16px;
    }

.bk-button-text.is-outline.is-disabled,
        .bk-button-text.is-outline[disabled]{
            background-color:#fff;
            border-color:#dcdee5;
            color:#c4c6cc;
            cursor:not-allowed
        }

.bk-button-text.is-outline.is-disabled:hover,
            .bk-button-text.is-outline.is-disabled.hover,
            .bk-button-text.is-outline[disabled]:hover,
            .bk-button-text.is-outline[disabled].hover{
                background-color:#fff;
                border-color:#dcdee5;
                color:#c4c6cc;
            }

.bk-button-text.is-outline.is-disabled.active,
            .bk-button-text.is-outline.is-disabled:active,
            .bk-button-text.is-outline[disabled].active,
            .bk-button-text.is-outline[disabled]:active{
                background-color:#fff;
                border-color:#dcdee5;
                color:#c4c6cc;
            }

.bk-button-hover{
    height:32px;
    line-height:30px;
    display:inline-block;
    outline:none;
    cursor:pointer;
    white-space:nowrap;
    -webkit-appearance:none;
    padding:0 15px;
    text-align:center;
    vertical-align:middle;
    font-size:14px;
    background-color:#fff;
    border:1px solid #c4c6cc;
    border-radius:2px;
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
    color:#63656e;
    text-decoration:none;
    -webkit-transition:background-color ease 0.3s;
    transition:background-color ease 0.3s;
    min-width:68px;
}

.bk-button-hover .bk-loading-wrapper{
        opacity:0;
    }

.bk-button-hover .bk-button-loading{
        width:58px;
        display:inline-block;
    }

.bk-button-hover .bk-button-loading div{
            width:6px;
            height:6px;
            border-radius:100%;
            display:inline-block;
            background-color:#63656e;
            -webkit-animation:button-loading 1s infinite ease-in-out both;
                    animation:button-loading 1s infinite ease-in-out both;
        }

.bk-button-hover .bk-button-loading .bounce1{
            -webkit-animation-delay:-0.72s;
                    animation-delay:-0.72s;
        }

.bk-button-hover .bk-button-loading .bounce2{
            -webkit-animation-delay:-0.48s;
                    animation-delay:-0.48s;
        }

.bk-button-hover .bk-button-loading .bounce3{
            -webkit-animation-delay:-0.24s;
                    animation-delay:-0.24s;
        }

.bk-button-hover .bk-button-loading .bounce4{
            -webkit-animation-delay:0s;
                    animation-delay:0s;
        }

.bk-button-hover .bk-button-icon-loading{
        position:relative;
        top:2px;
    }

.bk-button-hover .bk-button-icon-loading .loading{
            width:14px;
            height:14px;
            border:2px solid;
            border-right-color:transparent;
            border-radius:50%;
            -webkit-animation:button-icon-loading 1s linear infinite;
                    animation:button-icon-loading 1s linear infinite;
            margin:-7px auto 0;
            display:inline-block;
        }

.bk-button-hover .bk-icon{
        width:14px;
        height:16px;
        line-height:16px;
        min-width:14px;
        display:inline-block;
        position:relative;
        top:1px
    }

.bk-button-hover .bk-icon.left-icon{
            margin-right:2px;
        }

.bk-button-hover .bk-icon.right-icon{
            margin-left:2px;
        }

.bk-button-hover.no-slot{
        padding:0 10px;
        height:36px;
        min-width:36px;
    }

.bk-button-hover.no-slot .left-icon{
            margin-right:0;
        }

.bk-button-hover.no-slot .right-icon{
            margin-left:0;
        }

.bk-button-hover.bk-primary{
        background-color:#fff;
        border-color:#c4c6cc;
        color:#63656e;
    }

.bk-button-hover.bk-primary:hover,
    .bk-button-hover.bk-primary.hover{
        background-color:#3a84ff;
        border-color:#3a84ff;
        color:#fff;
        opacity:1;
    }

.bk-button-hover.bk-primary:active,
    .bk-button-hover.bk-primary.active{
        background-color:#2761dd;
        border-color:#2761dd;
        color:#fff;
    }

.bk-button-hover.bk-primary.is-disabled,
    .bk-button-hover.bk-primary[disabled]{
        background-color:#fff;
        border-color:#dcdee5;
        color:#c4c6cc;
        cursor:not-allowed;
    }

.bk-button-hover.bk-primary.is-loading{
        cursor:default
    }

.bk-button-hover.bk-primary.is-loading:hover,
        .bk-button-hover.bk-primary.is-loading.hover{
            background-color:#fff;
            border-color:#c4c6cc;
            opacity:1;
        }

.bk-button-hover.bk-primary.is-loading:active,
        .bk-button-hover.bk-primary.is-loading.active{
            background-color:#fff;
            border-color:#c4c6cc;
        }

.bk-button-hover.bk-primary.is-outline{
        color:#3a84ff;
        border-color:#3a84ff;
        background-color:#fff
    }

.bk-button-hover.bk-primary.is-outline:hover,
        .bk-button-hover.bk-primary.is-outline.hover{
            background-color:#3a84ff;
            border-color:#3a84ff;
            color:#fff;
        }

.bk-button-hover.bk-primary.is-outline.active,
        .bk-button-hover.bk-primary.is-outline:active{
            background-color:#2761dd;
            border-color:#2761dd;
            color:#fff;
        }

.bk-button-hover.bk-success{
        background-color:#fff;
        border-color:#c4c6cc;
        color:#63656e;
    }

.bk-button-hover.bk-success:hover,
    .bk-button-hover.bk-success.hover{
        background-color:#2dcb56;
        border-color:#2dcb56;
        color:#fff;
        opacity:1;
    }

.bk-button-hover.bk-success:active,
    .bk-button-hover.bk-success.active{
        background-color:#1ab943;
        border-color:#1ab943;
        color:#fff;
    }

.bk-button-hover.bk-success.is-disabled,
    .bk-button-hover.bk-success[disabled]{
        background-color:#fff;
        border-color:#dcdee5;
        color:#c4c6cc;
        cursor:not-allowed;
    }

.bk-button-hover.bk-success.is-loading{
        cursor:default
    }

.bk-button-hover.bk-success.is-loading:hover,
        .bk-button-hover.bk-success.is-loading.hover{
            background-color:#fff;
            border-color:#c4c6cc;
            opacity:1;
        }

.bk-button-hover.bk-success.is-loading:active,
        .bk-button-hover.bk-success.is-loading.active{
            background-color:#fff;
            border-color:#c4c6cc;
        }

.bk-button-hover.bk-success.is-outline{
        color:#2dcb56;
        border-color:#2dcb56;
        background-color:#fff
    }

.bk-button-hover.bk-success.is-outline:hover,
        .bk-button-hover.bk-success.is-outline.hover{
            background-color:#2dcb56;
            border-color:#2dcb56;
            color:#fff;
        }

.bk-button-hover.bk-success.is-outline.active,
        .bk-button-hover.bk-success.is-outline:active{
            background-color:#1ab943;
            border-color:#1ab943;
            color:#fff;
        }

.bk-button-hover.bk-warning{
        background-color:#fff;
        border-color:#c4c6cc;
        color:#63656e;
    }

.bk-button-hover.bk-warning:hover,
    .bk-button-hover.bk-warning.hover{
        background-color:#ff9c01;
        border-color:#ff9c01;
        color:#fff;
        opacity:1;
    }

.bk-button-hover.bk-warning:active,
    .bk-button-hover.bk-warning.active{
        background-color:#eb9000;
        border-color:#eb9000;
        color:#fff;
    }

.bk-button-hover.bk-warning.is-disabled,
    .bk-button-hover.bk-warning[disabled]{
        background-color:#fff;
        border-color:#dcdee5;
        color:#c4c6cc;
        cursor:not-allowed;
    }

.bk-button-hover.bk-warning.is-loading{
        cursor:default
    }

.bk-button-hover.bk-warning.is-loading:hover,
        .bk-button-hover.bk-warning.is-loading.hover{
            background-color:#fff;
            border-color:#c4c6cc;
            opacity:1;
        }

.bk-button-hover.bk-warning.is-loading:active,
        .bk-button-hover.bk-warning.is-loading.active{
            background-color:#fff;
            border-color:#c4c6cc;
        }

.bk-button-hover.bk-warning.is-outline{
        color:#ff9c01;
        border-color:#ff9c01;
        background-color:#fff
    }

.bk-button-hover.bk-warning.is-outline:hover,
        .bk-button-hover.bk-warning.is-outline.hover{
            background-color:#ff9c01;
            border-color:#ff9c01;
            color:#fff;
        }

.bk-button-hover.bk-warning.is-outline.active,
        .bk-button-hover.bk-warning.is-outline:active{
            background-color:#eb9000;
            border-color:#eb9000;
            color:#fff;
        }

.bk-button-hover.bk-danger{
        background-color:#fff;
        border-color:#c4c6cc;
        color:#63656e;
    }

.bk-button-hover.bk-danger:hover,
    .bk-button-hover.bk-danger.hover{
        background-color:#ea3636;
        border-color:#ea3636;
        color:#fff;
        opacity:1;
    }

.bk-button-hover.bk-danger:active,
    .bk-button-hover.bk-danger.active{
        background-color:#db2626;
        border-color:#db2626;
        color:#fff;
    }

.bk-button-hover.bk-danger.is-disabled,
    .bk-button-hover.bk-danger[disabled]{
        background-color:#fff;
        border-color:#dcdee5;
        color:#c4c6cc;
        cursor:not-allowed;
    }

.bk-button-hover.bk-danger.is-loading{
        cursor:default
    }

.bk-button-hover.bk-danger.is-loading:hover,
        .bk-button-hover.bk-danger.is-loading.hover{
            background-color:#fff;
            border-color:#c4c6cc;
            opacity:1;
        }

.bk-button-hover.bk-danger.is-loading:active,
        .bk-button-hover.bk-danger.is-loading.active{
            background-color:#fff;
            border-color:#c4c6cc;
        }

.bk-button-hover.bk-danger.is-outline{
        color:#ea3636;
        border-color:#ea3636;
        background-color:#fff
    }

.bk-button-hover.bk-danger.is-outline:hover,
        .bk-button-hover.bk-danger.is-outline.hover{
            background-color:#ea3636;
            border-color:#ea3636;
            color:#fff;
        }

.bk-button-hover.bk-danger.is-outline.active,
        .bk-button-hover.bk-danger.is-outline:active{
            background-color:#db2626;
            border-color:#db2626;
            color:#fff;
        }

.bk-button-hover.bk-button-small{
        height:26px;
        line-height:24px;
        padding:0 12px;
        font-size:12px;
    }

.bk-button-hover.bk-button-large{
        height:42px;
        line-height:40px;
        padding:0 20px;
        font-size:16px;
    }

.bk-button-hover.is-outline.is-disabled,
        .bk-button-hover.is-outline[disabled]{
            background-color:#fff;
            border-color:#dcdee5;
            color:#c4c6cc;
            cursor:not-allowed
        }

.bk-button-hover.is-outline.is-disabled:hover,
            .bk-button-hover.is-outline.is-disabled.hover,
            .bk-button-hover.is-outline[disabled]:hover,
            .bk-button-hover.is-outline[disabled].hover{
                background-color:#fff;
                border-color:#dcdee5;
                color:#c4c6cc;
            }

.bk-button-hover.is-outline.is-disabled.active,
            .bk-button-hover.is-outline.is-disabled:active,
            .bk-button-hover.is-outline[disabled].active,
            .bk-button-hover.is-outline[disabled]:active{
                background-color:#fff;
                border-color:#dcdee5;
                color:#c4c6cc;
            }

@-webkit-keyframes button-icon-loading{
    0%{
        -webkit-transform:rotate(0);
                transform:rotate(0)
    }
    100%{
        -webkit-transform:rotate(360deg);
                transform:rotate(360deg)
    }
}

@keyframes button-icon-loading{
    0%{
        -webkit-transform:rotate(0);
                transform:rotate(0)
    }
    100%{
        -webkit-transform:rotate(360deg);
                transform:rotate(360deg)
    }
}

.bk-button-group{
    font-size:0;
    margin-left:1px;
    display:inline-block;
}

.bk-button-group .bk-button{
        margin:0 0 0 -1px;
        border-radius:0
    }

.bk-button-group .bk-button.hover,
        .bk-button-group .bk-button:hover{
            border-color:#3a84ff;
            color:#3a84ff;
            position:relative;
            z-index:1;
        }

.bk-button-group .bk-button.is-disabled:hover{
            border-color:#dcdee5;
            color:#c4c6cc;
            position:relative;
            z-index:0;
        }

.bk-button-group .bk-button:first-child{
            border-radius:2px 0 0 2px;
        }

.bk-button-group .bk-button:last-child{
            border-radius:0 2px 2px 0;
        }

.bk-button-group .bk-button.is-selected{
            background-color:#e1ecff;
            border-color:#3a84ff;
            color:#3a84ff;
            position:relative;
            z-index:1;
        }

.bk-button-group .bk-button span .bk-icon{
                margin-left:7px;
            }

.bk-text-button{
    border:none;
    background:none;
    color:#3a84ff;
    cursor:pointer;
    text-decoration:none;
}

.bk-text-button .bk-icon{
        width:16px;
        min-width:16px;
        margin-right:5px;
        display:inline-block;
    }

.bk-text-button +.bk-text-button{
        margin-left:15px;
    }

.bk-text-button:hover{
        color:#0082ff;
        text-decoration:none;
    }

.bk-text-button.is-disabled{
        color:#e6e6e6 !important;
        cursor:not-allowed;
    }

.bk-text-button.bk-default{
        color:#63656e
    }

.bk-text-button.bk-default:hover{
            color:darken(#63656e, 10%);
        }

.bk-text-button.bk-info{
        color:#699df4
    }

.bk-text-button.bk-info:hover{
            color:#7ab9fa;
        }

.bk-text-button.bk-primary{
        color:#3a84ff
    }

.bk-text-button.bk-primary:hover{
            color:#0082ff;
        }

.bk-text-button.bk-success{
        color:#2dcb56
    }

.bk-text-button.bk-success:hover{
            color:#00c873;
        }

.bk-text-button.bk-warning{
        color:#ff9c01
    }

.bk-text-button.bk-warning:hover{
            color:#ff9600;
        }

.bk-text-button.bk-danger{
        color:#ea3636
    }

.bk-text-button.bk-danger:hover{
            color:#f72239;
        }

.bk-text-button .bk-icon{
        width:16px;
        min-width:16px;
    }

@-webkit-keyframes button-loading{
    0%{
        opacity:0;
    }
    50%{
        opacity:0.5;
    }
    100%{
        opacity:1.0;
    }
}

@keyframes button-loading{
    0%{
        opacity:0;
    }
    50%{
        opacity:0.5;
    }
    100%{
        opacity:1.0;
    }
}