Fonrtend_Start_Code/src/assets/styles/components/_date-picker.css

127 lines
2.3 KiB
CSS

.date-picker {
@apply z-40 max-w-xs shadow-xl dark:shadow-2xl bg-white dark:bg-gray-800 rounded-lg p-4;
}
.date-picker-panel {
@apply rounded-lg;
}
.date-picker-header-label {
@apply cursor-pointer mx-0.5 select-none text-gray-900 dark:text-gray-100;
}
.date-picker-current-month {
@apply text-gray-700 dark:text-gray-100;
}
.date-picker-other-month {
@apply text-gray-400 dark:text-gray-500;
}
.date-picker-selected-date {
@apply text-white;
}
.date-picker-available {
@apply hover:text-white;
}
.date-picker-today {
@apply border;
}
.date-picker-month-cell {
@apply text-center py-6 font-semibold;
}
.date-picker-month-cell-disabled {
@apply opacity-30 bg-gray-300 cursor-not-allowed;
}
.date-picker-month-cell-inner {
@apply cursor-pointer px-4 py-2 rounded-lg select-none;
}
.date-picker-year-cell {
@apply text-center py-6;
}
.date-picker-year-cell-inner {
@apply cursor-pointer px-4 py-2 rounded-lg select-none font-semibold;
}
.date-picker-year-cell-disabled {
@apply opacity-30 bg-gray-300 cursor-not-allowed;
}
.picker {
@apply z-40 rounded-lg;
}
.picker-panel {
@apply shadow-xl dark:shadow-2xl bg-white dark:bg-gray-700 rounded-lg p-4;
}
.picker-view {
@apply min-w-[260px] w-full flex gap-6;
}
.picker-table {
@apply border-collapse w-full;
}
.picker-header-arrow {
@apply cursor-pointer flex items-center px-2 text-lg rtl:rotate-180 select-none h-10;
}
.picker-header-label {
@apply cursor-pointer mx-0.5 select-none text-gray-900 dark:text-gray-100 text-lg font-semibold;
}
.year-table,
.month-table {
@apply grid grid-cols-3 gap-2;
}
.date-picker-cell {
@apply text-center w-9 h-9 p-0;
}
.date-picker-cell-content {
@apply h-full w-full font-normal;
}
.date-picker-cell-current-month {
@apply text-gray-700 dark:text-gray-100;
}
.date-picker-cell-hoverable {
@apply hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-gray-300;
}
.date-picker-cell-disabled {
@apply opacity-30 bg-gray-300 cursor-not-allowed;
}
.date-picker-week-cell {
@apply font-semibold;
}
.week-day-cell {
@apply h-7;
}
.day-picker,
.month-picker,
.year-picker {
@apply w-full;
}
.month-picker-cell,
.year-picker-cell {
@apply text-center py-2 rounded-lg font-semibold;
}
.month-picker-cell-disabled,
.year-picker-cell-disabled {
@apply opacity-30 bg-gray-300 cursor-not-allowed;
}