tntd 2.8.0-beta.2 → 2.8.0-beta.20

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();
+  }
+}

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

@@ -0,0 +1,81 @@
+.@{calendar-prefix-cls}-decade-panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: @zindex-picker-panel;
+  display: flex;
+  flex-direction: column;
+  background: @component-background;
+  border-radius: @border-radius-base;
+  outline: none;
+}
+
+.@{calendar-prefix-cls}-decade-panel-hidden {
+  display: none;
+}
+
+.@{calendar-prefix-cls}-decade-panel-header {
+  .calendarPanelHeader(~'@{calendar-prefix-cls}-decade-panel');
+  position: relative;
+}
+
+.@{calendar-prefix-cls}-decade-panel-body {
+  flex: 1;
+}
+
+.@{calendar-prefix-cls}-decade-panel-footer {
+  border-top: @border-width-base @border-style-base @border-color-split;
+  .@{calendar-prefix-cls}-footer-extra {
+    padding: 0 12px;
+  }
+}
+
+.@{calendar-prefix-cls}-decade-panel-table {
+  width: 100%;
+  height: 100%;
+  table-layout: fixed;
+  border-collapse: separate;
+}
+
+.@{calendar-prefix-cls}-decade-panel-cell {
+  white-space: nowrap;
+  text-align: center;
+}
+
+.@{calendar-prefix-cls}-decade-panel-decade {
+  display: inline-block;
+  height: 24px;
+  margin: 0 auto;
+  padding: 0 6px;
+  color: @text-color;
+  line-height: 24px;
+  text-align: center;
+  background: transparent;
+  border-radius: @border-radius-sm;
+  transition: background 0.3s ease;
+
+  &:hover {
+    background: @item-hover-bg;
+    cursor: pointer;
+  }
+}
+
+.@{calendar-prefix-cls}-decade-panel-selected-cell .@{calendar-prefix-cls}-decade-panel-decade {
+  color: @text-color-inverse;
+  background: @primary-color;
+
+  &:hover {
+    color: @text-color-inverse;
+    background: @primary-color;
+  }
+}
+
+.@{calendar-prefix-cls}-decade-panel-last-century-cell,
+.@{calendar-prefix-cls}-decade-panel-next-century-cell {
+  .@{calendar-prefix-cls}-decade-panel-decade {
+    color: @disabled-color;
+    user-select: none;
+  }
+}

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

@@ -0,0 +1,86 @@
+.@{calendar-prefix-cls}-month-panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: @zindex-picker-panel;
+  background: @component-background;
+  border-radius: @border-radius-base;
+  outline: none;
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    // TODO: this is a useless wrapper, and we need to remove it in rc-calendar
+    height: 100%;
+  }
+}
+
+.@{calendar-prefix-cls}-month-panel-hidden {
+  display: none;
+}
+
+.@{calendar-prefix-cls}-month-panel-header {
+  .calendarPanelHeader(~'@{calendar-prefix-cls}-month-panel');
+  position: relative;
+}
+
+.@{calendar-prefix-cls}-month-panel-body {
+  flex: 1;
+}
+
+.@{calendar-prefix-cls}-month-panel-footer {
+  border-top: @border-width-base @border-style-base @border-color-split;
+  .@{calendar-prefix-cls}-footer-extra {
+    padding: 0 12px;
+  }
+}
+
+.@{calendar-prefix-cls}-month-panel-table {
+  width: 100%;
+  height: 100%;
+  table-layout: fixed;
+  border-collapse: separate;
+}
+
+.@{calendar-prefix-cls}-month-panel-selected-cell .@{calendar-prefix-cls}-month-panel-month {
+  color: @text-color-inverse;
+  background: @primary-color;
+
+  &:hover {
+    color: @text-color-inverse;
+    background: @primary-color;
+  }
+}
+
+.@{calendar-prefix-cls}-month-panel-cell {
+  text-align: center;
+
+  &-disabled .@{calendar-prefix-cls}-month-panel-month {
+    &,
+    &:hover {
+      color: @disabled-color;
+      background: @disabled-bg;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.@{calendar-prefix-cls}-month-panel-month {
+  display: inline-block;
+  height: 24px;
+  margin: 0 auto;
+  padding: 0 8px;
+  color: @text-color;
+  line-height: 24px;
+  text-align: center;
+  background: transparent;
+  border-radius: @border-radius-sm;
+  transition: background 0.3s ease;
+
+  &:hover {
+    background: @item-hover-bg;
+    cursor: pointer;
+  }
+}