@time-picker-prefix-cls: ~"@{css-prefix}time-picker";
|
@time-picker-cells-width-base: 56px;
|
@time-picker-cells-width-with-date-base: 72px;
|
@time-picker-cells-width: @time-picker-cells-width-base * 2;
|
@time-picker-cells-width-with-seconds: @time-picker-cells-width-base *3;
|
@time-picker-cells-width-with-date: @time-picker-cells-width-with-date-base * 2;
|
@time-picker-cells-width-with-date-with-seconds: @time-picker-cells-width-with-date-base * 3;
|
|
.@{time-picker-prefix-cls} {
|
&-cells{
|
min-width: @time-picker-cells-width;
|
&-with-seconds{
|
min-width: @time-picker-cells-width-with-seconds;
|
}
|
|
&-list{
|
width: @time-picker-cells-width-base;
|
max-height: 144px;
|
float: left;
|
overflow: hidden;
|
border-left: 1px solid @border-color-split;
|
position: relative;
|
&:hover{
|
overflow-y: auto;
|
}
|
|
&:first-child{
|
border-left: none;
|
border-radius: @btn-border-radius 0 0 @btn-border-radius;
|
}
|
&:last-child{
|
border-radius: 0 @btn-border-radius @btn-border-radius 0;
|
}
|
ul{
|
width: 100%;
|
margin: 0;
|
padding: 0 0 120px 0;
|
list-style: none;
|
li{
|
width: 100%;
|
height: 24px;
|
line-height: 24px;
|
margin: 0;
|
padding: 0 0 0 16px;
|
box-sizing: content-box;
|
text-align: left;
|
user-select: none;
|
cursor: pointer;
|
list-style: none;
|
transition: background @transition-time @ease-in-out;
|
|
}
|
}
|
}
|
&-cell{
|
&:hover{
|
background: @background-color-select-hover;
|
}
|
&-disabled {
|
color: @btn-disable-color;
|
cursor: @cursor-disabled;
|
|
&:hover {
|
color: @btn-disable-color;
|
background-color: #fff;
|
cursor: @cursor-disabled;
|
}
|
}
|
&-selected ,&-selected:hover{
|
color: @primary-color;
|
background: @background-color-select-hover;
|
}
|
&-focused{
|
background-color: tint(@primary-color, 80%);
|
}
|
}
|
}
|
|
&-header{
|
height: 32px;
|
line-height: 32px;
|
text-align: center;
|
border-bottom: 1px solid @border-color-split;
|
}
|
|
&-with-range{
|
.@{picker-prefix-cls}-panel{
|
&-body{
|
min-width: @time-picker-cells-width * 2 + 4px;
|
}
|
&-content{
|
float: left;
|
position: relative;
|
|
&:after{
|
content: '';
|
display: block;
|
width: 2px;
|
position: absolute;
|
top: 31px;
|
bottom: 0;
|
right: -2px;
|
background: @border-color-split;
|
z-index: 1;
|
}
|
|
&-right{
|
float: right;
|
&:after{
|
right: auto;
|
left: -2px;
|
}
|
}
|
}
|
}
|
.@{time-picker-prefix-cls}-cells{
|
&-list{
|
&:first-child{
|
border-radius: 0;
|
}
|
&:last-child{
|
border-radius: 0;
|
}
|
}
|
}
|
}
|
&-with-range&-with-seconds{
|
.@{picker-prefix-cls}-panel{
|
&-body{
|
min-width: @time-picker-cells-width-with-seconds * 2 + 4px;
|
}
|
}
|
}
|
}
|
|
.@{picker-prefix-cls}-panel-content{
|
.@{picker-prefix-cls}-panel-content{
|
.@{time-picker-prefix-cls}{
|
&-cells{
|
min-width: @time-picker-cells-width-with-date-with-seconds;
|
&-with-seconds{
|
min-width: @time-picker-cells-width-with-date-with-seconds;
|
.@{time-picker-prefix-cls}-cells-list{
|
width: @time-picker-cells-width-with-date-with-seconds / 3;
|
ul{
|
li{
|
padding: 0 0 0 28px;
|
}
|
}
|
}
|
}
|
&-list {
|
width: @time-picker-cells-width-with-date-with-seconds / 2;
|
max-height: 216px;
|
&:first-child{
|
border-radius: 0;
|
}
|
&:last-child{
|
border-radius: 0;
|
}
|
ul{
|
padding: 0 0 192px 0;
|
li{
|
padding: 0 0 0 46px;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
