@kdcloudjs/kdesign 1.3.2 → 1.3.3

package/lib/menu/style/index.less

@@ -4,6 +4,9 @@
 
 @menu-prefix-cls: ~'@{kd-prefix}-menu';
 @menuitem-prefix-cls: ~'@{menu-prefix-cls}-item';
+@menu-dark-prefix-cls: ~'@{menu-prefix-cls}-dark';
+@menu-light-prefix-cls: ~'@{menu-prefix-cls}-light';
+@menu-popper-prefix-cls: ~'@{menu-prefix-cls}-popper';
 @submenu-prefix-cls: ~'@{menu-prefix-cls}-submenu';
 
 .@{menu-prefix-cls} {
@@ -27,77 +30,20 @@
     }
   }
 
+  &-collapsed {
+    width: 50px;
+    min-width: auto;
+  }
+
   &-vertical {
     .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover,
     .@{submenu-prefix-cls}-hover {
       .hover();
     }
-
-    .@{submenu-prefix-cls} {
-      padding-right: 0;
-
-      &-sub {
-        background: @menu-sub-color-background;
-
-        .@{menuitem-prefix-cls} {
-          &:hover,
-          &-active {
-            color: @menu-sub-color-active;
-          }
-        }
-
-        &-second,
-        &-third {
-          animation: kdZoomTopLeftIn calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1) forwards;
-          opacity: 1;
-          visibility: visible;
-          transition: opacity, visibility;
-          transition-duration: calc(@menu-motion-duration - 0.1s);
-          transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
-        }
-
-        &-hide {
-          opacity: 0;
-          visibility: hidden;
-          animation: kdZoomTopLeftOut calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1) forwards;
-          transition: opacity, visibility;
-          transition-duration: calc(@menu-motion-duration - 0.1s);
-          transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
-        }
-      }
-    }
-  }
-
-  &-collapsed {
-    width: 50px;
-    min-width: auto;
   }
 
   &-light {
-    .light-default;
-
-    .@{submenu-prefix-cls}-hover,
-    .@{submenu-prefix-cls}-sub {
-      .light-default;
-    }
-
-    .@{submenu-prefix-cls}-title:hover {
-      color: @menu-light-color-hover;
-    }
-
-    .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover {
-      .light-default;
-    }
-
-    .@{menuitem-prefix-cls} {
-      &-active {
-        .light-hover();
-      }
-    }
-
-    .@{menuitem-prefix-cls}:not(.@{menuitem-prefix-cls}-disabled):hover {
-      .light-hover();
-    }
+    .light()
   }
 
   &-light&-vertical {
@@ -108,14 +54,13 @@
 
     .@{menuitem-prefix-cls} {
       &:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover {
-        color: @menu-light-color-hover;
-        background: #fff;
+        .light-hover();
         border: none;
       }
 
       &-active {
         color: @menu-light-color-active;
-        background-color: @menu-light-color-background;
+        background-color: @menu-light-color-background-active;
         border: none !important;
       }
     }
@@ -142,7 +87,7 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
 
   &-hover {
-    color: @menu-sub-color-hover;
+    .hover();
   }
 
   &-sub {
@@ -223,15 +168,102 @@
   }
 }
 
-.@{menu-prefix-cls}-dark {
+.@{menu-dark-prefix-cls} {
   .@{submenu-prefix-cls}-sub {
     background: @menu-sub-inline-color-background;
   }
 
-  .@{submenu-prefix-cls}-sub-second,.@{submenu-prefix-cls}-sub-third  {
+  .@{submenu-prefix-cls}-sub-second, .@{submenu-prefix-cls}-sub-third {
     background: @menu-sub-color-background;
   }
 }
 
+.@{menu-light-prefix-cls} {
+  .@{submenu-prefix-cls}-active,.@{menuitem-prefix-cls}-active {
+    .light-active()
+  }
+}
+
+.@{menu-popper-prefix-cls} {
+  .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover,
+  .@{submenu-prefix-cls}-hover {
+    .hover();
+  }
+
+  &.hidden {
+    opacity: 0;
+    visibility: hidden;
+    display: none;
+    animation: kdZoomTopLeftOut calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1) forwards;
+    transition: opacity, visibility;
+    transition-duration: calc(@menu-motion-duration - 0.1s);
+    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+  }
+
+  .@{submenu-prefix-cls} {
+    padding-right: 0;
+
+    &-sub {
+      background: @menu-sub-inline-color-background;
+
+      .@{menuitem-prefix-cls} {
+        &:hover,
+        &-active {
+          color: @menu-sub-color-active;
+        }
+      }
+
+      &-second,
+      &-third {
+        animation: kdZoomTopLeftIn calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1) forwards;
+        opacity: 1;
+        visibility: visible;
+        transition: opacity, visibility;
+        transition-duration: calc(@menu-motion-duration - 0.1s);
+        transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+      }
+
+      &-hide {
+        opacity: 0;
+        visibility: hidden;
+        animation: kdZoomTopLeftOut calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1) forwards;
+        transition: opacity, visibility;
+        transition-duration: calc(@menu-motion-duration - 0.1s);
+        transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+      }
+    }
+  }
+
+  &.light {
+    .light();
+
+    .@{submenu-prefix-cls}-sub {
+      box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    }
+
+    .@{menuitem-prefix-cls}:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover,
+    .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover {
+      .light-hover();
+      border: none;
+    }
+
+    .@{menuitem-prefix-cls}-hover,.@{submenu-prefix-cls}-hover {
+      .light-hover();
+      border: none;
+    }
+
+    .@{menuitem-prefix-cls}-active,.@{submenu-prefix-cls}-active {
+      .light-active();
+      border: none;
+    }
+  }
+}
+
+
+
+
+
+
 
 

package/lib/menu/style/mixin.less

@@ -1,5 +1,10 @@
 @import './token.less';
 
+@menu-prefix-cls: ~'@{kd-prefix}-menu';
+@menuitem-prefix-cls: ~'@{menu-prefix-cls}-item';
+@menu-vertical-prefix-cls: ~'@{menu-prefix-cls}-vertical';
+@submenu-prefix-cls: ~'@{menu-prefix-cls}-submenu';
+
 // 菜单默认样式
 .menu() {
   position: relative;
@@ -77,10 +82,15 @@
 }
 
 .light-hover {
-  background-color: @menu-light-color-background;
+  background-color: @menu-light-color-background-hover;
   color: @menu-light-color-hover;
 }
 
+.light-active {
+  background-color: @menu-light-color-background-active;
+  color: @menu-light-color-active;
+}
+
 .light-default {
   color: @menu-light-color;
   background: #ffffff;
@@ -95,3 +105,25 @@
     .ellipsis();
   }
 }
+
+
+.light {
+  .light-default();
+
+  .@{submenu-prefix-cls}-hover,
+  .@{submenu-prefix-cls}-sub {
+    .light-default();
+  }
+
+  .@{submenu-prefix-cls}-title:hover {
+    color: @menu-light-color-hover;
+  }
+
+  .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover {
+    .light-hover();
+  }
+
+  .@{menuitem-prefix-cls}:not(.@{menuitem-prefix-cls}-disabled):hover {
+    .light-hover();
+  }
+}

package/lib/menu/style/token.less

@@ -11,10 +11,12 @@
 @menu-sub-inline-color-background: var(~'@{menu-prefix}-sub-inline-color-background', #1f212b);
 @menu-inline-color-active: var(~'@{menu-prefix}-inline-color-active', @color-white);
 @menu-color-background: var(~'@{menu-prefix}-color-background', #343848);
+
 @menu-light-color: var(~'@{menu-prefix}-light-color-text', @color-text-primary);
-@menu-light-color-hover: var(~'@{menu-prefix}-light-color-text-hover', @color-ongoing);
+@menu-light-color-hover: var(~'@{menu-prefix}-light-color-text-hover', @color-text-primary);
 @menu-light-color-active: var(~'@{menu-prefix}-light-color-text-active', @color-theme);
-@menu-light-color-background: var(~'@{menu-prefix}-light-color-background', @color-background-ongoing);
+@menu-light-color-background-hover: var(~'@{menu-prefix}-light-color-background-hover', #f5f5f5);
+@menu-light-color-background-active: var(~'@{menu-prefix}-light-color-background-active', #e3ebff);
 
 // font
 @menu-icon-font-size: var(~'@{menu-prefix}-icon-font-size', @font-size-xx-large);

package/lib/menu/subMenu.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 export interface MenuSubMenuProps extends React.HTMLAttributes<HTMLElement> {
     disabled?: boolean;
     icon?: React.ReactNode;