@cw-devops/bk-magic-vue/lib/ui/navigation.min.css

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

.bk-navigation{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100vw;height:100vh}.bk-navigation-title{-ms-flex-align:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;overflow:hidden;padding:0 16px;border-bottom:1px solid hsla(0,0%,100%,.05);height:100%;-ms-flex:0 0 260px;flex:0 0 260px}.bk-navigation-title,.bk-navigation-title .title-icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-flex:0}.bk-navigation-title .title-icon{-ms-flex:0 0 28px;flex:0 0 28px;font-size:28px;color:#96a2b9;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.bk-navigation-title .title-desc{font-size:16px;font-weight:700;color:#96a2b9;display:inline-block;margin-left:16px;line-height:24px;overflow:hidden;white-space:nowrap}.bk-navigation-header{-webkit-box-flex:0;-ms-flex:0 0 52px;flex:0 0 52px;-ms-flex-align:center;padding-right:24px;overflow:hidden}.bk-navigation-header,.bk-navigation-header .header-right{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center}.bk-navigation-header .header-right{-webkit-box-flex:1;-ms-flex:1;flex:1;height:100%;-ms-flex-align:center}.bk-navigation-wrapper{-webkit-box-orient:horizontal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex:1;flex:1}.bk-navigation-wrapper,.bk-navigation-wrapper .navigation-nav{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-direction:normal;position:relative}.bk-navigation-wrapper .navigation-nav{width:60px;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;overflow:visible;min-width:0;min-height:0;z-index:101;-webkit-transition:width .3s cubic-bezier(.4,0,.2,1);transition:width .3s cubic-bezier(.4,0,.2,1)}.bk-navigation-wrapper .navigation-nav:hover{cursor:pointer}.bk-navigation-wrapper .navigation-nav .nav-slider{width:60px;height:100%;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;-webkit-transition:width .3s cubic-bezier(.4,0,.2,1);transition:width .3s cubic-bezier(.4,0,.2,1)}.bk-navigation-wrapper .navigation-nav .nav-slider-list{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;overflow:auto;padding:12px 0 4px;margin:0;max-height:calc(100vh - 100px)}.bk-navigation-wrapper .navigation-nav .nav-slider-list::-webkit-scrollbar{width:6px;height:5px;display:none}.bk-navigation-wrapper .navigation-nav .nav-slider-list::-webkit-scrollbar:hover{-webkit-transition:opacity .34s ease-out;transition:opacity .34s ease-out;-webkit-transform:none;transform:none}.bk-navigation-wrapper .navigation-nav .nav-slider-footer{-webkit-box-flex:0;-ms-flex:0 0 56px;flex:0 0 56px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding-left:14px}.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon{font-size:14px;color:#63656e;width:32px;height:32px;border-radius:100%}.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon,.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon-svg{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-transform-origin:center center;transform-origin:center center}.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon-svg{font-size:16px;-webkit-transition:-webkit-transform .3s cubic-bezier(.4,0,.2,1);transition:-webkit-transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1);height:16px;width:16px}.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon.is-left{color:#96a2b9}.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon.is-left:hover{background:-webkit-gradient(linear,right top,left top,from(#253047),to(#263247));background:linear-gradient(270deg,#253047,#263247);color:#d3d9e4;cursor:pointer}.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon:hover{background:-webkit-gradient(linear,right top,left top,from(#dee0ea),to(#eaecf2));background:linear-gradient(270deg,#dee0ea,#eaecf2);color:#3a3c42;cursor:pointer}.bk-navigation-wrapper .navigation-container{-webkit-box-flex:1;-ms-flex:1 1 1px;flex:1 1 1px;max-width:calc(100vw - 60px);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;min-width:0;min-height:0}.bk-navigation-wrapper .navigation-container .container-header{background:#fff;-ms-flex-preferred-size:60px;flex-basis:60px;height:60px;width:100%;z-index:100;-webkit-box-shadow:0 3px 4px 0 rgba(64,112,203,.06);box-shadow:0 3px 4px 0 rgba(64,112,203,.06);border-bottom:1px solid #dcdee5;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;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;padding:0 24px}.bk-navigation-wrapper .navigation-container .container-header-title{height:21px;font-size:16px;color:#313238;line-height:21px}.bk-navigation-wrapper .navigation-container .container-header-sets{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.bk-navigation-wrapper .navigation-container .container-content{background:#f5f7fa;max-height:calc(100vh - 60px);-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:auto;padding:20px 24px 0}.bk-navigation-wrapper .navigation-container .container-footer{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;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;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
/*# sourceMappingURL=navigation.min.css.map */