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

60 lines
1.3 KiB
Plaintext

.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 {
@apply flex flex-row justify-start items-start;
width: 280px;
flex-wrap: wrap;
> .date-picker-day-header {
@apply flex flex-row justify-around items-center w-full;
> .day-item {
@apply flex flex-col justify-center items-center;
width: 36px;
height: 36px;
user-select: none;
color: gray;
font-size: 13px;
margin: 2px 0;
}
}
> .day-item {
@apply flex flex-col justify-center items-center;
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 14px;
user-select: none;
cursor: pointer;
margin: 2px;
&:hover {
@apply bg-gray-100;
}
&.current {
@apply text-blue-600 bg-blue-100 text-base font-medium;
}
&.null {
background-color: unset;
cursor: unset;
}
}
}
}