bk-magic-vue
Version:
基于蓝鲸 Magicbox 和 Vue 的前端组件库
3 lines (2 loc) • 2.73 kB
CSS
.bk-notify{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:fixed;padding:16px 24px;width:360px;background:#fff;-webkit-box-shadow:0 3px 6px 0 rgba(0,0,0,.15);box-shadow:0 3px 6px 0 rgba(0,0,0,.15);border-radius:2px;border:1px solid #f0f1f5;z-index:2500;-webkit-transition:top .3s linear,bottom .3s linear;transition:top .3s linear,bottom .3s linear}.bk-notify.center{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.bk-notify-primary .bk-notify-icon .bk-icon{color:#3a84ff}.bk-notify-error .bk-notify-icon .bk-icon{color:#ea3636}.bk-notify-warning .bk-notify-icon .bk-icon{color:#ff9c01}.bk-notify-success .bk-notify-icon .bk-icon{color:#2dcb56}.bk-notify-icon{-ms-flex-item-align:start;align-self:flex-start;-ms-flex-negative:0;flex-shrink:0;margin-top:1px;margin-right:8px;color:#fff}.bk-notify-icon .bk-icon{display:block;width:18px;height:18px;line-height:18px;font-size:18px;text-align:center;color:#fff;border-radius:50%}.bk-notify-content{box-flex:1;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;line-height:20px;font-size:14px;text-align:left;color:#63656e;background-color:inherit;word-break:break-all}.bk-notify-content .bk-notify-content-title{margin-top:0;margin-bottom:8px;font-size:14px;font-weight:700}.bk-notify-content .bk-notify-content-text{position:relative;background-color:inherit}.bk-notify-content .bk-notify-content-text.limitLine{overflow:hidden}.bk-notify-content .bk-notify-content-text .showMoreBtn{display:inline-block;position:absolute;right:0;bottom:0;padding:0 0 0 10px;color:#3a84ff;background-color:inherit;border:none;outline:none}.bk-notify-close{text-align:center;position:absolute;right:8px;top:8px}.bk-notify-close .bk-icon{display:block;width:20px;height:20px;line-height:20px;color:#979ba5;font-size:20px;font-weight:700;border-radius:50%;cursor:pointer}.bk-notify-close .bk-icon:hover{background-color:#f0f1f5}.placement-slide-enter,.placement-slide-leave-to{opacity:0}.placement-slide-enter.right,.placement-slide-leave-to.right{-webkit-transform:translateX(100%);transform:translateX(100%)}.placement-slide-enter.left,.placement-slide-leave-to.left{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.placement-slide-enter-active,.placement-slide-leava-active{-webkit-transition:opacity .2s linear,-webkit-transform .3s linear;transition:opacity .2s linear,-webkit-transform .3s linear;transition:transform .3s linear,opacity .2s linear;transition:transform .3s linear,opacity .2s linear,-webkit-transform .3s linear}
/*# sourceMappingURL=notify.min.css.map */