From 251d2411f235e23209d57173857e05b637729ce8 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: 星期日, 02 四月 2023 01:01:56 +0800
Subject: [PATCH] refactor ts
---
src/assets/styles/sidebar.scss | 386 +++++++++++++++++++++++++++---------------------------
1 files changed, 192 insertions(+), 194 deletions(-)
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index 0808812..abe6f3a 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -1,238 +1,236 @@
#app {
+ .main-container {
+ min-height: 100%;
+ transition: margin-left 0.28s;
+ margin-left: $base-sidebar-width;
+ position: relative;
+ }
- .main-container {
- min-height: 100%;
- transition: margin-left .28s;
- margin-left: $base-sidebar-width;
- position: relative;
- }
+ .sidebarHide {
+ margin-left: 0 !important;
+ }
- .sidebarHide {
- margin-left: 0!important;
- }
+ .sidebar-container {
+ -webkit-transition: width 0.28s;
+ transition: width 0.28s;
+ width: $base-sidebar-width !important;
+ background-color: $base-menu-background;
+ height: 100%;
+ position: fixed;
+ font-size: 0px;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1001;
+ overflow: hidden;
+ -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+ box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
- .sidebar-container {
- -webkit-transition: width .28s;
- transition: width 0.28s;
- width: $base-sidebar-width !important;
- background-color: $base-menu-background;
- height: 100%;
- position: fixed;
- font-size: 0px;
- top: 0;
- bottom: 0;
- left: 0;
- z-index: 1001;
- overflow: hidden;
- -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
- box-shadow: 2px 0 6px rgba(0,21,41,.35);
+ // reset element-ui css
+ .horizontal-collapse-transition {
+ transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+ }
- // reset element-ui css
- .horizontal-collapse-transition {
- transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
- }
+ .scrollbar-wrapper {
+ overflow-x: hidden !important;
+ }
- .scrollbar-wrapper {
- overflow-x: hidden !important;
- }
+ .el-scrollbar__bar.is-vertical {
+ right: 0px;
+ }
- .el-scrollbar__bar.is-vertical {
- right: 0px;
- }
+ .el-scrollbar {
+ height: 100%;
+ }
- .el-scrollbar {
- height: 100%;
- }
+ &.has-logo {
+ .el-scrollbar {
+ height: calc(100% - 50px);
+ }
+ }
- &.has-logo {
- .el-scrollbar {
- height: calc(100% - 50px);
- }
- }
+ .is-horizontal {
+ display: none;
+ }
- .is-horizontal {
- display: none;
- }
+ a {
+ display: inline-block;
+ width: 100%;
+ overflow: hidden;
+ }
- a {
- display: inline-block;
- width: 100%;
- overflow: hidden;
- }
+ .svg-icon {
+ margin-right: 16px;
+ }
- .svg-icon {
- margin-right: 16px;
- }
+ .el-menu {
+ border: none;
+ height: 100%;
+ width: 100% !important;
+ }
- .el-menu {
- border: none;
- height: 100%;
- width: 100% !important;
- }
+ .el-menu-item,
+ .menu-title {
+ overflow: hidden !important;
+ text-overflow: ellipsis !important;
+ white-space: nowrap !important;
+ }
- .el-menu-item, .menu-title {
- overflow: hidden !important;
- text-overflow: ellipsis !important;
- white-space: nowrap !important;
- }
+ .el-menu-item .el-menu-tooltip__trigger {
+ display: inline-block !important;
+ }
- .el-menu-item .el-menu-tooltip__trigger {
- display: inline-block !important;
- }
+ // menu hover
+ .sub-menu-title-noDropdown,
+ .el-sub-menu__title {
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.06) !important;
+ }
+ }
- // menu hover
- .sub-menu-title-noDropdown,
- .el-sub-menu__title {
- &:hover {
- background-color: rgba(0, 0, 0, 0.06) !important;
- }
- }
+ & .theme-dark .is-active > .el-sub-menu__title {
+ color: $base-menu-color-active !important;
+ }
- & .theme-dark .is-active > .el-sub-menu__title {
- color: $base-menu-color-active !important;
- }
+ & .nest-menu .el-sub-menu > .el-sub-menu__title,
+ & .el-sub-menu .el-menu-item {
+ min-width: $base-sidebar-width !important;
- & .nest-menu .el-sub-menu>.el-sub-menu__title,
- & .el-sub-menu .el-menu-item {
- min-width: $base-sidebar-width !important;
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.06) !important;
+ }
+ }
- &:hover {
- background-color: rgba(0, 0, 0, 0.06) !important;
- }
- }
+ & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
+ & .theme-dark .el-sub-menu .el-menu-item {
+ background-color: $base-sub-menu-background !important;
- & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
- & .theme-dark .el-sub-menu .el-menu-item {
- background-color: $base-sub-menu-background !important;
+ &:hover {
+ background-color: $base-sub-menu-hover !important;
+ }
+ }
+ }
- &:hover {
- background-color: $base-sub-menu-hover !important;
- }
- }
- }
+ .hideSidebar {
+ .sidebar-container {
+ width: 54px !important;
+ }
- .hideSidebar {
- .sidebar-container {
- width: 54px !important;
- }
+ .main-container {
+ margin-left: 54px;
+ }
- .main-container {
- margin-left: 54px;
- }
+ .sub-menu-title-noDropdown {
+ padding: 0 !important;
+ position: relative;
- .sub-menu-title-noDropdown {
- padding: 0 !important;
- position: relative;
+ .el-tooltip {
+ padding: 0 !important;
- .el-tooltip {
- padding: 0 !important;
+ .svg-icon {
+ margin-left: 20px;
+ }
+ }
+ }
- .svg-icon {
- margin-left: 20px;
- }
- }
- }
+ .el-sub-menu {
+ overflow: hidden;
- .el-sub-menu {
- overflow: hidden;
+ & > .el-sub-menu__title {
+ padding: 0 !important;
- &>.el-sub-menu__title {
- padding: 0 !important;
+ .svg-icon {
+ margin-left: 20px;
+ }
+ }
+ }
- .svg-icon {
- margin-left: 20px;
- }
+ .el-menu--collapse {
+ .el-sub-menu {
+ & > .el-sub-menu__title {
+ & > span {
+ height: 0;
+ width: 0;
+ overflow: hidden;
+ visibility: hidden;
+ display: inline-block;
+ }
+ & > i {
+ height: 0;
+ width: 0;
+ overflow: hidden;
+ visibility: hidden;
+ display: inline-block;
+ }
+ }
+ }
+ }
+ }
- }
- }
+ .el-menu--collapse .el-menu .el-sub-menu {
+ min-width: $base-sidebar-width !important;
+ }
- .el-menu--collapse {
- .el-sub-menu {
- &>.el-sub-menu__title {
- &>span {
- height: 0;
- width: 0;
- overflow: hidden;
- visibility: hidden;
- display: inline-block;
- }
- &>i {
- height: 0;
- width: 0;
- overflow: hidden;
- visibility: hidden;
- display: inline-block;
- }
- }
- }
- }
- }
+ // mobile responsive
+ .mobile {
+ .main-container {
+ margin-left: 0px;
+ }
- .el-menu--collapse .el-menu .el-sub-menu {
- min-width: $base-sidebar-width !important;
- }
+ .sidebar-container {
+ transition: transform 0.28s;
+ width: $base-sidebar-width !important;
+ }
- // mobile responsive
- .mobile {
- .main-container {
- margin-left: 0px;
- }
+ &.hideSidebar {
+ .sidebar-container {
+ pointer-events: none;
+ transition-duration: 0.3s;
+ transform: translate3d(-$base-sidebar-width, 0, 0);
+ }
+ }
+ }
- .sidebar-container {
- transition: transform .28s;
- width: $base-sidebar-width !important;
- }
-
- &.hideSidebar {
- .sidebar-container {
- pointer-events: none;
- transition-duration: 0.3s;
- transform: translate3d(-$base-sidebar-width, 0, 0);
- }
- }
- }
-
- .withoutAnimation {
-
- .main-container,
- .sidebar-container {
- transition: none;
- }
- }
+ .withoutAnimation {
+ .main-container,
+ .sidebar-container {
+ transition: none;
+ }
+ }
}
// when menu collapsed
.el-menu--vertical {
- &>.el-menu {
- .svg-icon {
- margin-right: 16px;
- }
- }
+ & > .el-menu {
+ .svg-icon {
+ margin-right: 16px;
+ }
+ }
- .nest-menu .el-sub-menu>.el-sub-menu__title,
- .el-menu-item {
- &:hover {
- // you can use $sub-menuHover
- background-color: rgba(0, 0, 0, 0.06) !important;
- }
- }
+ .nest-menu .el-sub-menu > .el-sub-menu__title,
+ .el-menu-item {
+ &:hover {
+ // you can use $sub-menuHover
+ background-color: rgba(0, 0, 0, 0.06) !important;
+ }
+ }
- // the scroll bar appears when the sub-menu is too long
- >.el-menu--popup {
- max-height: 100vh;
- overflow-y: auto;
+ // the scroll bar appears when the sub-menu is too long
+ > .el-menu--popup {
+ max-height: 100vh;
+ overflow-y: auto;
- &::-webkit-scrollbar-track-piece {
- background: #d3dce6;
- }
+ &::-webkit-scrollbar-track-piece {
+ background: #d3dce6;
+ }
- &::-webkit-scrollbar {
- width: 6px;
- }
+ &::-webkit-scrollbar {
+ width: 6px;
+ }
- &::-webkit-scrollbar-thumb {
- background: #99a9bf;
- border-radius: 20px;
- }
- }
+ &::-webkit-scrollbar-thumb {
+ background: #99a9bf;
+ border-radius: 20px;
+ }
+ }
}
--
Gitblit v1.9.3