vxe-pc-ui 3.3.43 → 3.3.44

package/es/color-picker/src/util.js

@@ -0,0 +1,190 @@
+import XEUtils from 'xe-utils';
+const hexAlphaKeyMaps = {};
+const hexAlphaNumMaps = {};
+'FF,FC,FA,F7,F5,F2,F0,ED,EB,E8,E6,E3,E0,DE,DB,D9,D6,D4,D1,CF,CC,C9,C7,C4,C2,BF,BD,BA,B8,B5,B3,B0,AD,AB,A8,A6,A3,A1,9E,9C,99,96,94,91,8F,8C,8A,87,85,82,80,7D,7A,78,75,73,70,6E,6B,69,66,63,61,5E,5C,59,57,54,52,4F,4D,4A,47,45,42,40,3D,3B,38,36,33,30,2E,2B,29,26,24,21,1F,1C,1A,17,14,12,0F,0D,0A,08,05,03,00'.split(',').forEach((key, i) => {
+    const num = (100 - i) / 100;
+    hexAlphaKeyMaps[key] = num;
+    hexAlphaNumMaps[num] = key;
+});
+const rgbRE = /^rgb(a?)\((\d{1,3})[,\s]+(\d{1,3})[,\s]+(\d{1,3})([,//\s]+([0-9.]{1,4})(%?))?\)$/;
+export function hasRgb(value) {
+    return value && rgbRE.test(value);
+}
+const hexRE = /^(#?)([0-9A-Fa-f]{6})([0-9A-Fa-f]{2})?$/;
+export function hasHex(value) {
+    return value && hexRE.test(value);
+}
+export function parseColor(value) {
+    const rest = {
+        value: '',
+        type: '',
+        hex: '',
+        hexV: '',
+        hexA: '',
+        r: 0,
+        g: 0,
+        b: 0,
+        a: 1
+    };
+    if (value) {
+        const hexRest = value.match(hexRE);
+        if (hexRest) {
+            rest.value = value;
+            rest.type = 'hex';
+            rest.hex = value;
+            rest.hexV = hexRest[2];
+            rest.hexA = hexRest[3] || '';
+            rest.a = (hexRest[3] ? hexAlphaKeyMaps[hexRest[3].toUpperCase()] : 1) || 1;
+        }
+        const rgbRest = value.match(rgbRE);
+        if (rgbRest) {
+            rest.value = value;
+            rest.type = rgbRest[6] ? 'rgba' : 'rgb';
+            rest.r = parseInt(rgbRest[2]);
+            rest.g = parseInt(rgbRest[3]);
+            rest.b = parseInt(rgbRest[4]);
+            rest.a = rgbRest[7] ? parseInt(rgbRest[6]) / 100 : (rgbRest[6] ? parseFloat(rgbRest[6]) : 1);
+        }
+    }
+    return rest;
+}
+export function updateColorAlpha(value, alpha = 1) {
+    const colorRest = parseColor(value);
+    const { type, hexV, r, g, b } = colorRest;
+    if (type === 'rgb' || type === 'rgba') {
+        return toRgb(r, g, b, alpha);
+    }
+    if (type === 'hex') {
+        return `#${hexV}${alpha === 1 ? '' : (hexAlphaNumMaps[alpha] || '')}`;
+    }
+    return '';
+}
+export function toRgb(r, g, b, a) {
+    if (XEUtils.eqNull(a)) {
+        return `rgb(${r},${g},${b})`;
+    }
+    return `rgba(${r},${g},${b},${a})`;
+}
+export function rgbToHex(rgbRest) {
+    if (!rgbRest) {
+        return '';
+    }
+    const { r, g, b, a = 1 } = rgbRest;
+    const hexR = r.toString(16).padStart(2, '0');
+    const hexG = g.toString(16).padStart(2, '0');
+    const hexB = b.toString(16).padStart(2, '0');
+    const hexA = a === 1 ? '' : (hexAlphaNumMaps[a] || '');
+    // 返回十六进制颜色代码
+    return `#${hexR}${hexG}${hexB}${hexA}`.toUpperCase();
+}
+export function rgbToHsv(rgbRest) {
+    if (!rgbRest) {
+        return null;
+    }
+    const { r, g, b } = rgbRest;
+    const rAbs = r / 255;
+    const gAbs = g / 255;
+    const bAbs = b / 255;
+    let h = 0;
+    let s = 0;
+    const val = Math.max(rAbs, gAbs, bAbs);
+    const num = val - Math.min(rAbs, gAbs, bAbs);
+    const handleDiff = (c) => (val - c) / 6 / num + 1 / 2;
+    if (num === 0) {
+        h = s = 0;
+    }
+    else {
+        s = num / val;
+        const rr = handleDiff(rAbs);
+        const gg = handleDiff(gAbs);
+        const bb = handleDiff(bAbs);
+        if (rAbs === val) {
+            h = bb - gg;
+        }
+        else if (gAbs === val) {
+            h = (1 / 3) + rr - bb;
+        }
+        else if (bAbs === val) {
+            h = (2 / 3) + gg - rr;
+        }
+        if (h < 0) {
+            h += 1;
+        }
+        else if (h > 1) {
+            h -= 1;
+        }
+    }
+    return {
+        h: Math.round(h * 360),
+        s: XEUtils.round(s, 2),
+        v: XEUtils.round(val, 2)
+    };
+}
+export function hsvToRgb(h, s, v) {
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    const i = Math.floor(h / 60);
+    const f = h / 60 - i;
+    const p = v * (1 - s);
+    const q = v * (1 - f * s);
+    const t = v * (1 - (1 - f) * s);
+    switch (i) {
+        case 0:
+            r = v;
+            g = t;
+            b = p;
+            break;
+        case 1:
+            r = q;
+            g = v;
+            b = p;
+            break;
+        case 2:
+            r = p;
+            g = v;
+            b = t;
+            break;
+        case 3:
+            r = p;
+            g = q;
+            b = v;
+            break;
+        case 4:
+            r = t;
+            g = p;
+            b = v;
+            break;
+        case 5:
+            r = v;
+            g = p;
+            b = q;
+            break;
+    }
+    return {
+        r: Math.round(r * 255),
+        g: Math.round(g * 255),
+        b: Math.round(b * 255)
+    };
+}
+export function hexToHsv(str) {
+    const rgbRest = hexToRgb(str);
+    if (rgbRest) {
+        return rgbToHsv(rgbRest);
+    }
+    return null;
+}
+export function hexToRgb(str) {
+    if (str) {
+        const rests = str.match(/^(#?)([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})?$/);
+        if (rests) {
+            return {
+                r: parseInt(rests[2], 16),
+                g: parseInt(rests[3], 16),
+                b: parseInt(rests[4], 16),
+                a: (rests[5] ? hexAlphaKeyMaps[rests[5].toUpperCase()] : 1) || 1
+            };
+        }
+    }
+    return null;
+}

package/es/color-picker/style.css

@@ -0,0 +1,355 @@
+.vxe-color-picker {
+  position: relative;
+  display: inline-block;
+  color: var(--vxe-ui-font-color);
+  width: 2.4em;
+  border: 1px solid var(--vxe-ui-input-border-color);
+  border-radius: var(--vxe-ui-base-border-radius);
+  background-color: var(--vxe-ui-layout-background-color);
+  padding: 0.25em;
+}
+.vxe-color-picker.is--selected .vxe-color-picker--inner-color {
+  color: #fff;
+}
+.vxe-color-picker.is--active {
+  border-color: var(--vxe-ui-font-primary-color);
+}
+
+.vxe-color-picker--inner,
+.vxe-color-picker--preview-btn,
+.vxe-color-picker--bar-alpha-slider {
+  background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==);
+}
+
+.vxe-color-picker--inner {
+  width: 100%;
+  height: 100%;
+  background-size: 1em 1em;
+  border-radius: var(--vxe-ui-base-border-radius);
+  cursor: pointer;
+}
+
+.vxe-color-picker--inner-color {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--vxe-ui-input-border-color);
+  border-radius: var(--vxe-ui-base-border-radius);
+}
+
+.vxe-color-picker--panel-wrapper {
+  position: relative;
+  border-radius: var(--vxe-ui-base-border-radius);
+  border: 1px solid var(--vxe-ui-base-popup-border-color);
+  box-shadow: var(--vxe-ui-base-popup-box-shadow);
+  background-color: var(--vxe-ui-layout-background-color);
+}
+
+.vxe-color-picker--panel {
+  display: none;
+  position: absolute;
+  left: 0;
+  padding: 4px 0;
+  color: var(--vxe-ui-font-color);
+  text-align: left;
+}
+.vxe-color-picker--panel:not(.is--transfer) {
+  min-width: 100%;
+}
+.vxe-color-picker--panel.is--transfer {
+  position: fixed;
+}
+.vxe-color-picker--panel.ani--leave {
+  display: block;
+  opacity: 0;
+  transform: scaleY(0.5);
+  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transform-origin: center top;
+  backface-visibility: hidden;
+}
+.vxe-color-picker--panel.ani--leave[placement=top] {
+  transform-origin: center bottom;
+}
+.vxe-color-picker--panel.ani--enter {
+  opacity: 1;
+  transform: scaleY(1);
+}
+
+.vxe-color-picker--color-wrapper {
+  position: relative;
+  height: 130px;
+  width: 23.2em;
+  overflow: hidden;
+}
+
+.vxe-color-picker--white-bg,
+.vxe-color-picker--black-bg,
+.vxe-color-picker--color-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.vxe-color-picker--white-bg {
+  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+}
+
+.vxe-color-picker--black-bg {
+  background: linear-gradient(to top, #000, rgba(255, 255, 255, 0));
+}
+
+.vxe-color-picker--color-active {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0.8em;
+  height: 0.8em;
+  border-radius: 50%;
+  border: 1px solid #ffffff;
+  background-color: transparent;
+  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
+  transform: translate(-0.4em, -0.4em);
+}
+
+.vxe-color-picker--quick-wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: 9.2em;
+}
+
+.vxe-color-picker--quick-item {
+  width: 1.5em;
+  height: 1.5em;
+  margin: 0.4em;
+  border: 1px solid var(--vxe-ui-base-popup-border-color);
+  border-radius: var(--vxe-ui-base-border-radius);
+  cursor: pointer;
+  transition: transform 0.1s ease-in-out;
+}
+.vxe-color-picker--quick-item:hover {
+  transform: scale(1.2);
+  border-color: var(--vxe-ui-font-primary-lighten-color);
+}
+.vxe-color-picker--quick-item:active {
+  transform: scale(0.8);
+}
+
+.vxe-color-picker--bar-wrapper {
+  margin-top: 0.4em;
+}
+
+.vxe-color-picker--slider-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+.vxe-color-picker--slider-preview {
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  padding-left: 0.5em;
+}
+
+.vxe-color-picker--preview-btn,
+.vxe-color-picker--preview-color {
+  width: 2.2em;
+  height: 2.2em;
+  border-radius: 50%;
+}
+
+.vxe-color-picker--preview-btn {
+  background-size: 0.8em 0.8em;
+}
+
+.vxe-color-picker--preview-color {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--vxe-ui-base-popup-border-color);
+}
+.vxe-color-picker--preview-color:hover::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 0;
+}
+.vxe-color-picker--preview-color:hover .vxe-color-picker--preview-copy-btn {
+  display: block;
+  z-index: 1;
+}
+.vxe-color-picker--preview-color:active .vxe-color-picker--preview-copy-btn {
+  font-size: 0.8em;
+}
+
+.vxe-color-picker--preview-copy-btn {
+  display: none;
+  color: #ffffff;
+  cursor: pointer;
+}
+
+.vxe-color-picker--slider-handle {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-grow: 1;
+  padding: 0 0.6em;
+}
+
+.vxe-color-picker--bar-hue-slider,
+.vxe-color-picker--bar-alpha-slider {
+  position: relative;
+  height: 1em;
+  width: 100%;
+  margin: 0.4em 0;
+  cursor: pointer;
+}
+
+.vxe-color-picker--bar-hue-slider,
+.vxe-color-picker--bar-alpha-slider,
+.vxe-color-picker--bar-alpha-bg {
+  border-radius: var(--vxe-ui-base-border-radius);
+}
+
+.vxe-color-picker--bar-hue-slider {
+  background: linear-gradient(to left, red, #ff0 17%, #0f0 33%, #0ff, #00f 67%, #f0f 83%, red);
+}
+
+.vxe-color-picker--bar-hue-btn,
+.vxe-color-picker--bar-alpha-btn {
+  position: absolute;
+  left: 0;
+  top: -4px;
+  width: 0.6em;
+  height: calc(100% + 8px);
+  border-radius: 0.2em;
+  background-color: #fff;
+  border: 1px solid var(--vxe-ui-base-popup-border-color);
+  transform: translateX(-0.3em);
+  cursor: grab;
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);
+  transition: transform 0.1s ease-in-out;
+}
+.vxe-color-picker--bar-hue-btn:hover,
+.vxe-color-picker--bar-alpha-btn:hover {
+  transform: translateX(-0.3em) scale(1.1);
+}
+.vxe-color-picker--bar-hue-btn:active,
+.vxe-color-picker--bar-alpha-btn:active {
+  transform: translateX(-0.3em) scale(1.2);
+  cursor: grabbing;
+}
+
+.vxe-color-picker--bar-alpha-slider {
+  background-size: 1em 1em;
+}
+.vxe-color-picker--bar-alpha-slider .vxe-color-picker--bar-alpha-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.vxe-color-picker--hex-wrapper,
+.vxe-color-picker--rgb-wrapper {
+  text-align: center;
+  margin-top: 0.4em;
+}
+
+.vxe-color-picker--hex-wrapper {
+  display: flex;
+  flex-direction: row;
+  padding: 0 1.8em;
+}
+.vxe-color-picker--hex-wrapper .vxe-color-picker--input-wrapper > .vxe-input {
+  width: 12em;
+}
+.vxe-color-picker--hex-wrapper .vxe-color-picker--input-title {
+  padding: 0 0.6em;
+}
+
+.vxe-color-picker--input-title {
+  color: var(--vxe-ui-input-placeholder-color);
+}
+
+.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-wrapper > .vxe-input {
+  width: 5.4em;
+  margin: 0 0.4em;
+}
+.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  line-height: 1.4em;
+}
+.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-title > span {
+  display: block;
+  width: 50px;
+  margin: 0 0.4em;
+}
+
+.vxe-color-picker--footer-wrapper {
+  text-align: right;
+  margin-top: 0.4em;
+  padding: 0 0.4em 0.4em 0.4em;
+}
+
+.vxe-color-picker {
+  height: var(--vxe-ui-input-height-default);
+  line-height: var(--vxe-ui-input-height-default);
+}
+.vxe-color-picker.size--medium {
+  height: var(--vxe-ui-input-height-medium);
+  line-height: var(--vxe-ui-input-height-medium);
+}
+.vxe-color-picker.size--small {
+  height: var(--vxe-ui-input-height-small);
+  line-height: var(--vxe-ui-input-height-small);
+}
+.vxe-color-picker.size--mini {
+  height: var(--vxe-ui-input-height-mini);
+  line-height: var(--vxe-ui-input-height-mini);
+}
+
+.vxe-color-picker,
+.vxe-color-picker--panel {
+  font-size: var(--vxe-ui-font-size-default);
+}
+.vxe-color-picker.size--medium,
+.vxe-color-picker--panel.size--medium {
+  font-size: var(--vxe-ui-font-size-medium);
+}
+.vxe-color-picker.size--small,
+.vxe-color-picker--panel.size--small {
+  font-size: var(--vxe-ui-font-size-small);
+}
+.vxe-color-picker.size--mini,
+.vxe-color-picker--panel.size--mini {
+  font-size: var(--vxe-ui-font-size-mini);
+}

package/es/color-picker/style.min.css

@@ -0,0 +1 @@
+.vxe-color-picker{position:relative;display:inline-block;color:var(--vxe-ui-font-color);width:2.4em;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-layout-background-color);padding:.25em}.vxe-color-picker.is--selected .vxe-color-picker--inner-color{color:#fff}.vxe-color-picker.is--active{border-color:var(--vxe-ui-font-primary-color)}.vxe-color-picker--bar-alpha-slider,.vxe-color-picker--inner,.vxe-color-picker--preview-btn{background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==)}.vxe-color-picker--inner{width:100%;height:100%;background-size:1em 1em;border-radius:var(--vxe-ui-base-border-radius);cursor:pointer}.vxe-color-picker--inner-color{width:100%;height:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-color-picker--panel-wrapper{position:relative;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:var(--vxe-ui-base-popup-box-shadow);background-color:var(--vxe-ui-layout-background-color)}.vxe-color-picker--panel{display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-color-picker--panel:not(.is--transfer){min-width:100%}.vxe-color-picker--panel.is--transfer{position:fixed}.vxe-color-picker--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden}.vxe-color-picker--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-color-picker--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-color-picker--color-wrapper{position:relative;height:130px;width:23.2em;overflow:hidden}.vxe-color-picker--black-bg,.vxe-color-picker--color-bg,.vxe-color-picker--white-bg{position:absolute;top:0;left:0;width:100%;height:100%}.vxe-color-picker--white-bg{background:linear-gradient(to right,#fff,rgba(255,255,255,0))}.vxe-color-picker--black-bg{background:linear-gradient(to top,#000,rgba(255,255,255,0))}.vxe-color-picker--color-active{position:absolute;left:0;top:0;width:.8em;height:.8em;border-radius:50%;border:1px solid #fff;background-color:transparent;box-shadow:0 0 4px 1px rgba(0,0,0,.3);transform:translate(-.4em,-.4em)}.vxe-color-picker--quick-wrapper{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;overflow-x:hidden;overflow-y:auto;max-height:9.2em}.vxe-color-picker--quick-item{width:1.5em;height:1.5em;margin:.4em;border:1px solid var(--vxe-ui-base-popup-border-color);border-radius:var(--vxe-ui-base-border-radius);cursor:pointer;transition:transform .1s ease-in-out}.vxe-color-picker--quick-item:hover{transform:scale(1.2);border-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-color-picker--quick-item:active{transform:scale(.8)}.vxe-color-picker--bar-wrapper{margin-top:.4em}.vxe-color-picker--slider-wrapper{display:flex;flex-direction:row}.vxe-color-picker--slider-preview{display:flex;flex-direction:row;flex-shrink:0;align-items:center;justify-content:center;width:60px;padding-left:.5em}.vxe-color-picker--preview-btn,.vxe-color-picker--preview-color{width:2.2em;height:2.2em;border-radius:50%}.vxe-color-picker--preview-btn{background-size:.8em .8em}.vxe-color-picker--preview-color{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;border:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-color-picker--preview-color:hover::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background-color:rgba(0,0,0,.3);z-index:0}.vxe-color-picker--preview-color:hover .vxe-color-picker--preview-copy-btn{display:block;z-index:1}.vxe-color-picker--preview-color:active .vxe-color-picker--preview-copy-btn{font-size:.8em}.vxe-color-picker--preview-copy-btn{display:none;color:#fff;cursor:pointer}.vxe-color-picker--slider-handle{display:flex;flex-direction:column;justify-content:center;flex-grow:1;padding:0 .6em}.vxe-color-picker--bar-alpha-slider,.vxe-color-picker--bar-hue-slider{position:relative;height:1em;width:100%;margin:.4em 0;cursor:pointer}.vxe-color-picker--bar-alpha-bg,.vxe-color-picker--bar-alpha-slider,.vxe-color-picker--bar-hue-slider{border-radius:var(--vxe-ui-base-border-radius)}.vxe-color-picker--bar-hue-slider{background:linear-gradient(to left,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.vxe-color-picker--bar-alpha-btn,.vxe-color-picker--bar-hue-btn{position:absolute;left:0;top:-4px;width:.6em;height:calc(100% + 8px);border-radius:.2em;background-color:#fff;border:1px solid var(--vxe-ui-base-popup-border-color);transform:translateX(-.3em);cursor:grab;box-shadow:0 0 8px 0 rgba(0,0,0,.3);transition:transform .1s ease-in-out}.vxe-color-picker--bar-alpha-btn:hover,.vxe-color-picker--bar-hue-btn:hover{transform:translateX(-.3em) scale(1.1)}.vxe-color-picker--bar-alpha-btn:active,.vxe-color-picker--bar-hue-btn:active{transform:translateX(-.3em) scale(1.2);cursor:grabbing}.vxe-color-picker--bar-alpha-slider{background-size:1em 1em}.vxe-color-picker--bar-alpha-slider .vxe-color-picker--bar-alpha-bg{position:absolute;top:0;left:0;width:100%;height:100%}.vxe-color-picker--hex-wrapper,.vxe-color-picker--rgb-wrapper{text-align:center;margin-top:.4em}.vxe-color-picker--hex-wrapper{display:flex;flex-direction:row;padding:0 1.8em}.vxe-color-picker--hex-wrapper .vxe-color-picker--input-wrapper>.vxe-input{width:12em}.vxe-color-picker--hex-wrapper .vxe-color-picker--input-title{padding:0 .6em}.vxe-color-picker--input-title{color:var(--vxe-ui-input-placeholder-color)}.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:center}.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-wrapper>.vxe-input{width:5.4em;margin:0 .4em}.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-title{display:flex;flex-direction:row;align-items:center;justify-content:center;line-height:1.4em}.vxe-color-picker--rgb-wrapper .vxe-color-picker--input-title>span{display:block;width:50px;margin:0 .4em}.vxe-color-picker--footer-wrapper{text-align:right;margin-top:.4em;padding:0 .4em .4em .4em}.vxe-color-picker{height:var(--vxe-ui-input-height-default);line-height:var(--vxe-ui-input-height-default)}.vxe-color-picker.size--medium{height:var(--vxe-ui-input-height-medium);line-height:var(--vxe-ui-input-height-medium)}.vxe-color-picker.size--small{height:var(--vxe-ui-input-height-small);line-height:var(--vxe-ui-input-height-small)}.vxe-color-picker.size--mini{height:var(--vxe-ui-input-height-mini);line-height:var(--vxe-ui-input-height-mini)}.vxe-color-picker,.vxe-color-picker--panel{font-size:var(--vxe-ui-font-size-default)}.vxe-color-picker--panel.size--medium,.vxe-color-picker.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-color-picker--panel.size--small,.vxe-color-picker.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-color-picker--panel.size--mini,.vxe-color-picker.size--mini{font-size:var(--vxe-ui-font-size-mini)}