ele-admin-plus 1.0.2 → 1.1.0

package/lib/ele-menus/style/index.scss

@@ -1,19 +1,24 @@
 @use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 @use './css-var.scss' as *;
-@use './scrollbar.scss';
 
 @include set-menus-var($ele);
 
 .ele-menu {
   &.el-menu,
   & > .el-menu--popup {
+    $hover-color: eleVar('menu', 'item-hover-color');
     #{elVarName('menu', 'hover-bg-color')}: none;
-    #{elVarName('menu', 'base-level-padding')}: 16px;
-    #{elVarName('menu', 'level-padding')}: 16px;
-    #{elVarName('menu', 'bg-color')}: elVar('bg-color', 'overlay');
+    #{elVarName('menu', 'level-padding')}: eleVar('menu', 'base-level');
+    #{elVarName('menu', 'base-level-padding')}: eleVar('menu', 'base-level');
+    #{elVarName('menu', 'bg-color')}: eleVar('menu', 'bg');
+    #{elVarName('menu', 'text-color')}: eleVar('menu', 'item-color');
+    #{elVarName('menu', 'hover-text-color')}: #{$hover-color};
+    #{elVarName('menu', 'active-color')}: eleVar('menu', 'item-active-color');
+    #{elVarName('menu', 'border-color')}: eleVar('menu', 'border-color');
   }
 
-  // item
+  // item basic
   .el-menu-item,
   .el-sub-menu__title,
   .el-menu-item-group__title {
@@ -21,9 +26,9 @@
     position: relative;
 
     .el-icon:not(.el-sub-menu__icon-arrow) {
-      width: auto !important;
-      font-size: eleVar('menu', 'icon-size');
-      margin: 0 eleVar('menu', 'icon-margin') 0 0;
+      width: auto;
+      font-size: eleVar('menu', 'icon-font-size');
+      margin: eleVar('menu', 'icon-margin');
     }
 
     & > span {
@@ -40,10 +45,9 @@
     width: auto;
     position: static;
     font-size: eleVar('menu', 'arrow-size');
-    margin: 0 0 0 eleVar('menu', 'icon-margin');
 
     & > svg.ele-arrow-down path {
-      transition: d 0.2s;
+      transition: d $ele-transition;
     }
   }
 
@@ -57,34 +61,51 @@
   .el-menu-item.is-disabled,
   .el-sub-menu.is-disabled .el-menu-item,
   .el-sub-menu.is-disabled .el-sub-menu__title {
-    opacity: 0.46;
+    opacity: eleVar('menu', 'disabled-opacity');
   }
 
   // 水平菜单
-  &.el-menu--horizontal:not(.el-menu--popup-container) {
-    .el-sub-menu__title:hover {
-      background: none;
-    }
+  &.el-menu--horizontal {
+    padding: eleVar('menu-horizontal', 'padding');
 
     & > .el-menu-item,
     & > .el-sub-menu > .el-sub-menu__title {
-      height: elVar('menu', 'item-height');
+      height: eleVar('menu-horizontal', 'height');
+      line-height: eleVar('menu-horizontal', 'height');
       padding: 0 eleVar('menu-horizontal', 'item-padding');
       margin: 0 eleVar('menu-horizontal', 'item-margin');
-      border-bottom: none;
+      border-radius: eleVar('menu-horizontal', 'item-radius');
+      border: none;
 
       &::after {
         content: '';
-        height: 2px;
-        width: calc(100% - #{eleVar('menu-horizontal', 'item-padding')} * 2);
-        transition: background-color elVar('transition-duration');
+        height: eleVar('menu-horizontal', 'line-size');
+        transition: background-color $ele-transition;
         background: transparent;
+        pointer-events: none;
         position: absolute;
         bottom: 0;
-        left: eleVar('menu-horizontal', 'item-padding');
+        left: eleVar('menu-horizontal', 'line-margin');
+        right: eleVar('menu-horizontal', 'line-margin');
       }
     }
 
+    & > .el-menu-item:not(.is-disabled),
+    & > .el-sub-menu:not(.is-disabled) > .el-sub-menu__title {
+      &:hover {
+        background: eleVar('menu-horizontal', 'hover-bg');
+      }
+
+      &:active {
+        background: eleVar('menu-horizontal', 'active-bg');
+      }
+    }
+
+    & > .el-menu-item:not(.is-disabled).is-active,
+    & > .el-sub-menu:not(.is-disabled).is-active > .el-sub-menu__title {
+      background: eleVar('menu-horizontal', 'active-bg');
+    }
+
     & > .el-menu-item.is-active::after,
     & > .el-sub-menu.is-active > .el-sub-menu__title::after,
     & > .el-menu-item:not(.is-disabled):hover::after,
@@ -92,12 +113,39 @@
       background: elVar('menu', 'active-color');
     }
 
-    & > .el-sub-menu .el-sub-menu__title .el-sub-menu__icon-arrow {
-      margin-right: -2px;
+    & > .el-sub-menu > .el-sub-menu__title .el-sub-menu__icon-arrow {
+      margin: eleVar('menu-horizontal', 'arrow-margin');
+    }
+
+    &.el-menu--popup-container > .el-menu--popup {
+      margin: eleVar('menu-horizontal', 'popup-margin');
+
+      & > .el-sub-menu .el-menu--popup {
+        margin-top: 0;
+        margin-bottom: 0;
+        margin-left: eleVar('menu', 'item-padding');
+        margin-right: eleVar('menu', 'item-padding');
+      }
+    }
+
+    &:not(.el-menu--popup-container) {
+      &::before,
+      &::after {
+        content: '';
+        display: block;
+        padding-right: 0.02px;
+      }
+    }
+
+    .el-menu-item.ele-menu-overflow,
+    .el-sub-menu.ele-menu-overflow {
+      position: absolute;
+      visibility: hidden;
+      pointer-events: none;
     }
   }
 
-  // 垂直菜单
+  // 垂直菜单子级
   &.el-menu--vertical .el-sub-menu > .el-menu {
     background: eleVar('menu', 'child-bg');
     box-sizing: border-box;
@@ -106,10 +154,15 @@
   // 垂直菜单和气泡菜单
   &.el-menu--vertical,
   & > .el-menu--popup {
+    padding: eleVar('menu', 'padding');
+
     .el-menu-item,
     .el-sub-menu__title,
     .el-menu-item-group__title {
-      margin: calc(#{eleVar('menu-item', 'margin')} / 2) 0;
+      margin-left: eleVar('menu', 'item-padding');
+      margin-right: eleVar('menu', 'item-padding');
+      margin-top: calc(#{eleVar('menu', 'item-margin')} / 2);
+      margin-bottom: calc(#{eleVar('menu', 'item-margin')} / 2);
 
       & > span {
         flex: 1;
@@ -119,18 +172,21 @@
     .el-menu-item,
     .el-sub-menu__title {
       min-width: auto;
-      height: eleVar('menu-item', 'height');
-      line-height: eleVar('menu-item', 'line-height');
+      height: eleVar('menu', 'item-height');
+      line-height: eleVar('menu', 'item-height');
+      border-radius: eleVar('menu', 'item-radius');
+      background: none;
     }
 
     .el-menu-item:not(.is-disabled),
     .el-sub-menu:not(.is-disabled) > .el-sub-menu__title {
       &:hover {
         color: elVar('menu', 'hover-text-color');
+        background: eleVar('menu', 'item-hover-bg');
       }
 
       &:active {
-        background: eleVar('menu-item', 'active-bg');
+        background: eleVar('menu', 'item-active-bg');
       }
     }
 
@@ -141,15 +197,17 @@
         top: 0;
         right: 0;
         bottom: 0;
-        width: eleVar('menu-item', 'active-line');
-        background: elVar('menu', 'active-color');
+        pointer-events: none;
+        width: eleVar('menu', 'item-active-line');
+        background: elVar('color-primary');
         transition: all 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
         transform: scaleY(0.0001);
         opacity: 0;
       }
 
-      &.is-active {
-        background: eleVar('menu-item', 'active-bg');
+      &:not(.is-disabled).is-active {
+        color: elVar('menu', 'active-color');
+        background: eleVar('menu', 'item-active-bg');
 
         &::after {
           opacity: 1;
@@ -162,22 +220,22 @@
     .el-sub-menu {
       padding-bottom: 0.02px;
 
-      &.is-active > .el-sub-menu__title {
+      &:not(.is-disabled).is-active > .el-sub-menu__title {
         color: elVar('menu', 'active-color');
       }
     }
 
     .el-sub-menu__title .el-sub-menu__icon-arrow {
-      margin-right: -4px;
+      margin: eleVar('menu', 'arrow-margin');
     }
   }
 
+  &.el-menu--vertical:not(.el-menu--popup-container),
+  &.el-menu--vertical .el-menu,
   & > .el-menu--popup,
   & > .el-menu--popup .el-menu,
-  &.el-menu--vertical .el-menu,
-  &.el-menu--vertical:not(.el-menu--popup-container),
-  & > .el-menu--popup .el-menu-item-group > ul,
-  &.el-menu--vertical .el-menu-item-group > ul {
+  &.el-menu--vertical .el-menu-item-group > ul,
+  & > .el-menu--popup .el-menu-item-group > ul {
     &::before,
     &::after {
       content: '';
@@ -186,22 +244,27 @@
     }
 
     & > .el-menu-item:not(:last-child) {
-      margin-bottom: eleVar('menu-item', 'margin');
+      margin-bottom: eleVar('menu', 'item-margin');
     }
   }
 
   // 气泡菜单
-  & > .el-menu--popup {
-    padding: 0;
-    max-height: calc(100vh - 10px);
+  & > .el-menu--popup-container > .el-menu--popup {
     min-width: eleVar('menu-popup', 'min-width');
+    max-width: eleVar('menu-popup', 'max-width');
+    max-height: eleVar('menu-popup', 'max-height');
+    margin-left: eleVar('menu', 'item-padding');
+    margin-right: eleVar('menu', 'item-padding');
+    background: eleVar('menu-popup', 'bg');
     box-shadow: eleVar('menu-popup', 'shadow');
+    border-radius: eleVar('menu-popup', 'radius');
     overflow-y: auto;
-    overflow-y: overlay;
 
     .el-menu-item,
     .el-sub-menu__title {
       padding: 0 eleVar('menu-popup', 'item-padding');
+      border-radius: eleVar('menu-popup', 'item-radius');
+      background: none;
     }
 
     .el-menu-item::after {
@@ -216,9 +279,11 @@
   &.el-popper,
   &.el-popper.is-light,
   &.el-menu--popup-container {
-    background: none;
     border: none;
+    background: none;
+    box-shadow: none;
     padding: 0;
+    margin: 0;
   }
 
   // 分组菜单
@@ -226,8 +291,8 @@
     display: flex;
     align-items: center;
     color: eleVar('menu-group', 'color');
-    font-size: eleVar('menu-group', 'size');
-    font-weight: eleVar('menu-group', 'weight');
+    font-size: eleVar('menu-group', 'font-size');
+    font-weight: eleVar('menu-group', 'font-weight');
     padding-top: eleVar('menu-group', 'padding-top');
     padding-bottom: eleVar('menu-group', 'padding-bottom');
     padding-right: eleVar('menu-group', 'padding-right');
@@ -235,7 +300,7 @@
     line-height: 1;
 
     .el-icon:not(.el-sub-menu__icon-arrow) {
-      font-size: eleVar('menu-group', 'icon-size');
+      font-size: eleVar('menu-group', 'icon-font-size');
     }
   }
 
@@ -245,10 +310,10 @@
   .el-menu-item-group__title .el-badge {
     order: 3;
     flex-shrink: 0;
+    font-size: 0;
     line-height: 1;
     font-weight: normal;
-    margin-left: eleVar('menu', 'icon-margin');
-    font-size: 0;
+    margin: eleVar('menu', 'badge-margin');
 
     .el-badge__content {
       box-sizing: border-box;
@@ -294,36 +359,25 @@
       flex: initial;
     }
 
-    & > .el-menu-item:not(.is-disabled):hover,
-    & > .el-sub-menu:not(.is-disabled) > .el-sub-menu__title:hover,
-    &.el-menu > .el-menu-item:not(.is-active):active,
-    &.el-menu > .el-sub-menu:not(.is-disabled) > .el-sub-menu__title:active,
-    & > .el-sub-menu.is-active > .el-sub-menu__title {
-      background: eleVar('menu-item', 'active-bg');
+    &.el-menu--vertical,
+    &.el-menu--vertical > .el-menu-item-group > ul {
+      & > .el-sub-menu.is-active > .el-sub-menu__title {
+        background: eleVar('menu', 'item-active-bg');
+      }
     }
 
-    & > .el-menu-item-group {
-      & > .el-menu-item-group__title {
-        padding-left: 0;
-        padding-right: 0;
-        justify-content: center;
-        text-align: center;
-
-        & > span {
-          flex: initial;
-        }
+    & > .el-menu-item-group > .el-menu-item-group__title {
+      padding-left: 0;
+      padding-right: 0;
+      justify-content: center;
+      text-align: center;
 
-        .el-icon:not(.is-collapse-show) {
-          display: none;
-        }
+      & > span {
+        flex: initial;
       }
 
-      & > ul > .el-menu-item:not(.is-disabled):hover,
-      & > ul > .el-sub-menu:not(.is-disabled) > .el-sub-menu__title:hover,
-      & > ul > .el-menu-item:not(.is-active):active,
-      & > ul > .el-sub-menu:not(.is-disabled) > .el-sub-menu__title:active,
-      & > ul > .el-sub-menu.is-active > .el-sub-menu__title {
-        background: eleVar('menu-item', 'active-bg');
+      .el-icon:not(.is-collapse-show) {
+        display: none;
       }
     }
 
@@ -334,7 +388,8 @@
       .el-badge {
         position: absolute;
         top: 8px;
-        right: 14px;
+        right: 10px;
+        margin: 0;
       }
     }
 
@@ -355,7 +410,7 @@
     }
 
     & > .el-menu-item-group > .el-menu-item-group__title .el-badge {
-      margin-left: 4px;
+      margin-left: 2px;
     }
   }
 
@@ -367,13 +422,13 @@
       &.el-sub-menu > .el-sub-menu__title {
         .el-icon:not(.el-sub-menu__icon-arrow) {
           color: eleVar('menu-colorful', 'icon-color');
-          background: eleVar('menu-colorful', 'color-1');
-          width: eleVar('menu-colorful', 'icon-width') !important;
-          height: eleVar('menu-colorful', 'icon-width') !important;
-          line-height: calc(#{eleVar('menu-colorful', 'icon-width')} + 4px);
-          font-size: eleVar('menu-colorful', 'icon-size');
+          background: eleVar('menu-colorful', 'bg-1');
+          width: eleVar('menu-colorful', 'icon-size');
+          height: eleVar('menu-colorful', 'icon-size');
+          line-height: calc(#{eleVar('menu-colorful', 'icon-size')} + 4px);
+          font-size: eleVar('menu-colorful', 'icon-font-size');
+          border-radius: eleVar('menu-colorful', 'icon-radius');
           vertical-align: -0.05em;
-          border-radius: 50%;
           text-align: center;
         }
       }
@@ -382,7 +437,7 @@
         &.el-menu-item,
         &.el-sub-menu > .el-sub-menu__title {
           .el-icon:not(.el-sub-menu__icon-arrow) {
-            background: eleVar('menu-colorful', 'color-2');
+            background: eleVar('menu-colorful', 'bg-2');
           }
         }
       }
@@ -391,7 +446,7 @@
         &.el-menu-item,
         &.el-sub-menu > .el-sub-menu__title {
           .el-icon:not(.el-sub-menu__icon-arrow) {
-            background: eleVar('menu-colorful', 'color-3');
+            background: eleVar('menu-colorful', 'bg-3');
           }
         }
       }
@@ -400,7 +455,7 @@
         &.el-menu-item,
         &.el-sub-menu > .el-sub-menu__title {
           .el-icon:not(.el-sub-menu__icon-arrow) {
-            background: eleVar('menu-colorful', 'color-4');
+            background: eleVar('menu-colorful', 'bg-4');
           }
         }
       }
@@ -409,7 +464,7 @@
         &.el-menu-item,
         &.el-sub-menu > .el-sub-menu__title {
           .el-icon:not(.el-sub-menu__icon-arrow) {
-            background: eleVar('menu-colorful', 'color-5');
+            background: eleVar('menu-colorful', 'bg-5');
           }
         }
       }
@@ -418,7 +473,7 @@
         &.el-menu-item,
         &.el-sub-menu > .el-sub-menu__title {
           .el-icon:not(.el-sub-menu__icon-arrow) {
-            background: eleVar('menu-colorful', 'color-6');
+            background: eleVar('menu-colorful', 'bg-6');
           }
         }
       }
@@ -427,7 +482,7 @@
         &.el-menu-item,
         &.el-sub-menu > .el-sub-menu__title {
           .el-icon:not(.el-sub-menu__icon-arrow) {
-            background: eleVar('menu-colorful', 'color-7');
+            background: eleVar('menu-colorful', 'bg-7');
           }
         }
       }
@@ -436,7 +491,7 @@
         &.el-menu-item,
         &.el-sub-menu > .el-sub-menu__title {
           .el-icon:not(.el-sub-menu__icon-arrow) {
-            background: eleVar('menu-colorful', 'color-8');
+            background: eleVar('menu-colorful', 'bg-8');
           }
         }
       }
@@ -459,7 +514,7 @@
         height: eleVar('menu-colorful', 'dot-size');
         margin: eleVar('menu-colorful', 'dot-margin');
         background: eleVar('menu-colorful', 'dot-color');
-        transition: background-color 0.3s;
+        transition: background-color $ele-transition;
         border-radius: 50%;
       }
 
@@ -482,37 +537,152 @@
 
     &.el-menu,
     & > .el-menu--popup {
-      $color: eleVar('menu-dark', 'active-color');
+      $hover-color: eleVar('menu-dark', 'hover-color');
+      $active-color: eleVar('menu-dark', 'active-color');
       #{elVarName('menu', 'bg-color')}: eleVar('menu-dark', 'bg');
       #{elVarName('menu', 'text-color')}: eleVar('menu-dark', 'color');
-      #{elVarName('menu', 'hover-text-color')}: #{$color};
-      #{elVarName('menu', 'active-color')}: #{$color};
-      #{eleVarName('menu-item', 'active-bg')}: eleVar('menu-dark', 'active-bg');
-      #{eleVarName('menu', 'child-bg')}: eleVar('menu-dark', 'child-bg');
+      #{elVarName('menu', 'hover-text-color')}: #{$hover-color};
+      #{elVarName('menu', 'active-color')}: #{$active-color};
     }
 
-    .el-menu-item:not(.is-active):active,
-    .el-sub-menu:not(.is-disabled) > .el-sub-menu__title:active {
-      background: none;
+    // 水平菜单
+    &.el-menu--horizontal {
+      & > .el-menu-item:not(.is-disabled),
+      & > .el-sub-menu:not(.is-disabled) > .el-sub-menu__title {
+        &:hover {
+          background: eleVar('menu-horizontal', 'dark-hover-bg');
+        }
+
+        &:active {
+          background: eleVar('menu-horizontal', 'dark-active-bg');
+        }
+      }
+
+      & > .el-menu-item:not(.is-disabled).is-active,
+      & > .el-sub-menu:not(.is-disabled).is-active > .el-sub-menu__title {
+        background: eleVar('menu-horizontal', 'dark-active-bg');
+      }
+    }
+
+    // 垂直菜单
+    &.el-menu--vertical .el-sub-menu > .el-menu {
+      background: eleVar('menu-dark', 'child-bg');
     }
 
     &.el-menu--vertical .el-menu-item::after {
       display: none;
     }
 
+    // 垂直菜单和气泡菜单
+    &.el-menu--vertical,
+    & > .el-menu--popup {
+      .el-menu-item:not(.is-disabled),
+      .el-sub-menu:not(.is-disabled) > .el-sub-menu__title {
+        &:hover {
+          background: eleVar('menu-dark', 'hover-bg');
+        }
+
+        &:active {
+          background: eleVar('menu-dark', 'active-bg');
+        }
+      }
+
+      .el-menu-item:not(.is-disabled).is-active {
+        background: eleVar('menu-dark', 'active-bg');
+      }
+    }
+
+    // 折叠
+    &.el-menu--collapse {
+      &.el-menu--vertical,
+      &.el-menu--vertical > .el-menu-item-group > ul {
+        & > .el-sub-menu.is-active > .el-sub-menu__title {
+          background: eleVar('menu-dark', 'active-bg');
+        }
+      }
+    }
+
+    // 分组菜单
     .el-menu-item-group__title {
       color: eleVar('menu-group', 'dark-color');
     }
 
-    & > .el-menu--popup {
+    // 气泡菜单
+    & > .el-menu--popup-container > .el-menu--popup {
+      background: eleVar('menu-popup', 'dark-bg');
       box-shadow: eleVar('menu-popup', 'dark-shadow');
     }
 
+    // 彩色图标
     &.ele-menu-colorful {
-      $color: eleVar('menu-colorful', 'dark-dot-color');
-      $hover-color: eleVar('menu-colorful', 'dark-dot-hover-color');
-      #{eleVarName('menu-colorful', 'dot-color')}: #{$color};
-      #{eleVarName('menu-colorful', 'dot-hover-color')}: #{$hover-color};
+      &.el-menu > li.el-sub-menu > .el-menu,
+      &.el-menu > li.el-menu-item-group > ul > li.el-sub-menu > .el-menu,
+      & > .el-menu.el-menu--popup {
+        .el-menu-item::before,
+        .el-sub-menu__title::before {
+          background: eleVar('menu-colorful', 'dark-dot-color');
+        }
+
+        .el-menu-item:not(.is-disabled):hover::before,
+        .el-menu-item.is-active::before,
+        .el-sub-menu:not(.is-disabled) .el-sub-menu__title:hover::before,
+        .el-sub-menu.is-active .el-sub-menu__title::before {
+          background: eleVar('menu-colorful', 'dark-dot-hover-color');
+        }
+      }
+    }
+  }
+
+  .ele-sub-menu-ellipsis > .el-sub-menu__title {
+    .el-icon:not(.el-sub-menu__icon-arrow) {
+      margin: 0;
+
+      & > svg {
+        transform: scale(1.25);
+      }
+    }
+
+    .el-sub-menu__icon-arrow {
+      display: none;
+    }
+  }
+}
+
+// 滚动条
+.ele-menu > .el-menu--popup-container > .el-menu--popup {
+  scrollbar-width: thin;
+  scrollbar-color: eleVar('menu-thumb', 'color') transparent;
+
+  &::-webkit-scrollbar {
+    width: eleVar('menu-thumb', 'size');
+    height: eleVar('menu-thumb', 'size');
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: eleVar('menu-thumb', 'radius');
+    border: eleVar('menu-thumb', 'padding') solid transparent;
+    background-color: eleVar('menu-thumb', 'color');
+    background-clip: padding-box;
+
+    &:hover {
+      background-color: eleVar('menu-thumb', 'hover-color');
+    }
+  }
+
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+}
+
+.ele-menu.ele-menu-dark > .el-menu--popup-container > .el-menu--popup {
+  scrollbar-color: eleVar('menu-dark-thumb', 'color') transparent;
+
+  &::-webkit-scrollbar-thumb {
+    background-color: eleVar('menu-dark-thumb', 'color');
+
+    &:hover {
+      background-color: eleVar('menu-dark-thumb', 'hover-color');
     }
   }
 }
@@ -535,14 +705,22 @@
 }
 
 // 兼容横向菜单溢出的菜单
+/* .el-popper > .el-menu--popup-container {
+  display: block;
+  border: none;
+}
+
 .el-menu--popup-container > .el-menu--popup {
+  background: none;
+  box-shadow: none;
+  border-radius: 0;
   max-height: calc(100vh - 10px);
   overflow-y: auto;
   overflow-y: overlay;
-
-  & > .el-menu-item > .el-badge,
-  & > .el-sub-menu > .el-sub-menu__title > .el-badge {
-    order: 3;
-    line-height: 1;
-  }
 }
+
+.el-menu--popup > .el-menu-item > .el-badge,
+.el-menu--popup > .el-sub-menu > .el-sub-menu__title > .el-badge {
+  order: 3;
+  line-height: 1;
+} */