vuc-iview
Version:
A high quality UI components Library with Vue.js
163 lines (162 loc) • 5.3 kB
text/less
@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: 30px;
line-height: 30px;
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;
}
}
}
}
}
}
}