@lifeforge/ui
Version:
LifeForge UI component library
2 lines (1 loc) • 3.14 kB
CSS
.react-datepicker__header{@apply bg-bg-50 dark:bg-bg-800 border-none;}.react-datepicker-time__header{@apply text-bg-500 py-2 font-medium;}.react-datepicker__month-container,.react-datepicker__time-container{@apply bg-bg-50 dark:bg-bg-800;}.react-datepicker{@apply border-bg-200 bg-bg-50 shadow-custom dark:border-bg-700 dark:bg-bg-800 text-sm! overflow-hidden rounded-lg p-4 font-medium;}.react-datepicker__day{line-height:auto;@apply aspect-square! text-bg-500 hover:bg-bg-300 dark:hover:bg-bg-700/50 inline-flex h-auto w-12 items-center justify-center text-center transition-all;}.react-datepicker__day--today{@apply bg-custom-500/20 text-bg-900 shadow-custom dark:text-bg-200 hover:bg-custom-500/50! rounded-md;}.react-datepicker__day-name{@apply w-12 font-medium;}.theme-dark .react-datepicker__day--selected{@apply bg-custom-500! text-bg-50! font-medium;}.theme-light .react-datepicker__day--selected{@apply bg-custom-500! text-bg-900! font-medium;}.react-datepicker__current-month{@apply py-4!;}.react-datepicker__day--keyboard-selected{@apply bg-bg-200 dark:bg-bg-700/50;}.react-datepicker__day--outside-month{@apply text-bg-300 dark:text-bg-700;}.react-datepicker__time-container{@apply border-bg-200 dark:border-bg-700;}.react-datepicker__time{background:transparent}.react-datepicker__time-list-item{@apply h-auto! py-3! text-bg-500 text-sm transition-all;}.react-datepicker__time-list-item:not(.react-datepicker__time-list-item--selected){@apply hover:bg-bg-100! dark:hover:bg-bg-700/50!;}.theme-dark .react-datepicker__time-list-item--selected{@apply bg-custom-500! text-bg-50!;}.theme-light .react-datepicker__time-list-item--selected{@apply bg-custom-500! text-bg-900!;}.react-datepicker__time-list-item--selected:hover{@apply bg-custom-600!;}.react-datepicker-wrapper{@apply w-full!;}.w-color-editable-input{@apply px-0!;}.w-color-editable-input input{box-shadow:none;font-size:1rem;color:#f4f4f5;font-weight:500;letter-spacing:.1rem;@apply rounded-lg! py-2! focus:outline-hidden text-center;}.w-color-editable-input span{font-size:.9rem}@utility component-bg{@apply bg-bg-50 dark:bg-bg-900; .has-bg-image & {@apply bg-bg-50/50 dark:bg-bg-900/50 backdrop-blur-xs;}}@utility component-bg-with-hover{@apply bg-bg-50 dark:bg-bg-900 hover:bg-bg-100 dark:hover:bg-bg-800/70 transition-all; .has-bg-image & {@apply bg-bg-50/50 dark:bg-bg-900/50 hover:bg-bg-100/50 dark:hover:bg-bg-800/50 backdrop-blur-xs transition-all;}}@utility component-bg-lighter{@apply bg-bg-100/50 dark:bg-bg-800/50; .has-bg-image & {@apply bg-bg-100/50 dark:bg-bg-800/50;}}@utility component-bg-lighter-with-hover{@apply bg-bg-100/50 dark:bg-bg-800/50 hover:bg-bg-200/50 dark:hover:bg-bg-800/80 transition-all; .has-bg-image & {@apply bg-bg-100/50 dark:bg-bg-800/50 hover:bg-bg-200/50 dark:hover:bg-bg-700/50 transition-all;}}@utility darker-component-bg-with-hover{@apply bg-bg-200 dark:bg-bg-800/50 hover:bg-bg-200 dark:hover:bg-bg-800/80 transition-all; .has-bg-image & {@apply bg-bg-50/50 dark:bg-bg-800/50 hover:bg-bg-200/50 dark:hover:bg-bg-700/50 backdrop-blur-xs transition-all;}}