@kdcloudjs/kdesign 1.8.29 → 1.8.31

package/lib/city-picker/city-picker.js

@@ -42,7 +42,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
     userDefaultProps = _useContext.compDefaultProps,
-    locale = _useContext.locale;
+    locale = _useContext.locale,
+    direction = _useContext.direction;
   var selectProps = (0, _utils.getCompProps)('CityPicker', userDefaultProps, props);
   var cityPickerLangMsg = locale.getCompLangMsg({
     componentName: 'CityPicker'
@@ -133,7 +134,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     return type === 'domestic';
   };
   var selectPrefixCls = getPrefixCls(prefixCls, 'city-picker', customPrefixcls);
-  var cityPickerCls = (0, _classnames.default)(selectPrefixCls, className, (0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-visible"), optionShow));
+  var rtlCls = direction === 'rtl' ? "".concat(selectPrefixCls, "-rtl") : null;
+  var cityPickerCls = (0, _classnames.default)(selectPrefixCls, rtlCls, className, (0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-visible"), optionShow));
   var selectionCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-selector"), true));
   var commCls = (0, _classnames.default)((_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), (0, _defineProperty2.default)(_classNames3, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames3, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames3, (0, _concat.default)(_context = "".concat(selectPrefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames3, "".concat(selectPrefixCls, "-wrapper"), true), (0, _defineProperty2.default)(_classNames3, "".concat(selectPrefixCls, "-show-search"), focusd), _classNames3));
   (0, _react.useEffect)(function () {
@@ -303,22 +305,38 @@ var InternalSelect = function InternalSelect(props, ref) {
     var symbol = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ', ';
     if (!data) return null;
     if (isDomestic(type)) {
-      var _context6, _context7;
+      var _context8, _context10;
       if (isCommon) {
-        var _context3;
+        var _context4;
         var _curVal = (data === null || data === void 0 ? void 0 : data.province) ? data === null || data === void 0 ? void 0 : data.province : (data === null || data === void 0 ? void 0 : data.country) || '';
-        return (0, _concat.default)(_context3 = "".concat(flag && _curVal ? symbol : '')).call(_context3, _curVal);
+        if (direction === 'rtl') {
+          var _context3;
+          return (0, _concat.default)(_context3 = "".concat(_curVal)).call(_context3, flag && _curVal ? symbol : '');
+        }
+        return (0, _concat.default)(_context4 = "".concat(flag && _curVal ? symbol : '')).call(_context4, _curVal);
       }
       if (data === null || data === void 0 ? void 0 : data.type) {
-        var _context4, _context5;
-        var _curVal2 = (data.type === 'domestic' ? (data === null || data === void 0 ? void 0 : data.province) || (data === null || data === void 0 ? void 0 : data.country) : (0, _filter.default)(_context4 = [data === null || data === void 0 ? void 0 : data.province, data === null || data === void 0 ? void 0 : data.country]).call(_context4, Boolean).join(symbol)) || '';
-        return (0, _concat.default)(_context5 = "".concat(flag && _curVal2 ? symbol : '')).call(_context5, _curVal2);
+        var _context5, _context7;
+        var _curVal2 = (data.type === 'domestic' ? (data === null || data === void 0 ? void 0 : data.province) || (data === null || data === void 0 ? void 0 : data.country) : (0, _filter.default)(_context5 = [data === null || data === void 0 ? void 0 : data.province, data === null || data === void 0 ? void 0 : data.country]).call(_context5, Boolean).join(symbol)) || '';
+        if (direction === 'rtl') {
+          var _context6;
+          return (0, _concat.default)(_context6 = "".concat(_curVal2)).call(_context6, flag && _curVal2 ? symbol : '');
+        }
+        return (0, _concat.default)(_context7 = "".concat(flag && _curVal2 ? symbol : '')).call(_context7, _curVal2);
       }
-      var curVal = tabsValue === 'domestic' ? (data === null || data === void 0 ? void 0 : data.province) || (data === null || data === void 0 ? void 0 : data.country) || '' : (0, _filter.default)(_context6 = [data === null || data === void 0 ? void 0 : data.province, data === null || data === void 0 ? void 0 : data.country]).call(_context6, Boolean).join(symbol);
-      return (0, _concat.default)(_context7 = "".concat(flag && curVal ? symbol : '')).call(_context7, curVal);
+      var curVal = tabsValue === 'domestic' ? (data === null || data === void 0 ? void 0 : data.province) || (data === null || data === void 0 ? void 0 : data.country) || '' : (0, _filter.default)(_context8 = [data === null || data === void 0 ? void 0 : data.province, data === null || data === void 0 ? void 0 : data.country]).call(_context8, Boolean).join(symbol);
+      if (direction === 'rtl') {
+        var _context9;
+        return (0, _concat.default)(_context9 = "".concat(curVal)).call(_context9, flag && curVal ? symbol : '');
+      }
+      return (0, _concat.default)(_context10 = "".concat(flag && curVal ? symbol : '')).call(_context10, curVal);
     } else {
-      var _context8, _context9;
-      return (0, _concat.default)(_context8 = "".concat(flag && ((data === null || data === void 0 ? void 0 : data.province) || (data === null || data === void 0 ? void 0 : data.country)) ? symbol : '')).call(_context8, (0, _filter.default)(_context9 = [data === null || data === void 0 ? void 0 : data.province, data === null || data === void 0 ? void 0 : data.country]).call(_context9, Boolean).join(symbol));
+      var _context13, _context14;
+      if (direction === 'rtl') {
+        var _context11, _context12;
+        return (0, _concat.default)(_context11 = "".concat((0, _filter.default)(_context12 = [data === null || data === void 0 ? void 0 : data.province, data === null || data === void 0 ? void 0 : data.country]).call(_context12, Boolean).join(symbol))).call(_context11, flag && ((data === null || data === void 0 ? void 0 : data.province) || (data === null || data === void 0 ? void 0 : data.country)) ? symbol : '');
+      }
+      return (0, _concat.default)(_context13 = "".concat(flag && ((data === null || data === void 0 ? void 0 : data.province) || (data === null || data === void 0 ? void 0 : data.country)) ? symbol : '')).call(_context13, (0, _filter.default)(_context14 = [data === null || data === void 0 ? void 0 : data.province, data === null || data === void 0 ? void 0 : data.country]).call(_context14, Boolean).join(symbol));
     }
   }, [type, tabsValue]);
   var renderSingle = function renderSingle() {
@@ -479,8 +497,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
   };
   var popperProps = (0, _extends2.default)((0, _extends2.default)({}, selectProps), {
-    prefixCls: "".concat(selectPrefixCls, "-dropdown"),
-    placement: 'bottomLeft',
+    prefixCls: (0, _classnames.default)("".concat(selectPrefixCls, "-dropdown"), rtlCls),
+    placement: direction === 'rtl' ? 'bottomRight' : 'bottomLeft',
     popperStyle: catchStyle(),
     defaultVisible: optionShow,
     visible: optionShow,

package/lib/city-picker/option.js

@@ -33,7 +33,8 @@ var InternalOption = function InternalOption(props, ref) {
     name = city.name;
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
     getPrefixCls = _useContext.getPrefixCls,
-    prefixCls = _useContext.prefixCls;
+    prefixCls = _useContext.prefixCls,
+    direction = _useContext.direction;
   var selectOptionPrefixCls = getPrefixCls(prefixCls, 'city-picker-list-item');
   var isSelected = id !== undefined ? id === value : false;
   var optionCls = (0, _classnames.default)(selectOptionPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-selected"), isSelected), (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-active"), activeIndex === index), _classNames));
@@ -51,7 +52,11 @@ var InternalOption = function InternalOption(props, ref) {
     title: name,
     onClick: handleClick,
     onMouseEnter: handleOnMouseEnter
-  }, typeof itemRender === 'function' ? itemRender(city) : _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("span", {
+  }, typeof itemRender === 'function' ? itemRender(city) : direction === 'rtl' ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("span", {
+    className: "".concat(selectOptionPrefixCls, "-info")
+  }, renderCityInfo === null || renderCityInfo === void 0 ? void 0 : renderCityInfo(city, true)), _react.default.createElement("span", {
+    className: "".concat(selectOptionPrefixCls, "-content")
+  }, children)) : _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("span", {
     className: "".concat(selectOptionPrefixCls, "-content")
   }, children), _react.default.createElement("span", {
     className: "".concat(selectOptionPrefixCls, "-info")

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

@@ -493,3 +493,57 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+.kd-city-picker-rtl {
+  direction: rtl;
+}
+.kd-city-picker-rtl.kd-city-picker .kd-city-picker-description {
+  text-align: right;
+}
+.kd-city-picker-rtl.kd-city-picker .kd-city-picker-selector .kd-city-picker-wrapper {
+  padding-right: 0;
+  padding-left: 24px;
+}
+.kd-city-picker-rtl.kd-city-picker .kd-city-picker-placeholder {
+  position: absolute;
+  left: 24px;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.kd-city-picker-rtl.kd-city-picker .kd-city-picker-bordered {
+  padding-right: var(--kd-c-city-picker-bordered-spacing-padding-left, 8px) !important;
+  padding-left: auto !important;
+}
+.kd-city-picker-rtl.kd-city-picker .kd-city-picker-bordered .kd-city-picker-suffix {
+  padding-right: 8px;
+  padding-left: auto;
+}
+.kd-city-picker-rtl.kd-city-picker .kd-city-picker-bordered .kd-city-picker-placeholder {
+  padding-right: var(--kd-c-city-picker-bordered-spacing-padding-left, 8px);
+}
+.kd-city-picker-rtl.kd-city-picker .kd-city-picker-suffix {
+  left: 0;
+  right: auto;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin-right: 8px;
+}
+.kd-city-picker-rtl.kd-city-picker .kd-city-picker-disabled.kd-city-picker-bordered {
+  padding-right: auto;
+  padding-left: var(--kd-c-city-picker-bordered-spacing-padding-left, 8px);
+}
+.kd-city-picker-rtl.kd-city-picker .kd-city-picker-content-item {
+  position: absolute;
+  right: 0;
+  left: auto;
+}
+.kd-city-picker-rtl.kd-city-picker .kd-city-picker-content-info {
+  text-align: left;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/lib/city-picker/style/index.less

@@ -367,3 +367,70 @@
     }
   }
 }
+
+.@{city-picker-prefix-cls}-rtl {
+  direction: rtl;
+  &.@{city-picker-prefix-cls} {
+    .@{city-picker-prefix-cls}-description {
+      text-align: right;
+    }
+    .@{city-picker-prefix-cls}-selector {
+      .@{city-picker-prefix-cls}-wrapper {
+        padding-right: 0;
+        padding-left: 24px;
+      }
+    }
+    .@{city-picker-prefix-cls}-placeholder {
+      position: absolute;
+      left: 24px;
+      right: 0;
+      top: 0;
+      bottom: 0;
+    }
+
+    .@{city-picker-prefix-cls}-bordered {
+      padding-right: @city-picker-bordered !important;
+      padding-left: auto !important;
+      .@{city-picker-prefix-cls}-suffix {
+        padding-right: 8px;
+        padding-left: auto;
+      }
+
+      .@{city-picker-prefix-cls}-placeholder {
+        padding-right: @city-picker-bordered;
+      }
+    }
+
+    .@{city-picker-prefix-cls}-suffix {
+      left: 0;
+      right: auto;
+      top: 0;
+      bottom: 0;
+      position: absolute;
+      display: flex;
+      margin-right: 8px;
+    }
+
+    
+
+    .@{city-picker-prefix-cls}-disabled {
+      &.@{city-picker-prefix-cls}-bordered {
+        padding-right: auto;
+        padding-left: @city-picker-bordered;
+      }
+    }
+
+    .@{city-picker-prefix-cls}-content {
+      &-item {
+        position: absolute;
+        right: 0;
+        left: auto;
+      }
+
+      &-info {
+        text-align: left;
+        .over();
+      }
+    }
+  }
+}

package/lib/collapse/collapse.js

@@ -30,7 +30,8 @@ var InternalCollapse = _react.default.forwardRef(function (props, ref) {
   var _React$useContext = _react.default.useContext(_ConfigContext.default),
     getPrefixCls = _React$useContext.getPrefixCls,
     prefixCls = _React$useContext.prefixCls,
-    userDefaultProps = _React$useContext.compDefaultProps;
+    userDefaultProps = _React$useContext.compDefaultProps,
+    direction = _React$useContext.direction;
   var _getCompProps = (0, _utils.getCompProps)('Collapse', userDefaultProps, props),
     accordion = _getCompProps.accordion,
     activeKey = _getCompProps.activeKey,
@@ -44,6 +45,7 @@ var InternalCollapse = _react.default.forwardRef(function (props, ref) {
     children = _getCompProps.children,
     customPrefixcls = _getCompProps.prefixCls;
   var CollapsePrefixCls = getPrefixCls(prefixCls, 'collapse', customPrefixcls);
+  var rtlCls = direction === 'rtl' ? "".concat(CollapsePrefixCls, "-rtl") : null;
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     innerKey = _useState2[0],
@@ -110,7 +112,7 @@ var InternalCollapse = _react.default.forwardRef(function (props, ref) {
       }, item.props));
     });
   };
-  var rootClassName = (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(CollapsePrefixCls), true));
+  var rootClassName = (0, _classnames.default)(className, rtlCls, (0, _defineProperty2.default)({}, "".concat(CollapsePrefixCls), true));
   var collapseRef = ref || _react.default.createRef();
   return _react.default.createElement("div", {
     className: rootClassName,

package/lib/collapse/style/index.css

@@ -262,3 +262,27 @@
   cursor: not-allowed !important;
   color: var(--kd-c-collapse-color-disabled, raba(178, 178, 178, 1));
 }
+.kd-collapse-rtl {
+  direction: rtl;
+}
+.kd-collapse-rtl .kd-collapse-panel-top {
+  padding: 8px 28px 8px 50px;
+}
+.kd-collapse-rtl .kd-collapse-panel-icon {
+  margin-left: var(--kd-c-collapse-spacing-margin-right, 6px);
+  margin-right: 0;
+}
+.kd-collapse-rtl .kd-collapse-panel-animation-expand {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+.kd-collapse-rtl .kd-collapse-panel-children > div {
+  text-align: right;
+}
+.kd-collapse-rtl .kd-collapse-panel-children-hide > div {
+  text-align: right;
+}
+.kd-collapse-rtl .kd-collapse-panel-middle {
+  margin-right: 22px;
+  margin-left: 0;
+}

package/lib/collapse/style/index.less

@@ -117,3 +117,29 @@
     }
   }
 }
+
+.@{collapse-prefix-cls}-rtl {
+  direction: rtl;
+  .@{collapse-prefix-cls}-panel {
+    &-top {
+      padding: 8px 28px 8px 50px;
+    }
+    &-icon {
+      margin-left: @collapse-icon-margin-right;
+      margin-right: 0;
+    }
+    &-animation-expand {
+      transform: rotate(180deg);
+    }
+    &-children > div {
+      text-align: right;
+    }
+    &-children-hide > div {
+      text-align: right;
+    }
+    &-middle {
+      margin-right: 22px;
+      margin-left: 0;
+    }
+  }
+}

package/lib/color-picker/color-picker.js

@@ -41,7 +41,8 @@ var InternalColorPicker = function InternalColorPicker(props, ref) {
   var _useContext = (0, _react.useContext)(_configProvider.ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
-    userDefaultProps = _useContext.compDefaultProps;
+    userDefaultProps = _useContext.compDefaultProps,
+    direction = _useContext.direction;
   var colorPickerProps = (0, _utils.getCompProps)('ColorPicker', userDefaultProps, props);
   var value = colorPickerProps.value,
     className = colorPickerProps.className,
@@ -118,8 +119,9 @@ var InternalColorPicker = function InternalColorPicker(props, ref) {
     clickedHistoricalColorIndex = _useState22[0],
     setClickedHistoricalColorIndex = _useState22[1];
   var colorPickerPrefixCls = getPrefixCls(prefixCls, 'color-picker');
-  var popUpLayer = (0, _classnames.default)(getPrefixCls(prefixCls, 'color-picker-pop'), popperClassName);
-  var containerCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-container"), className, (0, _defineProperty2.default)({}, "".concat(colorPickerPrefixCls, "-container-pure"), pure));
+  var rtlCls = direction === 'rtl' ? "".concat(colorPickerPrefixCls, "-rtl") : null;
+  var popUpLayer = (0, _classnames.default)(getPrefixCls(prefixCls, 'color-picker-pop'), rtlCls, popperClassName);
+  var containerCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-container"), rtlCls, className, (0, _defineProperty2.default)({}, "".concat(colorPickerPrefixCls, "-container-pure"), pure));
   var inputCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-input"));
   var inputRef = (0, _react.useRef)(null);
   var showColorPickerPanel = showColorTransfer || typeof showPresetColor === 'boolean' && showPresetColor && ((presetColor === null || presetColor === void 0 ? void 0 : presetColor.length) || _systemPresetColor.systemPresetColor.length) || typeof showPresetColor === 'undefined' || showClear || (historicalColor === null || historicalColor === void 0 ? void 0 : historicalColor.length) || (functionalColor === null || functionalColor === void 0 ? void 0 : functionalColor.length) && showSwitch || (showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showBox) || (showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showHue) || (showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showOpacity);
@@ -310,7 +312,7 @@ var InternalColorPicker = function InternalColorPicker(props, ref) {
   });
   var popperProps = (0, _extends2.default)((0, _extends2.default)({}, otherProps), {
     popperClassName: popUpLayer,
-    placement: 'bottomLeft',
+    placement: direction === 'rtl' ? 'bottomRight' : 'bottomLeft',
     defaultVisible: showPanel,
     visible: showPanel,
     onVisibleChange: null,

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

@@ -202,7 +202,7 @@
           box-sizing: border-box;
   width: var(--kd-c-color-picker-panel-sizing-width, 304px);
   padding: 4px 12px 16px;
-  background: #FFFFFF;
+  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;
@@ -406,7 +406,7 @@
   position: absolute;
   width: 64px !important;
   min-width: unset !important;
-  background: #FFFFFF;
+  background: #ffffff;
   right: 0;
   left: unset !important;
   -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
@@ -510,7 +510,7 @@
 .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-historical-color-box-container-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-historical-color-box-container li {
@@ -571,7 +571,7 @@
 .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) {
+.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-color-box-container li {
@@ -605,3 +605,128 @@
 .kd-color-picker-pop .kd-color-picker-panel-color-box-container li:hover .square {
   display: block;
 }
+.kd-color-picker-rtl {
+  direction: rtl;
+}
+.kd-color-picker-rtl .kd-color-picker-input .kd-input-prefix {
+  margin-right: auto;
+  margin-left: 3px;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel {
+  -webkit-transform-origin: top left;
+          transform-origin: top left;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-clear-box {
+  margin-left: 4px;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-switch span {
+  vertical-align: middle;
+  margin-right: 9px;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container-select {
+  margin-left: 8px;
+  margin-right: 0;
+}
+.kd-color-picker-rtl.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-rtl.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-rtl.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-rtl.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-rtl.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-rtl.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item.active {
+  z-index: 2;
+}
+.kd-color-picker-rtl.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-rtl.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-rtl.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item:nth-child(2):hover {
+  z-index: 1;
+}
+.kd-color-picker-rtl.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-rtl.kd-color-picker-pop .kd-color-picker-panel-container-transparent {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 54px;
+          flex: 0 0 54px;
+  height: 28px;
+  margin-right: 8px;
+  margin-left: 0;
+  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-rtl.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-rtl.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;
+}
+.kd-color-picker-rtl.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-rtl.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 li {
+  margin-right: 8px;
+  margin-top: 8px;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 li:nth-child(12n) {
+  margin-right: 0;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 li:nth-child(-n + 12) {
+  margin-top: 0;
+}
+.kd-color-picker-rtl .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:first-child > div {
+  margin-right: 4px !important;
+  margin-left: 0 !important;
+}