memos/web/src/less/common/date-picker.less

65 lines
1.3 KiB
Text

@import "../mixin.less";
.date-picker-wrapper {
@apply flex flex-col justify-start items-start p-4;
> .date-picker-header {
@apply flex flex-row justify-center items-center w-full mb-2;
> .btn-text {
@apply w-6 h-6 rounded cursor-pointer select-none flex flex-col justify-center items-center opacity-40 hover:bg-gray-200;
}
> .normal-text {
@apply mx-1 leading-6 font-mono;
}
}
> .date-picker-day-container {
.flex(row, flex-start, flex-start);
width: 280px;
flex-wrap: wrap;
> .date-picker-day-header {
.flex(row, space-around, center);
width: 100%;
> .day-item {
.flex(column, center, center);
width: 36px;
height: 36px;
user-select: none;
color: gray;
font-size: 13px;
margin: 2px 0;
}
}
> .day-item {
.flex(column, center, center);
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 14px;
user-select: none;
cursor: pointer;
margin: 2px;
&:hover {
background-color: @bg-whitegray;
}
&.current {
background-color: @bg-light-blue;
font-size: 16px;
color: @text-blue;
font-weight: bold;
}
&.null {
background-color: unset;
cursor: unset;
}
}
}
}