@kdcloudjs/kdesign 1.8.15 → 1.8.16

package/dist/kdesign-complete.less

@@ -2612,6 +2612,7 @@
 
 @city-picker-prefix-cls: ~'@{kd-prefix}-city-picker';
 @tabs-prefix-cls: ~'@{kd-prefix}-tabs';
+@popper-prefix-cls: ~'@{kd-prefix}-popper';
 
 .@{city-picker-prefix-cls} {
   position: relative;
@@ -2764,6 +2765,15 @@
     outline: none;
     box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
 
+    &.@{popper-prefix-cls}-bottom-start {
+      &-in {
+        animation-name: kdSlideUpIn;
+      }
+
+      &-out {
+        animation-name: kdSlideUpOut;
+      }
+    }
     // 调整tabs样式
     .@{tabs-prefix-cls}-tab-list {
       width: 100%;
@@ -3334,44 +3344,57 @@
   position: relative;
   width: @color-picker-input-sizing-width;
 
+  &-pure {
+    width: 28px;
+
+    .@{kd-prefix}-input-wrapper.@{color-picker-prefix-cls}-input {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+
+      .@{kd-prefix}-input-prefix {
+        margin-right: 0;
+      }
+
+      .@{kd-prefix}-input-suffix {
+        margin-left: 0;
+      }
+
+      .@{kd-prefix}-input {
+        display: none;
+      }
+    }
+  }
+
   .@{color-picker-prefix-cls}-input {
     width: @color-picker-input-sizing-width;
     height: @color-picker-input-sizing-height;
+    padding: 0 8px;
     border-bottom: 1px solid rgba(217, 217, 217, 1);
     font-size: @color-picker-input-font-size;
   }
 
   .@{color-picker-prefix-cls}-icon-container {
-    position: absolute;
-    top: 3px;
-    right: 6px;
     cursor: pointer;
 
     .@{color-picker-prefix-cls}-icon {
-      width: @color-picker-input-suffix-sizing-width;
-      height: @color-picker-input-suffix-sizing-height;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: @color-picker-input-prefix-sizing-width;
+      height: @color-picker-input-prefix-sizing-height;
       border: 1px solid rgba(0, 0, 0, 0.05);
       border-radius: 2px;
       line-height: 18px;
       text-align: center;
       color: @bg;
 
-      &-underline {
-        margin-right: -6px;
-      }
-
-      &-up {
-        .kdicon-arrow-down {
-          transform: rotate(180deg);
-          transition: transform @transition-duration-quickly ease-in-out;
-        }
-      }
-
-      &-down {
-        .kdicon-arrow-down {
-          transform: rotate(0deg);
-          transition: transform @transition-duration-quickly ease-in-out;
-        }
+      &-no-color-line {
+        width: @color-picker-input-prefix-line-sizing-width;
+        height: @color-picker-input-prefix-line-sizing-height;
+        background-color: #ff2e3d;
+        rotate: 45deg;
       }
     }
   }
@@ -3400,9 +3423,74 @@
     transform-origin: top left;
     z-index: @color-picker-panel-z-index;
 
+    &>div {
+      margin-top: 12px;
+    }
+
+    &-clear {
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      color: #666666;
+      line-height: 16px;
+      font-weight: 400;
+
+      &-box {
+        position: relative;
+        width: 16px;
+        height: 16px;
+        margin-right: 4px;
+        border: 1px solid rgba(217, 217, 217, 1);
+        border-radius: 2px;
+        cursor: pointer;
+        background-color: #fff;
+
+        &::after {
+          position: absolute;
+          left: 7.5px;
+          top: -3.5px;
+          content: '';
+          width: 1px;
+          height: 22.6px;
+          background-color: #ff2e3d;
+          rotate: 45deg;
+        }
+
+        .active {
+          content: '';
+          position: absolute;
+          top: -3px;
+          left: -3px;
+          width: 20px;
+          height: 20px;
+          border: 1px solid rgba(217, 217, 217, 1);
+          border-radius: 4px;
+        }
+
+        &:hover {
+          &::before {
+            .active;
+          }
+        }
+
+        &:active {
+          &::before {
+            .active;
+            border: 1px solid rgba(148, 148, 148, 1);
+          }
+        }
+      }
+
+      &-text {
+        font-size: 12px;
+        color: #666666;
+        line-height: 16px;
+        font-weight: 400;
+      }
+    }
+
     &-chrome {
       width: 278px !important;
-      margin-top: 12px;
       box-shadow: none !important;
 
       &>div:last-child {
@@ -3517,7 +3605,6 @@
     }
 
     &-switch {
-      margin: 12px 0 0;
       font-size: 12px;
       color: #666666;
       letter-spacing: 0;
@@ -3533,21 +3620,36 @@
     &-container {
       display: flex;
       flex-wrap: nowrap;
-      margin-top: 10px;
 
-      &-input {
-        flex: 1 1 auto;
+      &-select {
+        flex: 0 0 64px;
         display: inline-block;
         position: relative;
+        margin-right: 8px;
         font-size: @color-picker-panel-select-font-size;
 
+        .@{kd-prefix}-select {
+          width: 64px;
+
+          .@{kd-prefix}-select,
+          .@{kd-prefix}-select-selection-item {
+            overflow: visible;
+            text-overflow: unset;
+          }
+
+          &-suffix {
+            padding-right: 4px;
+            margin-left: 0;
+          }
+        }
+
         .@{kd-prefix}-select-dropdown-panel {
           margin: 0 !important;
 
           &.bottomLeft,
           &.topLeft {
             position: absolute;
-            width: 60px !important;
+            width: 64px !important;
             min-width: unset !important;
             background: #FFFFFF;
             right: 0;
@@ -3571,10 +3673,6 @@
           height: @color-picker-panel-select-sizing-height;
           min-height: 28px;
           padding: 0 28px 0 0;
-
-          .@{kd-prefix}-select-placeholder {
-            left: 8px;
-          }
         }
 
         .active-option {
@@ -3582,74 +3680,190 @@
         }
       }
 
+      &-input {
+        height: 28px;
+        flex: 1 1 auto;
+        padding: 0 8px;
+      }
+
+      &-input-group {
+        display: flex;
+        align-items: center;
+
+        &-item {
+          height: 28px;
+          flex: 1;
+
+          &.active {
+            z-index: 2;
+          }
+
+          &:first-child {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            z-index: 1;
+          }
+
+          &:nth-child(2) {
+            margin-right: -1px;
+            margin-left: -1px;
+            border-radius: 0;
+
+            &:hover {
+              z-index: 1;
+            }
+          }
+
+          &:last-child {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+          }
+        }
+      }
+
       &-transparent {
-        flex: 0 1 60px;
+        flex: 0 0 54px;
         height: 28px;
         margin-left: 8px;
+        padding: 0;
         text-align: center;
         font-size: @color-picker-panel-alpha-font-size;
       }
     }
 
-    &-colorDivContainer {
-      display: grid;
-      grid-template-columns: repeat(12, 1fr);
-      grid-column-gap: 8px;
-      grid-row-gap: 8px;
-      margin-top: 12px;
+    &-historical-color-box {
+      &-title {
+        font-size: 12px;
+        color: #666666;
+        line-height: 18px;
+        font-weight: 400;
+        margin-bottom: 8px;
+      }
 
-      &-ie11 {
-        display: flex;
-        flex-wrap: wrap;
+      &-container {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        grid-column-gap: 8px;
+        grid-row-gap: 8px;
+
+        &-ie11 {
+          display: flex;
+          flex-wrap: wrap;
+
+          li {
+            margin-right: 8px;
+            margin-top: 8px;
+
+            &:nth-child(12n) {
+              margin-right: 0;
+            }
+
+            &:nth-child(-n+12) {
+              margin-top: 0;
+            }
+          }
+        }
 
         li {
-          margin-right: 8px;
-          margin-top: 8px;
+          position: relative;
+          box-sizing: border-box;
+          width: @color-picker-panel-historical-sizing-width;
+          height: @color-picker-panel-historical-sizing-height;
+          border: 1px solid rgba(0, 0, 0, 0.05);
+          border-radius: 2px;
+          list-style: none;
+          cursor: pointer;
 
-          &:nth-child(12n) {
-            margin-right: 0;
+          .square {
+            display: none;
+            position: absolute;
+            box-sizing: inherit;
+            top: -3px;
+            left: -3px;
+            width: calc(@color-picker-panel-historical-sizing-width + 4px);
+            height: calc(@color-picker-panel-historical-sizing-height + 4px);
+            border: 1px solid rgba(178, 178, 176, 1);
+            border-radius: 4px;
+
+            &-click {
+              display: block;
+              box-shadow: 0 0 0 1px #e5e5e5 !important;
+            }
           }
 
-          &:nth-child(-n+12) {
-            margin-top: 0;
+          &:hover {
+            .square {
+              display: block;
+            }
           }
         }
       }
+    }
 
-      &-unset-color {
-        margin-top: 0;
+    &-color-box {
+      &-title {
+        font-size: 12px;
+        color: #666666;
+        line-height: 18px;
+        font-weight: 400;
+        margin-bottom: 8px;
       }
 
-      li {
-        position: relative;
-        box-sizing: border-box;
-        width: @color-picker-panel-preset-sizing-width;
-        height: @color-picker-panel-preset-sizing-height;
-        border: 1px solid rgba(0, 0, 0, 0.05);
-        border-radius: 2px;
-        list-style: none;
-        cursor: pointer;
+      &-container {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        grid-column-gap: 8px;
+        grid-row-gap: 8px;
 
-        .square {
-          display: none;
-          position: absolute;
-          box-sizing: inherit;
-          top: -3px;
-          left: -3px;
-          width: calc(@color-picker-panel-preset-sizing-width + 4px);
-          height: calc(@color-picker-panel-preset-sizing-height + 4px);
-          border: 1px solid rgba(178, 178, 176, 1);
-          border-radius: 4px;
+        &-ie11 {
+          display: flex;
+          flex-wrap: wrap;
 
-          &-click {
-            display: block;
-            box-shadow: 0 0 0 1px #e5e5e5 !important;
+          li {
+            margin-right: 8px;
+            margin-top: 8px;
+
+            &:nth-child(12n) {
+              margin-right: 0;
+            }
+
+            &:nth-child(-n+12) {
+              margin-top: 0;
+            }
           }
         }
 
-        &:hover {
+        li {
+          position: relative;
+          box-sizing: border-box;
+          width: @color-picker-panel-preset-sizing-width;
+          height: @color-picker-panel-preset-sizing-height;
+          border: 1px solid rgba(0, 0, 0, 0.05);
+          border-radius: 2px;
+          list-style: none;
+          cursor: pointer;
+
           .square {
-            display: block;
+            display: none;
+            position: absolute;
+            box-sizing: inherit;
+            top: -3px;
+            left: -3px;
+            width: calc(@color-picker-panel-preset-sizing-width + 4px);
+            height: calc(@color-picker-panel-preset-sizing-height + 4px);
+            border: 1px solid rgba(178, 178, 176, 1);
+            border-radius: 4px;
+
+            &-click {
+              display: block;
+              box-shadow: 0 0 0 1px #e5e5e5 !important;
+            }
+          }
+
+          &:hover {
+            .square {
+              display: block;
+            }
           }
         }
       }
@@ -3678,13 +3892,17 @@
 // sizing
 @color-picker-input-sizing-width: var(~'@{color-picker-custom-prefix}-input-sizing-width', 230px);
 @color-picker-input-sizing-height: var(~'@{color-picker-custom-prefix}-input-sizing-height', 28px);
-@color-picker-input-suffix-sizing-width: var(~'@{color-picker-custom-prefix}-input-suffix-sizing-width', 20px);
-@color-picker-input-suffix-sizing-height: var(~'@{color-picker-custom-prefix}-input-suffix-sizing-height', 20px);
+@color-picker-input-prefix-sizing-width: var(~'@{color-picker-custom-prefix}-input-prefix-sizing-width', 16px);
+@color-picker-input-prefix-line-sizing-width: var(~'@{color-picker-custom-prefix}-input-prefix-line-sizing-width', 1px);
+@color-picker-input-prefix-line-sizing-height: var(~'@{color-picker-custom-prefix}-input-prefix-line-sizing-height', 22.6px);
+@color-picker-input-prefix-sizing-height: var(~'@{color-picker-custom-prefix}-input-prefix-sizing-height', 16px);
 @color-picker-panel-sizing-width: var(~'@{color-picker-custom-prefix}-panel-sizing-width', 304px);
 @color-picker-panel-select-sizing-width: var(~'@{color-picker-custom-prefix}-panel-select-sizing-width', 212px);
 @color-picker-panel-select-sizing-height: var(~'@{color-picker-custom-prefix}-panel-select-sizing-height', 28px);
 @color-picker-panel-preset-sizing-width: var(~'@{color-picker-custom-prefix}-panel-preset-sizing-width', 16px);
 @color-picker-panel-preset-sizing-height: var(~'@{color-picker-custom-prefix}-panel-preset-sizing-height', 16px);
+@color-picker-panel-historical-sizing-width: var(~'@{color-picker-custom-prefix}-panel-historical-sizing-width', 16px);
+@color-picker-panel-historical-sizing-height: var(~'@{color-picker-custom-prefix}-panel-historical-sizing-height', 16px);
 
 // z-index
 @color-picker-panel-z-index: var(~'@{color-picker-custom-prefix}-panel-z-index', @z-index-popper);
@@ -8883,7 +9101,7 @@ textarea {
   }
 
   &[data-popper-placement^='top'] .arrow {
-    bottom: calc(1.1 * var(--arrowSize));
+    bottom: calc(1.05 * var(--arrowSize));
 
     &::before {
       left: calc(-1 * var(--arrowSize));
@@ -8893,7 +9111,7 @@ textarea {
   }
 
   &[data-popper-placement^='bottom'] .arrow {
-    top: calc(-0.8 * var(--arrowSize));
+    top: calc(-0.85 * var(--arrowSize));
 
     &::before {
       left: calc(-1 * var(--arrowSize));
@@ -8903,7 +9121,7 @@ textarea {
   }
 
   &[data-popper-placement^='left'] .arrow {
-    right: calc(1.1 * var(--arrowSize));
+    right: calc(1.05 * var(--arrowSize));
 
     &::before {
       top: calc(-1 * var(--arrowSize));
@@ -8913,7 +9131,7 @@ textarea {
   }
 
   &[data-popper-placement^='right'] .arrow {
-    left: calc(-0.8 * var(--arrowSize));
+    left: calc(-0.85 * var(--arrowSize));
 
     &::before {
       top: calc(-1 * var(--arrowSize));
@@ -8954,8 +9172,6 @@ textarea {
 
 
 
-
-
 @progress-prefix-cls: ~'@{kd-prefix}-progress';
 
 .@{progress-prefix-cls} {