diff --git a/components/date-picker/style/panel.less b/components/date-picker/style/panel.less index 9114996ffc486c13318710b2e303a37fdb77bd9a..3a164e32c0ceb83bb4918fb438695164e4339131 100644 --- a/components/date-picker/style/panel.less +++ b/components/date-picker/style/panel.less @@ -590,12 +590,12 @@ .@{picker-prefix-cls}-content { display: flex; flex: auto; - height: 224px; + height: @picker-time-panel-column-height; } &-column { flex: 1 0 auto; - width: 56px; + width: @picker-time-panel-column-width; margin: 0; padding: 0; overflow-y: hidden; @@ -605,10 +605,11 @@ &::after { display: block; - height: 224px - @picker-time-panel-cell-height; + height: @picker-time-panel-column-height - @picker-time-panel-cell-height; content: ''; .@{picker-prefix-cls}-datetime-panel & { - height: 224px - @picker-time-panel-cell-height + 2 * @border-width-base; + height: @picker-time-panel-column-height - @picker-time-panel-cell-height + 2 * + @border-width-base; } } @@ -634,10 +635,9 @@ width: 100%; height: @picker-time-panel-cell-height; margin: 0; - padding: 0; + padding: 0 0 0 ((@picker-time-panel-column-width - 28px) / 2); color: @text-color; line-height: @picker-time-panel-cell-height; - text-align: center; border-radius: 0; cursor: pointer; transition: background @animation-duration-slow; diff --git a/components/style/themes/default.less b/components/style/themes/default.less index e5f3e01946e5d178a7d2b64feccc156ffebb7795..8dbe72ef5a975a70525fdb56c3a0386b5f70b592 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -631,6 +631,8 @@ @picker-border-color: @border-color-split; @picker-date-hover-range-border-color: lighten(@primary-color, 20%); @picker-date-hover-range-color: @picker-basic-cell-hover-with-range-color; +@picker-time-panel-column-width: 56px; +@picker-time-panel-column-height: 224px; @picker-time-panel-cell-height: 28px; @picker-panel-cell-height: 24px; @picker-panel-cell-width: 36px;