| | |
| | | |
| | | .sidebar-container { |
| | | -webkit-transition: width .28s; |
| | | transition: width 0.28s; |
| | | width: $base-sidebar-width !important; |
| | | background-color: $base-menu-background; |
| | | height: calc(100% - 20px); |
| | |
| | | top: 10px; |
| | | bottom: 10px; |
| | | left: 15px; |
| | | box-sizing: border-box; |
| | | z-index: 1001; |
| | | overflow: hidden; |
| | | border-radius: 0.6rem; |
| | | -webkit-box-shadow: 8px 0 15px rgba(0,21,41,.08); |
| | | box-shadow: 8px 0 15px rgba(0,21,41,.08); |
| | | border-radius: 1rem; |
| | | transition: 0.6s; |
| | | border: 2px solid $base-menu-light-background; |
| | | |
| | | &:hover{ |
| | | border: 2px solid #fff; |
| | | -webkit-box-shadow: 8px 3px 15px rgba(15,53,138,.2); |
| | | box-shadow: 8px 3px 15px rgba(15,53,138,.2); |
| | | } |
| | | |
| | | // reset element-ui css |
| | | .horizontal-collapse-transition { |
| | |
| | | display: inline-block !important; |
| | | } |
| | | |
| | | .el-sub-menu .el-menu-item.is-active{ |
| | | background: linear-gradient(#ccc,#fff) !important; |
| | | //background-color: #fff; |
| | | border-top: 1px solid rgba(255,255,255,.2); |
| | | border-bottom: 1px solid rgba(255,255,255,.2); |
| | | width: 94%; |
| | | margin-left: 3%; |
| | | border-radius: 4px; |
| | | } |
| | | |
| | | .el-menu-item.is-active{ |
| | | background: linear-gradient(#ccc,#fff) !important; |
| | | //background-color: #fff; |
| | | border-top: 1px solid rgba(255,255,255,.2); |
| | | border-bottom: 1px solid rgba(255,255,255,.2); |
| | | width: 94%; |
| | | margin-left: 3%; |
| | | border-radius: 4px; |
| | | } |
| | | |
| | | } |
| | | |
| | | |
| | | .el-menu--inline:not(:has(.el-sub-menu)){ |
| | | background-color: #f5f7fa !important; |
| | | box-shadow: 0 3px 5px rgba(0,0,0,.1) inset; |
| | | background-color: #3272ff !important; |
| | | box-shadow: 0 3px 8px rgba(0,0,0,.2) inset, 0 -3px 8px rgba(0,0,0,.2) inset; |
| | | } |
| | | |
| | | // menu hover |
| | |
| | | transition: 0.6s; |
| | | &:hover { |
| | | color: #fff !important; |
| | | background-color: #2563eb !important; |
| | | background-color: rgba(255,255,255,.5) !important; |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | &:hover { |
| | | color: #fff; |
| | | background-color: rgba(37,99,235,.8) !important; |
| | | background-color: rgba(255,255,255,.5) !important; |
| | | width: 96%; |
| | | margin-left: 2%; |
| | | } |
| | | &.is-active { |
| | | color: #fff; |
| | | background-color: #2563eb !important; |
| | | box-shadow: 0 3px 5px rgba(0,0,0,.1) inset; |
| | | color: #2563eb; |
| | | } |
| | | |
| | | .el-sub-menu__icon-arrow{ |