| | |
|---|
| | | </script>
|
|---|
| | |
|
|---|
| | | <style lang="scss" scoped>
|
|---|
| | | .sidebar-item-wrapper {
|
|---|
| | | :deep(.menu-icon) {
|
|---|
| | | width: 18px;
|
|---|
| | | height: 18px;
|
|---|
| | | margin-right: 12px;
|
|---|
| | | flex-shrink: 0;
|
|---|
| | | transition: all 0.25s ease;
|
|---|
| | | color: var(--sidebar-text);
|
|---|
| | | opacity: 0.8;
|
|---|
| | | }
|
|---|
| | | |
|---|
| | | :deep(.el-menu-item:hover .menu-icon),
|
|---|
| | | :deep(.el-sub-menu__title:hover .menu-icon) {
|
|---|
| | | color: var(--el-color-primary, var(--accent-primary));
|
|---|
| | | opacity: 1;
|
|---|
| | | transform: scale(1.1);
|
|---|
| | | }
|
|---|
| | | .sidebar-item-wrapper { |
|---|
| | | :deep(.menu-icon) { |
|---|
| | | width: 26px; |
|---|
| | | height: 26px; |
|---|
| | | margin-right: 12px; |
|---|
| | | display: inline-flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | flex-shrink: 0; |
|---|
| | | transition: color 0.2s ease; |
|---|
| | | color: var(--sidebar-text); |
|---|
| | | opacity: 0.88; |
|---|
| | | } |
|---|
| | | |
|---|
| | | :deep(.el-menu-item:hover .menu-icon), |
|---|
| | | :deep(.el-sub-menu__title:hover .menu-icon) { |
|---|
| | | color: #ffffff; |
|---|
| | | opacity: 1; |
|---|
| | | } |
|---|
| | |
|
|---|
| | | :deep(.el-menu-item.is-active .menu-icon) {
|
|---|
| | | color: var(--menu-active-text) !important;
|
|---|
| | | opacity: 1;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | :deep(.menu-title) {
|
|---|
| | | font-weight: 450;
|
|---|
| | | transition: all 0.25s ease;
|
|---|
| | | color: var(--sidebar-text);
|
|---|
| | | }
|
|---|
| | | |
|---|
| | | :deep(.el-menu-item:hover .menu-title),
|
|---|
| | | :deep(.el-sub-menu__title:hover .menu-title) {
|
|---|
| | | color: var(--el-color-primary, var(--accent-primary));
|
|---|
| | | }
|
|---|
| | | |
|---|
| | | :deep(.el-menu-item.is-active .menu-title) {
|
|---|
| | | color: var(--menu-active-text) !important;
|
|---|
| | | }
|
|---|
| | | |
|---|
| | | :deep(.nest-menu) {
|
|---|
| | | .menu-icon {
|
|---|
| | | width: 16px;
|
|---|
| | | height: 16px;
|
|---|
| | | margin-right: 10px;
|
|---|
| | | }
|
|---|
| | | |
|---|
| | | .menu-title {
|
|---|
| | | font-size: 13px;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | :deep(.menu-title) { |
|---|
| | | font-weight: 500; |
|---|
| | | transition: color 0.2s ease; |
|---|
| | | color: var(--sidebar-text); |
|---|
| | | opacity: 0.82; |
|---|
| | | } |
|---|
| | | |
|---|
| | | :deep(.el-menu-item:hover .menu-title), |
|---|
| | | :deep(.el-sub-menu__title:hover .menu-title) { |
|---|
| | | color: #ffffff; |
|---|
| | | opacity: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | :deep(.el-menu-item.is-active .menu-title) { |
|---|
| | | color: var(--menu-active-text) !important; |
|---|
| | | opacity: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | :deep(.nest-menu) { |
|---|
| | | .menu-icon { |
|---|
| | | width: 22px; |
|---|
| | | height: 22px; |
|---|
| | | margin-right: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .menu-title { font-size: 13px; } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style>
|
|---|
