vue-amazing-ui/es/datepicker/DatePicker.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.datepicker-wrap[data-v-1ea4e2ec]{display:inline-block;width:var(--datepicker-width)}.datepicker-wrap[data-v-1ea4e2ec] .dp__input_wrap svg{fill:currentColor}.datepicker-wrap[data-v-1ea4e2ec] .dp__input_wrap .dp__input{line-height:1.57142857}.datepicker-wrap[data-v-1ea4e2ec] .dp__input_wrap :deep(.dp__input:hover:not(.dp__disabled)){border-color:var(--dp-border-color-hover)}.datepicker-wrap[data-v-1ea4e2ec] .dp__input_wrap .dp__disabled{color:#00000040;cursor:not-allowed}.datepicker-wrap[data-v-1ea4e2ec] .dp__input_wrap .dp__disabled:hover{border-color:var(--dp-border-color)}.datepicker-wrap[data-v-1ea4e2ec] .dp__input_wrap .dp__input_focus{box-shadow:0 0 0 2px var(--datepicker-primary-shadow-color)}.datepicker-wrap[data-v-1ea4e2ec] .dp__outer_menu_wrap .dp__menu{overflow:hidden;border:none;border-radius:8px;box-shadow:0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d}.datepicker-wrap[data-v-1ea4e2ec] .dp__outer_menu_wrap .dp__menu .dp__arrow_top,.datepicker-wrap[data-v-1ea4e2ec] .dp__outer_menu_wrap .dp__menu .dp__arrow_bottom{display:none}.datepicker-wrap[data-v-1ea4e2ec] .dp__outer_menu_wrap .dp__menu .dp__overlay{padding-top:8px}.datepicker-wrap[data-v-1ea4e2ec] .dp__outer_menu_wrap .dp__menu .dp__overlay .dp__overlay_container::-webkit-scrollbar-thumb{border-radius:5px;cursor:pointer;background-color:var(--dp-scroll-bar-color);transition:background-color .2s cubic-bezier(.4,0,.2,1)}.datepicker-wrap[data-v-1ea4e2ec] .dp__outer_menu_wrap .dp__menu .dp__overlay .dp__overlay_container::-webkit-scrollbar-thumb:hover{background-color:#0006}.datepicker-wrap[data-v-1ea4e2ec] .dp__outer_menu_wrap .dp__menu .dp__cell_offset.dp__range_start{color:var(--dp-primary-text-color)}.datepicker-wrap[data-v-1ea4e2ec] .dp__outer_menu_wrap .dp__menu .dp__cell_disabled.dp__date_hover:hover{background:transparent;color:var(--dp-secondary-color)}.datepicker-wrap[data-v-1ea4e2ec] .dp__outer_menu_wrap .dp__menu .dp__cell_disabled.dp__today{background:transparent;border:1px solid var(--dp-secondary-color)}.datepicker-wrap[data-v-1ea4e2ec] .dp__outer_menu_wrap .dp__menu .dp__cell_disabled.dp__active_date{color:#00000073;border-color:var(--dp-secondary-color)}.datepicker-wrap[data-v-1ea4e2ec] .dp__outer_menu_wrap .dp__menu .dp__range_between:not(.dp__today){border-color:transparent}.datepicker-wrap[data-v-1ea4e2ec] .dp__outer_menu_wrap .dp__menu .dp__range_between.dp__cell_disabled{background:transparent;color:var(--dp-secondary-color)}.datepicker-wrap[data-v-1ea4e2ec]{--dp-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;--dp-border-radius: 6px;--dp-cell-border-radius: 4px;--dp-common-transition: all .2s ease;--dp-button-height: 35px;--dp-month-year-row-height: 35px;--dp-month-year-row-button-size: 35px;--dp-button-icon-height: 20px;--dp-cell-size: 35px;--dp-cell-padding: 5px;--dp-common-padding: 10px;--dp-input-icon-padding: 35px;--dp-input-padding: 4px 30px 4px 12px;--dp-menu-min-width: 260px;--dp-action-buttons-padding: 2px 5px;--dp-row-margin: 5px 0;--dp-calendar-header-cell-padding: .5rem;--dp-two-calendars-spacing: 10px;--dp-overlay-col-padding: 3px;--dp-time-inc-dec-button-size: 32px;--dp-menu-padding: 6px 8px;--dp-font-size: 14px;--dp-preview-font-size: 12px;--dp-time-font-size: 28px;--dp-animation-duration: .2s;--dp-menu-appear-transition-timing: cubic-bezier(.4, 0, .2, 1);--dp-transition-timing: ease-in-out}.datepicker-wrap .slide-down-enter[data-v-1ea4e2ec]{transform:scale(0);transform-origin:0% 0%;opacity:0;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-duration:.2s;animation-fill-mode:both;animation-play-state:paused}.datepicker-wrap .slide-down-enter-active[data-v-1ea4e2ec]{animation-name:slideDownIn-1ea4e2ec;animation-play-state:running}.datepicker-wrap .slide-down-leave[data-v-1ea4e2ec]{animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-duration:.2s;animation-fill-mode:both;animation-play-state:paused}.datepicker-wrap .slide-down-leave-active[data-v-1ea4e2ec]{animation-name:slideDownOut-1ea4e2ec;animation-play-state:running}.datepicker-wrap[data-v-1ea4e2ec] .dp-menu-appear-bottom-enter-active{transform:scale(0);transform-origin:0% 0%;opacity:0;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-duration:.2s;animation-fill-mode:both;animation-play-state:paused}.datepicker-wrap[data-v-1ea4e2ec] .dp-menu-appear-bottom-leave-active{animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-duration:.2s;animation-fill-mode:both;animation-play-state:paused;animation-name:slideDownOut-1ea4e2ec;animation-play-state:running}.datepicker-wrap[data-v-1ea4e2ec] .dp-menu-appear-bottom-enter-from{transform:scale(0);transform-origin:0% 0%;opacity:0;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-duration:.2s;animation-fill-mode:both;animation-play-state:paused}.datepicker-wrap[data-v-1ea4e2ec] .dp-menu-appear-bottom-enter-to{transform:scale(0);transform-origin:0% 0%;opacity:0;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-duration:.2s;animation-fill-mode:both;animation-play-state:paused;animation-name:slideDownIn-1ea4e2ec;animation-play-state:running}@keyframes slideDownIn-1ea4e2ec{0%{transform:scaleY(.8);transform-origin:0% 0%;opacity:0}to{transform:scaleY(1);transform-origin:0% 0%;opacity:1}}.datepicker-wrap[data-v-1ea4e2ec] .dp-menu-appear-bottom-leave-from{animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-duration:.2s;animation-fill-mode:both;animation-play-state:paused}.datepicker-wrap[data-v-1ea4e2ec] .dp-menu-appear-bottom-leave-to{animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-duration:.2s;animation-fill-mode:both;animation-play-state:paused;animation-name:slideDownOut-1ea4e2ec;animation-play-state:running}@keyframes slideDownOut-1ea4e2ec{0%{transform:scaleY(1);transform-origin:0% 0%;opacity:1}to{transform:scaleY(.8);transform-origin:0% 0%;opacity:0}}.datepicker-wrap .slide-up-enter[data-v-1ea4e2ec]{transform:scale(0);transform-origin:bottom left;opacity:0;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-duration:.2s;animation-fill-mode:both;animation-play-state:paused}.datepicker-wrap .slide-up-enter-active[data-v-1ea4e2ec]{animation-name:slideUpIn-1ea4e2ec;animation-play-state:running}.datepicker-wrap .slide-up-leave[data-v-1ea4e2ec]{animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-duration:.2s;animation-fill-mode:both;animation-play-state:paused}.datepicker-wrap .slide-up-leave-active[data-v-1ea4e2ec]{animation-name:slideUpOut-1ea4e2ec;animation-play-state:running}.datepicker-wrap[data-v-1ea4e2ec] .dp-menu-appear-top-enter-active{transform:scale(0);transform-origin:bottom left;opacity:0;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-duration:.2s;animation-fill-mode:both;animation-play-state:paused}.datepicker-wrap[data-v-1ea4e2ec] .dp-menu-appear-top-leave-active{animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-duration:.2s;animation-fill-mode:both;animation-play-state:paused;animation-name:slideUpOut-1ea4e2ec;animation-play-state:running}.datepicker-wrap[data-v-1ea4e2ec] .dp-menu-appear-top-enter-from{transform:scale(0);transform-origin:bottom left;opacity:0;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-duration:.2s;animation-fill-mode:both;animation-play-state:paused}.datepicker-wrap[data-v-1ea4e2ec] .dp-menu-appear-top-enter-to{transform:scale(0);transform-origin:bottom left;opacity:0;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-duration:.2s;animation-fill-mode:both;animation-play-state:paused;animation-name:slideUpIn-1ea4e2ec;animation-play-state:running}@keyframes slideUpIn-1ea4e2ec{0%{transform:scaleY(.8);transform-origin:bottom left;opacity:0}to{transform:scaleY(1);transform-origin:bottom left;opacity:1}}.datepicker-wrap[data-v-1ea4e2ec] .dp-menu-appear-top-leave-from{animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-duration:.2s;animation-fill-mode:both;animation-play-state:paused}.datepicker-wrap[data-v-1ea4e2ec] .dp-menu-appear-top-leave-to{animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-duration:.2s;animation-fill-mode:both;animation-play-state:paused;animation-name:slideUpOut-1ea4e2ec;animation-play-state:running}@keyframes slideUpOut-1ea4e2ec{0%{transform:scaleY(1);transform-origin:bottom left;opacity:1}to{transform:scaleY(.8);transform-origin:bottom left;opacity:0}}.datepicker-small[data-v-1ea4e2ec]{--dp-input-padding: 0px 30px 0px 12px}.datepicker-large[data-v-1ea4e2ec]{--dp-font-size: 16px}.datepicker-large[data-v-1ea4e2ec] .dp__input_wrap .dp__input{height:40px}.dp__theme_dark[data-v-1ea4e2ec],[data-v-1ea4e2ec] .dp__theme_dark{--dp-background-color: #212121;--dp-text-color: #fff;--dp-hover-color: #484848;--dp-hover-text-color: #fff;--dp-hover-icon-color: #959595;--dp-primary-color: #1668dc;--dp-primary-disabled-color: #61a8ea;--dp-primary-text-color: #fff;--dp-secondary-color: #a9a9a9;--dp-border-color: #2d2d2d;--dp-menu-border-color: #2d2d2d;--dp-border-color-hover: #aaaeb7;--dp-border-color-focus: #aaaeb7;--dp-disabled-color: #737373;--dp-disabled-color-text: #d0d0d0;--dp-scroll-bar-background: #212121;--dp-scroll-bar-color: #484848;--dp-success-color: #00701a;--dp-success-color-disabled: #428f59;--dp-icon-color: #959595;--dp-danger-color: #e53935;--dp-marker-color: #e53935;--dp-tooltip-color: #3e3e3e;--dp-highlight-color: rgba(0, 92, 178, .2);--dp-range-between-dates-background-color: var(--dp-hover-color, #484848);--dp-range-between-dates-text-color: var(--dp-hover-text-color, #fff);--dp-range-between-border-color: var(--dp-hover-color, #fff)}.dp__theme_light[data-v-1ea4e2ec],[data-v-1ea4e2ec] .dp__theme_light{--dp-background-color: #fff;--dp-text-color: rgba(0, 0, 0, .88);--dp-hover-color: rgba(0, 0, 0, .04);--dp-hover-text-color: rgba(0, 0, 0, .88);--dp-hover-icon-color: #959595;--dp-primary-color: var(--datepicker-primary-color);--dp-primary-disabled-color: #6bacea;--dp-primary-text-color: #fff;--dp-secondary-color: rgba(0, 0, 0, .25);--dp-border-color: #d9d9d9;--dp-menu-border-color: #d9d9d9;--dp-border-color-hover: var(--datepicker-primary-color-hover);--dp-border-color-focus: var(--datepicker-primary-color-focus);--dp-disabled-color: rgba(0, 0, 0, .04);--dp-scroll-bar-background: transparent;--dp-scroll-bar-color: rgba(0, 0, 0, .25);--dp-success-color: #76d275;--dp-success-color-disabled: #a3d9b1;--dp-icon-color: #959595;--dp-danger-color: #ff6f60;--dp-marker-color: #ff6f60;--dp-tooltip-color: #fafafa;--dp-disabled-color-text: #8e8e8e;--dp-highlight-color: rgba(25, 118, 210, .1);--dp-range-between-dates-background-color: rgba(0, 0, 0, .04);--dp-range-between-dates-text-color: rgba(0, 0, 0, .88);--dp-range-between-border-color: rgba(0, 0, 0, .04)}