@flatbiz/pro-layout
Version:
WEB菜单布局
1 lines • 12.8 kB
CSS
#app,#app>.ant-app,body,html{height:100%;margin:0;width:100%}*,:after,:before{box-sizing:border-box}#app{background-color:var(--bg-color)}.flatbiz-layout{bottom:0;display:flex;flex-direction:row;height:100vh;left:0;overflow:auto;position:fixed;right:0;top:0}.flatbiz-layout-main{display:flex;flex:1;overflow:hidden}.flatbiz-layout-main-content{flex:1;overflow-y:auto}.flatbiz-layout-windows ::-webkit-scrollbar,.layout-page-windows ::-webkit-scrollbar,.page-windows ::-webkit-scrollbar{background-color:#eee;height:8px;width:8px}.flatbiz-layout-windows ::-webkit-scrollbar-thumb,.layout-page-windows ::-webkit-scrollbar-thumb,.page-windows ::-webkit-scrollbar-thumb{background-color:#cfcfcf;border-radius:10px}.flatbiz-layout-windows ::-webkit-scrollbar-thumb:hover,.layout-page-windows ::-webkit-scrollbar-thumb:hover,.page-windows ::-webkit-scrollbar-thumb:hover{background-color:#a8a8a8}.flatbiz-layout-windows ::-webkit-scrollbar-thumb:active,.layout-page-windows ::-webkit-scrollbar-thumb:active,.page-windows ::-webkit-scrollbar-thumb:active{background-color:#787878}.bread-wrapper{align-items:center;border-radius:6px;display:flex;justify-content:space-between;margin-bottom:5px;padding:3px 15px 6px 8px}.bread-wrapper .bread{display:inline-block}.bread-wrapper .ant-breadcrumb ol{margin:0;padding:0}.bread-extend{flex:1}.loader{align-items:center;background-color:var(--block-bg-color);bottom:0;display:flex;justify-content:center;left:0;opacity:1;position:absolute;right:0;text-align:center;top:0;z-index:100000}.loader.fullScreen{position:fixed}.loader .loader-wrapper{display:inline-flex;flex-direction:column;height:100px;justify-content:space-around;width:100px}.loader .loader-inner{animation:spinner .6s linear infinite;border:2px solid rgba(0,128,227,.08);border-left-color:rgba(0,84,153,.7);border-radius:50%;height:30px;margin:0 auto;text-indent:-12345px;width:30px;z-index:100001}.loader .loader-text{color:#0080e3;font-size:12px;height:20px;letter-spacing:4px;text-align:center;width:100px}.loader.hidden{display:none}@keyframes spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.page{flex:1;overflow-x:hidden;overflow-y:auto;position:relative}.page-flex{display:flex;flex-direction:column}.page-full{flex:1;overflow-y:auto}.dev-float-help-active,.dev-float-help-active .ant-float-btn-body{background-color:var(--header-bgColor)}.dev-float-help-active .ant-float-btn-body:hover{background-color:transparent}.layout-page-wrapper{background:var(--bg-color);flex:1;padding:8px 8px 0}.layout-page,.layout-page-wrapper{height:100%;overflow:hidden;position:relative}.layout-page{display:flex;flex-direction:column}.layout-page-noheader{padding:0}.layout-page-noheader .bread-wrapper{padding:5px 15px 5px 8px}.layout-page-noheader .page{padding:0 8px 8px}.layout-shrink{align-items:center;cursor:pointer;display:flex;font-size:18px;justify-content:center;padding:10px 0;transition:all .3s ease-out}.sider-bar-shrink{background-color:var(--sidebar-bgColor);box-shadow:0 0 17px rgba(0,0,0,.1);color:var(--sidebar-menuSelectedTextColor)}.sider-bar-shrink:hover{color:var(--sidebar-menuSelectedBgColor)}.header-shrink{color:var(--header-textColor);width:50px}.header-shrink:hover{color:var(--header-menuSelectedBgColor)}.header-account{color:unset;cursor:pointer;flex-shrink:0;height:100%;line-height:normal;margin-right:20px}.header-account:hover{background:var(--header-menuSelectedBgColor);color:var(--header-menuSelectedTextColor)}.header-account .header-account-wraper{align-items:center;display:flex;height:100%;padding:0 15px}.header-account .header-account-wraper img.user-avatar{border-radius:100%;height:24px;object-fit:cover;width:24px}.account-dropdown-overlay{box-shadow:0 4px 8px 0 rgba(0,0,0,.08);z-index:900}.layout-brand{align-items:center;background:var(--header-bgColor);color:var(--header-textColor);display:flex;justify-content:center;overflow:hidden;position:relative;transition:all .2s;white-space:nowrap}.brand-logo{background-position:50%;background-repeat:no-repeat;background-size:40px 100%;height:100%;width:40px}.brand-name{font-size:18px;margin-left:15px;white-space:nowrap}.ant-layout-sider-collapsed .layout-brand{display:block;overflow:hidden}.ant-layout-sider-collapsed .brand-logo{width:60px}.flatbiz-layout-main-header{background:var(--header-bgColor);color:var(--header-textColor);display:flex;flex-shrink:0;z-index:10}.flatbiz-layout-system-name{align-items:center;color:unset;display:flex;flex-shrink:0;font-size:18px;margin-left:15px}.flatbiz-layout-header-fill{display:flex;flex:1;justify-content:flex-end;overflow:hidden}.flatbiz-layout-header-fill>.ant-menu{background:unset;border-bottom:none;height:unset}.flatbiz-layout-header-fill>.ant-menu.ant-menu-horizontal{border-bottom:none;line-height:inherit}.flatbiz-layout-header-fill>.ant-menu .ant-menu-item{align-items:center;border-radius:0;display:flex}.flatbiz-layout-header-fill>.ant-menu .ant-menu-item:hover:after{border:none}.flatbiz-layout-header-fill>.ant-menu .ant-menu-item:after{border-bottom:0;bottom:12px}.flatbiz-layout-header-fill>.ant-menu .ant-menu-item.ant-menu-item-selected:after{background:var(--header-menuSelectedTextColor);border:none}.flatbiz-layout-header-fill>.ant-menu .ant-menu-item.ant-menu-item-active:not(.ant-menu-item-selected){background:var(--header-menuActiveBgColor)}.flatbiz-layout-header-fill>.ant-menu .ant-menu-item.ant-menu-item-active:not(.ant-menu-item-selected):after{background:var(--header-menuActiveTextColor);border:none}.flatbiz-layout-header-fill>.ant-menu .ant-menu-item-active:after,.flatbiz-layout-header-fill>.ant-menu .ant-menu-item-selected:after{border-radius:3px;bottom:12px;content:"";height:3px;left:50%;min-width:22px;position:absolute;transform:translateX(-50%);width:30%}.flatbiz-layout-header-fill>.ant-menu .ant-menu-overflow-item-rest{align-items:center;background-color:transparent;display:flex}.flatbiz-layout-header-fill>.ant-menu .ant-menu-overflow-item-rest .ant-menu-submenu-title{color:var(--header-textColor)}.flatbiz-layout-header-fill>.ant-menu .ant-menu-overflow-item-rest .ant-menu-submenu-title:hover{color:unset}.flatbiz-layout-header-fill>.ant-menu .ant-menu-overflow-item-rest:after{width:0}.flatbiz-layout-topmenu{flex:1;overflow:hidden}.flatbiz-layout-main-header-has-menu .flatbiz-layout-header-fill{justify-content:space-between}.flatbiz-layout-topmenu-overflowed-modal .ant-menu-submenu{background-color:transparent}.light-theme .flatbiz-layout-topmenu-overflowed-modal .ant-menu-item{color:#000}.dark-theme .flatbiz-layout-topmenu-overflowed-modal .ant-menu-item{color:#fff}.icon-change-show-active .menu-icon-img-active{display:block}.icon-change-show-active .menu-icon-img{display:none}.menu-icon-img,.menu-icon-img-active{background-position:0;background-repeat:no-repeat;background-size:100% 100%;display:none;flex-shrink:0;height:16px;width:16px}.menu-icon-img{display:block}.flatbiz-layout-sider{display:flex;flex:1;flex-direction:column;height:100%;overflow:hidden;z-index:10}.flatbiz-layout-sider .ant-layout-sider-children{display:flex;flex-direction:column}.flatbiz-layout-sider .ant-layout-sider-children>.ant-menu-root{padding-bottom:30px}.flatbiz-layout-sider .ant-menu-root{flex:1;overflow-x:hidden;overflow-y:auto}.flatbiz-layout-sider .ant-menu-title-content{margin-left:5px}.flatbiz-layout-sider .ant-menu-item-selected .menu-icon-img-active{display:block}.flatbiz-layout-sider .ant-menu-item-selected .menu-icon-img{display:none}.flatbiz-layout-sider .ant-menu-item-active .menu-icon-img-active{display:block}.flatbiz-layout-sider .ant-menu-item-active .menu-icon-img{display:none}.flatbiz-layout-sider .ant-menu-submenu-active .ant-menu-submenu-title .menu-icon-img-active,.flatbiz-layout-sider .ant-menu-submenu-selected .ant-menu-submenu-title .menu-icon-img-active{display:block}.flatbiz-layout-sider .ant-menu-submenu-active .ant-menu-submenu-title .menu-icon-img,.flatbiz-layout-sider .ant-menu-submenu-selected .ant-menu-submenu-title .menu-icon-img{display:none}.flatbiz-layout-sider .ant-menu-light.ant-menu-root.ant-menu-inline,.flatbiz-layout-sider .ant-menu-light.ant-menu-root.ant-menu-vertical{border-inline-end:none}.ant-menu-root.ant-menu-inline-collapsed>.ant-menu-item,.ant-menu-root.ant-menu-inline-collapsed>.ant-menu-submenu .ant-menu-submenu-title{align-items:center;display:flex}.ant-menu-root.ant-menu-inline-collapsed .collapsed-menu-icon-badge+span,.ant-menu-root.ant-menu-inline-collapsed .menu-icon-img-active+span{display:none}.menu-icon-wrapper{align-items:center;display:flex}.flatbiz-layout-sider-submenu-popup .ant-menu-item-selected .menu-icon-img-active{display:block}.flatbiz-layout-sider-submenu-popup .ant-menu-item-selected .menu-icon-img{display:none}.flatbiz-layout-sider-submenu-popup .ant-menu-item-selected .ant-menu-title-content{color:var(--sidebar-menuSelectedTextColor)}.flatbiz-layout-sider-submenu-popup .ant-menu-item-active .menu-icon-img-active{display:block}.flatbiz-layout-sider-submenu-popup .ant-menu-item-active .menu-icon-img{display:none}.flatbiz-layout-sider-submenu-popup .ant-menu-item-active .ant-menu-title-content{color:var(--sidebar-menuSelectedTextColor)}.flatbiz-layout-sider-submenu-popup .ant-menu-item{align-items:center;display:flex}.flatbiz-layout-sider-submenu-popup .ant-menu-title-content{color:rgba(0,0,0,.88);margin-left:5px}.sider-bar-search{align-items:center;background-color:var(--sidebar-bgColor);display:flex;padding:10px}.sider-bar-search input{background-color:transparent}.sider-bar-search:not(.sider-bar-search-bgfff) input{color:#fff}.sider-bar-search:not(.sider-bar-search-bgfff) input::placeholder{color:#fff}.flatbiz-layout-sider .ant-menu:not(.ant-menu-inline-collapsed) .sider-bar-menu-badge-parent{align-items:center;display:flex;justify-content:center;position:absolute;right:40px;top:50%;transform:translateY(-50%)}.sider-bar-menu-badge{align-items:center;display:flex;justify-content:center;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.iframe-tabs{overflow:hidden;z-index:5}.iframe-tabs .ant-tabs-tab{background:transparent;border:none;border-radius:0;height:38px;margin:0;padding:0 16px}.iframe-tabs .ant-tabs-tab.ant-tabs-tab-active{background-color:var(--bg-color);border-bottom:none}.iframe-tabs .ant-tabs-tab-btn{margin:0 auto}.iframe-tabs .ant-tabs-tab-remove{display:flex;height:16px;margin-left:4px;padding:0;width:16px}.iframe-tabs .tab-icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAV5JREFUWEftVTtSwzAQfZuchJqL2KGJDAMFyKkIDZ+GUJGZDNDwafg0QGUbCpjBdkPsg3AALoKXUUhsF8YfKNRYnaTdt2/falcEzYs0x0dLoFWgVaBSAeftfdLtdtaY6UQK47VO23pBvE7g868kcQarK5Myn0oCT2H0wYxlBdIB2ZvC8MoAvTC2wewoGwI+t4S59C8CKhuAXxYgzDy0rd5jEagXREMA99kdbVSpVqmAAnsOYpmA3RzwnhTGXZ6E60f7RLhOz4gGsm/kfIp1qEVAubr+dJuIHrIAPJL93pXae340AuEiF2JHCjOzLalBbQKzQEG8C/BtWg5gPK/1aVYiHNiWeVPnsc5965r+2Hnh9BBMl4VejCNpmcV3v4RppMACww2iYwLSrNU5A2NbmGfN0pl1SvOllYDWEmh9hFrbUOsg0j6KtX9G2r/j5lOimcefBlGzEOXWLYFWgVaBb9EEtCFLbAZ7AAAAAElFTkSuQmCC);background-size:100% 100%;border-radius:100%;display:inline-block;height:100%;width:100%}.iframe-tabs .tab-icon:hover{background-color:#f96868;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAASdJREFUWEftljtOBDEQRF8dhZjrIIhYIpaET8ISsRICEj4JCwkQARGchwNwk0KWvFJrNcN4dpCcjKORu11dXW13j6i8VDk+I4FRgVGBTgVsXwBbwKWkr5Jna3sbuAHeJKXzrauEwDewmREmkj7+ArQ9SYGzz4+kjaEEUjafAWQq6bUJ1PYUeA62nS7VOhVIYLZ3gfcAfCTpKZKwfQw8hL09SfFMoxBFBDKJfeAloMwk3WfbDLgNtgNJ0Xf9O7CS5SHwGPbm+fsq7J1IWpRc1uRTrMAS0PYpcNcS4ExSm21YCVaUOAdi1sk8l3RdmvnSr7cCueb1CFQtge16l9B2vWdYtRHlwVKvFduuPozqjuO+jaWv/1qNqG+QQf8D/xmsCWtUYFSgugK/gSWEIdTkUcAAAAAASUVORK5CYII=");background-size:100% 100%}.iframe-tabs .ant-tabs-nav{background-color:var(--block-bg-color);margin:0}.iframe-tabs .ant-tabs-nav:before{border:none}.iframe-tabs .ant-tabs-content{height:100%}.iframe-tabs .ant-tabs-extra-content{margin-right:20px}.iframe-tabs .menu-tabs-operate{text-align:center;width:24px}.content-top-menus{margin:0}.content-top-menus .ant-tabs-tab{background:transparent;border:none;border-radius:0;height:38px;margin:0;padding:0 16px}.content-top-menus .ant-tabs-tab.ant-tabs-tab-active{background-color:var(--bg-color);border-bottom:none}.content-top-menus .ant-tabs-nav{background-color:var(--block-bg-color);margin:0}.content-top-menus .ant-tabs-nav:before{border:none}.iframe-tabs-tab-badge{position:absolute}.iframe-tabs-tab-badge .ant-badge-dot{transform:none}