bk-vue-cec
Version:
一个为运维业务场景而生，好看易用的Vue2原创组件库，由T-inside Design进行托管社区化运作
1 lines • 4.43 kB
Source Map (JSON)
{"version":3,"sources":["notify.css"],"names":[],"mappings":"AAEA,WACI,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,6BAAmB,CAAnB,4BAAmB,CAAnB,sBAAmB,CAAnB,kBAAmB,CACnB,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,cAAe,CACf,YAAa,CACb,WAAY,CACZ,eAA+B,CAC/B,8CAA4C,CAA5C,sCAA4C,CAC5C,iBAAkB,CAClB,wBAAqC,CACrC,YAAuB,CACvB,mDAA6C,CAA7C,2CAKJ,CAJI,kBACI,QAAS,CACT,kCAA2B,CAA3B,0BACJ,CAGA,4CACI,aACJ,CAGA,0CACI,aACJ,CAGA,4CACI,aACJ,CAGA,4CACI,aACJ,CAGJ,gBACI,yBAAsB,CAAtB,qBAAsB,CACtB,mBAAc,CAAd,aAAc,CACd,cAAe,CACf,gBAAiB,CACjB,UAWJ,CAVI,yBACI,aAAc,CACd,UAAW,CACX,WAAY,CACZ,gBAAiB,CACjB,cAAe,CACf,iBAAkB,CAClB,UAAc,CACd,iBACJ,CAGJ,mBACI,UAAW,CACX,kBAAY,CAAZ,mBAAY,CAAZ,WAAY,CACZ,gBAAiB,CACjB,cAAe,CACf,eAAgB,CAChB,aAAsB,CACtB,wBAAyB,CACzB,oBAyBJ,CAxBI,4CACI,YAAa,CACb,iBAAkB,CAClB,cAAe,CACf,eACJ,CACA,2CACI,iBAAkB,CAClB,wBAeJ,CAdI,qDACI,eACJ,CACA,wDACI,oBAAqB,CACrB,iBAAkB,CAClB,OAAQ,CACR,QAAS,CACT,kBAAmB,CACnB,aAAoB,CACpB,wBAAyB,CACzB,WAAY,CACZ,YACJ,CAIR,iBACI,iBAAkB,CAClB,iBAAkB,CAClB,UAAW,CACX,QAeJ,CAdI,0BACI,aAAc,CACd,UAAW,CACX,WAAY,CACZ,gBAAiB,CACjB,aAAsB,CACtB,cAAyB,CACzB,eAAiB,CACjB,iBAAkB,CAClB,cAIJ,CAHI,gCACI,wBACJ,CAIR,iDAEI,SAOJ,CANI,6DACI,kCAA2B,CAA3B,0BACJ,CACA,2DACI,mCAA4B,CAA5B,2BACJ,CAEJ,4DAEI,kEAAoD,CAApD,0DAAoD,CAApD,kDAAoD,CAApD,+EACJ","file":"notify.min.css","sourcesContent":["@import './variable.css';\r\n\r\n.bk-notify {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n position: fixed;\r\n padding: 24px;\r\n width: 360px;\r\n background: rgba(255,255,255,1);\r\n box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.15);\r\n border-radius: 2px;\r\n border: 1px solid rgba(240,241,245,1);\r\n z-index: $messageZIndex;\r\n transition: top .3s linear, bottom .3s linear;\r\n &.center {\r\n left: 50%;\r\n transform: translateX(-50%);\r\n }\r\n}\r\n.bk-notify-primary {\r\n .bk-notify-icon .bk-icon {\r\n color: $newMainColor;\r\n }\r\n}\r\n.bk-notify-error {\r\n .bk-notify-icon .bk-icon {\r\n color: $newRedColor;\r\n }\r\n}\r\n.bk-notify-warning {\r\n .bk-notify-icon .bk-icon {\r\n color: $newOrangeColor;\r\n }\r\n}\r\n.bk-notify-success {\r\n .bk-notify-icon .bk-icon {\r\n color: $newGreenColor;\r\n }\r\n}\r\n\r\n.bk-notify-icon {\r\n align-self: flex-start;\r\n flex-shrink: 0;\r\n margin-top: 1px;\r\n margin-right: 5px;\r\n color: #ffffff;\r\n .bk-icon {\r\n display: block;\r\n width: 18px;\r\n height: 18px;\r\n line-height: 18px;\r\n font-size: 18px;\r\n text-align: center;\r\n color: #ffffff;\r\n border-radius: 50%;\r\n }\r\n}\r\n\r\n.bk-notify-content {\r\n box-flex: 1;\r\n flex-grow: 1;\r\n line-height: 20px;\r\n font-size: 14px;\r\n text-align: left;\r\n color: $newBlackColor2;\r\n background-color: inherit;\r\n word-break: break-all;\r\n .bk-notify-content-title {\r\n margin-top: 0;\r\n margin-bottom: 4px;\r\n font-size: 14px;\r\n font-weight: bold;\r\n }\r\n .bk-notify-content-text {\r\n position: relative;\r\n background-color: inherit;\r\n &.limitLine {\r\n overflow: hidden;\r\n }\r\n .showMoreBtn {\r\n display: inline-block;\r\n position: absolute;\r\n right: 0;\r\n bottom: 0;\r\n padding: 0 0 0 10px;\r\n color: $newMainColor;\r\n background-color: inherit;\r\n border: none;\r\n outline: none;\r\n }\r\n }\r\n}\r\n\r\n.bk-notify-close {\r\n text-align: center;\r\n position: absolute;\r\n right: 10px;\r\n top: 10px;\r\n .bk-icon {\r\n display: block;\r\n width: 20px;\r\n height: 20px;\r\n line-height: 20px;\r\n color: $newBlackColor3;\r\n font-size: $iconSmallSize;\r\n font-weight: bold;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n &:hover {\r\n background-color: $newGreyColor2;\r\n }\r\n }\r\n}\r\n\r\n.placement-slide-enter,\r\n.placement-slide-leave-to {\r\n opacity: 0;\r\n &.right {\r\n transform: translateX(100%);\r\n }\r\n &.left {\r\n transform: translateX(-100%);\r\n }\r\n}\r\n.placement-slide-enter-active,\r\n.placement-slide-leava-active {\r\n transition: transform .3s linear, opacity .2s linear;\r\n}\r\n"]}