style: 💄 fix TimePicker column align (#26784)

add `@picker-time-panel-column-width` and `@picker-time-panel-column-height`

close #26781
This commit is contained in:
偏右 2020-09-17 12:54:05 +08:00 committed by zombiej
parent e849c94b48
commit 954bd94b63
2 changed files with 8 additions and 6 deletions

View File

@ -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;

View File

@ -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;