tntd 2.8.0-beta.1 → 2.8.0-beta.3

package/es/color-picker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../src/color-picker/ColorPicker.js"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useCallback, useEffect, useMemo } from 'react'\nimport { Popover, Icon } from 'antd'\nimport {\n  AlphaPicker,\n  BlockPicker,\n  ChromePicker,\n  CirclePicker,\n  CompactPicker,\n  GithubPicker,\n  HuePicker,\n  MaterialPicker,\n  PhotoshopPicker,\n  SketchPicker,\n  SliderPicker,\n  SwatchesPicker,\n  TwitterPicker,\n} from 'react-color'\nimport cn from 'classnames'\nimport { get, isObject, upperFirst, toLower } from 'lodash'\nimport imgSrc from './tip.svg'\n\nconst prefixCls = 'tntd-color-picker'\n\nconst modeMap = {\n  AlphaPicker,\n  BlockPicker,\n  ChromePicker,\n  CirclePicker,\n  CompactPicker,\n  GithubPicker,\n  HuePicker,\n  MaterialPicker,\n  PhotoshopPicker,\n  SketchPicker,\n  SliderPicker,\n  SwatchesPicker,\n  TwitterPicker,\n}\n\nconst propsFormatMap = {\n  SketchPicker: ({ colors, ...otherProps }) => {\n    if (colors) {\n      return {\n        presetColors: colors,\n        ...otherProps,\n      }\n    }\n    return otherProps\n  },\n}\n\nexport default function ColorPicker({\n  value: _value,\n  onChange,\n  visible: vs,\n  allowClear,\n  disabled,\n  className,\n  mode = 'sketch',\n  style = {},\n  size,\n  placeholder,\n  placement = 'bottomLeft',\n  locale,\n  ...otherProps\n}) {\n  const [visible, setVisible] = useState(vs)\n  const [value, setValue] = useState(_value)\n\n  useEffect(() => {\n    setValue(_value)\n  }, [_value])\n\n  const handleChange = useCallback(\n    (color) => {\n      let value\n      if (isObject(color?.rgb)) {\n        value = `rgba(${color.rgb.r},${color.rgb.g},${color.rgb.b},${color.rgb.a})`\n      }\n      if (onChange) {\n        onChange(value)\n      } else {\n        setValue(value)\n      }\n    },\n    [onChange]\n  )\n\n  const domClick = useCallback(() => {\n    setVisible(true)\n  }, [])\n\n  const doClear = useCallback(\n    (e) => {\n      e.stopPropagation()\n      handleChange()\n    },\n    [handleChange]\n  )\n\n  const [ModePicker, propsFormat] = useMemo(() => {\n    const modeKey = upperFirst(toLower(mode)) + 'Picker' || 'SketchPicker'\n    const ModePicker = modeMap[modeKey] || SketchPicker\n    return [ModePicker, propsFormatMap[modeKey] || ((p) => p)]\n  }, [mode])\n\n  return (\n    <Popover\n      placement={placement}\n      trigger=\"click\"\n      visible={visible && !disabled}\n      onVisibleChange={setVisible}\n      content={\n        <ModePicker {...propsFormat(otherProps)} color={value} onChangeComplete={handleChange} />\n      }\n      overlayClassName={`${prefixCls}-pop`}\n    >\n      <div\n        className={cn(prefixCls, className, {\n          [`${prefixCls}-selected`]: !!value,\n          [`${prefixCls}-disabled`]: disabled,\n          [`${prefixCls}-active`]: visible && !disabled,\n          [`${prefixCls}-sm`]: size === 'small',\n          [`${prefixCls}-lg`]: size === 'large',\n        })}\n        style={style}\n        onClick={domClick}\n      >\n        <div className={`${prefixCls}-inner`}>\n          {!!value ? (\n            <div className={`${prefixCls}-value`}>\n              <div className={`${prefixCls}-value-bg`} style={{ background: value }}></div>\n            </div>\n          ) : (\n            <div className={`${prefixCls}-placeholder`}>{placeholder}</div>\n          )}\n          <span className={`${prefixCls}-img`}>\n            <img src={imgSrc} />\n          </span>\n          {allowClear && !!value && !disabled && (\n            <span className={`${prefixCls}-clear`} onClick={doClear}>\n              <Icon type=\"close-circle\" theme=\"filled\" />\n            </span>\n          )}\n        </div>\n      </div>\n    </Popover>\n  )\n}\n"]}
+{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../src/color-picker/ColorPicker.js"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useCallback, useEffect, useMemo } from 'react'\nimport { Popover, Icon } from 'antd'\nimport {\n  AlphaPicker,\n  BlockPicker,\n  ChromePicker,\n  CirclePicker,\n  CompactPicker,\n  GithubPicker,\n  HuePicker,\n  MaterialPicker,\n  PhotoshopPicker,\n  SketchPicker,\n  SliderPicker,\n  SwatchesPicker,\n  TwitterPicker,\n} from 'react-color'\nimport cn from 'classnames'\nimport { get, isObject, upperFirst, toLower } from 'lodash'\nimport imgSrc from './tip.svg'\n\nconst prefixCls = 'tntd-color-picker'\n\nconst modeMap = {\n  AlphaPicker,\n  BlockPicker,\n  ChromePicker,\n  CirclePicker,\n  CompactPicker,\n  GithubPicker,\n  HuePicker,\n  MaterialPicker,\n  PhotoshopPicker,\n  SketchPicker,\n  SliderPicker,\n  SwatchesPicker,\n  TwitterPicker,\n}\n\nconst propsFormatMap = {\n  SketchPicker: ({ colors, ...otherProps }) => {\n    if (colors) {\n      return {\n        presetColors: colors,\n        ...otherProps,\n      }\n    }\n    return otherProps\n  },\n}\n\nexport default function ColorPicker({\n  value: _value,\n  onChange,\n  visible: vs,\n  allowClear,\n  disabled,\n  className,\n  mode = 'sketch',\n  style = {},\n  size,\n  placeholder,\n  placement = 'bottomLeft',\n  locale,\n  simple,\n  ...otherProps\n}) {\n  const [visible, setVisible] = useState(vs)\n  const [value, setValue] = useState(_value)\n\n  useEffect(() => {\n    setValue(_value)\n  }, [_value])\n\n  const handleChange = useCallback(\n    (color) => {\n      let value\n      if (isObject(color?.rgb)) {\n        value = `rgba(${color.rgb.r},${color.rgb.g},${color.rgb.b},${color.rgb.a})`\n      }\n      if (onChange) {\n        onChange(value)\n      } else {\n        setValue(value)\n      }\n    },\n    [onChange]\n  )\n\n  const domClick = useCallback(() => {\n    setVisible(true)\n  }, [])\n\n  const doClear = useCallback(\n    (e) => {\n      e.stopPropagation()\n      handleChange()\n    },\n    [handleChange]\n  )\n\n  const [ModePicker, propsFormat] = useMemo(() => {\n    const modeKey = upperFirst(toLower(mode)) + 'Picker' || 'SketchPicker'\n    const ModePicker = modeMap[modeKey] || SketchPicker\n    return [ModePicker, propsFormatMap[modeKey] || ((p) => p)]\n  }, [mode])\n\n  return (\n    <Popover\n      placement={placement}\n      trigger=\"click\"\n      visible={visible && !disabled}\n      onVisibleChange={setVisible}\n      content={\n        <ModePicker {...propsFormat(otherProps)} color={value} onChangeComplete={handleChange} />\n      }\n      overlayClassName={`${prefixCls}-pop`}\n    >\n      <div\n        className={cn(prefixCls, className, {\n          [`${prefixCls}-selected`]: !!value,\n          [`${prefixCls}-disabled`]: disabled,\n          [`${prefixCls}-active`]: visible && !disabled,\n          [`${prefixCls}-simple`]: simple,\n          [`${prefixCls}-sm`]: size === 'small',\n          [`${prefixCls}-lg`]: size === 'large',\n        })}\n        style={style}\n        onClick={domClick}\n      >\n        <div className={`${prefixCls}-inner`}>\n          {!!value ? (\n            <div className={`${prefixCls}-value`}>\n              <div className={`${prefixCls}-value-bg`} style={{ background: value }}></div>\n            </div>\n          ) : (\n            <div className={`${prefixCls}-placeholder`}>{placeholder}</div>\n          )}\n          <span className={`${prefixCls}-img`}>\n            <img src={imgSrc} />\n          </span>\n          {allowClear && !!value && !disabled && (\n            <span className={`${prefixCls}-clear`} onClick={doClear}>\n              <Icon type=\"close-circle\" theme=\"filled\" />\n            </span>\n          )}\n        </div>\n      </div>\n    </Popover>\n  )\n}\n"]}

package/es/color-picker/index.less

@@ -2,22 +2,23 @@
 
 .color-picker-size(@input-height, @input-padding-horizontal, @font-size) {
   height: @input-height;
-  line-height: @input-height - 2px;
+  line-height: calc(@input-height - 2px);
   .@{prefixCls}-value {
-    height: @input-height - 4px;
-    line-height: @input-height - 4px;
+    height: calc(@input-height - 4px);
+    line-height: calc(@input-height - 4px);
   }
   .@{prefixCls}-placeholder {
-    height: @input-height - 2px;
+    height: calc(@input-height - 2px);
     padding: 0 @input-padding-horizontal;
     font-size: @font-size;
   }
   .@{prefixCls}-img {
     width: @input-height;
-    height: @input-height - 2px;
+    height: calc(@input-height - 2px);
+    border-radius: 0 @border-radius-base @border-radius-base 0;
   }
   .@{prefixCls}-clear {
-    right: @input-height / 2 - 8px;
+    right: calc(@input-height / 2 - 8px);
   }
 }
 
@@ -60,6 +61,7 @@
       left center;
     &-bg {
       width: 100%;
+      border-radius: @border-radius-base 0 0 @border-radius-base;
     }
   }
 
@@ -94,11 +96,23 @@
 
   .color-picker-size(@input-height-base, @input-padding-horizontal-base, @font-size-base);
 
+  &-simple {
+    .@{prefixCls}-img {
+      display: none;
+    }
+    .@{prefixCls}-value{
+      background: transparent;
+      &-bg {
+        border-radius: @border-radius-base;
+      }
+    }
+  }
+
   &-disabled {
     background: @input-disabled-bg;
     cursor: not-allowed;
     &:hover {
-      border-color:  @border-width-base;
+      border-color: @border-width-base;
     }
     .@{prefixCls}-img {
       background: #e9edf3;

package/es/comment/index.js

@@ -1,4 +1,4 @@
 import Comment from 'antd/es/comment';
-import 'antd/es/comment/style';
+import './style';
 export * from 'antd/es/comment';
 export default Comment;

package/es/comment/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/comment/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,iBAAiB,CAAA;AAErC,OAAO,uBAAuB,CAAA;AAE9B,cAAc,iBAAiB,CAAA;AAE/B,eAAe,OAAO,CAAA","sourcesContent":["import Comment from 'antd/es/comment'\n\nimport 'antd/es/comment/style'\n\nexport * from 'antd/es/comment'\n\nexport default Comment\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/comment/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,iBAAiB,CAAA;AAErC,OAAO,SAAS,CAAA;AAEhB,cAAc,iBAAiB,CAAA;AAE/B,eAAe,OAAO,CAAA","sourcesContent":["import Comment from 'antd/es/comment'\n\nimport './style'\n\nexport * from 'antd/es/comment'\n\nexport default Comment\n"]}

package/es/comment/style/index.js

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

package/es/comment/style/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/comment/style/index.tsx"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAA;AAC/B,OAAO,cAAc,CAAA","sourcesContent":["import '../../style/index.less'\nimport './index.less'\n"]}

package/es/comment/style/index.less

@@ -0,0 +1,93 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@comment-prefix-cls: ~'@{ant-prefix}-comment';
+
+.@{comment-prefix-cls} {
+  position: relative;
+
+  &-inner {
+    display: flex;
+    padding: @comment-padding-base;
+  }
+
+  &-avatar {
+    position: relative;
+    flex-shrink: 0;
+    margin-right: 12px;
+    cursor: pointer;
+    img {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+    }
+  }
+
+  &-content {
+    position: relative;
+    flex: 1 1 auto;
+    min-width: 1px;
+    font-size: @comment-font-size-base;
+    word-wrap: break-word;
+
+    &-author {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      margin-bottom: 4px;
+      font-size: @comment-font-size-base;
+      & > a,
+      & > span {
+        padding-right: 8px;
+        font-size: @comment-font-size-sm;
+        line-height: 18px;
+      }
+
+      &-name {
+        color: @comment-author-name-color;
+        font-size: @comment-font-size-base;
+        transition: color 0.3s;
+        > * {
+          color: @comment-author-name-color;
+          &:hover {
+            color: @comment-author-name-color;
+          }
+        }
+      }
+
+      &-time {
+        color: @comment-author-time-color;
+        white-space: nowrap;
+        cursor: auto;
+      }
+    }
+
+    &-detail p {
+      white-space: pre-wrap;
+    }
+  }
+
+  &-actions {
+    margin-top: 12px;
+    padding-left: 0;
+    > li {
+      display: inline-block;
+      color: @comment-action-color;
+      > span {
+        padding-right: 10px;
+        color: @comment-action-color;
+        font-size: @comment-font-size-sm;
+        cursor: pointer;
+        transition: color 0.3s;
+        user-select: none;
+        &:hover {
+          color: @comment-action-hover-color;
+        }
+      }
+    }
+  }
+
+  &-nested {
+    margin-left: @comment-nest-indent;
+  }
+}

package/es/config-provider/index.js

@@ -2,7 +2,7 @@ import ConfigProvider from 'antd/es/config-provider';
 // import { DisabledContextProvider } from './DisabledContext'
 // import type { SizeType } from './SizeContext'
 // import SizeContext, { SizeContextProvider } from './SizeContext'
-import 'antd/es/config-provider/style';
+import './style';
 export * from 'antd/es/config-provider';
 export * from 'antd/es/config-provider/context';
 export default ConfigProvider;

package/es/config-provider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/config-provider/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,yBAAyB,CAAA;AACpD,8DAA8D;AAC9D,gDAAgD;AAChD,mEAAmE;AAEnE,OAAO,+BAA+B,CAAA;AAEtC,cAAc,yBAAyB,CAAA;AAEvC,cAAc,iCAAiC,CAAA;AAE/C,eAAe,cAAc,CAAA","sourcesContent":["import ConfigProvider from 'antd/es/config-provider'\n// import { DisabledContextProvider } from './DisabledContext'\n// import type { SizeType } from './SizeContext'\n// import SizeContext, { SizeContextProvider } from './SizeContext'\n\nimport 'antd/es/config-provider/style'\n\nexport * from 'antd/es/config-provider'\n\nexport * from 'antd/es/config-provider/context'\n\nexport default ConfigProvider\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/config-provider/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,yBAAyB,CAAA;AACpD,8DAA8D;AAC9D,gDAAgD;AAChD,mEAAmE;AAEnE,OAAO,SAAS,CAAA;AAEhB,cAAc,yBAAyB,CAAA;AAEvC,cAAc,iCAAiC,CAAA;AAE/C,eAAe,cAAc,CAAA","sourcesContent":["import ConfigProvider from 'antd/es/config-provider'\n// import { DisabledContextProvider } from './DisabledContext'\n// import type { SizeType } from './SizeContext'\n// import SizeContext, { SizeContextProvider } from './SizeContext'\n\nimport './style'\n\nexport * from 'antd/es/config-provider'\n\nexport * from 'antd/es/config-provider/context'\n\nexport default ConfigProvider\n"]}

package/es/config-provider/style/index.js

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

package/es/config-provider/style/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/config-provider/style/index.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA","sourcesContent":["import './index.less'\n"]}

package/es/config-provider/style/index.less

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

package/es/date-picker/index.js

@@ -1,7 +1,7 @@
 import AntdDatePicker from 'antd/es/date-picker';
 import { connectReadonlyComponent } from '../connect';
 import { PreviewText } from '../preview-text';
-import 'antd/es/date-picker/style';
+import './style';
 export * from 'antd/es/date-picker';
 export * from 'antd/es/date-picker/interface';
 export const DatePicker = connectReadonlyComponent(AntdDatePicker, PreviewText.DatePicker);

package/es/date-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/date-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,qBAAqB,CAAA;AAKhD,OAAO,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC7C,OAAO,2BAA2B,CAAA;AAElC,cAAc,qBAAqB,CAAA;AAEnC,cAAc,+BAA+B,CAAA;AAM7C,MAAM,CAAC,MAAM,UAAU,GAAG,wBAAwB,CAChD,cAAc,EACd,WAAW,CAAC,UAAU,CACW,CAAA;AAEnC,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,cAAc,CAAA;AAE/D,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE;IACxB,WAAW,EAAE,wBAAwB,CAAC,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC;IAC3E,WAAW,EAAE,wBAAwB,CAAC,WAAW,EAAE,WAAW,CAAC,UAAU,CAAC;IAC1E,UAAU,EAAE,wBAAwB,CAAC,UAAU,EAAE,WAAW,CAAC,UAAU,CAAC;CACzE,CAAC,CAAA;AAEF,eAAe,UAAU,CAAA","sourcesContent":["import AntdDatePicker from 'antd/es/date-picker'\nimport type {\n  DatePickerProps as AntdDatePickerProps,\n  DatePickerDecorator,\n} from 'antd/es/date-picker/interface'\nimport { connectReadonlyComponent } from '../connect'\nimport { PreviewText } from '../preview-text'\nimport 'antd/es/date-picker/style'\n\nexport * from 'antd/es/date-picker'\n\nexport * from 'antd/es/date-picker/interface'\n\nexport type DatePickerProps = AntdDatePickerProps & {\n  readonly?: boolean\n}\n\nexport const DatePicker = connectReadonlyComponent(\n  AntdDatePicker,\n  PreviewText.DatePicker\n) as unknown as DatePickerDecorator\n\nconst { MonthPicker, WeekPicker, RangePicker } = AntdDatePicker\n\nObject.assign(DatePicker, {\n  MonthPicker: connectReadonlyComponent(MonthPicker, PreviewText.MonthPicker),\n  RangePicker: connectReadonlyComponent(RangePicker, PreviewText.DatePicker),\n  WeekPicker: connectReadonlyComponent(WeekPicker, PreviewText.WeekPicker),\n})\n\nexport default DatePicker\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/date-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,qBAAqB,CAAA;AAKhD,OAAO,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC7C,OAAO,SAAS,CAAA;AAEhB,cAAc,qBAAqB,CAAA;AAEnC,cAAc,+BAA+B,CAAA;AAM7C,MAAM,CAAC,MAAM,UAAU,GAAG,wBAAwB,CAChD,cAAc,EACd,WAAW,CAAC,UAAU,CACW,CAAA;AAEnC,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,cAAc,CAAA;AAE/D,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE;IACxB,WAAW,EAAE,wBAAwB,CAAC,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC;IAC3E,WAAW,EAAE,wBAAwB,CAAC,WAAW,EAAE,WAAW,CAAC,UAAU,CAAC;IAC1E,UAAU,EAAE,wBAAwB,CAAC,UAAU,EAAE,WAAW,CAAC,UAAU,CAAC;CACzE,CAAC,CAAA;AAEF,eAAe,UAAU,CAAA","sourcesContent":["import AntdDatePicker from 'antd/es/date-picker'\nimport type {\n  DatePickerProps as AntdDatePickerProps,\n  DatePickerDecorator,\n} from 'antd/es/date-picker/interface'\nimport { connectReadonlyComponent } from '../connect'\nimport { PreviewText } from '../preview-text'\nimport './style'\n\nexport * from 'antd/es/date-picker'\n\nexport * from 'antd/es/date-picker/interface'\n\nexport type DatePickerProps = AntdDatePickerProps & {\n  readonly?: boolean\n}\n\nexport const DatePicker = connectReadonlyComponent(\n  AntdDatePicker,\n  PreviewText.DatePicker\n) as unknown as DatePickerDecorator\n\nconst { MonthPicker, WeekPicker, RangePicker } = AntdDatePicker\n\nObject.assign(DatePicker, {\n  MonthPicker: connectReadonlyComponent(MonthPicker, PreviewText.MonthPicker),\n  RangePicker: connectReadonlyComponent(RangePicker, PreviewText.DatePicker),\n  WeekPicker: connectReadonlyComponent(WeekPicker, PreviewText.WeekPicker),\n})\n\nexport default DatePicker\n"]}

package/es/date-picker/style/Calendar.less

@@ -0,0 +1,402 @@
+.calendarLeftArrow() {
+  height: 100%;
+
+  &::before,
+  &::after {
+    position: relative;
+    top: -1px;
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    vertical-align: middle;
+    border: 0 solid #aaa;
+    border-width: 1.5px 0 0 1.5px;
+    border-radius: 1px;
+    transform: rotate(-45deg) scale(0.8);
+    transition: all 0.3s;
+    content: '';
+  }
+
+  &:hover::before,
+  &:hover::after {
+    border-color: @text-color;
+  }
+
+  &::after {
+    display: none;
+  }
+}
+
+.calendarLeftDoubleArrow() {
+  .calendarLeftArrow;
+
+  &::after {
+    position: relative;
+    left: -3px;
+    display: inline-block;
+  }
+}
+
+.calendarRightArrow() {
+  .calendarLeftArrow;
+
+  &::before,
+  &::after {
+    transform: rotate(135deg) scale(0.8);
+  }
+}
+
+.calendarRightDoubleArrow() {
+  .calendarRightArrow;
+
+  &::before {
+    position: relative;
+    left: 3px;
+  }
+
+  &::after {
+    display: inline-block;
+  }
+}
+
+.calendarPanelHeader(@calendar-prefix-cls) {
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  border-bottom: @border-width-base @border-style-base @border-color-split;
+  user-select: none;
+
+  a:hover {
+    color: @link-hover-color;
+  }
+
+  .@{calendar-prefix-cls}-century-select,
+  .@{calendar-prefix-cls}-decade-select,
+  .@{calendar-prefix-cls}-year-select,
+  .@{calendar-prefix-cls}-month-select {
+    display: inline-block;
+    padding: 0 2px;
+    color: @heading-color;
+    font-weight: 500;
+    line-height: 40px;
+  }
+
+  .@{calendar-prefix-cls}-century-select-arrow,
+  .@{calendar-prefix-cls}-decade-select-arrow,
+  .@{calendar-prefix-cls}-year-select-arrow,
+  .@{calendar-prefix-cls}-month-select-arrow {
+    display: none;
+  }
+
+  .@{calendar-prefix-cls}-prev-century-btn,
+  .@{calendar-prefix-cls}-next-century-btn,
+  .@{calendar-prefix-cls}-prev-decade-btn,
+  .@{calendar-prefix-cls}-next-decade-btn,
+  .@{calendar-prefix-cls}-prev-month-btn,
+  .@{calendar-prefix-cls}-next-month-btn,
+  .@{calendar-prefix-cls}-prev-year-btn,
+  .@{calendar-prefix-cls}-next-year-btn {
+    position: absolute;
+    top: 0;
+    display: inline-block;
+    padding: 0 5px;
+    color: @text-color-secondary;
+    font-size: 16px;
+    font-family: Arial, 'Hiragino Sans GB', 'Microsoft Yahei', 'Microsoft Sans Serif', sans-serif;
+    line-height: 40px;
+  }
+
+  .@{calendar-prefix-cls}-prev-century-btn,
+  .@{calendar-prefix-cls}-prev-decade-btn,
+  .@{calendar-prefix-cls}-prev-year-btn {
+    left: 7px;
+    .calendarLeftDoubleArrow;
+  }
+
+  .@{calendar-prefix-cls}-next-century-btn,
+  .@{calendar-prefix-cls}-next-decade-btn,
+  .@{calendar-prefix-cls}-next-year-btn {
+    right: 7px;
+    .calendarRightDoubleArrow;
+  }
+
+  .@{calendar-prefix-cls}-prev-month-btn {
+    left: 29px;
+    .calendarLeftArrow;
+  }
+
+  .@{calendar-prefix-cls}-next-month-btn {
+    right: 29px;
+    .calendarRightArrow;
+  }
+}
+
+.calendar-selected-cell() {
+  .@{calendar-prefix-cls}-date {
+    color: @text-color-inverse;
+    background: @primary-color;
+    border: @border-width-base @border-style-base transparent;
+
+    &:hover {
+      background: @primary-color;
+    }
+  }
+}
+
+.@{calendar-prefix-cls} {
+  position: relative;
+  width: 280px;
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+  text-align: left;
+  list-style: none;
+  background-color: @component-background;
+  background-clip: padding-box;
+  border: @border-width-base @border-style-base @border-color-inverse;
+  border-radius: @border-radius-base;
+  outline: none;
+  box-shadow: @box-shadow-base;
+
+  &-input-wrap {
+    height: 34px;
+    padding: 6px calc(@control-padding-horizontal - 2px);
+    border-bottom: @border-width-base @border-style-base @border-color-split;
+  }
+
+  &-input {
+    width: 100%;
+    height: 22px;
+    color: @input-color;
+    background: @input-bg;
+    border: 0;
+    outline: 0;
+    cursor: auto;
+    .placeholder;
+  }
+
+  &-week-number {
+    width: 286px;
+
+    &-cell {
+      text-align: center;
+    }
+  }
+
+  &-header {
+    .calendarPanelHeader(@calendar-prefix-cls);
+  }
+
+  &-body {
+    padding: 8px 12px;
+  }
+
+  table {
+    width: 100%;
+    max-width: 100%;
+    background-color: transparent;
+    border-collapse: collapse;
+  }
+
+  table,
+  th,
+  td {
+    text-align: center;
+    border: 0;
+  }
+
+  &-calendar-table {
+    margin-bottom: 0;
+    border-spacing: 0;
+  }
+
+  &-column-header {
+    width: 33px;
+    padding: 6px 0;
+    line-height: 18px;
+    text-align: center;
+    .@{calendar-prefix-cls}-column-header-inner {
+      display: block;
+      font-weight: normal;
+    }
+  }
+
+  &-week-number-header {
+    .@{calendar-prefix-cls}-column-header-inner {
+      display: none;
+    }
+  }
+
+  &-cell {
+    height: 30px;
+    padding: 3px 0;
+  }
+
+  &-date {
+    display: block;
+    width: 24px;
+    height: 24px;
+    margin: 0 auto;
+    padding: 0;
+    color: @text-color;
+    line-height: 22px;
+    text-align: center;
+    background: transparent;
+    border: @border-width-base @border-style-base transparent;
+    border-radius: @border-radius-sm;
+    transition: background 0.3s ease;
+
+    &-panel {
+      position: relative;
+      outline: none;
+    }
+
+    &:hover {
+      background: @item-hover-bg;
+      cursor: pointer;
+    }
+
+    &:active {
+      color: @text-color-inverse;
+      background: @primary-5;
+    }
+  }
+
+  &-today &-date {
+    color: @primary-color;
+    font-weight: bold;
+    border-color: @primary-color;
+  }
+
+  &-selected-day &-date {
+    background: @primary-2;
+  }
+
+  &-last-month-cell &-date,
+  &-next-month-btn-day &-date {
+    &,
+    &:hover {
+      color: @disabled-color;
+      background: transparent;
+      border-color: transparent;
+    }
+  }
+
+  &-disabled-cell &-date {
+    position: relative;
+    width: auto;
+    color: @disabled-color;
+    background: @disabled-bg;
+    border: @border-width-base @border-style-base transparent;
+    border-radius: 0;
+    cursor: not-allowed;
+
+    &:hover {
+      background: @disabled-bg;
+    }
+  }
+
+  &-disabled-cell&-selected-day &-date::before {
+    position: absolute;
+    top: -1px;
+    left: 5px;
+    width: 24px;
+    height: 24px;
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: @border-radius-sm;
+    content: '';
+  }
+
+  &-disabled-cell&-today &-date {
+    position: relative;
+    padding-right: 5px;
+    padding-left: 5px;
+    &::before {
+      position: absolute;
+      top: -1px;
+      left: 5px;
+      width: 24px;
+      height: 24px;
+      border: @border-width-base @border-style-base @disabled-color;
+      border-radius: @border-radius-sm;
+      content: ' ';
+    }
+  }
+
+  &-disabled-cell-first-of-row &-date {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+
+  &-disabled-cell-last-of-row &-date {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+
+  &-footer {
+    padding: 0 12px;
+    line-height: 38px;
+    border-top: @border-width-base @border-style-base @border-color-split;
+    &:empty {
+      border-top: 0;
+    }
+    &-btn {
+      display: block;
+      text-align: center;
+    }
+    &-extra {
+      text-align: left;
+    }
+  }
+
+  .@{calendar-prefix-cls}-today-btn,
+  .@{calendar-prefix-cls}-clear-btn {
+    display: inline-block;
+    margin: 0 0 0 8px;
+    text-align: center;
+    &-disabled {
+      color: @disabled-color;
+      cursor: not-allowed;
+    }
+    &:only-child {
+      margin: 0;
+    }
+  }
+
+  .@{calendar-prefix-cls}-clear-btn {
+    position: absolute;
+    top: 7px;
+    right: 5px;
+    display: none;
+    width: 20px;
+    height: 20px;
+    margin: 0;
+    overflow: hidden;
+    line-height: 20px;
+    text-align: center;
+    text-indent: -76px;
+  }
+
+  .@{calendar-prefix-cls}-clear-btn::after {
+    display: inline-block;
+    width: 20px;
+    color: @disabled-color;
+    font-size: @font-size-base;
+    line-height: 1;
+    text-indent: 43px;
+    transition: color 0.3s ease;
+  }
+
+  .@{calendar-prefix-cls}-clear-btn:hover::after {
+    color: @text-color-secondary;
+  }
+
+  .@{calendar-prefix-cls}-ok-btn {
+    .btn;
+    .btn-primary;
+    .button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; @border-radius-base);
+
+    line-height: calc(@btn-height-sm - 2px);
+
+    .button-disabled();
+  }
+}