@kdcloudjs/kdesign 1.7.0 → 1.7.1

package/es/pagination/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -115,16 +117,30 @@
           font-feature-settings: 'tnum';
   color: var(--kd-c-pagination-text-color, var(--kd-g-color-text-secondary, #666));
   font-size: var(--kd-c-pagination-font-size, var(--kd-g-font-size-small, 12px));
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .kd-pagination .kd-pagination-total {
-  display: inline-block;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   margin-right: 12px;
-  vertical-align: middle;
 }
 .kd-pagination .kd-pagination-current {
-  display: inline-block;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   margin-right: 12px;
-  vertical-align: middle;
 }
 .kd-pagination .kd-pagination-current .kd-pagination-current-input {
   -webkit-box-sizing: border-box;
@@ -163,8 +179,12 @@
   list-style: none;
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
-  display: inline-block;
-  vertical-align: middle;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .kd-pagination .kd-pagination-action .kd-pagination-action-item {
   -webkit-box-sizing: border-box;
@@ -175,7 +195,12 @@
   list-style: none;
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
-  display: inline-block;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .kd-pagination .kd-pagination-action .kd-pagination-action-item.bordered {
   margin-right: calc(2 * var(--kd-c-pagination-button-spacing, 4px));
@@ -200,7 +225,6 @@
   border-radius: var(--kd-g-radius-border, 2px);
   cursor: pointer;
   outline: none;
-  vertical-align: middle;
   -webkit-transition: border-color var(--kd-g-duration, 0.3s);
   transition: border-color var(--kd-g-duration, 0.3s);
 }
@@ -249,11 +273,15 @@
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
   position: relative;
-  display: inline-block;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   margin-left: 20px;
   outline: none;
   height: var(--kd-c-pagination-sizing-square, 24px);
-  vertical-align: middle;
 }
 .kd-pagination .kd-pagination-selector .kd-pagination-selector-size {
   -webkit-box-sizing: border-box;
@@ -329,11 +357,15 @@
   list-style: none;
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
-  display: inline-block;
   height: var(--kd-c-pagination-sizing-square, 24px);
   overflow: hidden;
   margin: 0 8px;
-  vertical-align: middle;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   color: var(--kd-g-color-text-primary, #212121);
 }
 .kd-pagination.simple .kd-pagination-action-item:first-child,
@@ -342,7 +374,6 @@
 }
 .kd-pagination.simple .kd-pagination-action-item .kd-pagination-current {
   margin-right: 2px;
-  vertical-align: middle;
 }
 .kd-pagination.simple .kd-pagination-action-item .kd-pagination-current .kd-pagination-current-input {
   margin: 0;
@@ -352,7 +383,6 @@
   cursor: not-allowed;
 }
 .kd-pagination.simple .kd-pagination-action-item .kd-pagination-total {
-  vertical-align: middle;
   margin-right: 0;
 }
 .kd-pagination.simple .kd-pagination-action-item.bordered > button {
@@ -369,7 +399,15 @@
   border-radius: var(--kd-g-radius-border, 2px);
   cursor: pointer;
   outline: none;
-  vertical-align: middle;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   -webkit-transition: border-color var(--kd-g-duration, 0.3s);
   transition: border-color var(--kd-g-duration, 0.3s);
 }
@@ -421,9 +459,13 @@
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
   position: relative;
-  display: inline-block;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   margin-right: var(--kd-c-pagination-button-spacing, 4px);
-  vertical-align: middle;
 }
 .kd-pagination.less .kd-pagination-pages-item:last-child {
   margin-right: 0;
@@ -475,6 +517,15 @@
   background: var(--kd-g-color-background, #fff);
   -webkit-transition: color var(--kd-g-duration, 0.3s), border-color var(--kd-g-duration, 0.3s);
   transition: color var(--kd-g-duration, 0.3s), border-color var(--kd-g-duration, 0.3s);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
 }
 .kd-pagination.less .kd-pagination-pages-item button:disabled {
   cursor: not-allowed;
@@ -489,7 +540,12 @@
   list-style: none;
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
-  display: inline-block;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .kd-pagination.nicety .kd-pagination-pages-item {
   -webkit-box-sizing: border-box;
@@ -501,9 +557,13 @@
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
   position: relative;
-  display: inline-block;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   margin-right: var(--kd-c-pagination-button-spacing, 4px);
-  vertical-align: middle;
 }
 .kd-pagination.nicety .kd-pagination-pages-item:last-child {
   margin-right: 0;
@@ -549,6 +609,15 @@
   padding: 0 6px;
   cursor: pointer;
   outline: none;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   font-size: var(--kd-c-pagination-font-size, var(--kd-g-font-size-small, 12px));
   color: var(--kd-g-color-text-primary, #212121);
   border-radius: var(--kd-g-radius-border, 2px);
@@ -578,9 +647,13 @@
   transition: opacity var(--kd-g-duration, 0.3s);
 }
 .kd-pagination.nicety .kd-pagination-jumper {
-  display: inline-block;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   margin-left: 4px;
-  vertical-align: middle;
 }
 .kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-input {
   -webkit-box-sizing: border-box;
@@ -621,8 +694,15 @@
   width: var(--kd-c-pagination-sizing-square, 24px);
   height: var(--kd-c-pagination-sizing-square, 24px);
   margin-left: var(--kd-c-pagination-button-spacing, 4px);
-  line-height: var(--kd-c-pagination-sizing-square, 24px);
-  vertical-align: top;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   cursor: pointer;
   outline: none;
   color: var(--kd-g-color-text-primary, #212121);
@@ -656,26 +736,33 @@
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
   position: relative;
-  display: inline-block;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   margin-left: 22px;
   outline: none;
   height: var(--kd-c-pagination-sizing-square, 24px);
   color: var(--kd-g-color-text-primary, #212121);
-  vertical-align: middle;
 }
 .kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size {
   position: relative;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  display: inline-block;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   min-width: 64px;
   height: var(--kd-c-pagination-sizing-square, 24px);
   margin-right: 8px;
   padding: 0 24px 0 4px;
-  line-height: var(--kd-c-pagination-sizing-square, 24px);
   font-size: var(--kd-c-pagination-font-size, var(--kd-g-font-size-small, 12px));
   color: var(--kd-g-color-text-primary, #212121);
-  text-align: left;
   border-radius: var(--kd-g-radius-border, 2px);
   border: var(--kd-c-pagination-sizing-border-width, 1px) solid var(--kd-g-color-border-strong, #d9d9d9);
   background: var(--kd-g-color-background, #fff);

package/es/pagination/style/index.less

@@ -14,17 +14,19 @@
   .reset-component;
   color: @pagination-text-color;
   font-size: @pagination-font-size;
+  display: flex;
+  align-items: center;
 
   .@{pagination-prefix-cls}-total {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     margin-right: 12px;
-    vertical-align: middle;
   }
 
   .@{pagination-prefix-cls}-current {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     margin-right: 12px;
-    vertical-align: middle;
 
     .@{pagination-prefix-cls}-current-input {
       box-sizing: border-box;
@@ -58,12 +60,13 @@
 
   .@{pagination-action-prefix-cls} {
     .reset-component;
-    display: inline-block;
-    vertical-align: middle;
+    display: inline-flex;
+    align-items: center;
 
     .@{pagination-action-prefix-cls}-item {
       .reset-component;
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
 
       &.bordered {
         margin-right: calc(2 * @pagination-button-spacing);
@@ -91,7 +94,6 @@
         border-radius: @radius-border;
         cursor: pointer;
         outline: none;
-        vertical-align: middle;
         transition: border-color @duration-promptly;
 
         &:hover,
@@ -134,11 +136,11 @@
   .@{pagination-selector-prefix-cls} {
     .reset-component;
     position: relative;
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     margin-left: 20px;
     outline: none;
     height: @pagination-size;
-    vertical-align: middle;
 
     .@{pagination-selector-prefix-cls}-size {
       box-sizing: border-box;
@@ -215,11 +217,11 @@
 
       &-item {
         .reset-component;
-        display: inline-block;
         height: @pagination-size;
         overflow: hidden;
         margin: 0 8px;
-        vertical-align: middle;
+        display: inline-flex;
+        align-items: center;
         color: @color-text-primary;
 
         &:first-child,
@@ -229,7 +231,6 @@
 
         .@{pagination-prefix-cls}-current {
           margin-right: 2px;
-          vertical-align: middle;
 
           .@{pagination-prefix-cls}-current-input {
             margin: 0;
@@ -242,7 +243,6 @@
         }
 
         .@{pagination-prefix-cls}-total {
-          vertical-align: middle;
           margin-right: 0;
         }
 
@@ -260,7 +260,9 @@
           border-radius: @radius-border;
           cursor: pointer;
           outline: none;
-          vertical-align: middle;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
           transition: border-color @duration-promptly;
 
           &:hover,
@@ -308,9 +310,9 @@
       &-item {
         .reset-component;
         position: relative;
-        display: inline-block;
+        display: inline-flex;
+        align-items: center;
         margin-right: @pagination-button-spacing;
-        vertical-align: middle;
 
         &:last-child {
           margin-right: 0;
@@ -359,6 +361,9 @@
           border: none;
           background: @color-background;
           transition: color @duration-promptly, border-color @duration-promptly;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
 
           &:disabled {
             cursor: not-allowed;
@@ -373,14 +378,15 @@
   &.nicety {
     .@{pagination-pages-prefix-cls} {
       .reset-component;
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
 
       &-item {
         .reset-component;
         position: relative;
-        display: inline-block;
+        display: inline-flex;
+        align-items: center;
         margin-right: @pagination-button-spacing;
-        vertical-align: middle;
 
         &:last-child {
           margin-right: 0;
@@ -429,6 +435,9 @@
           padding: 0 6px;
           cursor: pointer;
           outline: none;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
           font-size: @pagination-font-size;
           color: @color-text-primary;
           border-radius: @radius-border;
@@ -462,9 +471,9 @@
     }
 
     .@{pagination-jumper-prefix-cls} {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
       margin-left: 4px;
-      vertical-align: middle;
 
       .@{pagination-jumper-prefix-cls}-input {
         box-sizing: border-box;
@@ -499,8 +508,9 @@
         width: @pagination-size;
         height: @pagination-size;
         margin-left: @pagination-button-spacing;
-        line-height: @pagination-size;
-        vertical-align: top;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
         cursor: pointer;
         outline: none;
         color: @color-text-primary;
@@ -530,25 +540,24 @@
     .@{pagination-options-prefix-cls} {
       .reset-component;
       position: relative;
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
       margin-left: 22px;
       outline: none;
       height: @pagination-size;
       color: @color-text-primary;
-      vertical-align: middle;
 
       .@{pagination-options-prefix-cls}-size {
         position: relative;
         box-sizing: border-box;
-        display: inline-block;
+        display: inline-flex;
+        align-items: center;
         min-width: 64px;
         height: @pagination-size;
         margin-right: 8px;
         padding: 0 24px 0 4px;
-        line-height: @pagination-size;
         font-size: @pagination-font-size;
         color: @color-text-primary;
-        text-align: left;
         border-radius: @radius-border;
         border: @pagination-border-size solid @color-border-strong;
         background: @color-background;

package/es/popconfirm/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/progress/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/radio/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/rate/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/search/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/select/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/slider/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/space/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/spin/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/split-panel/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/stepper/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/steps/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */

package/es/style/themes/default.less

@@ -1,4 +1,3 @@
-
 @kd-prefix: kd;
 
 /* -----------  color  ——————---- start */
@@ -18,7 +17,7 @@
 
 @theme-color-disabled: @theme-color-level3;
 @theme-color-hover: @theme-color-level5;
-@theme-color-click: @theme-color-level7;// 点击色
+@theme-color-click: @theme-color-level7; // 点击色
 @theme-color-active-light: @theme-color-level1; // 浅色选中
 @theme-color-active-dark: @theme-color; // 深色选中
 @hover-color: #f5f5f5; // 中性的悬停色
@@ -68,9 +67,9 @@
 /* -----------  color  ——————---- end */
 
 /* -----------  motion  ——————---- start */
-@ease-out: cubic-bezier(0,.4,.4,1);
-@ease-in: cubic-bezier(0.4,0,1,0.6);
-@ease: cubic-bezier(0.4,0,0.6,1);
+@ease-out: cubic-bezier(0, .4, .4, 1);
+@ease-in: cubic-bezier(0.4, 0, 1, 0.6);
+@ease: cubic-bezier(0.4, 0, 0.6, 1);
 /* -----------  motion  ——————---- end */
 
 /* -----------  transition  ——————---- start */
@@ -488,6 +487,11 @@
 @date-ranges-width: 160px;
 
 /* -----------  DatePicker  ——————---- end */
+
+/* -----------  ColorPicker  ——————---- start */
+
+/* -----------  ColorPicker  ——————---- end */
+
 /* -----------  Tree  ——————---- start */
 @tree-node-height: 28px;
 @tree-font-size: @font-size;
@@ -702,4 +706,4 @@
 @advancedSelector-dropdown-options-height: 32px;
 @advancedSelector-hover-bg: @hover-color;
 
-/* -----------  AdvancedSelector  ——————---- end */
+/* -----------  AdvancedSelector  ——————---- end */

package/es/switch/style/index.css

@@ -56,6 +56,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */