| | |
| | | transition: margin-left 0.28s;
|
| | | margin-left: $base-sidebar-width;
|
| | | position: relative;
|
| | | background: #f5f7fb;
|
| | | background: transparent;
|
| | | }
|
| | |
|
| | | .sidebarHide {
|
| | |
| | | left: 0;
|
| | | z-index: 1001;
|
| | | overflow: hidden;
|
| | | -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
|
| | | box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
| | | padding: 12px 0 16px 16px;
|
| | | background: transparent;
|
| | | box-shadow: none;
|
| | |
|
| | | // reset element-ui css
|
| | | .horizontal-collapse-transition {
|
| | |
| | |
|
| | | &.has-logo {
|
| | | .el-scrollbar {
|
| | | height: calc(100% - 50px);
|
| | | height: calc(100% - 72px);
|
| | | margin-top: 10px;
|
| | | }
|
| | | }
|
| | |
|
| | |
| | | border: none;
|
| | | height: 100%;
|
| | | width: 100% !important;
|
| | | padding: 10px 8px 18px;
|
| | | border-radius: 0 28px 28px 0;
|
| | | background: var(--menu-surface);
|
| | | backdrop-filter: blur(18px);
|
| | | box-shadow: var(--shadow-sm);
|
| | | }
|
| | |
|
| | | .el-menu-item,
|
| | |
| | | .sub-menu-title-noDropdown,
|
| | | .el-sub-menu__title {
|
| | | &:hover {
|
| | | background-color: rgba(212, 221, 255, 0.8) !important;
|
| | | background-color: var(--menu-hover) !important;
|
| | | }
|
| | | }
|
| | | & .theme-light .is-active > .el-sub-menu__title {
|
| | | color: #fff !important;
|
| | | color: var(--current-color) !important;
|
| | | }
|
| | |
|
| | | & .nest-menu .el-sub-menu > .el-sub-menu__title,
|
| | |
| | | min-width: $base-sidebar-width !important;
|
| | |
|
| | | &:hover {
|
| | | background-color: rgba(212, 221, 255, 0.8) !important;
|
| | | background-color: var(--menu-hover) !important;
|
| | | }
|
| | | &.is-active {
|
| | | background-color: #fff !important;
|
| | | background-color: var(--menu-active-bg) !important;
|
| | | }
|
| | | }
|
| | |
|
| | |
| | | //background-color: transparent;
|
| | |
|
| | | &:hover {
|
| | | background-color: rgba(212, 221, 255, 0.8) !important;
|
| | | background-color: var(--menu-hover) !important;
|
| | | }
|
| | | }
|
| | | }
|
| | |
| | | .el-menu-item {
|
| | | &:hover {
|
| | | // you can use $sub-menuHover
|
| | | background-color: rgba(212, 221, 255, 0.56) !important;
|
| | | background-color: var(--menu-hover) !important;
|
| | | }
|
| | | &.is-active {
|
| | | background-color: rgba(212, 221, 255, 0.56) !important;
|
| | | background-color: var(--menu-active-bg) !important;
|
| | | }
|
| | | }
|
| | |
|
| | |
| | | > .el-menu--popup {
|
| | | max-height: 100vh;
|
| | | overflow-y: auto;
|
| | | padding: 8px;
|
| | | border-radius: 18px;
|
| | | border: 1px solid var(--surface-border);
|
| | | box-shadow: var(--shadow-md);
|
| | |
|
| | | &::-webkit-scrollbar-track-piece {
|
| | | background: #d3dce6;
|
| | | background: #dfe7e1;
|
| | | }
|
| | |
|
| | | &::-webkit-scrollbar {
|
| | |
| | | }
|
| | |
|
| | | &::-webkit-scrollbar-thumb {
|
| | | background: #99a9bf;
|
| | | background: #9aa79e;
|
| | | border-radius: 20px;
|
| | | }
|
| | | }
|