@tiaohsun/vue-datepicker
Version:
A Vue 3 datepicker with multi-calendar support, styled with Tailwind CSS
2 lines (1 loc) • 13.9 kB
CSS
:root{--color-vdt-theme-50: oklch(96.9% .016 293.756);--color-vdt-theme-100: oklch(94.3% .029 294.588);--color-vdt-theme-200: oklch(89.4% .057 293.283);--color-vdt-theme-300: oklch(81.1% .111 293.571);--color-vdt-theme-400: oklch(70.2% .183 293.541);--color-vdt-theme-500: oklch(60.6% .25 292.717);--color-vdt-theme-600: oklch(54.1% .281 293.009);--color-vdt-theme-700: oklch(49.1% .27 292.581);--color-vdt-theme-800: oklch(43.2% .232 292.759);--color-vdt-theme-900: oklch(38% .189 293.745);--color-vdt-theme-950: oklch(28.3% .141 291.089);--color-vdt-light-surface: white;--color-vdt-light-surface-secondary: oklch(98.5% .002 247.839);--color-vdt-light-surface-elevated: white;--color-vdt-light-content: oklch(21% .034 264.665);--color-vdt-light-content-secondary: oklch(44.6% .03 256.802);--color-vdt-light-content-muted: oklch(70.7% .022 261.325);--color-vdt-light-outline: var(--color-gray-200);--color-vdt-light-outline-strong: oklch(75.2% .01 258.338);--color-vdt-light-outline-stronger: oklch(65.7% .022 261.325);--color-vdt-light-interactive-hover: oklch(92.8% .006 264.531);--color-vdt-light-interactive-active: oklch(87.2% .01 258.338);--color-vdt-dark-surface: oklch(20% .034 264.665);--color-vdt-dark-surface-secondary: oklch(25% .033 256.848);--color-vdt-dark-surface-elevated: oklch(32% .033 256.848);--color-vdt-dark-content: oklch(96.7% .003 264.542);--color-vdt-dark-content-secondary: oklch(87.2% .01 258.338);--color-vdt-dark-content-muted: oklch(70.7% .022 261.325);--color-vdt-dark-outline: oklch(40.3% .034 259.733);--color-vdt-dark-outline-strong: oklch(52.6% .03 256.802);--color-vdt-dark-outline-stronger: oklch(66.1% .027 264.364);--color-vdt-dark-interactive-hover: oklch(39.3% .034 259.733);--color-vdt-dark-interactive-active: oklch(44.6% .03 256.802);--color-vdt-surface: var(--color-vdt-light-surface);--color-vdt-surface-secondary: var(--color-vdt-light-surface-secondary);--color-vdt-surface-elevated: var(--color-vdt-light-surface-elevated);--color-vdt-content: var(--color-vdt-light-content);--color-vdt-content-secondary: var(--color-vdt-light-content-secondary);--color-vdt-content-muted: var(--color-vdt-light-content-muted);--color-vdt-outline: var(--color-vdt-light-outline);--color-vdt-outline-strong: var(--color-vdt-light-outline-strong);--color-vdt-outline-stronger: var(--color-vdt-light-outline-stronger);--color-vdt-interactive-hover: var(--color-vdt-light-interactive-hover);--color-vdt-interactive-active: var(--color-vdt-light-interactive-active);--color-vdt-error: oklch(63.7% .237 25.331)}.dark,[data-vdt-mode=dark]{--color-vdt-surface: var(--color-vdt-dark-surface);--color-vdt-surface-secondary: var(--color-vdt-dark-surface-secondary);--color-vdt-surface-elevated: var(--color-vdt-dark-surface-elevated);--color-vdt-content: var(--color-vdt-dark-content);--color-vdt-content-secondary: var(--color-vdt-dark-content-secondary);--color-vdt-content-muted: var(--color-vdt-dark-content-muted);--color-vdt-outline: var(--color-vdt-dark-outline);--color-vdt-outline-strong: var(--color-vdt-dark-outline-strong);--color-vdt-outline-stronger: var(--color-vdt-dark-outline-stronger);--color-vdt-interactive-hover: var(--color-vdt-dark-interactive-hover);--color-vdt-interactive-active: var(--color-vdt-dark-interactive-active)}.light,[data-vdt-mode=light]{--color-vdt-surface: var(--color-vdt-light-surface);--color-vdt-surface-secondary: var(--color-vdt-light-surface-secondary);--color-vdt-surface-elevated: var(--color-vdt-light-surface-elevated);--color-vdt-content: var(--color-vdt-light-content);--color-vdt-content-secondary: var(--color-vdt-light-content-secondary);--color-vdt-content-muted: var(--color-vdt-light-content-muted);--color-vdt-outline: var(--color-vdt-light-outline);--color-vdt-outline-strong: var(--color-vdt-light-outline-strong);--color-vdt-outline-stronger: var(--color-vdt-light-outline-stronger);--color-vdt-interactive-hover: var(--color-vdt-light-interactive-hover);--color-vdt-interactive-active: var(--color-vdt-light-interactive-active)}@layer components{.bg-vdt-surface{background-color:var(--color-vdt-surface)}.bg-vdt-surface-secondary{background-color:var(--color-vdt-surface-secondary)}.bg-vdt-surface-elevated{background-color:var(--color-vdt-surface-elevated)}.bg-vdt-interactive-hover{background-color:var(--color-vdt-interactive-hover)}.bg-vdt-interactive-active{background-color:var(--color-vdt-interactive-active)}.bg-vdt-outline{background-color:var(--color-vdt-outline)}.bg-vdt-theme-50{background-color:var(--color-vdt-theme-50)}.bg-vdt-theme-100{background-color:var(--color-vdt-theme-100)}.bg-vdt-theme-200{background-color:var(--color-vdt-theme-200)}.bg-vdt-theme-300{background-color:var(--color-vdt-theme-300)}.bg-vdt-theme-400{background-color:var(--color-vdt-theme-400)}.bg-vdt-theme-500{background-color:var(--color-vdt-theme-500)}.bg-vdt-theme-600{background-color:var(--color-vdt-theme-600)}.bg-vdt-theme-700{background-color:var(--color-vdt-theme-700)}.bg-vdt-theme-800{background-color:var(--color-vdt-theme-800)}.bg-vdt-theme-900{background-color:var(--color-vdt-theme-900)}.bg-vdt-theme-950{background-color:var(--color-vdt-theme-950)}.bg-vdt-transparent{background-color:transparent}.text-vdt-content{color:var(--color-vdt-content)}.text-vdt-content-secondary{color:var(--color-vdt-content-secondary)}.text-vdt-content-muted{color:var(--color-vdt-content-muted)}.text-vdt-error{color:var(--color-vdt-error)}.text-vdt-theme-50{color:var(--color-vdt-theme-50)}.text-vdt-theme-100{color:var(--color-vdt-theme-100)}.text-vdt-theme-200{color:var(--color-vdt-theme-200)}.text-vdt-theme-300{color:var(--color-vdt-theme-300)}.text-vdt-theme-400{color:var(--color-vdt-theme-400)}.text-vdt-theme-500{color:var(--color-vdt-theme-500)}.text-vdt-theme-600{color:var(--color-vdt-theme-600)}.text-vdt-theme-700{color:var(--color-vdt-theme-700)}.text-vdt-theme-800{color:var(--color-vdt-theme-800)}.text-vdt-theme-900{color:var(--color-vdt-theme-900)}.text-vdt-theme-950{color:var(--color-vdt-theme-950)}.text-white{color:#fff}.border-vdt-outline{border-color:var(--color-vdt-outline)}.border-vdt-outline-strong{border-color:var(--color-vdt-outline-strong)}.border-vdt-outline-stronger{border-color:var(--color-vdt-outline-stronger)}.border-vdt-error{border-color:var(--color-vdt-error)}.border-transparent{border-color:transparent}.border-vdt-theme-50{border-color:var(--color-vdt-theme-50)}.border-vdt-theme-100{border-color:var(--color-vdt-theme-100)}.border-vdt-theme-200{border-color:var(--color-vdt-theme-200)}.border-vdt-theme-300{border-color:var(--color-vdt-theme-300)}.border-vdt-theme-400{border-color:var(--color-vdt-theme-400)}.border-vdt-theme-500{border-color:var(--color-vdt-theme-500)}.border-vdt-theme-600{border-color:var(--color-vdt-theme-600)}.border-vdt-theme-700{border-color:var(--color-vdt-theme-700)}.border-vdt-theme-800{border-color:var(--color-vdt-theme-800)}.border-vdt-theme-900{border-color:var(--color-vdt-theme-900)}.border-vdt-theme-950{border-color:var(--color-vdt-theme-950)}.ring-vdt-theme-200{--tw-ring-color: var(--color-vdt-theme-200);box-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width) + var(--tw-ring-width)) var(--tw-ring-color)}.ring-vdt-theme-500{--tw-ring-color: var(--color-vdt-theme-500);box-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width) + var(--tw-ring-width)) var(--tw-ring-color)}.ring-vdt-outline{--tw-ring-color: var(--color-vdt-outline);box-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width) + var(--tw-ring-width)) var(--tw-ring-color)}.hover\:bg-vdt-interactive-hover:hover{background-color:var(--color-vdt-interactive-hover)}.hover\:bg-vdt-interactive-active:hover{background-color:var(--color-vdt-interactive-active)}.hover\:bg-vdt-theme-50:hover{background-color:var(--color-vdt-theme-50)}.hover\:bg-vdt-theme-100:hover{background-color:var(--color-vdt-theme-100)}.hover\:bg-vdt-theme-200:hover{background-color:var(--color-vdt-theme-200)}.hover\:bg-vdt-theme-300:hover{background-color:var(--color-vdt-theme-300)}.hover\:bg-vdt-theme-400:hover{background-color:var(--color-vdt-theme-400)}.hover\:bg-vdt-theme-500:hover{background-color:var(--color-vdt-theme-500)}.hover\:bg-vdt-theme-600:hover{background-color:var(--color-vdt-theme-600)}.hover\:bg-vdt-theme-700:hover{background-color:var(--color-vdt-theme-700)}.hover\:bg-vdt-theme-800:hover{background-color:var(--color-vdt-theme-800)}.hover\:bg-vdt-theme-900:hover{background-color:var(--color-vdt-theme-900)}.hover\:bg-vdt-theme-950:hover{background-color:var(--color-vdt-theme-950)}.hover\:border-vdt-outline-strong:hover{border-color:var(--color-vdt-outline-strong)}.hover\:border-vdt-outline-stronger:hover{border-color:var(--color-vdt-outline-stronger)}.hover\:border-vdt-theme-500:hover{border-color:var(--color-vdt-theme-500)}.hover\:border-vdt-theme-600:hover{border-color:var(--color-vdt-theme-600)}.focus\:border-vdt-theme-200:focus{border-color:var(--color-vdt-theme-200)}.focus\:ring-vdt-theme-200:focus{--tw-ring-color: var(--color-vdt-theme-200);box-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width) + var(--tw-ring-width)) var(--tw-ring-color)}.focus\:border-vdt-theme-500:focus{border-color:var(--color-vdt-theme-500)}.focus\:ring-vdt-theme-500:focus{--tw-ring-color: var(--color-vdt-theme-500);box-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width) + var(--tw-ring-width)) var(--tw-ring-color)}.focus\:outline-none:focus{outline:none}.active\:bg-vdt-interactive-active:active{background-color:var(--color-vdt-interactive-active)}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-vdt-surface-secondary:disabled{background-color:var(--color-vdt-surface-secondary)}.disabled\:text-vdt-content-muted:disabled{color:var(--color-vdt-content-muted)}.aria-selected\:bg-vdt-theme-500[aria-selected=true]{background-color:var(--color-vdt-theme-500)}.aria-selected\:text-white[aria-selected=true]{color:#fff}.data-selected\:bg-vdt-theme-500[data-selected=true]{background-color:var(--color-vdt-theme-500)}.data-selected\:text-white[data-selected=true]{color:#fff}.data-today\:border-vdt-theme-500[data-today=true]{border-color:var(--color-vdt-theme-500)}.data-today\:font-semibold[data-today=true]{font-weight:600}.data-in-range\:bg-vdt-theme-100[data-in-range=true]{background-color:var(--color-vdt-theme-100)}.data-range-start\:bg-vdt-theme-500[data-range-start=true],.data-range-end\:bg-vdt-theme-500[data-range-end=true]{background-color:var(--color-vdt-theme-500)}.focus-within\:border-vdt-theme-500:focus-within{border-color:var(--color-vdt-theme-500)}.focus-within\:ring-vdt-theme-200:focus-within{--tw-ring-color: var(--color-vdt-theme-200);box-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width) + var(--tw-ring-width)) var(--tw-ring-color)}.focus-within\:border-vdt-theme-300:focus-within{border-color:var(--color-vdt-theme-300)}.focus-within\:border-vdt-theme-400:focus-within{border-color:var(--color-vdt-theme-400)}.focus-within\:border-vdt-theme-600:focus-within{border-color:var(--color-vdt-theme-600)}.focus-within\:ring-vdt-theme-100:focus-within{--tw-ring-color: var(--color-vdt-theme-100);box-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width) + var(--tw-ring-width)) var(--tw-ring-color)}.focus-within\:ring-vdt-theme-300:focus-within{--tw-ring-color: var(--color-vdt-theme-300);box-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width) + var(--tw-ring-width)) var(--tw-ring-color)}.focus-within\:ring-2:focus-within{--tw-ring-width: 2px}.focus-within\:ring-offset-2:focus-within{--tw-ring-offset-width: 2px}.date-picker-container{border:1px solid var(--color-vdt-outline);transition:all .2s ease}.date-picker-container:focus-within{border-color:var(--color-vdt-theme-500);box-shadow:0 0 0 2px var(--color-vdt-theme-200);outline:none}.date-picker-container.error{border-color:var(--color-red-500);box-shadow:0 0 0 2px #ef444433}}.date-input[data-v-28be7475]{appearance:none;background-color:transparent;border-width:0;border-color:transparent;border-radius:0;padding:0;outline:none;box-shadow:none;transition:background-color .2s ease}.date-input[data-v-28be7475]:focus{border:none;box-shadow:none;outline:none}input[type=number][data-v-28be7475]::-webkit-inner-spin-button,input[type=number][data-v-28be7475]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number][data-v-28be7475]{appearance:textfield;-moz-appearance:textfield}.time-input[data-v-2ecd63a6]{appearance:none;background-color:transparent;border-width:0;border-color:transparent;border-radius:0;padding:0;outline:none;box-shadow:none;transition:background-color .2s ease}.time-input[data-v-2ecd63a6]:focus{border:none;box-shadow:none;outline:none}input[type=number][data-v-2ecd63a6]::-webkit-inner-spin-button,input[type=number][data-v-2ecd63a6]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number][data-v-2ecd63a6]{-moz-appearance:textfield;appearance:textfield}input[type=number][data-v-caef7ca5]::-webkit-inner-spin-button,input[type=number][data-v-caef7ca5]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number][data-v-caef7ca5]{-moz-appearance:textfield;appearance:textfield}.calendar-cell-button[data-in-current-month=false][data-v-9018b2ca]{opacity:.6}.calendar-cell-button[aria-current=date][data-v-9018b2ca]:not(.bg-vdt-theme-500){position:relative}.calendar-cell-button[aria-current=date][data-v-9018b2ca]:not(.bg-vdt-theme-500):after{content:"";position:absolute;bottom:2px;left:50%;transform:translate(-50%);width:4px;height:4px;background-color:var(--color-vdt-theme-500);border-radius:50%}