acud 0.0.67 → 0.0.70

package/lib/cascader/Menus.js

@@ -25,6 +25,8 @@ var _some = _interopRequireDefault(require("lodash/some"));
 
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
 var _map = _interopRequireDefault(require("lodash/map"));
 
 var _every = _interopRequireDefault(require("lodash/every"));
@@ -87,18 +89,20 @@ var Menus = /*#__PURE__*/function (_React$Component) {
       };
     };
 
-    _this.onShowPrepare = function () {
+    _this.onShowActive = function () {
       _this.scrollActiveItemToView();
 
-      return new Promise(function (resolve) {
-        _this.delayOnEvent(function () {
-          _this.setMenuPosition();
+      window.setTimeout(function () {
+        _this.setMenuPosition();
 
-          _this.openMenuScroll();
+        window.setTimeout(function () {
+          _this.handleMenuScrollChange(true);
+        }, 0);
+      }, 0);
+    };
 
-          _this.delayOnEvent(resolve);
-        });
-      });
+    _this.onShowEnd = function () {
+      _this.handleMenuScrollChange(false);
     };
 
     _this.state = {
@@ -163,7 +167,7 @@ var Menus = /*#__PURE__*/function (_React$Component) {
       var onItemDoubleClick = this.props.onItemDoubleClick.bind(this, option, menuIndex);
 
       var handleClick = function handleClick(e) {
-        isMulti && !(hasChildren || option.isLeaf === false) ? undefined : onSelect(e);
+        isMulti && !hasLeaf ? undefined : onSelect(e);
       };
 
       var handleMultiClick = function handleMultiClick(e) {
@@ -323,9 +327,9 @@ var Menus = /*#__PURE__*/function (_React$Component) {
         checked: checked,
         indeterminate: indeterminate,
         onChange: onMultiSelectAll
-      }, /*#__PURE__*/_react["default"].createElement("span", {
+      }), /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(prefixCls, "-menu-item-label")
-      }, "\u5168\u9009"))));
+      }, "\u5168\u9009")));
     }
   }, {
     key: "getActiveOptions",
@@ -349,7 +353,7 @@ var Menus = /*#__PURE__*/function (_React$Component) {
       var result = this.getActiveOptions().map(function (activeOption) {
         return activeOption[_this4.getFieldName('children')];
       }).filter(function (activeOption) {
-        return !!activeOption;
+        return !(0, _isEmpty["default"])(activeOption);
       });
       result.unshift(options);
       return result;
@@ -375,13 +379,6 @@ var Menus = /*#__PURE__*/function (_React$Component) {
         }, 150);
       }
     }
-  }, {
-    key: "openMenuScroll",
-    value: function openMenuScroll() {
-      this.setState({
-        menuScrollOpen: true
-      });
-    }
   }, {
     key: "scrollActiveItemToView",
     value: function scrollActiveItemToView() {
@@ -389,10 +386,12 @@ var Menus = /*#__PURE__*/function (_React$Component) {
       var optionsLength = this.getShowOptions().length; // eslint-disable-next-line no-plusplus
 
       for (var i = 0; i < optionsLength; i++) {
-        var itemComponent = this.menuItems[i];
+        var menuItem = this.menuItems[i];
+        var menuItemParent = menuItem && menuItem.parentElement;
 
-        if (itemComponent && itemComponent.parentElement) {
-          itemComponent.parentElement.scrollTop = itemComponent.offsetTop;
+        if (menuItemParent) {
+          var paddingTop = Number((0, _utils.getElementStyle)(menuItemParent).paddingTop.replace('px', ''));
+          menuItemParent.scrollTop = menuItem.offsetTop - paddingTop;
         }
       }
     }
@@ -453,6 +452,13 @@ var Menus = /*#__PURE__*/function (_React$Component) {
         callback();
       }
     }
+  }, {
+    key: "handleMenuScrollChange",
+    value: function handleMenuScrollChange(menuScrollOpen) {
+      this.setState({
+        menuScrollOpen: menuScrollOpen
+      });
+    }
   }, {
     key: "render",
     value: function render() {
@@ -474,8 +480,9 @@ var Menus = /*#__PURE__*/function (_React$Component) {
         motionName: transitionName,
         removeOnLeave: false,
         leavedClassName: "".concat(prefixCls, "-menu-wrap-hidden"),
-        onAppearPrepare: this.onShowPrepare,
-        onEnterPrepare: this.onShowPrepare
+        onAppearActive: this.onShowActive,
+        onEnterActive: this.onShowActive,
+        onLeaveEnd: this.onShowEnd
       }, function (_ref2) {
         var _classnames2;
 

package/lib/cascader/index.js

@@ -21,6 +21,8 @@ var _get = _interopRequireDefault(require("lodash/get"));
 
 var _first = _interopRequireDefault(require("lodash/first"));
 
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _classnames6 = _interopRequireDefault(require("classnames"));
@@ -35,9 +37,7 @@ var _OutlinedLeft = _interopRequireDefault(require("acud-icon/lib/icons/Outlined
 
 var _OutlinedRight = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedRight"));
 
-var _OutlinedRefresh = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedRefresh"));
-
-var _OutlinedClose = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedClose"));
+var _OutlinedLoading = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedLoading"));
 
 var _OutlinedDown = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedDown"));
 
@@ -47,6 +47,8 @@ var _tag = _interopRequireDefault(require("../tag"));
 
 var _tooltip = _interopRequireDefault(require("../tooltip"));
 
+var _clear = _interopRequireDefault(require("../clear"));
+
 var _Cascader = _interopRequireDefault(require("./Cascader"));
 
 var _renderEmpty = _interopRequireDefault(require("./renderEmpty"));
@@ -174,6 +176,7 @@ var Cascader = function Cascader(props, ref) {
   var cachedRef = (0, _react.useRef)({});
   var measureRef = (0, _react.useRef)();
   var pickerRef = (0, _react.useRef)();
+  var pickerLabelRef = (0, _react.useRef)();
   var tagsRef = (0, _react.useRef)();
 
   var _useState = (0, _react.useState)(props.value || props.defaultValue || []),
@@ -201,6 +204,11 @@ var Cascader = function Cascader(props, ref) {
       popupVisible = _useState10[0],
       setPopupVisible = _useState10[1];
 
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+      pickerLabelOverflow = _useState12[0],
+      setPickerLabelOverflow = _useState12[1];
+
   var isMulti = mode === 'multiple';
   var flattenOptions = (0, _react.useMemo)(function () {
     var showSearch = props.showSearch,
@@ -309,9 +317,12 @@ var Cascader = function Cascader(props, ref) {
     (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, selectedOptions);
   }, [props]);
   var handleMouseDown = (0, _react.useCallback)(function (e) {
-    if (e.target !== inputRef.current) {
-      e.preventDefault();
-    }
+    e.preventDefault();
+  }, []);
+  var handlePickerLabelHover = (0, _react.useCallback)(function () {
+    var ele = pickerLabelRef.current;
+    var overflow = (ele === null || ele === void 0 ? void 0 : ele.scrollWidth) > (ele === null || ele === void 0 ? void 0 : ele.clientWidth);
+    setPickerLabelOverflow(overflow);
   }, []);
   var handleClick = (0, _react.useCallback)(function (e) {
     if (e.target !== inputRef.current) {
@@ -526,11 +537,11 @@ var Cascader = function Cascader(props, ref) {
 
     var loadingIcon = /*#__PURE__*/_react["default"].createElement("span", {
       className: "".concat(prefixCls, "-menu-item-loading-icon")
-    }, /*#__PURE__*/_react["default"].createElement(_OutlinedRefresh["default"], {
+    }, /*#__PURE__*/_react["default"].createElement(_OutlinedLoading["default"], {
       animation: "spin"
     }));
 
-    var clearIcon = allowClear && !disabled && value.length > 0 || inputValue ? /*#__PURE__*/_react["default"].createElement(_OutlinedClose["default"], {
+    var clearIcon = allowClear && !disabled && value.length > 0 || inputValue ? /*#__PURE__*/_react["default"].createElement(_clear["default"], {
       className: "".concat(prefixCls, "-picker-clear"),
       onClick: handleSelectionClear
     }) : null;
@@ -573,7 +584,8 @@ var Cascader = function Cascader(props, ref) {
           className: "".concat(prefixCls, "-tag-wrap"),
           key: labelIndex
         }, /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
-          title: labelItem
+          title: labelItem,
+          overlayClassName: "".concat(prefixCls, "-tag-tooltip")
         }, /*#__PURE__*/_react["default"].createElement(_tag["default"], {
           className: "".concat(prefixCls, "-tag"),
           disabled: disabled,
@@ -659,10 +671,15 @@ var Cascader = function Cascader(props, ref) {
       style: style,
       className: pickerCls,
       disabled: disabled
+    }, label && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+      title: pickerLabelOverflow ? label : undefined,
+      overlayClassName: "".concat(prefixCls, "-picker-label-tooltip")
     }, /*#__PURE__*/_react["default"].createElement("span", {
+      ref: pickerLabelRef,
       className: "".concat(prefixCls, "-picker-label"),
-      disabled: disabled
-    }, label), /*#__PURE__*/_react["default"].createElement(_input["default"], (0, _extends2["default"])({}, inputProps, {
+      disabled: disabled,
+      onMouseOver: handlePickerLabelHover
+    }, label)), /*#__PURE__*/_react["default"].createElement(_input["default"], (0, _extends2["default"])({}, inputProps, {
       tabIndex: -1,
       ref: inputRef,
       prefixCls: inputPrefixCls,
@@ -704,7 +721,7 @@ var Cascader = function Cascader(props, ref) {
       onPopupVisibleChange: handlePopupVisibleChange,
       onChange: handleValueChange
     }), input);
-  }, [props, isMulti, label, value, disabledValue, inputValue, inputWidth, inputFocused, popupVisible, blur, focus, getPopupPlacement, generateFilteredOptions, handleClick, handleMouseDown, handleInputClick, handleInputBlur, handleInputFocus, handleInputKeyDown, handleInputChange, handleSelectionClear, handleSelectionItemClear, handleValueChange, handlePopupVisibleChange]);
+  }, [props, isMulti, label, value, disabledValue, pickerLabelOverflow, inputValue, inputWidth, inputFocused, popupVisible, blur, focus, getPopupPlacement, generateFilteredOptions, handleClick, handleMouseDown, handlePickerLabelHover, handleInputClick, handleInputBlur, handleInputFocus, handleInputKeyDown, handleInputChange, handleSelectionClear, handleSelectionItemClear, handleValueChange, handlePopupVisibleChange]);
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       focus: focus,
@@ -725,6 +742,11 @@ var Cascader = function Cascader(props, ref) {
       }
     };
   }, []);
+  (0, _react.useEffect)(function () {
+    if ('value' in props && !(0, _isEqual["default"])(value, props.value)) {
+      setValue(props.value);
+    }
+  }, [props.value]);
   return /*#__PURE__*/_react["default"].createElement(_configProvider.ConfigConsumer, null, function (context) {
     return /*#__PURE__*/_react["default"].createElement(_LocaleReceiver["default"], null, function (locale) {
       return /*#__PURE__*/_react["default"].createElement(_SizeContext["default"].Consumer, null, function (size) {

package/lib/cascader/style/index.css

@@ -150,64 +150,9 @@
 .acud-cascader-picker-clear {
   position: absolute;
   top: 50%;
-  right: 32px;
+  right: 30px;
   z-index: 2;
-  width: 12px;
-  height: 12px;
-  margin-top: -6px;
-  line-height: 12px;
-  cursor: pointer;
-  border-radius: 50%;
-  text-align: center;
-  transition: color 0.3s ease, opacity 0.15s ease;
-}
-.acud-cascader-picker-clear.acuicon {
-  display: flex;
-  color: #FFFFFF;
-  background-color: #D4D6D9;
-  border-color: transparent;
-}
-.acud-cascader-picker-clear.acuicon:hover {
-  color: #FFFFFF;
-}
-.acud-cascader-picker-clear.acuicon:focus,
-.acud-cascader-picker-clear.acuicon:active {
-  color: #FFFFFF;
-}
-.acud-cascader-picker-clear.acuicon[disabled],
-.acud-cascader-picker-clear.acuicon[disabled]:hover,
-.acud-cascader-picker-clear.acuicon[disabled]:focus,
-.acud-cascader-picker-clear.acuicon[disabled]:active {
-  color: #FFFFFF;
-}
-.acud-cascader-picker-clear.acuicon:hover {
-  background-color: #5C5F66;
-}
-.acud-cascader-picker-clear.acuicon:focus,
-.acud-cascader-picker-clear.acuicon:active {
-  background-color: #303540;
-}
-.acud-cascader-picker-clear.acuicon[disabled],
-.acud-cascader-picker-clear.acuicon[disabled]:hover,
-.acud-cascader-picker-clear.acuicon[disabled]:focus,
-.acud-cascader-picker-clear.acuicon[disabled]:active {
-  background-color: #F2F2F4;
-}
-.acud-cascader-picker-clear.acuicon:hover {
-  border-color: transparent;
-}
-.acud-cascader-picker-clear.acuicon:focus,
-.acud-cascader-picker-clear.acuicon:active {
-  border-color: transparent;
-}
-.acud-cascader-picker-clear.acuicon[disabled],
-.acud-cascader-picker-clear.acuicon[disabled]:hover,
-.acud-cascader-picker-clear.acuicon[disabled]:focus,
-.acud-cascader-picker-clear.acuicon[disabled]:active {
-  border-color: transparent;
-}
-.acud-cascader-picker-clear > svg {
-  transform: scale(0.6);
+  margin-top: -8px;
 }
 .acud-cascader-picker-arrow {
   position: absolute;
@@ -238,7 +183,7 @@
   color: #B8BABF;
 }
 .acud-cascader-picker-arrow-expand {
-  transform: rotate(-180deg);
+  transform: rotate(180deg);
 }
 .acud-cascader-picker-arrow > svg {
   width: 16px;
@@ -386,7 +331,9 @@
   color: #151B26;
   background-color: #FFFFFF;
   border-color: transparent;
-  padding: 0 8px 0 12px;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 12px;
   height: 32px;
   line-height: 32px;
   cursor: pointer;
@@ -434,17 +381,18 @@
   border-color: transparent;
 }
 .acud-cascader-menu-item-content {
-  width: calc(100% - 3 * 4px);
+  display: flex;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.acud-cascader-menu-item-checkbox {
+.acud-cascader-menu-item-checkbox.acud-checkbox-wrapper {
   vertical-align: middle;
+  margin-right: 8px;
 }
-.acud-cascader-menu-item-checkbox .acud-checkbox {
+.acud-cascader-menu-item-checkbox.acud-checkbox-wrapper .acud-checkbox {
   top: 0;
 }
-.acud-cascader-menu-item-checkbox .acud-checkbox + span {
+.acud-cascader-menu-item-label {
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -466,15 +414,11 @@
 }
 .acud-cascader-menu-item-expand {
   position: relative;
+  padding-right: 8px;
 }
 .acud-cascader-menu-item-expand .acud-cascader-menu-item-expand-icon,
 .acud-cascader-menu-item-loading-icon {
   color: #84868C;
-  position: absolute;
-  right: 8px;
-  top: 50%;
-  transform: translateY(-50%);
-  line-height: 0;
 }
 .acud-cascader-menu-item-expand .acud-cascader-menu-item-expand-icon:hover,
 .acud-cascader-menu-item-loading-icon:hover {
@@ -499,3 +443,8 @@
 .acud-cascader-menu-item .acud-cascader-menu-item-keyword {
   color: #2468F2;
 }
+.acud-cascader-tag-tooltip.acud-tooltip,
+.acud-cascader-picker-label-tooltip.acud-tooltip,
+.acud-cascader-menu-item-tooltip.acud-tooltip {
+  max-width: initial;
+}

package/lib/cascader/style/index.less

@@ -96,26 +96,11 @@
         }
 
         &-clear {
-            &.acuicon {
-                display: flex;
-                .basic-config(@cascader-picker-clear-tp, @cascader-picker-clear-p);
-            }
             position: absolute;
             top: 50%;
-            right: 8 * @P;
+            right: 7.5 * @P;
             z-index: 2;
-            width: 3 * @P;
-            height: 3 * @P;
-            margin-top: -1.5 * @P;
-            line-height: 12px;
-            cursor: pointer;
-            border-radius: 50%;
-            text-align: center;
-            transition: color .3s ease, opacity .15s ease;
-
-            & > svg {
-                transform: scale(.6);
-            }
+            margin-top: -2 * @P;
         }
 
         // arrow
@@ -135,7 +120,7 @@
             transition: transform .48s;
 
             &-expand {
-                transform: rotate(-180deg);
+                transform: rotate(180deg);
             }
 
             & > svg {
@@ -317,7 +302,9 @@
     &-menu-item {
         .basic-config(@cascader-menu-item-tp, @cascader-menu-item-p);
 
-        padding: 0 @padding-sm 0 @padding-m;
+        display: flex;
+        justify-content: space-between;
+        padding: 0 3 * @P;
         height: @cascader-menu-item-height;
         line-height: @cascader-menu-item-height;
         cursor: pointer;
@@ -326,24 +313,25 @@
         transition: all .3s;
 
         &-content {
-            width: calc(100% - 3 * @P);
+            display: flex;
             overflow: hidden;
             text-overflow: ellipsis;
         }
 
-        &-checkbox {
+        &-checkbox.@{acud-prefix}-checkbox-wrapper {
             vertical-align: middle;
+            margin-right: 2 * @P;
 
             .@{acud-prefix}-checkbox {
                 top: 0;
-
-                & + span {
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                }
             }
         }
 
+        &-label {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
         &-disabled {
             cursor: not-allowed;
 
@@ -367,22 +355,26 @@
 
         &-expand {
             position: relative;
+            padding-right: 2 * @P;
         }
 
         &-expand &-expand-icon,
         &-loading-icon {
             .basic-tp-config(tp7);
-            position: absolute;
-            right: 2 * @P;
-            top: 50%;
-            transform: translateY(-50%);
-            line-height: 0;
         }
 
         & &-keyword {
             color: @B6;
         }
     }
+
+    &-tag-tooltip,
+    &-picker-label-tooltip,
+    &-menu-item-tooltip {
+        &.@{acud-prefix}-tooltip {
+            max-width: initial;
+        }
+    }
 }
 
 // @import './rtl';

package/lib/clear/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @file clear
+ * @author xuemin02
+ */
+import { IconProps } from 'acud-icon/lib/components/interface';
+import './style';
+export interface ClearProps extends IconProps {
+    ref?: any;
+    prefixCls?: string;
+}
+declare const Clear: (props: ClearProps) => JSX.Element;
+export default Clear;

package/lib/clear/index.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _OutlinedCloseBold = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedCloseBold"));
+
+var _configProvider = require("../config-provider");
+
+require("./style");
+
+/**
+ * @file clear
+ * @author xuemin02
+ */
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var Clear = function Clear(props) {
+  var customizePrefixCls = props.prefixCls,
+      className = props.className,
+      otherProps = __rest(props, ["prefixCls", "className"]);
+
+  var _React$useContext = _react["default"].useContext(_configProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls;
+
+  var prefixCls = getPrefixCls('clear', customizePrefixCls);
+  var clearCls = (0, _classnames["default"])(prefixCls, className);
+  return /*#__PURE__*/_react["default"].createElement(_OutlinedCloseBold["default"], (0, _extends2["default"])({
+    className: clearCls
+  }, otherProps));
+};
+
+var _default = Clear;
+exports["default"] = _default;

package/lib/clear/style/css.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../style/index.css");
+
+require("./index.css");

package/lib/clear/style/index.css

@@ -0,0 +1,63 @@
+/* color */
+/* 默认颜色 */
+/* 通用-icon */
+/* 标签 */
+/* 默认颜色 */
+/* 其他颜色 */
+/* 通用 */
+/* 水平 */
+/* 垂直 */
+/* 序号水平 */
+/* 序号垂直 */
+.acud-clear.acudicon {
+  color: #FFFFFF;
+  background-color: #D4D6D9;
+  border-color: transparent;
+  padding: 2px;
+  background-clip: content-box;
+  border-radius: 50%;
+  font-size: 12px;
+  transition: color 0.3s ease, opacity 0.15s ease;
+}
+.acud-clear.acudicon:hover {
+  color: #FFFFFF;
+}
+.acud-clear.acudicon:focus,
+.acud-clear.acudicon:active {
+  color: #FFFFFF;
+}
+.acud-clear.acudicon[disabled],
+.acud-clear.acudicon[disabled]:hover,
+.acud-clear.acudicon[disabled]:focus,
+.acud-clear.acudicon[disabled]:active {
+  color: #FFFFFF;
+}
+.acud-clear.acudicon:hover {
+  background-color: #5C5F66;
+}
+.acud-clear.acudicon:focus,
+.acud-clear.acudicon:active {
+  background-color: #303540;
+}
+.acud-clear.acudicon[disabled],
+.acud-clear.acudicon[disabled]:hover,
+.acud-clear.acudicon[disabled]:focus,
+.acud-clear.acudicon[disabled]:active {
+  background-color: #F2F2F4;
+}
+.acud-clear.acudicon:hover {
+  border-color: transparent;
+}
+.acud-clear.acudicon:focus,
+.acud-clear.acudicon:active {
+  border-color: transparent;
+}
+.acud-clear.acudicon[disabled],
+.acud-clear.acudicon[disabled]:hover,
+.acud-clear.acudicon[disabled]:focus,
+.acud-clear.acudicon[disabled]:active {
+  border-color: transparent;
+}
+.acud-clear.acudicon > svg {
+  transform: scale(0.66666);
+}

package/lib/clear/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/lib/clear/style/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../style/index.less");
+
+require("./index.less");

package/lib/clear/style/index.less

@@ -0,0 +1,18 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@clear-prefix-cls: ~'@{acud-prefix}-clear';
+
+.@{clear-prefix-cls}.acudicon {
+    .basic-config(@clear-tp, @clear-p);
+
+    padding: .5 * @P;
+    background-clip: content-box;
+    border-radius: 50%;
+    font-size: 12px;
+    transition: color .3s ease, opacity .15s ease;
+
+    & > svg {
+        transform: scale(.66666);
+    }
+}