@kdcloudjs/kdesign 1.3.8 → 1.4.1

package/dist/kdesign.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @kdcloudjs/kdesign v1.3.7
+ *   @kdcloudjs/kdesign v1.4.0
  * 
  *   Copyright 2020-present, Kingdee, Inc.
  *   All rights reserved.
@@ -9913,41 +9913,66 @@ textarea {
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
-.hover {
+.menu-dark-hover {
   background-color: var(--kd-c-menu-sub-color-background, #121319);
   color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
 }
-.light-hover {
-  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
+.menu-dark-active {
+  background-color: var(--kd-c-menu-sub-color-background, #121319);
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
 }
-.light-active {
-  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
-  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
+.menu-dark-active-inline-title {
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+  background: var(--kd-c-menu-color-background, #343848);
+  border: none;
 }
-.light-default {
+.menu-light-base {
   color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
   background: #ffffff;
 }
-.light {
-  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
-  background: #ffffff;
+.menu-light-base .kd-menu-item-disabled,
+.menu-light-base .kd-menu-submenu-disabled {
+  background-color: #fff;
 }
-.light .kd-menu-submenu-hover,
-.light .kd-menu-submenu-sub {
+.menu-light-base .kd-menu-submenu-sub {
   color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
-  background: #ffffff;
+  background: #fafafa;
 }
-.light .kd-menu-submenu-title:hover {
+.menu-light-base .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
+  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
   color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
+  border: none;
 }
-.light .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover {
+.menu-light-base .kd-menu-item-hover,
+.menu-light-base .kd-menu-submenu-hover {
   background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
   color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
+  border: none;
 }
-.light .kd-menu-item:not(.kd-menu-item-disabled):hover {
+.menu-light-base .kd-menu-item-active,
+.menu-light-base .kd-menu-submenu-active {
+  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
+  border: none;
+}
+.menu-light-default {
+  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
+  background: #ffffff;
+}
+.menu-light-hover {
   background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
   color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
+  border: none;
+}
+.menu-light-active {
+  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
+  border: none;
+}
+.menu-light-active-inline-title {
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
+  background: #ffffff;
+  border: none;
 }
 .kd-menu {
   position: relative;
@@ -9962,58 +9987,13 @@ textarea {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.kd-menu-inline .kd-menu-item-active {
-  color: var(--kd-c-menu-inline-color-active, var(--kd-g-color-white, #fff));
-}
 .kd-menu-inline .kd-menu-submenu {
   padding-right: 0;
 }
-.kd-menu-inline .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover {
-  color: var(--kd-c-menu-inline-color-active, var(--kd-g-color-white, #fff));
-}
 .kd-menu-collapsed {
   width: 50px;
   min-width: auto;
 }
-.kd-menu-vertical .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover,
-.kd-menu-vertical .kd-menu-submenu-hover {
-  background-color: var(--kd-c-menu-sub-color-background, #121319);
-  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
-}
-.kd-menu-light {
-  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
-  background: #ffffff;
-}
-.kd-menu-light .kd-menu-submenu-hover,
-.kd-menu-light .kd-menu-submenu-sub {
-  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
-  background: #ffffff;
-}
-.kd-menu-light .kd-menu-submenu-title:hover {
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
-}
-.kd-menu-light .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover {
-  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
-}
-.kd-menu-light .kd-menu-item:not(.kd-menu-item-disabled):hover {
-  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
-}
-.kd-menu-light.kd-menu-vertical .kd-menu-submenu-sub {
-  -webkit-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);
-          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);
-}
-.kd-menu-light.kd-menu-vertical .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
-  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
-  border: none;
-}
-.kd-menu-light.kd-menu-vertical .kd-menu-item-active {
-  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
-  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
-  border: none !important;
-}
 .kd-menu-item {
   position: relative;
   cursor: pointer;
@@ -10040,8 +10020,6 @@ textarea {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-}
-.kd-menu-item-title > span {
   opacity: 1;
   -webkit-transition: opacity calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
   transition: opacity calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
@@ -10068,10 +10046,7 @@ textarea {
 .kd-menu-item-disabled {
   cursor: not-allowed;
   color: var(--kd-c-menu-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
-}
-.kd-menu-item-active {
-  background-color: var(--kd-c-menu-sub-color-background, #121319);
-  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+  background-color: var(--kd-c-menu-color-background, #343848);
 }
 .kd-menu-item-arrow {
   margin-left: auto;
@@ -10093,10 +10068,6 @@ textarea {
   transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
   transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }
-.kd-menu-item:not(.kd-menu-item-disabled):hover {
-  background-color: var(--kd-c-menu-sub-color-background, #121319);
-  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
-}
 .kd-menu-submenu {
   position: static;
   cursor: pointer;
@@ -10123,8 +10094,6 @@ textarea {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-}
-.kd-menu-submenu-title > span {
   opacity: 1;
   -webkit-transition: opacity calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
   transition: opacity calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
@@ -10151,10 +10120,7 @@ textarea {
 .kd-menu-submenu-disabled {
   cursor: not-allowed;
   color: var(--kd-c-menu-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
-}
-.kd-menu-submenu-active {
-  background-color: var(--kd-c-menu-sub-color-background, #121319);
-  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+  background-color: var(--kd-c-menu-color-background, #343848);
 }
 .kd-menu-submenu-arrow {
   margin-left: auto;
@@ -10176,13 +10142,8 @@ textarea {
   transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
   transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }
-.kd-menu-submenu-hover {
-  background-color: var(--kd-c-menu-sub-color-background, #121319);
-  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
-}
 .kd-menu-submenu-sub {
   line-height: var(--kd-c-menu-item-sizing-height, 50px);
-  color: var(--kd-c-menu-sub-color-text, rgba(255, 255, 255, 0.65));
 }
 .kd-menu-submenu-thrid {
   display: -webkit-box;
@@ -10277,18 +10238,78 @@ textarea {
   color: var(--kd-c-menu-sub-color-text-active, var(--kd-g-color-white, #fff));
 }
 .kd-menu-dark .kd-menu-submenu-sub {
+  color: var(--kd-c-menu-sub-color-text, rgba(255, 255, 255, 0.65));
   background: var(--kd-c-menu-sub-inline-color-background, #1f212b);
 }
 .kd-menu-dark .kd-menu-submenu-sub-second,
 .kd-menu-dark .kd-menu-submenu-sub-third {
   background: var(--kd-c-menu-sub-color-background, #121319);
 }
-.kd-menu-light .kd-menu-submenu-active,
-.kd-menu-light .kd-menu-item-active {
+.kd-menu-dark .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
+  background-color: var(--kd-c-menu-sub-color-background, #121319);
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+}
+.kd-menu-dark .kd-menu-item-active {
+  background-color: var(--kd-c-menu-sub-color-background, #121319);
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+}
+.kd-menu-dark .kd-menu-item-active,
+.kd-menu-dark .kd-menu-submenu-active {
+  background-color: var(--kd-c-menu-sub-color-background, #121319);
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+}
+.kd-menu-dark .kd-menu-item-hover,
+.kd-menu-dark .kd-menu-submenu-hover {
+  background-color: var(--kd-c-menu-sub-color-background, #121319);
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+}
+.kd-menu-inline.kd-menu-dark .kd-menu-item-active .kd-menu-submenu-title,
+.kd-menu-inline.kd-menu-dark .kd-menu-submenu-active .kd-menu-submenu-title {
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+  background: var(--kd-c-menu-color-background, #343848);
+  border: none;
+}
+.kd-menu-inline.kd-menu-dark .kd-menu-submenu:not(.kd-menu-submenu-disabled):not(.kd-menu-submenu-active) > .kd-menu-submenu-title:hover {
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+  background: var(--kd-c-menu-color-background, #343848);
+  border: none;
+}
+.kd-menu-light {
+  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
+  background: #ffffff;
+}
+.kd-menu-light .kd-menu-item-disabled,
+.kd-menu-light .kd-menu-submenu-disabled {
+  background-color: #fff;
+}
+.kd-menu-light .kd-menu-submenu-sub {
+  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
+  background: #fafafa;
+}
+.kd-menu-light .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
+  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
+  border: none;
+}
+.kd-menu-light .kd-menu-item-hover,
+.kd-menu-light .kd-menu-submenu-hover {
+  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
+  border: none;
+}
+.kd-menu-light .kd-menu-item-active,
+.kd-menu-light .kd-menu-submenu-active {
   background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
   color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
+  border: none;
 }
-.kd-menu-popper .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover,
+.kd-menu-inline.kd-menu-light .kd-menu-item-active .kd-menu-submenu-title,
+.kd-menu-inline.kd-menu-light .kd-menu-submenu-active .kd-menu-submenu-title {
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
+  background: #ffffff;
+  border: none;
+}
+.kd-menu-popper .kd-menu-submenu:not(.kd-menu-submenu-disabled):not(.kd-menu-submenu-active):hover,
 .kd-menu-popper .kd-menu-submenu-hover {
   background-color: var(--kd-c-menu-sub-color-background, #121319);
   color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
@@ -10310,11 +10331,15 @@ textarea {
   padding-right: 0;
 }
 .kd-menu-popper .kd-menu-submenu-sub {
+  color: var(--kd-c-menu-sub-color-text, rgba(255, 255, 255, 0.65));
   background: var(--kd-c-menu-sub-inline-color-background, #1f212b);
+  -webkit-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);
+          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);
 }
-.kd-menu-popper .kd-menu-submenu-sub .kd-menu-item:hover,
+.kd-menu-popper .kd-menu-submenu-sub .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover,
 .kd-menu-popper .kd-menu-submenu-sub .kd-menu-item-active {
-  color: var(--kd-c-menu-sub-color-text-active, var(--kd-g-color-white, #fff));
+  background-color: var(--kd-c-menu-sub-color-background, #121319);
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
 }
 .kd-menu-popper .kd-menu-submenu-sub-second,
 .kd-menu-popper .kd-menu-submenu-sub-third {
@@ -10345,28 +10370,15 @@ textarea {
   color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
   background: #ffffff;
 }
-.kd-menu-popper.light .kd-menu-submenu-hover,
-.kd-menu-popper.light .kd-menu-submenu-sub {
-  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
-  background: #ffffff;
-}
-.kd-menu-popper.light .kd-menu-submenu-title:hover {
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
-}
-.kd-menu-popper.light .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover {
-  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
-}
-.kd-menu-popper.light .kd-menu-item:not(.kd-menu-item-disabled):hover {
-  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
+.kd-menu-popper.light .kd-menu-item-disabled,
+.kd-menu-popper.light .kd-menu-submenu-disabled {
+  background-color: #fff;
 }
 .kd-menu-popper.light .kd-menu-submenu-sub {
-  -webkit-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);
-          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);
+  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
+  background: #fafafa;
 }
-.kd-menu-popper.light .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover,
-.kd-menu-popper.light .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover {
+.kd-menu-popper.light .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
   background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
   color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
   border: none;
@@ -18338,7 +18350,6 @@ textarea {
   pointer-events: none;
 }
 .kd-tree-node-item {
-  height: var(--kd-c-tree-node-sizing-height, 32px);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -18365,7 +18376,7 @@ textarea {
   border-right: 10px;
   border-color: white;
   border-style: solid;
-  height: var(--kd-c-tree-node-sizing-height, 32px);
+  height: 100%;
   cursor: default;
   opacity: 0;
 }