.@{calendar-timepicker-prefix-cls} { position: absolute; width: 100%; top: 34px; background-color: @component-background; height: 206px; &-panel { z-index: @zindex-picker; position: absolute; width: 100%; } &-inner { display: inline-block; position: relative; outline: none; list-style: none; font-size: @font-size-base; text-align: left; background-color: @component-background; background-clip: padding-box; line-height: 1.5; overflow: hidden; width: 100%; } &-combobox { width: 100%; } &-1-column, &-1-column &-select { width: 100%; } &-2-columns &-select { width: 50%; } &-1-column &-select, &-2-columns &-select { li { padding: 0; text-align: center; } } &-input-wrap { display: none; } &-select { float: left; font-size: @font-size-base; border: 1px solid @border-color-split; border-width: 0 1px; margin-left: -1px; box-sizing: border-box; width: 33.6%; overflow: hidden; position: relative; // Fix chrome weird render bug &:hover { overflow-y: auto; } &:first-child { border-left: 0; margin-left: 0; } &:last-child { border-right: 0; } ul { list-style: none; box-sizing: border-box; margin: 0; padding: 0; width: 100%; max-height: 206px; } li { padding: 0 0 0 28px; list-style: none; box-sizing: content-box; margin: 0; width: 100%; height: 24px; line-height: 24px; cursor: pointer; user-select: none; transition: background 0.3s ease; } li:last-child:after { content: ''; height: 182px; display: block; } li:hover { background: tint(@primary-color, 90%); } li&-option-selected { background: @background-color-base; font-weight: bold; } li&-option-disabled { color: @btn-disable-color; &:hover { background: transparent; cursor: not-allowed; } } } } .@{calendar-prefix-cls}-time { .@{calendar-prefix-cls}-day-select { padding: 0 2px; font-weight: bold; display: inline-block; color: @text-color; line-height: 34px; } .@{calendar-prefix-cls}-footer { border-top: 1px solid @border-color-split; text-align: right; position: relative; height: auto; line-height: auto; &-btn { padding: 10px 0; line-height: 1.5; text-align: right; } .@{calendar-prefix-cls}-today-btn { float: left; margin: 0; padding-left: 12px; } .@{calendar-prefix-cls}-time-picker-btn { display: inline-block; text-align: center; margin-right: 60px; &-disabled { color: #ccc; } } } }