@kdcloudjs/kdesign 1.6.40 → 1.7.1

package/dist/kdesign.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @kdcloudjs/kdesign v1.6.39
+ *   @kdcloudjs/kdesign v1.7.0
  * 
  *   Copyright 2020-present, Kingdee, Inc.
  *   All rights reserved.
@@ -294,6 +294,8 @@
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -2120,6 +2122,8 @@ template {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -2380,6 +2384,8 @@ template {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -2676,6 +2682,8 @@ template {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -2869,6 +2877,8 @@ template {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -3104,6 +3114,8 @@ template {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -3400,6 +3412,8 @@ template {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -3860,6 +3874,8 @@ template {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -4068,6 +4084,8 @@ template {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -4434,6 +4452,8 @@ template {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -4845,6 +4865,8 @@ template {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -5243,6 +5265,8 @@ template {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -5664,6 +5688,8 @@ template {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -5916,6 +5942,326 @@ template {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
+/* -----------  Tree  ——————---- start */
+/* -----------  Tree  ——————---- end */
+/* -----------  Alert  ——————---- start */
+/* -----------  Alert  ——————---- end */
+/* -----------  Split-Panel ——————---- start */
+/* -----------  Split-Panel ——————---- end */
+/* -----------  Modal  ——————---- start */
+/* -----------  Modal  ——————---- end */
+/* -----------  Steps  ——————---- start */
+/* -----------  Steps  ——————---- end */
+/* -----------  Form  ——————---- start */
+/* -----------  Form  ——————---- end */
+/* -----------  Tag ——————---- start */
+/* -----------  Tag ——————---- end */
+/* -----------  Menu  ——————---- start */
+/* -----------  Menu  ——————---- end */
+/* -----------  notice  ——————---- start */
+/* -----------  message  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Layout  ——————---- start */
+/* -----------  Layout  ——————---- end */
+/* -----------  Typography  ——————---- start */
+/* -----------  Typography  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Badge  ——————---- start */
+/* -----------  Badge  ——————---- end */
+/* -----------  Anchor  ——————---- start */
+/* -----------  Anchor  ——————---- end */
+/* -----------  Avatar  ——————---- start */
+/* -----------  Avatar  ——————---- end */
+/* -----------  AdvancedSelector  ——————---- start */
+/* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+.kd-color-picker-container {
+  position: relative;
+}
+.kd-color-picker-container .kd-color-picker-input {
+  width: var(--kd-c-color-picker-input-sizing-width, 230px);
+  height: var(--kd-c-color-picker-input-sizing-height, 28px);
+  border-bottom: 1px solid #d9d9d9;
+  font-size: var(--kd-c-color-picker-input-font-size, var(--kd-g-font-size-middle, 14px));
+}
+.kd-color-picker-container .kd-color-picker-icon-container {
+  position: absolute;
+  top: 3px;
+  right: 6px;
+  cursor: pointer;
+}
+.kd-color-picker-container .kd-color-picker-icon-container .kd-color-picker-icon {
+  width: var(--kd-c-color-picker-input-suffix-sizing-width, 20px);
+  height: var(--kd-c-color-picker-input-suffix-sizing-height, 20px);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 2px;
+  line-height: 18px;
+  text-align: center;
+  color: #fff;
+}
+.kd-color-picker-container .kd-color-picker-icon-container .kd-color-picker-icon-underline {
+  margin-right: -6px;
+}
+.kd-color-picker-container .kd-color-picker-icon-container .kd-color-picker-icon-up .kdicon-arrow-down {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+  -webkit-transition: -webkit-transform 0.2s ease-in-out;
+  transition: -webkit-transform 0.2s ease-in-out;
+  transition: transform 0.2s ease-in-out;
+  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
+}
+.kd-color-picker-container .kd-color-picker-icon-container .kd-color-picker-icon-down .kdicon-arrow-down {
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+  -webkit-transition: -webkit-transform 0.2s ease-in-out;
+  transition: -webkit-transform 0.2s ease-in-out;
+  transition: transform 0.2s ease-in-out;
+  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
+}
+.kd-color-picker-pop.topLeft.hidden,
+.kd-color-picker-pop.bottomLeft.hidden,
+.kd-color-picker-pop.topRight.hidden,
+.kd-color-picker-pop.bottomRight.hidden {
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+}
+.kd-color-picker-pop .kd-color-picker-panel {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: var(--kd-c-color-picker-panel-sizing-width, 304px);
+  padding: 4px 12px 16px;
+  background: #FFFFFF;
+  -webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
+          box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
+  border-radius: 2px;
+  -webkit-transform-origin: top left;
+          transform-origin: top left;
+  z-index: var(--kd-c-color-picker-panel-z-index, var(--kd-g-z-index-popper, 1050));
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome {
+  width: 278px !important;
+  margin-top: 12px;
+  -webkit-box-shadow: none !important;
+          box-shadow: none !important;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child {
+  padding: 9px 0 4px !important;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: row-reverse;
+          flex-direction: row-reverse;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:first-child > div {
+  width: 28px !important;
+  height: 28px !important;
+  border-radius: 50% !important;
+  margin-top: -1px !important;
+  margin-left: 4px !important;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:last-child .hue-horizontal {
+  width: 240px !important;
+  height: 12px !important;
+  border-radius: 6px !important;
+  padding: unset !important;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:last-child .hue-horizontal > div > div {
+  margin-top: 1px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:last-child > div:last-child > div {
+  width: 240px !important;
+  height: 12px !important;
+  margin: unset;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:last-child > div:last-child > div > div:first-child {
+  border-radius: 6px !important;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:last-child > div:last-child > div > div:nth-child(2) {
+  border-radius: 6px !important;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:last-child > div:last-child > div > div:last-child {
+  margin: unset !important;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:last-child > div:last-child > div > div:last-child > div > div {
+  margin-top: 1px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:last-child {
+  display: none !important;
+}
+.kd-color-picker-pop .kd-color-picker-panel-switch {
+  margin: 12px 0 0;
+  font-size: 12px;
+  color: #666666;
+  letter-spacing: 0;
+  line-height: 16px;
+  font-weight: 400;
+}
+.kd-color-picker-pop .kd-color-picker-panel-switch span {
+  vertical-align: middle;
+  margin-right: 9px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-input {
+  display: inline-block;
+  position: relative;
+  margin-top: 12px;
+  font-size: var(--kd-c-color-picker-panel-select-font-size, var(--kd-g-font-size-middle, 14px));
+}
+.kd-color-picker-pop .kd-color-picker-panel-input-no-recommend {
+  margin-bottom: 8px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-input .kd-select.bottomLeft,
+.kd-color-picker-pop .kd-color-picker-panel-input .kd-select.topLeft {
+  position: absolute;
+  width: 60px !important;
+  background: #FFFFFF;
+  right: 0;
+  left: unset !important;
+  -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
+          box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
+  border-radius: 2px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-input .kd-select .kd-select-dropdown {
+  overflow: hidden;
+}
+.kd-color-picker-pop .kd-color-picker-panel-input .kd-select-bordered {
+  border-radius: 2px;
+  width: var(--kd-c-color-picker-panel-select-sizing-width, 212px);
+  height: var(--kd-c-color-picker-panel-select-sizing-height, 28px);
+  min-height: 28px;
+  margin-top: -2px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-input .kd-select-bordered .kd-select-placeholder {
+  left: 8px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-input .active-option {
+  background-color: #E3EBFF;
+}
+.kd-color-picker-pop .kd-color-picker-panel-transparent {
+  width: 60px;
+  height: 28px;
+  margin-left: 8px;
+  text-align: center;
+  font-size: var(--kd-c-color-picker-panel-alpha-font-size, var(--kd-g-font-size-middle, 14px));
+}
+.kd-color-picker-pop .kd-color-picker-panel-colorDivContainer {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-column-gap: 8px;
+  grid-row-gap: 8px;
+  margin-top: 12px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-colorDivContainer li {
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: var(--kd-c-color-picker-panel-preset-sizing-width, 16px);
+  height: var(--kd-c-color-picker-panel-preset-sizing-height, 16px);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 2px;
+  list-style: none;
+  cursor: pointer;
+}
+.kd-color-picker-pop .kd-color-picker-panel-colorDivContainer li .square {
+  display: none;
+  position: absolute;
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  top: -3px;
+  left: -3px;
+  width: calc(var(--kd-c-color-picker-panel-preset-sizing-width, 16px) + 4px);
+  height: calc(var(--kd-c-color-picker-panel-preset-sizing-height, 16px) + 4px);
+  border: 1px solid #b2b2b0;
+  border-radius: 4px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-colorDivContainer li .square-click {
+  display: block;
+  -webkit-box-shadow: 0 0 0 1px #e5e5e5 !important;
+          box-shadow: 0 0 0 1px #e5e5e5 !important;
+}
+.kd-color-picker-pop .kd-color-picker-panel-colorDivContainer li:hover .square {
+  display: block;
+}
+
+/* -----------  color  ——————---- start */
+/* -----------  color  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  font  ——————---- start */
+/* -----------  font  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+/* -----------  Button  ——————---- start */
+/* -----------  Button  ——————---- end */
+/* -----------  Collapse  ——————---- start */
+/* -----------  Collapse  ——————---- end */
+/* -----------  Card  ——————---- start */
+/* -----------  Card  ——————---- end */
+/* -----------  Carousel  ——————---- start */
+/* -----------  Carousel  ——————---- end */
+/* -----------  Cascader  ——————---- start */
+/* -----------  Cascader  ——————---- end */
+/* -----------  Switch  ——————---- start */
+/* -----------  Switch  ——————---- end */
+/* -----------  Input  ——————---- start */
+/* -----------  Input  ——————---- end */
+/* -----------  InputNumber  ——————---- start */
+/* -----------  InputNumber  ——————---- end */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- end */
+/* -----------  Radio  ——————---- start */
+/* -----------  Radio  ——————---- end */
+/* -----------  icon  ——————---- start */
+/* -----------  icon  ——————---- end */
+/* -----------  Popconfirm  ——————---- start */
+/* -----------  Popconfirm  ——————---- end */
+/* -----------  Progress  ——————---- start */
+/* -----------  Progress  ——————---- end */
+/* -----------  Pagination  ——————---- start */
+/* -----------  Pagination  ——————---- end */
+/* -----------  Timeline  ——————---- start */
+/* -----------  Timeline  ——————---- end */
+/* -----------  Tabs  ——————---- start */
+/* -----------  Tabs  ——————---- end */
+/* -----------  Select  ——————---- start */
+/* -----------  Select  ——————---- end */
+/* -----------  Rate  ——————---- start */
+/* -----------  Rate  ——————---- end */
+/* -----------  Dropdown  ——————---- start */
+/* -----------  Dropdown  ——————---- end */
+/* -----------  Tooltip  ——————---- start */
+/* -----------  Tooltip  ——————---- end */
+/* -----------  Transfer  ——————---- start */
+/* -----------  Transfer  ——————---- end */
+/* -----------  DatePicker  ——————---- start */
+/* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -6853,6 +7199,8 @@ template {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -7090,6 +7438,8 @@ template {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -7355,6 +7705,8 @@ template {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -7481,6 +7833,8 @@ template {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -7839,6 +8193,8 @@ template {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -8031,6 +8387,8 @@ template {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -8165,6 +8523,8 @@ template {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -8270,6 +8630,8 @@ template {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -8676,6 +9038,8 @@ template {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -9008,6 +9372,8 @@ template {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -9231,6 +9597,8 @@ template {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -9769,6 +10137,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -10015,6 +10385,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -10171,6 +10543,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -10795,6 +11169,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -11013,6 +11389,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -11272,6 +11650,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -11518,6 +11898,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -11577,16 +11959,30 @@ textarea {
           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;
@@ -11625,8 +12021,12 @@ textarea {
   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;
@@ -11637,7 +12037,12 @@ textarea {
   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));
@@ -11662,7 +12067,6 @@ textarea {
   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);
 }
@@ -11711,11 +12115,15 @@ textarea {
   -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;
@@ -11791,20 +12199,23 @@ textarea {
   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;
-  color: var(--kd-g-color-text-primary, #212121);
-}
-.kd-pagination.simple .kd-pagination-action-item:first-child,
-.kd-pagination.simple .kd-pagination-action-item:last-child {
-  margin: 0;
+  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,
+.kd-pagination.simple .kd-pagination-action-item:last-child {
+  margin: 0;
 }
 .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;
@@ -11814,7 +12225,6 @@ textarea {
   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 {
@@ -11831,7 +12241,15 @@ textarea {
   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);
 }
@@ -11883,9 +12301,13 @@ textarea {
   -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;
@@ -11937,6 +12359,15 @@ textarea {
   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;
@@ -11951,7 +12382,12 @@ textarea {
   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;
@@ -11963,9 +12399,13 @@ textarea {
   -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;
@@ -12011,6 +12451,15 @@ textarea {
   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);
@@ -12040,9 +12489,13 @@ textarea {
   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;
@@ -12083,8 +12536,15 @@ textarea {
   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);
@@ -12118,26 +12578,33 @@ textarea {
   -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);
@@ -12242,6 +12709,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -12477,6 +12946,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -12747,6 +13218,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -13194,6 +13667,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -13405,6 +13880,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -14132,6 +14609,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -14803,6 +15282,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -15118,6 +15599,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -15267,6 +15750,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -15567,6 +16052,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -15831,6 +16318,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -16093,6 +16582,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -16431,6 +16922,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -16649,6 +17142,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -16749,6 +17244,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -17313,6 +17810,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -17827,6 +18326,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -18139,6 +18640,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -18329,6 +18832,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -18684,6 +19189,513 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
+/* -----------  Tree  ——————---- start */
+/* -----------  Tree  ——————---- end */
+/* -----------  Alert  ——————---- start */
+/* -----------  Alert  ——————---- end */
+/* -----------  Split-Panel ——————---- start */
+/* -----------  Split-Panel ——————---- end */
+/* -----------  Modal  ——————---- start */
+/* -----------  Modal  ——————---- end */
+/* -----------  Steps  ——————---- start */
+/* -----------  Steps  ——————---- end */
+/* -----------  Form  ——————---- start */
+/* -----------  Form  ——————---- end */
+/* -----------  Tag ——————---- start */
+/* -----------  Tag ——————---- end */
+/* -----------  Menu  ——————---- start */
+/* -----------  Menu  ——————---- end */
+/* -----------  notice  ——————---- start */
+/* -----------  message  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Layout  ——————---- start */
+/* -----------  Layout  ——————---- end */
+/* -----------  Typography  ——————---- start */
+/* -----------  Typography  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Badge  ——————---- start */
+/* -----------  Badge  ——————---- end */
+/* -----------  Anchor  ——————---- start */
+/* -----------  Anchor  ——————---- end */
+/* -----------  Avatar  ——————---- start */
+/* -----------  Avatar  ——————---- end */
+/* -----------  AdvancedSelector  ——————---- start */
+/* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+/* 多行显示省略号 */
+/* 单行显示省略号 */
+/** 浮层箭头样式 **/
+.kd-tree-select {
+  position: relative;
+  display: inline-block;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  background-color: transparent;
+  cursor: pointer;
+  vertical-align: middle;
+}
+.kd-tree-select-selector:hover .kd-tree-select-icon-active {
+  color: #3761ca;
+}
+.kd-tree-select-visible .kd-tree-select-icon-active {
+  color: #3761ca;
+}
+.kd-tree-select-visible .kd-tree-select-selection-item {
+  color: var(--kd-c-tree-select-placeholder-color-text, #b2b2b2);
+}
+.kd-tree-select-icon-arrow {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  vertical-align: middle;
+}
+.kd-tree-select-icon-arrow-up {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+  -webkit-transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+}
+.kd-tree-select-icon-arrow-down {
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+  -webkit-transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+}
+.kd-tree-select-icon-arrow-focus {
+  color: var(--kd-c-tree-select-color-border-foucs, var(--kd-g-color-theme, #5582f3));
+}
+.kd-tree-select-icon-clear {
+  opacity: 0;
+  z-index: 1;
+  position: absolute;
+  background: #fff;
+  -webkit-transition: opacity 0.15s ease;
+  transition: opacity 0.15s ease;
+}
+.kd-tree-select-icon-clear:hover {
+  color: var(--kd-c-tree-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
+}
+.kd-tree-select-focused {
+  border-color: var(--kd-c-tree-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
+}
+.kd-tree-select-placeholder {
+  position: absolute;
+  color: var(--kd-c-tree-select-placeholder-color-text, #b2b2b2);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  right: 28px;
+  left: 0;
+}
+.kd-tree-select-borderless {
+  border: none;
+}
+.kd-tree-select-underline {
+  border-bottom: 1px solid var(--kd-c-tree-select-color-border, var(--kd-g-color-input, #999));
+}
+.kd-tree-select-underline:hover:not(.kd-tree-select-multiple-disabled):not(.kd-tree-select-single-disabled) {
+  border-bottom: 1px solid var(--kd-c-tree-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
+}
+.kd-tree-select-bordered {
+  border: 1px solid var(--kd-c-tree-select-border-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  padding-left: var(--kd-c-tree-select-bordered-spacing-padding-left, 8px) !important;
+  border-radius: var(--kd-c-tree-select-bordered-radius-border, 2px);
+}
+.kd-tree-select-bordered:hover:not(.kd-tree-select-multiple-disabled):not(.kd-tree-select-single-disabled) {
+  border: 1px solid var(--kd-c-tree-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
+}
+.kd-tree-select-bordered .kd-tree-select-suffix {
+  padding-right: 8px;
+}
+.kd-tree-select-bordered.kd-tree-select-single .kd-tree-select-selection-search {
+  padding-left: var(--kd-c-tree-select-bordered-spacing-padding-left, 8px);
+}
+.kd-tree-select-bordered .kd-tree-select-placeholder {
+  padding-left: var(--kd-c-tree-select-bordered-spacing-padding-left, 8px);
+}
+.kd-tree-select-wrapper {
+  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  padding: var(--kd-c-tree-select-wrapper-spacing-padding, 1px 28px 1px 0);
+  max-width: 100%;
+  color: #212121;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  cursor: pointer;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+}
+.kd-tree-select-dropdown {
+  display: block;
+  left: 0;
+  z-index: var(--kd-c-tree-select-z-index, var(--kd-g-z-index-popper, 1050));
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 4px 0;
+  margin: 0;
+  overflow: auto;
+  font-size: var(--kd-c-tree-select-dropdown-font-size, 12px);
+  font-variant: initial;
+  background-color: var(--kd-c-tree-select-dropdown-color-background, var(--kd-g-color-background, #fff));
+  border-radius: var(--kd-c-tree-select-radius-border, var(--kd-g-radius-border, 2px));
+  outline: none;
+  -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
+          box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
+  max-height: 200px;
+}
+.kd-tree-select-dropdown .kd-tree {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.kd-tree-select-dropdown-scroll {
+  overflow-y: auto;
+}
+.kd-tree-select-dropdown-empty {
+  padding: 5px 12px;
+}
+.kd-tree-select-dropdown-search {
+  padding: 5px 6px;
+}
+.kd-tree-select-dropdown-search-hidden {
+  display: none;
+}
+.kd-tree-select-size-small {
+  min-height: var(--kd-c-tree-select-sizing-height-small, 24px);
+  max-height: calc(var(--kd-c-tree-select-sizing-height-small, 24px) * 3 - 10px);
+  font-size: var(--kd-c-tree-select-font-size-small, 12px);
+}
+.kd-tree-select-size-middle {
+  min-height: var(--kd-c-tree-select-sizing-height-middle, 32px);
+  max-height: calc(var(--kd-c-tree-select-sizing-height-middle, 32px) * 3 - 10px);
+  font-size: var(--kd-c-tree-select-font-size-middle, 14px);
+}
+.kd-tree-select-size-large {
+  min-height: var(--kd-c-tree-select-sizing-height-large, 36px);
+  max-height: calc(var(--kd-c-tree-select-sizing-height-large, 36px) * 3 - 10px);
+  font-size: var(--kd-c-tree-select-font-size-large, 16px);
+}
+.kd-tree-select-suffix {
+  right: 0;
+  position: absolute;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 0;
+      -ms-flex: 0;
+          flex: 0;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  margin-left: 8px;
+}
+.kd-tree-select .kd-tree-select-single .kd-tree-select-selection-search {
+  position: absolute;
+  right: 28px;
+  left: 0;
+  height: 100%;
+}
+.kd-tree-select .kd-tree-select-single .kd-tree-select-selection-search-input {
+  outline: 0;
+  border-radius: 0;
+  border: none;
+  background: transparent;
+  height: 100%;
+  width: 100%;
+}
+.kd-tree-select .kd-tree-select-single .kd-tree-select-selection-item {
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.kd-tree-select .kd-tree-select-single-focused {
+  border-color: var(--kd-c-tree-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
+}
+.kd-tree-select .kd-tree-select-single-disabled {
+  background-color: var(--kd-c-tree-select-color-background-disabled, #f5f5f5);
+  color: var(--kd-c-tree-select-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
+}
+.kd-tree-select .kd-tree-select-single-disabled:hover {
+  cursor: not-allowed;
+}
+.kd-tree-select .kd-tree-select-single-disabled .kd-tree-select-suffix {
+  color: var(--kd-c-tree-select-arrow-icon-color-text-disabled, #b2b2b2);
+}
+.kd-tree-select .kd-tree-select-single:hover .kd-tree-select-icon-clear {
+  opacity: 1;
+}
+.kd-tree-select .kd-tree-select-single .kd-tree-select-icon-clear {
+  color: var(--kd-c-tree-select-icon-clear-color-text, #d9d9d9);
+}
+.kd-tree-select .kd-tree-select-single .kd-tree-select-icon-clear:hover {
+  color: var(--kd-c-tree-select-icon-clear-color-text-hover, #999);
+}
+.kd-tree-select .kd-tree-select-single-text {
+  color: var(--kd-c-tree-select-single-color-text, var(--kd-g-color-text-primary, #212121));
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.kd-tree-select .kd-tree-select-single-disabled-text {
+  color: var(--kd-c-tree-select-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
+}
+.kd-tree-select .kd-tree-select-selection-item {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  vertical-align: middle;
+  max-width: 100%;
+  height: 20px;
+  line-height: 20px;
+  margin: 2px 8px 2px 0;
+  cursor: default;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.kd-tree-select .kd-tree-select-selection-item-small {
+  height: 20px;
+  line-height: 18px;
+  font-size: 12px;
+}
+.kd-tree-select .kd-tree-select-selection-item-middle {
+  font-size: 12px;
+  height: 20px;
+  line-height: 18px;
+}
+.kd-tree-select .kd-tree-select-selection-item-large {
+  font-size: 14px;
+  line-height: 22px;
+  height: 22px;
+}
+.kd-tree-select .kd-tree-select-selection-item-content {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  vertical-align: middle;
+  padding: 0 7px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  border: 1px solid #ccc;
+  color: #212121;
+}
+.kd-tree-select .kd-tree-select-selection-item-span {
+  position: relative;
+  margin-left: 0.5px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.kd-tree-select .kd-tree-select-selection-item-input {
+  cursor: text;
+  margin: 0;
+  padding: 0;
+  background: 0 0;
+  border: none;
+  outline: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  width: 100%;
+  min-width: 20px;
+}
+.kd-tree-select-multiple .kd-tree-select-selection-tag {
+  max-width: calc(100% - 5px);
+}
+.kd-tree-select-multiple .kd-tree-select-selection-tag .kd-tag {
+  margin: 2px 8px 2px 0;
+  max-width: 100%;
+}
+.kd-tree-select-multiple .kd-tree-select-selection-search {
+  position: relative;
+  max-width: 100%;
+}
+.kd-tree-select-multiple .kd-tree-select-selection-search-input {
+  outline: 0;
+  border-radius: 0;
+  border: none;
+  background: transparent;
+  width: 100%;
+}
+.kd-tree-select-multiple .kd-tree-select-selection-search-mirror {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  white-space: pre;
+  visibility: hidden;
+}
+.kd-tree-select-multiple-disabled {
+  cursor: not-allowed;
+  background-color: var(--kd-c-tree-select-color-background-disabled, #f5f5f5);
+  color: var(--kd-c-tree-select-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
+}
+.kd-tree-select-multiple-disabled .kd-tree-select-suffix {
+  color: var(--kd-c-tree-select-arrow-icon-color-text-disabled, #b2b2b2);
+}
+.kd-tree-select-multiple:hover .kd-tree-select-icon-clear {
+  opacity: 1;
+}
+.kd-tree-select-multiple .kd-tree-select-icon-clear {
+  color: var(--kd-c-tree-select-icon-clear-color-text, #d9d9d9);
+}
+.kd-tree-select-multiple .kd-tree-select-icon-clear:hover {
+  color: var(--kd-c-tree-select-icon-clear-color-text-hover, #999);
+}
+.kd-tree-select-multiple-selector {
+  position: relative;
+  cursor: text;
+  padding-right: 24px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.kd-tree-select-multiple .kd-tree-select-wrapper:hover:not(.kd-tree-select-multiple-disabled) {
+  border-bottom: 1px solid var(--kd-c-tree-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
+}
+.kd-tree-select-multiple-footer {
+  color: var(--kd-c-tree-select-footer-color-text, var(--kd-g-color-text-primary, #212121));
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 100%;
+  padding: 0 12px;
+  height: 32px;
+  line-height: 32px;
+  border-top: 1px solid #d9d9d9;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.kd-tree-select-multiple-footer-hadSelected {
+  color: #999999;
+  padding-left: 12px;
+}
+.kd-tree-select-multiple-footer-hadSelected > span {
+  color: var(--kd-c-tree-select-footer-color-text-selected, #0e5fd8);
+  padding: 0 2px;
+}
+.kd-tree-select.topLeft.hidden,
+.kd-tree-select.bottomLeft.hidden,
+.kd-tree-select.topRight.hidden,
+.kd-tree-select.bottomRight.hidden {
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+}
+
+/* -----------  color  ——————---- start */
+/* -----------  color  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  font  ——————---- start */
+/* -----------  font  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+/* -----------  Button  ——————---- start */
+/* -----------  Button  ——————---- end */
+/* -----------  Collapse  ——————---- start */
+/* -----------  Collapse  ——————---- end */
+/* -----------  Card  ——————---- start */
+/* -----------  Card  ——————---- end */
+/* -----------  Carousel  ——————---- start */
+/* -----------  Carousel  ——————---- end */
+/* -----------  Cascader  ——————---- start */
+/* -----------  Cascader  ——————---- end */
+/* -----------  Switch  ——————---- start */
+/* -----------  Switch  ——————---- end */
+/* -----------  Input  ——————---- start */
+/* -----------  Input  ——————---- end */
+/* -----------  InputNumber  ——————---- start */
+/* -----------  InputNumber  ——————---- end */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- end */
+/* -----------  Radio  ——————---- start */
+/* -----------  Radio  ——————---- end */
+/* -----------  icon  ——————---- start */
+/* -----------  icon  ——————---- end */
+/* -----------  Popconfirm  ——————---- start */
+/* -----------  Popconfirm  ——————---- end */
+/* -----------  Progress  ——————---- start */
+/* -----------  Progress  ——————---- end */
+/* -----------  Pagination  ——————---- start */
+/* -----------  Pagination  ——————---- end */
+/* -----------  Timeline  ——————---- start */
+/* -----------  Timeline  ——————---- end */
+/* -----------  Tabs  ——————---- start */
+/* -----------  Tabs  ——————---- end */
+/* -----------  Select  ——————---- start */
+/* -----------  Select  ——————---- end */
+/* -----------  Rate  ——————---- start */
+/* -----------  Rate  ——————---- end */
+/* -----------  Dropdown  ——————---- start */
+/* -----------  Dropdown  ——————---- end */
+/* -----------  Tooltip  ——————---- start */
+/* -----------  Tooltip  ——————---- end */
+/* -----------  Transfer  ——————---- start */
+/* -----------  Transfer  ——————---- end */
+/* -----------  DatePicker  ——————---- start */
+/* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -19044,6 +20056,8 @@ textarea {
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */
@@ -19280,6 +20294,8 @@ h3.kd-typography,
 /* -----------  Transfer  ——————---- end */
 /* -----------  DatePicker  ——————---- start */
 /* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
 /* -----------  Tree  ——————---- start */
 /* -----------  Tree  ——————---- end */
 /* -----------  Alert  ——————---- start */