element/packages/theme-default/src/date-picker/time-picker.css

88 lines
1.7 KiB
CSS

@import "../common/var.css";
@component-namespace el {
@b time-panel {
margin: 5px 0;
border: solid 1px var(--datepicker-border-color);
background-color: var(--color-white);
box-shadow: var(--box-shadow-base);
border-radius: 2px;
position: absolute;
width: 180px;
left: 0;
z-index: var(--index-top);
user-select: none;
@e content {
font-size: 0;
position: relative;
overflow: hidden;
&::after, &::before {
content: ":";
top: 50%;
color: var(--color-white);
position: absolute;
font-size: 14px;
margin-top: -15px;
line-height: 16px;
background-color: var(--datepicker-active-color);
height: 32px;
z-index: -1;
left: 0;
right: 0;
box-sizing: border-box;
padding-top: 6px;
text-align: left;
}
&::after {
left: 50%;
margin-left: -2px;
}
&::before {
padding-left: 50%;
margin-right: -2px;
}
&.has-seconds {
&::after {
left: calc(100% / 3 * 2);
}
&::before {
padding-left: calc(100% / 3);
}
}
}
@e footer {
border-top: 1px solid var(--datepicker-inner-border-color);
padding: 4px;
height: 36px;
line-height: 25px;
text-align: right;
box-sizing: border-box;
}
@e btn {
border: none;
line-height: 28px;
padding: 0 5px;
margin: 0 5px;
cursor: pointer;
background-color: transparent;
outline: none;
font-size: 12px;
color: var(--color-base-silver);
&.confirm {
font-weight: 800;
color: var(--datepicker-active-color);
}
}
}
}