@kdcloudjs/kdesign 1.8.15 → 1.8.16

package/lib/color-picker/style/index.css

@@ -107,45 +107,63 @@
   position: relative;
   width: var(--kd-c-color-picker-input-sizing-width, 230px);
 }
+.kd-color-picker-container-pure {
+  width: 28px;
+}
+.kd-color-picker-container-pure .kd-input-wrapper.kd-color-picker-input {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 100%;
+}
+.kd-color-picker-container-pure .kd-input-wrapper.kd-color-picker-input .kd-input-prefix {
+  margin-right: 0;
+}
+.kd-color-picker-container-pure .kd-input-wrapper.kd-color-picker-input .kd-input-suffix {
+  margin-left: 0;
+}
+.kd-color-picker-container-pure .kd-input-wrapper.kd-color-picker-input .kd-input {
+  display: none;
+}
 .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);
+  padding: 0 8px;
   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);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: var(--kd-c-color-picker-input-prefix-sizing-width, 16px);
+  height: var(--kd-c-color-picker-input-prefix-sizing-height, 16px);
   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-container .kd-color-picker-icon-container .kd-color-picker-icon-no-color-line {
+  width: var(--kd-c-color-picker-input-prefix-line-sizing-width, 1px);
+  height: var(--kd-c-color-picker-input-prefix-line-sizing-height, 22.6px);
+  background-color: #ff2e3d;
+  rotate: 45deg;
 }
 .kd-color-picker-pop {
   width: var(--kd-c-color-picker-panel-sizing-width, 304px);
@@ -172,9 +190,80 @@
           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 > div {
+  margin-top: 12px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-clear {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  font-size: 12px;
+  color: #666666;
+  line-height: 16px;
+  font-weight: 400;
+}
+.kd-color-picker-pop .kd-color-picker-panel-clear-box {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  margin-right: 4px;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  cursor: pointer;
+  background-color: #fff;
+}
+.kd-color-picker-pop .kd-color-picker-panel-clear-box::after {
+  position: absolute;
+  left: 7.5px;
+  top: -3.5px;
+  content: '';
+  width: 1px;
+  height: 22.6px;
+  background-color: #ff2e3d;
+  rotate: 45deg;
+}
+.kd-color-picker-pop .kd-color-picker-panel-clear-box .active {
+  content: '';
+  position: absolute;
+  top: -3px;
+  left: -3px;
+  width: 20px;
+  height: 20px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-clear-box:hover::before {
+  content: '';
+  position: absolute;
+  top: -3px;
+  left: -3px;
+  width: 20px;
+  height: 20px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-clear-box:active::before {
+  content: '';
+  position: absolute;
+  top: -3px;
+  left: -3px;
+  width: 20px;
+  height: 20px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  border: 1px solid #949494;
+}
+.kd-color-picker-pop .kd-color-picker-panel-clear-text {
+  font-size: 12px;
+  color: #666666;
+  line-height: 16px;
+  font-weight: 400;
+}
 .kd-color-picker-pop .kd-color-picker-panel-chrome {
   width: 278px !important;
-  margin-top: 12px;
   -webkit-box-shadow: none !important;
           box-shadow: none !important;
 }
@@ -248,7 +337,6 @@
   display: none;
 }
 .kd-color-picker-pop .kd-color-picker-panel-switch {
-  margin: 12px 0 0;
   font-size: 12px;
   color: #666666;
   letter-spacing: 0;
@@ -265,23 +353,35 @@
   display: flex;
   -ms-flex-wrap: nowrap;
       flex-wrap: nowrap;
-  margin-top: 10px;
 }
-.kd-color-picker-pop .kd-color-picker-panel-container-input {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+.kd-color-picker-pop .kd-color-picker-panel-container-select {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 64px;
+          flex: 0 0 64px;
   display: inline-block;
   position: relative;
+  margin-right: 8px;
   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-container-input .kd-select-dropdown-panel {
+.kd-color-picker-pop .kd-color-picker-panel-container-select .kd-select {
+  width: 64px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-container-select .kd-select .kd-select,
+.kd-color-picker-pop .kd-color-picker-panel-container-select .kd-select .kd-select-selection-item {
+  overflow: visible;
+  text-overflow: unset;
+}
+.kd-color-picker-pop .kd-color-picker-panel-container-select .kd-select-suffix {
+  padding-right: 4px;
+  margin-left: 0;
+}
+.kd-color-picker-pop .kd-color-picker-panel-container-select .kd-select-dropdown-panel {
   margin: 0 !important;
 }
-.kd-color-picker-pop .kd-color-picker-panel-container-input .kd-select-dropdown-panel.bottomLeft,
-.kd-color-picker-pop .kd-color-picker-panel-container-input .kd-select-dropdown-panel.topLeft {
+.kd-color-picker-pop .kd-color-picker-panel-container-select .kd-select-dropdown-panel.bottomLeft,
+.kd-color-picker-pop .kd-color-picker-panel-container-select .kd-select-dropdown-panel.topLeft {
   position: absolute;
-  width: 60px !important;
+  width: 64px !important;
   min-width: unset !important;
   background: #FFFFFF;
   right: 0;
@@ -290,7 +390,7 @@
           box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
   border-radius: 2px;
 }
-.kd-color-picker-pop .kd-color-picker-panel-container-input .kd-select-dropdown-panel .kd-select-dropdown .kd-select-item-option {
+.kd-color-picker-pop .kd-color-picker-panel-container-select .kd-select-dropdown-panel .kd-select-dropdown .kd-select-item-option {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -299,56 +399,159 @@
           justify-content: center;
   min-width: unset;
 }
-.kd-color-picker-pop .kd-color-picker-panel-container-input .kd-select-bordered {
+.kd-color-picker-pop .kd-color-picker-panel-container-select .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;
   padding: 0 28px 0 0;
 }
-.kd-color-picker-pop .kd-color-picker-panel-container-input .kd-select-bordered .kd-select-placeholder {
-  left: 8px;
-}
-.kd-color-picker-pop .kd-color-picker-panel-container-input .active-option {
+.kd-color-picker-pop .kd-color-picker-panel-container-select .active-option {
   background-color: var(--kd-c-color-picker-panel-option-color-background-selected, var(--kd-g-color-theme-3, #e3eeff));
 }
+.kd-color-picker-pop .kd-color-picker-panel-container-input {
+  height: 28px;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
+  padding: 0 8px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-container-input-group {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item {
+  height: 28px;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item.active {
+  z-index: 2;
+}
+.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  z-index: 1;
+}
+.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item:nth-child(2) {
+  margin-right: -1px;
+  margin-left: -1px;
+  border-radius: 0;
+}
+.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item:nth-child(2):hover {
+  z-index: 1;
+}
+.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item:last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
 .kd-color-picker-pop .kd-color-picker-panel-container-transparent {
   -webkit-box-flex: 0;
-      -ms-flex: 0 1 60px;
-          flex: 0 1 60px;
+      -ms-flex: 0 0 54px;
+          flex: 0 0 54px;
   height: 28px;
   margin-left: 8px;
+  padding: 0;
   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 {
+.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-title {
+  font-size: 12px;
+  color: #666666;
+  line-height: 18px;
+  font-weight: 400;
+  margin-bottom: 8px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container {
   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-ie11 {
+.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
-.kd-color-picker-pop .kd-color-picker-panel-colorDivContainer-ie11 li {
+.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 li {
   margin-right: 8px;
   margin-top: 8px;
 }
-.kd-color-picker-pop .kd-color-picker-panel-colorDivContainer-ie11 li:nth-child(12n) {
+.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 li:nth-child(12n) {
   margin-right: 0;
 }
-.kd-color-picker-pop .kd-color-picker-panel-colorDivContainer-ie11 li:nth-child(-n+12) {
+.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 li:nth-child(-n+12) {
   margin-top: 0;
 }
-.kd-color-picker-pop .kd-color-picker-panel-colorDivContainer-unset-color {
+.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container li {
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: var(--kd-c-color-picker-panel-historical-sizing-width, 16px);
+  height: var(--kd-c-color-picker-panel-historical-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-historical-color-box-container 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-historical-sizing-width, 16px) + 4px);
+  height: calc(var(--kd-c-color-picker-panel-historical-sizing-height, 16px) + 4px);
+  border: 1px solid #b2b2b0;
+  border-radius: 4px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container 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-historical-color-box-container li:hover .square {
+  display: block;
+}
+.kd-color-picker-pop .kd-color-picker-panel-color-box-title {
+  font-size: 12px;
+  color: #666666;
+  line-height: 18px;
+  font-weight: 400;
+  margin-bottom: 8px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-color-box-container {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-column-gap: 8px;
+  grid-row-gap: 8px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-color-box-container-ie11 {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+.kd-color-picker-pop .kd-color-picker-panel-color-box-container-ie11 li {
+  margin-right: 8px;
+  margin-top: 8px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-color-box-container-ie11 li:nth-child(12n) {
+  margin-right: 0;
+}
+.kd-color-picker-pop .kd-color-picker-panel-color-box-container-ie11 li:nth-child(-n+12) {
   margin-top: 0;
 }
-.kd-color-picker-pop .kd-color-picker-panel-colorDivContainer li {
+.kd-color-picker-pop .kd-color-picker-panel-color-box-container li {
   position: relative;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -359,7 +562,7 @@
   list-style: none;
   cursor: pointer;
 }
-.kd-color-picker-pop .kd-color-picker-panel-colorDivContainer li .square {
+.kd-color-picker-pop .kd-color-picker-panel-color-box-container li .square {
   display: none;
   position: absolute;
   -webkit-box-sizing: inherit;
@@ -371,11 +574,11 @@
   border: 1px solid #b2b2b0;
   border-radius: 4px;
 }
-.kd-color-picker-pop .kd-color-picker-panel-colorDivContainer li .square-click {
+.kd-color-picker-pop .kd-color-picker-panel-color-box-container 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 {
+.kd-color-picker-pop .kd-color-picker-panel-color-box-container li:hover .square {
   display: block;
 }