UNPKG

@cw-devops/bk-magic-vue

Version:

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

1,685 lines 548 kB
@charset "utf-8"; .transition-effect{ -webkit-transition:all linear .2s; transition:all linear .2s; } .bk-fade-in-linear-enter-active, .bk-fade-in-linear-leave-active{ -webkit-transition:opacity linear .2s; transition:opacity linear .2s; } .bk-fade-in-linear-enter, .bk-fade-in-linear-leave-active{ opacity:0; } .bk-fade-in-ease-enter-active, .bk-fade-in-ease-leave-active{ -webkit-transition:opacity cubic-bezier(.55,0,.1,1) .2s; transition:opacity cubic-bezier(.55,0,.1,1) .2s; } .bk-fade-in-ease-enter, .bk-fade-in-ease-leave-active{ opacity:0; } .bk-slide-fade-right-enter-active, .bk-slide-fade-right-leave-active{ -webkit-transition:opacity linear .2s, -webkit-transform linear .2s; transition:opacity linear .2s, -webkit-transform linear .2s; transition:transform linear .2s, opacity linear .2s; transition:transform linear .2s, opacity linear .2s, -webkit-transform linear .2s; } .bk-slide-fade-right-enter{ opacity:0; -webkit-transform:translate3d(20%, 0, 0); transform:translate3d(20%, 0, 0); } .bk-slide-fade-right-leave-active{ opacity:0; -webkit-transform:translate3d(-20%, 0, 0); transform:translate3d(-20%, 0, 0); } .bk-slide-fade-left-enter-active, .bk-slide-fade-left-leave-active{ -webkit-transition:opacity linear .2s, -webkit-transform linear .2s; transition:opacity linear .2s, -webkit-transform linear .2s; transition:transform linear .2s, opacity linear .2s; transition:transform linear .2s, opacity linear .2s, -webkit-transform linear .2s; } .bk-slide-fade-left-enter{ opacity:0; -webkit-transform:translate3d(-20%, 0, 0%); transform:translate3d(-20%, 0, 0%); } .bk-slide-fade-left-leave-active{ opacity:0; -webkit-transform:translate3d(20%, 0, 0); transform:translate3d(20%, 0, 0); } .bk-slide-fade-up-enter-active, .bk-slide-fade-up-leave-active{ -webkit-transition:opacity linear .2s, -webkit-transform linear .2s; transition:opacity linear .2s, -webkit-transform linear .2s; transition:transform linear .2s, opacity linear .2s; transition:transform linear .2s, opacity linear .2s, -webkit-transform linear .2s; } .bk-slide-fade-up-enter{ opacity:0; -webkit-transform:translate3d(0, +20%, 0); transform:translate3d(0, +20%, 0); } .bk-slide-fade-up-leave-active{ opacity:0; -webkit-transform:translate3d(0, -20%, 0); transform:translate3d(0, -20%, 0); } .bk-slide-fade-down-enter-active, .bk-slide-fade-down-leave-active{ -webkit-transition:opacity linear .2s, -webkit-transform linear .2s; transition:opacity linear .2s, -webkit-transform linear .2s; transition:transform linear .2s, opacity linear .2s; transition:transform linear .2s, opacity linear .2s, -webkit-transform linear .2s; } .bk-slide-fade-down-enter{ opacity:0; -webkit-transform:translate3d(0, -20%, 0); transform:translate3d(0, -20%, 0); } .bk-slide-fade-down-leave-active{ opacity:0; -webkit-transform:translate3d(0, 20%, 0); transform:translate3d(0, 20%, 0); } .bk-zoom-enter, .bk-zoom-leave-to{ -webkit-transform:scale(0); transform:scale(0); } .bk-zoom-leave, .bk-zoom-enter-to{ -webkit-transform:scale(1); transform:scale(1); } .bk-zoom-enter-active, .bk-zoom-leave-active{ -webkit-transition:all .2s; transition:all .2s; } .bk-move-in-left-enter, .bk-move-in-left-leave-to{ -webkit-transform:translate3d(-100%, 0, 0); transform:translate3d(-100%, 0, 0); opacity:0; } .bk-move-in-left-leave, .bk-move-in-left-enter-to{ -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); } .bk-move-in-left-enter-active, .bk-move-in-left-leave-active{ -webkit-transition:all .2s; transition:all .2s; } .bk-move-in-right-enter, .bk-move-in-right-leave-to{ -webkit-transform:translate3d(100%, 0, 0); transform:translate3d(100%, 0, 0); opacity:0; } .bk-move-in-right-leave, .bk-move-in-right-enter-to{ -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); } .bk-move-in-right-enter-active, .bk-move-in-right-leave-active{ -webkit-transition:all .2s; transition:all .2s; } .bk-move-in-up-enter, .bk-move-in-up-leave-to{ -webkit-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0); opacity:0; } .bk-move-in-up-leave, .bk-move-in-up-enter-to{ -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); } .bk-move-in-up-enter-active, .bk-move-in-up-leave-active{ -webkit-transition:all .2s; transition:all .2s; } .bk-move-in-down-enter, .bk-move-in-down-leave-to{ -webkit-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0); opacity:0; } .bk-move-in-down-leave, .bk-move-in-down-enter-to{ -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); } .bk-move-in-down-enter-active, .bk-move-in-down-leave-active{ -webkit-transition:all .2s; transition:all .2s; } .fade-enter-active, .fade-leave-active{ -webkit-transition:opacity linear .2s; transition:opacity linear .2s; } .fade-enter, .fade-leave-active{ opacity:0; } .fade-show-enter-active, .fade-show-leave-active{ -webkit-transition:opacity linear .2s, margin linear .2s; transition:opacity linear .2s, margin linear .2s; } .fade-show-enter, .fade-show-leave-active{ opacity:0; margin-top:-20px; } .displacement-fade-show-enter-active, .displacement-fade-show-leave-active{ -webkit-transition:opacity linear .2s, margin linear .2s; transition:opacity linear .2s, margin linear .2s; } .displacement-fade-show-enter, .displacement-fade-show-leave-active{ opacity:0; margin-top:-50px; } .fade-center-enter-active, .fade-center-leave-active{ -webkit-transition:opacity linear .2s, -webkit-transform linear .2s; transition:opacity linear .2s, -webkit-transform linear .2s; transition:opacity linear .2s, transform linear .2s; transition:opacity linear .2s, transform linear .2s, -webkit-transform linear .2s; -webkit-transform-origin:center center; transform-origin:center center; } .fade-center-enter, .fade-center-leave-active{ opacity:0; -webkit-transform:translate(50%, -50%) scale(0, 0) !important; transform:translate(50%, -50%) scale(0, 0) !important; } .slide-enter-active .bk-sideslider-wrapper, .slide-leave-active .bk-sideslider-wrapper{ -webkit-transform:translateX(0); transform:translateX(0); -webkit-transition:-webkit-transform .25s; transition:-webkit-transform .25s; transition:transform .25s; transition:transform .25s, -webkit-transform .25s; } .slide-enter-active{ -webkit-animation:slider-fade-in .25s; animation:slider-fade-in .25s; } .slide-leave-active{ animation:slider-fade-in .25s reverse; } .slide-enter .bk-sideslider-wrapper.left, .slide-leave-to .bk-sideslider-wrapper.left{ -webkit-transform:translateX(-100%); transform:translateX(-100%); -webkit-transition:-webkit-transform .25s; transition:-webkit-transform .25s; transition:transform .25s; transition:transform .25s, -webkit-transform .25s; } .slide-enter .bk-sideslider-wrapper.right, .slide-leave-to .bk-sideslider-wrapper.right{ -webkit-transform:translateX(100%); transform:translateX(100%); -webkit-transition:-webkit-transform .25s; transition:-webkit-transform .25s; transition:transform .25s; transition:transform .25s, -webkit-transform .25s; } @-webkit-keyframes slider-fade-in{ 0%{ opacity:0; } 100%{ opacity:1; } } @keyframes slider-fade-in{ 0%{ opacity:0; } 100%{ opacity:1; } } .slide-fade-enter-active, .fade-leave-active{ -webkit-transition:opacity linear .2s, -webkit-transform linear .2s; transition:opacity linear .2s, -webkit-transform linear .2s; transition:transform linear .2s, opacity linear .2s; transition:transform linear .2s, opacity linear .2s, -webkit-transform linear .2s; } .slide-fade-enter{ opacity:0; -webkit-transform:translateX(20%); transform:translateX(20%); } .slide-fade-leave-active{ opacity:0; -webkit-transform:translateX(-20%); transform:translateX(-20%); } .toggle-slide-enter-active, .toggle-slide-leave-active{ -webkit-transition:opacity .5s cubic-bezier(.23, 1, .23, 1), -webkit-transform .3s cubic-bezier(.23, 1, .23, 1); transition:opacity .5s cubic-bezier(.23, 1, .23, 1), -webkit-transform .3s cubic-bezier(.23, 1, .23, 1); transition:transform .3s cubic-bezier(.23, 1, .23, 1), opacity .5s cubic-bezier(.23, 1, .23, 1); transition:transform .3s cubic-bezier(.23, 1, .23, 1), opacity .5s cubic-bezier(.23, 1, .23, 1), -webkit-transform .3s cubic-bezier(.23, 1, .23, 1); -webkit-transform-origin:center top; transform-origin:center top; } .toggle-slide-enter, .toggle-slide-leave-active{ -webkit-transform:translateZ(0) scaleY(0); transform:translateZ(0) scaleY(0); opacity:0; } .toggle-slide2-enter-active, .toggle-slide2-leave-active{ -webkit-transition:opacity .5s cubic-bezier(.23, 1, .23, 1), -webkit-transform .3s cubic-bezier(.23, 1, .23, 1); transition:opacity .5s cubic-bezier(.23, 1, .23, 1), -webkit-transform .3s cubic-bezier(.23, 1, .23, 1); transition:transform .3s cubic-bezier(.23, 1, .23, 1), opacity .5s cubic-bezier(.23, 1, .23, 1); transition:transform .3s cubic-bezier(.23, 1, .23, 1), opacity .5s cubic-bezier(.23, 1, .23, 1), -webkit-transform .3s cubic-bezier(.23, 1, .23, 1); -webkit-transform-origin:center bottom; transform-origin:center bottom; } .toggle-slide2-enter, .toggle-slide2-leave-active{ -webkit-transform:translateZ(0) scaleY(0); transform:translateZ(0) scaleY(0); opacity:0; } .fade-enter-active, .fade-appear{ -webkit-animation-duration:.3s; animation-duration:.3s; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-play-state:paused; animation-play-state:paused; } .fade-leave-active{ -webkit-animation-duration:.3s; animation-duration:.3s; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-play-state:paused; animation-play-state:paused; } .fade-enter-active, .fade-appear{ -webkit-animation-name:fadeIn; animation-name:fadeIn; -webkit-animation-play-state:running; animation-play-state:running; } .fade-leave-active{ -webkit-animation-name:fadeOut; animation-name:fadeOut; -webkit-animation-play-state:running; animation-play-state:running; } .fade-enter-active, .fade-appear{ opacity:0; -webkit-animation-timing-function:linear; animation-timing-function:linear; } .fade-leave-active{ -webkit-animation-timing-function:linear; animation-timing-function:linear; } @-webkit-keyframes fadeIn{ 0%{ opacity:0; } 100%{ opacity:1; } } @keyframes fadeIn{ 0%{ opacity:0; } 100%{ opacity:1; } } @-webkit-keyframes fadeOut{ 0%{ opacity:1; } 100%{ opacity:0; } } @keyframes fadeOut{ 0%{ opacity:1; } 100%{ opacity:0; } } .ease-enter-active, .ease-appear{ -webkit-animation-duration:.3s; animation-duration:.3s; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-play-state:paused; animation-play-state:paused; } .ease-leave-active{ -webkit-animation-duration:.3s; animation-duration:.3s; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-play-state:paused; animation-play-state:paused; } .ease-enter-active, .ease-appear{ -webkit-animation-name:easeIn; animation-name:easeIn; -webkit-animation-play-state:running; animation-play-state:running; } .ease-leave-active{ -webkit-animation-name:easeOut; animation-name:easeOut; -webkit-animation-play-state:running; animation-play-state:running; } .ease-enter-active, .ease-appear{ opacity:0; -webkit-animation-timing-function:linear; animation-timing-function:linear; -webkit-animation-duration:.2s; animation-duration:.2s; } .ease-leave-active{ -webkit-animation-timing-function:linear; animation-timing-function:linear; -webkit-animation-duration:.2s; animation-duration:.2s; } @-webkit-keyframes easeIn{ 0%{ opacity:0; -webkit-transform:scale(0.9); transform:scale(0.9); } 100%{ opacity:1; -webkit-transform:scale(1); transform:scale(1); } } @keyframes easeIn{ 0%{ opacity:0; -webkit-transform:scale(0.9); transform:scale(0.9); } 100%{ opacity:1; -webkit-transform:scale(1); transform:scale(1); } } @-webkit-keyframes easeOut{ 0%{ opacity:1; -webkit-transform:scale(1); transform:scale(1); } 100%{ opacity:0; -webkit-transform:scale(0.9); transform:scale(0.9); } } @keyframes easeOut{ 0%{ opacity:1; -webkit-transform:scale(1); transform:scale(1); } 100%{ opacity:0; -webkit-transform:scale(0.9); transform:scale(0.9); } } .transition-drop-enter-active, .transition-drop-appear{ -webkit-animation-duration:.3s; animation-duration:.3s; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-play-state:paused; animation-play-state:paused; } .transition-drop-leave-active{ -webkit-animation-duration:.3s; animation-duration:.3s; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-play-state:paused; animation-play-state:paused; } .transition-drop-enter-active, .transition-drop-appear{ -webkit-animation-name:transitionDropIn; animation-name:transitionDropIn; -webkit-animation-play-state:running; animation-play-state:running; } .transition-drop-leave-active{ -webkit-animation-name:transitionDropOut; animation-name:transitionDropOut; -webkit-animation-play-state:running; animation-play-state:running; } .transition-drop-enter-active, .transition-drop-appear{ opacity:0; -webkit-animation-timing-function:ease-in-out; animation-timing-function:ease-in-out; } .transition-drop-leave-active{ -webkit-animation-timing-function:ease-in-out; animation-timing-function:ease-in-out; } @-webkit-keyframes transitionDropIn{ 0%{ opacity:0; -webkit-transform:scaleY(0.8); transform:scaleY(0.8); } 100%{ opacity:1; -webkit-transform:scaleY(1); transform:scaleY(1); } } @keyframes transitionDropIn{ 0%{ opacity:0; -webkit-transform:scaleY(0.8); transform:scaleY(0.8); } 100%{ opacity:1; -webkit-transform:scaleY(1); transform:scaleY(1); } } @-webkit-keyframes transitionDropOut{ 0%{ opacity:1; -webkit-transform:scaleY(1); transform:scaleY(1); } 100%{ opacity:0; -webkit-transform:scaleY(0.8); transform:scaleY(0.8); } } @keyframes transitionDropOut{ 0%{ opacity:1; -webkit-transform:scaleY(1); transform:scaleY(1); } 100%{ opacity:0; -webkit-transform:scaleY(0.8); transform:scaleY(0.8); } } .bk-alert{ position:relative; font-size:12px; color:#63656e; border:1px solid; border-radius:2px; word-wrap:break-word; } .bk-alert .icon-info{ margin-right:8px; font-size:16px; } .bk-alert .icon-close{ font-size:17px; } .bk-alert-wraper{ display:-webkit-box; display:-ms-flexbox; display:flex; padding:8px 10px; } .bk-alert-success{ border-color:#94f5a4; background-color:#f2fff4; } .bk-alert-success .icon-info{ color:#2dcb56; } .bk-alert-info{ border-color:#c5daff; background-color:#f0f8ff; } .bk-alert-info .icon-info{ color:#3a84ff; } .bk-alert-warning{ border-color:#ffdfac; background-color:#fff4e2; } .bk-alert-warning .icon-info{ color:#ff9c01; } .bk-alert-error{ border-color:#ffd2d2; background-color:#ffeded; } .bk-alert-error .icon-info{ color:#ea3636; } .bk-alert-content{ display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-flex:1; -ms-flex:1; flex:1; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; overflow:hidden; } .bk-alert-title{ line-height:16px; } .bk-alert-close{ padding:8px 12px 0 6px; margin-top:-8px; margin-right:-10px; font-size:12px; cursor:pointer; white-space:nowrap; } .bk-alert-leave-leave{ opacity:1; } .bk-alert-leave-leave-active{ overflow:hidden; -webkit-transition:opacity .15s, height .2s; transition:opacity .15s, height .2s; } .bk-alert-leave-leave-to{ opacity:0; } .bk-badge-wrapper{ position:relative; display:inline-block; } .bk-badge-wrapper .bk-badge{ position:relative; display:inline-block; min-width:18px; height:18px; line-height:16px; padding:0 2px; border:1px solid #c3cdd7; border-radius:18px; background-color:#fff; font-size:12px; text-align:center; } .bk-badge-wrapper .bk-badge .bk-icon{ position:absolute; left:50%; top:50%; margin-top:0; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); display:block; line-height:18px; } .bk-badge-wrapper .bk-badge.pinned{ position:absolute } .bk-badge-wrapper .bk-badge.pinned.top-right{ top:0; right:0; -webkit-transform:translate(50%, -50%) scale(1, 1); transform:translate(50%, -50%) scale(1, 1) } .bk-badge-wrapper .bk-badge.pinned.top-right.fade-center-enter, .bk-badge-wrapper .bk-badge.pinned.top-right.fade-center-leave-active{ opacity:0; -webkit-transform:translate(50%, -50%) scale(0, 0); transform:translate(50%, -50%) scale(0, 0); } .bk-badge-wrapper .bk-badge.pinned.right{ top:50%; right:0%; -webkit-transform:translate(100%, -50%) scale(1, 1); transform:translate(100%, -50%) scale(1, 1) } .bk-badge-wrapper .bk-badge.pinned.right.fade-center-enter, .bk-badge-wrapper .bk-badge.pinned.right.fade-center-leave-active{ opacity:0; -webkit-transform:translate(50%, -50%) scale(0, 0); transform:translate(50%, -50%) scale(0, 0); } .bk-badge-wrapper .bk-badge.pinned.bottom-right{ bottom:0; right:0; -webkit-transform:translate(50%, 50%) scale(1, 1); transform:translate(50%, 50%) scale(1, 1) } .bk-badge-wrapper .bk-badge.pinned.bottom-right.fade-center-enter, .bk-badge-wrapper .bk-badge.pinned.bottom-right.fade-center-leave-active{ opacity:0; -webkit-transform:translate(50%, 50%) scale(0, 0); transform:translate(50%, 50%) scale(0, 0); } .bk-badge-wrapper .bk-badge.pinned.top-left{ top:0; left:0; -webkit-transform:translate(-50%, -50%) scale(1, 1); transform:translate(-50%, -50%) scale(1, 1) } .bk-badge-wrapper .bk-badge.pinned.top-left.fade-center-enter, .bk-badge-wrapper .bk-badge.pinned.top-left.fade-center-leave-active{ opacity:0; -webkit-transform:translate(-50%, -50%) scale(0, 0); transform:translate(-50%, -50%) scale(0, 0); } .bk-badge-wrapper .bk-badge.pinned.bottom-left{ bottom:0; left:0; -webkit-transform:translate(-50%, 50%) scale(1, 1); transform:translate(-50%, 50%) scale(1, 1) } .bk-badge-wrapper .bk-badge.pinned.bottom-left.fade-center-enter, .bk-badge-wrapper .bk-badge.pinned.bottom-left.fade-center-leave-active{ opacity:0; -webkit-transform:translate(-50%, 50%) scale(0, 0); transform:translate(-50%, 50%) scale(0, 0); } .bk-badge-wrapper .bk-badge.dot{ width:8px; height:8px; min-width:8px; } .bk-badge-wrapper .bk-badge.bk-danger{ background-color:#ff5656; border:2px solid #fff; color:#fff } .bk-badge-wrapper .bk-badge.bk-danger.is-icon{ background-color:#fff; border-color:#fff; color:#ff5656; } .bk-badge-wrapper .bk-badge.bk-warning{ background-color:#ffb848; border:2px solid #fff; color:#fff } .bk-badge-wrapper .bk-badge.bk-warning.is-icon{ background-color:#fff; border-color:#fff; color:#ffb848; } .bk-badge-wrapper .bk-badge.bk-success{ background-color:#2dcb56; border:2px solid #fff; color:#fff } .bk-badge-wrapper .bk-badge.bk-success.is-icon{ background-color:#fff; border-color:#fff; color:#2dcb56; } .bk-badge-wrapper .bk-badge.bk-primary{ background-color:#3c96ff; border:2px solid #fff; color:#fff } .bk-badge-wrapper .bk-badge.bk-primary.is-icon{ background-color:#fff; border-color:#fff; color:#3c96ff; } .bk-badge-wrapper .bk-badge.bk-info{ background-color:#88c3ff; border:2px solid #fff; color:#fff } .bk-badge-wrapper .bk-badge.bk-info.is-icon{ background-color:#fff; border-color:#fff; color:#88c3ff; } .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:56px; 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:#fff; 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:#dcdee5; 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:#dcdee5; } .bk-button-text.is-disabled:active, .bk-button-text.is-disabled.active, .bk-button-text[disabled]:active, .bk-button-text[disabled].active{ color:#dcdee5; } .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-loadin