vue-ctk-date-time-picker/dist/umd/vue-ctk-date-time-picker.min.css

A vue component for select date & time (by Chronotruck)

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700);.ctk-date-time-picker{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50}.ctk-date-time-picker,.ctk-date-time-picker input,.ctk-date-time-picker label,.ctk-date-time-picker p,.ctk-date-time-picker span{font-family:Roboto,Helvetica,Arial,sans-serif}.ctk-date-time-picker *,.ctk-date-time-picker :after,.ctk-date-time-picker :before{box-sizing:border-box}.ctk-date-time-picker .dots-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ctk-date-time-picker .text-muted{color:rgba(0,0,0,.54)!important}.ctk-date-time-picker .text-strong{font-weight:500}.ctk-date-time-picker .text-center{text-align:center!important}.ctk-date-time-picker .text-left{text-align:left!important}.ctk-date-time-picker .text-right{text-align:right!important}.ctk-date-time-picker .fs-12{font-size:12px!important}.ctk-date-time-picker .fs-14{font-size:14px!important}.ctk-date-time-picker .fs-16{font-size:16px!important}.ctk-date-time-picker .fs-18{font-size:18px!important}.ctk-date-time-picker .fw-300{font-weight:300}.ctk-date-time-picker .fw-400{font-weight:400}.ctk-date-time-picker .fw-500{font-weight:500}.ctk-date-time-picker .br-4{border-radius:4px}.ctk-date-time-picker .h-100{height:100%!important}.ctk-date-time-picker .mh-100{max-height:100%!important}.ctk-date-time-picker .w-100{width:100%!important}.ctk-date-time-picker .fluid{width:100%}.ctk-date-time-picker .fill-height{align-items:center;display:flex;height:100%;flex:1 1 100%}.ctk-date-time-picker .spacer{flex-grow:1!important}.ctk-date-time-picker .align-center{align-items:center}.ctk-date-time-picker .flex{display:flex}.ctk-date-time-picker .flex-start{align-items:flex-start;justify-content:flex-start;-ms-flex-pack:start;-moz-box-align:start;-moz-box-pack:start;-webkit-box-pack:start;-webkit-justify-content:flex-start}.ctk-date-time-picker .flex-end{align-items:flex-end;justify-content:flex-end;-ms-flex-pack:end;-moz-box-align:end;-moz-box-pack:end;-webkit-box-pack:end;-webkit-justify-content:flex-end}.ctk-date-time-picker .flex-direction-column{flex-direction:column;flex-flow:column;-moz-flex-direction:column}.ctk-date-time-picker .flex-direction-column-reverse{flex-direction:column-reverse;flex-flow:column-reverse;-moz-flex-direction:column-reverse}.ctk-date-time-picker .flex-direction-row{flex-direction:row;flex-flow:row;-moz-flex-direction:row}.ctk-date-time-picker .justify-content-right{justify-content:flex-end;-ms-flex-pack:end;-moz-box-align:end;-moz-box-pack:end;-webkit-box-pack:end;-webkit-justify-content:flex-end;-webkit-box-align:end}.ctk-date-time-picker .justify-content-center{justify-content:center;-ms-flex-pack:center;-moz-box-align:center;-moz-box-pack:center;-webkit-box-pack:center;-webkit-justify-content:center;-webkit-box-align:center}.ctk-date-time-picker .justify-content-between{justify-content:space-between;-ms-flex-pack:justify;-moz-box-align:stretch;-moz-box-pack:justify;-webkit-box-pack:justify;-webkit-justify-content:space-between;-webkit-box-align:stretch}.ctk-date-time-picker .flex-fill{-moz-flex:0 1 auto;flex:0 1 auto}.ctk-date-time-picker .flex-fixed{-moz-flex:0 0 auto;flex:0 0 auto}.ctk-date-time-picker .flex-1{-moz-flex:1;flex:1}.ctk-date-time-picker{width:100%;margin:0 auto;text-align:left;font-size:14px;border-radius:4px;position:relative}.ctk-date-time-picker *{box-sizing:border-box}.ctk-date-time-picker .time-picker-overlay{z-index:2;position:fixed;top:0;left:0;right:0;bottom:0}.ctk-date-time-picker .field{position:relative}.ctk-date-time-picker .field .field-label{position:absolute;top:3px;cursor:pointer;left:13px;-webkit-transform:translateY(25%);transform:translateY(25%);opacity:0;transition:all .25s cubic-bezier(.645,.045,.355,1);font-size:11px;color:rgba(0,0,0,.54)}.ctk-date-time-picker .field .field-input{cursor:pointer;background-color:#fff;transition-duration:.3s;position:relative;width:100%;height:42px;min-height:42px;padding:0 12px;font-weight:300;-webkit-appearance:none;outline:none;border:1px solid rgba(0,0,0,.2);border-radius:4px;font-size:14px;z-index:0}.ctk-date-time-picker .field.has-error .field-input{border-color:#ff4500!important}.ctk-date-time-picker .field.has-error .field-label{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);font-size:11px}.ctk-date-time-picker .field.has-error .field-input{padding-top:14px}.ctk-date-time-picker .field.has-value .field-label{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);font-size:11px}.ctk-date-time-picker .field.has-value .field-input{padding-top:14px}.ctk-date-time-picker .field.is-focused .field-input{border-color:#1e90ff}.ctk-date-time-picker .field.is-focused .field-label{color:#1e90ff}.ctk-date-time-picker .field.is-disabled .field-input{border-color:#ccc;background:#f2f2f2}.ctk-date-time-picker .field.is-disabled .field-input,.ctk-date-time-picker .field.is-disabled .field-label{cursor:default}.ctk-date-time-picker .text-danger{color:#ff4500!important}@media screen and (max-width:412px){.time-picker-overlay{background:rgba(0,0,0,.4)}.ctk-date-time-picker:not(.inline){position:inherit!important}}.slide-enter-active[data-v-cb2973dc],.slide-leave-active[data-v-cb2973dc]{opacity:1;z-index:999;transition:all .3s;-webkit-transform:translateY(0);transform:translateY(0)}.slide-enter[data-v-cb2973dc],.slide-leave-to[data-v-cb2973dc]{opacity:0;z-index:999;-webkit-transform:translateY(-20px);transform:translateY(-20px)}.slideinvert-enter-active[data-v-cb2973dc],.slideinvert-leave-active[data-v-cb2973dc]{opacity:1;z-index:999;transition:all .3s;-webkit-transform:translateY(0);transform:translateY(0)}.slideinvert-enter[data-v-cb2973dc],.slideinvert-leave-to[data-v-cb2973dc]{opacity:0;z-index:999;-webkit-transform:translateY(40px);transform:translateY(40px)}.slidenext-enter-active[data-v-cb2973dc],.slidenext-leave-active[data-v-cb2973dc],.slideprev-enter-active[data-v-cb2973dc],.slideprev-leave-active[data-v-cb2973dc]{position:absolute;transition:all .3s}.slidenext-enter[data-v-cb2973dc],.slideprev-leave-to[data-v-cb2973dc]{-webkit-transform:translateX(100%);transform:translateX(100%)}.slidenext-leave-to[data-v-cb2973dc],.slideprev-enter[data-v-cb2973dc]{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.slidevnext-enter-active[data-v-cb2973dc],.slidevnext-leave-active[data-v-cb2973dc],.slidevprev-enter-active[data-v-cb2973dc],.slidevprev-leave-active[data-v-cb2973dc]{position:absolute;transition:all .3s}.slidevnext-enter[data-v-cb2973dc],.slidevprev-leave-to[data-v-cb2973dc]{-webkit-transform:translateY(100%);transform:translateY(100%);opacity:0}.slidevnext-leave-to[data-v-cb2973dc],.slidevprev-enter[data-v-cb2973dc]{-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:0}@media screen and (max-width:412px){.slide-enter-active[data-v-cb2973dc],.slide-leave-active[data-v-cb2973dc],.slideinvert-enter-active[data-v-cb2973dc],.slideinvert-leave-active[data-v-cb2973dc]{transition:all 0s}}.datetimepicker[data-v-cb2973dc]{position:absolute}.datepicker[data-v-cb2973dc]{font-family:Roboto,sans-serif;position:absolute;z-index:5;border-radius:4px;overflow:hidden;background:#fff;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);max-width:400px}.datepicker .datetimepicker-container[data-v-cb2973dc]{background:#fff;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.datepicker-header[data-v-cb2973dc]{background:#1e90ff;color:#fff;padding:10px 0 10px 10px;position:relative;border-bottom:1px solid #eaeaea;border-top-left-radius:4px;border-top-right-radius:4px}.datepicker-header .datepicker-year[data-v-cb2973dc]{opacity:.7;margin-bottom:10px;font-size:14px;line-height:14px;position:relative;height:14px}.datepicker-header .datepicker-date[data-v-cb2973dc],.datepicker-header .datepicker-hour[data-v-cb2973dc],.datepicker-header .datepicker-minute[data-v-cb2973dc],.datepicker-header .datepicker-time[data-v-cb2973dc]{font-size:20px;line-height:20px;position:relative;height:20px}.datepicker-header .datepicker-date[data-v-cb2973dc]{text-transform:capitalize}.datepicker .datepicker-buttons-container[data-v-cb2973dc]{padding:5px 10px;border-top:1px solid #eaeaea}.datepicker .datepicker-buttons-container .datepicker-button[data-v-cb2973dc]{cursor:pointer;height:35px;width:35px;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:50%;padding:0;position:relative}.datepicker .datepicker-buttons-container .datepicker-button svg[data-v-cb2973dc]{position:relative;transition:all 450s cubic-bezier(.23,1,.32,1) 0ms}.datepicker .datepicker-buttons-container .datepicker-button .datepicker-button-effect[data-v-cb2973dc]{position:absolute;opacity:.6;height:30px;width:30px;top:2px;left:2px;border-radius:50%;transition:all .45s cubic-bezier(.23,1,.32,1) 0ms;-webkit-transform:scale(0);transform:scale(0)}.datepicker .datepicker-buttons-container .datepicker-button.validation svg[data-v-cb2973dc]{fill:green;position:relative}.datepicker .datepicker-buttons-container .datepicker-button.validation .datepicker-button-effect[data-v-cb2973dc]{background:green}.datepicker .datepicker-buttons-container .datepicker-button.validation:hover .datepicker-button-effect[data-v-cb2973dc]{-webkit-transform:scale(1);transform:scale(1);opacity:.6}.datepicker .datepicker-buttons-container .datepicker-button.validation:hover svg[data-v-cb2973dc]{fill:#fff!important}.inline .datepicker[data-v-cb2973dc],.inline.datetimepicker[data-v-cb2973dc]{position:relative}.inline .datepicker[data-v-cb2973dc]{margin-bottom:0!important;box-shadow:none;-webkit-box-shadow:none;width:100%;max-width:100%}@media screen and (max-width:412px){.datetimepicker-container[data-v-cb2973dc]{flex-direction:column;flex-flow:column;-moz-flex-direction:column}.datetimepicker[data-v-cb2973dc]:not(.inline){margin:0!important;position:absolute;top:0!important;bottom:0;right:0;left:0}.datetimepicker:not(.inline) .datepicker[data-v-cb2973dc]{top:50px!important;bottom:unset!important;left:5%;width:90%;max-width:inherit;position:fixed;margin:0!important}.datetimepicker:not(.inline) .datepicker-header[data-v-cb2973dc]{padding:10px!important}.datetimepicker:not(.inline) .datepicker-header .datepicker-time[data-v-cb2973dc]{min-width:100px!important;max-width:100px!important}.datetimepicker:not(.inline) .datepicker-header .datepicker-time .flex-1[data-v-cb2973dc],.datetimepicker:not(.inline) .datepicker-header .datepicker-time[data-v-cb2973dc]{justify-content:flex-end;-ms-flex-pack:end;-moz-box-align:end;-moz-box-pack:end;-webkit-box-pack:end;-webkit-justify-content:flex-end;-webkit-box-align:end}}.timepicker-container[data-v-4ef930c5]{width:160px}.timepicker-container .time-container[data-v-4ef930c5]{position:relative}.timepicker-container .time-container.hours-container[data-v-4ef930c5]{border-left:1px solid #eaeaea}.timepicker-container .time-container .time-label[data-v-4ef930c5]{padding:.3em 0}.timepicker-container .time-container .numbers-container[data-v-4ef930c5]{padding:0;margin:0;list-style:none;overflow:auto}.timepicker-container .time-container .numbers-container .item[data-v-4ef930c5]{padding:.3em 0;color:#161616;cursor:pointer;position:relative;border:none;background:transparent;font-size:14px;width:100%;outline:none}.timepicker-container .time-container .numbers-container .item .timepicker-day-effect[data-v-4ef930c5]{position:absolute;opacity:.6;background:#1e90ff;height:100%;width:100%;top:0;left:0;transition:all .45s cubic-bezier(.23,1,.32,1) 0ms;-webkit-transform:scale(0);transform:scale(0)}.timepicker-container .time-container .numbers-container .item .timepicker-day-text[data-v-4ef930c5]{position:relative}.timepicker-container .time-container .numbers-container .item[data-v-4ef930c5]:hover{color:#fff;transition:all .45s cubic-bezier(.23,1,.32,1) 0ms}.timepicker-container .time-container .numbers-container .item:hover .timepicker-day-effect[data-v-4ef930c5]{-webkit-transform:scale(1);transform:scale(1);opacity:.6}.timepicker-container .time-container .numbers-container .item.active[data-v-4ef930c5],.timepicker-container .time-container .numbers-container .item.active[data-v-4ef930c5]:hover{color:#fff}.timepicker-container .time-container .numbers-container .item.active .timepicker-day-effect[data-v-4ef930c5],.timepicker-container .time-container .numbers-container .item.active:hover .timepicker-day-effect[data-v-4ef930c5]{-webkit-transform:scale(1);transform:scale(1);opacity:1}@media screen and (max-width:412px){.timepicker-container[data-v-4ef930c5]:not(.inline){width:100%;border-top:1px solid #eaeaea;height:120px!important}.timepicker-container:not(.inline) .time-container.hours-container[data-v-4ef930c5]{border:0}}.slide-enter-active[data-v-5f5d31bc],.slide-leave-active[data-v-5f5d31bc]{opacity:1;z-index:999;transition:all .3s;-webkit-transform:translateY(0);transform:translateY(0)}.slide-enter[data-v-5f5d31bc],.slide-leave-to[data-v-5f5d31bc]{opacity:0;z-index:999;-webkit-transform:translateY(-20px);transform:translateY(-20px)}.slideinvert-enter-active[data-v-5f5d31bc],.slideinvert-leave-active[data-v-5f5d31bc]{opacity:1;z-index:999;transition:all .3s;-webkit-transform:translateY(0);transform:translateY(0)}.slideinvert-enter[data-v-5f5d31bc],.slideinvert-leave-to[data-v-5f5d31bc]{opacity:0;z-index:999;-webkit-transform:translateY(40px);transform:translateY(40px)}.slidenext-enter-active[data-v-5f5d31bc],.slidenext-leave-active[data-v-5f5d31bc],.slideprev-enter-active[data-v-5f5d31bc],.slideprev-leave-active[data-v-5f5d31bc]{position:absolute;transition:all .3s}.slidenext-enter[data-v-5f5d31bc],.slideprev-leave-to[data-v-5f5d31bc]{-webkit-transform:translateX(100%);transform:translateX(100%)}.slidenext-leave-to[data-v-5f5d31bc],.slideprev-enter[data-v-5f5d31bc]{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.slidevnext-enter-active[data-v-5f5d31bc],.slidevnext-leave-active[data-v-5f5d31bc],.slidevprev-enter-active[data-v-5f5d31bc],.slidevprev-leave-active[data-v-5f5d31bc]{position:absolute;transition:all .3s}.slidevnext-enter[data-v-5f5d31bc],.slidevprev-leave-to[data-v-5f5d31bc]{-webkit-transform:translateY(100%);transform:translateY(100%);opacity:0}.slidevnext-leave-to[data-v-5f5d31bc],.slidevprev-enter[data-v-5f5d31bc]{-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:0}@media screen and (max-width:412px){.slide-enter-active[data-v-5f5d31bc],.slide-leave-active[data-v-5f5d31bc],.slideinvert-enter-active[data-v-5f5d31bc],.slideinvert-leave-active[data-v-5f5d31bc]{transition:all 0s}}#CtkDatePicker[data-v-5f5d31bc]{width:290px;padding:0 5px}#CtkDatePicker .datepicker-controls[data-v-5f5d31bc]{height:56px}#CtkDatePicker .datepicker-controls .arrow-month[data-v-5f5d31bc]{flex:0 0 40px}#CtkDatePicker .datepicker-controls .datepicker-button[data-v-5f5d31bc]{background:transparent;cursor:pointer;padding:0 10px;border:none;outline:none}#CtkDatePicker .datepicker-controls .datepicker-button svg[data-v-5f5d31bc]{height:17px;width:17px;fill:#2c3e50}#CtkDatePicker .datepicker-controls .datepicker-button.datepicker-prev[data-v-5f5d31bc]{text-align:left!important}#CtkDatePicker .datepicker-controls .datepicker-button.datepicker-next[data-v-5f5d31bc]{text-align:right!important}#CtkDatePicker .datepicker-controls .datepicker-container-label[data-v-5f5d31bc]{text-transform:capitalize;font-size:18px;line-height:18px;position:relative;height:18px;overflow:hidden}#CtkDatePicker .datepicker-controls .datepicker-label[data-v-5f5d31bc]{text-transform:capitalize}#CtkDatePicker .datepicker-week[data-v-5f5d31bc]{height:41px;text-transform:capitalize}#CtkDatePicker .month-container[data-v-5f5d31bc]{position:relative;overflow:hidden}#CtkDatePicker .datepicker-days[data-v-5f5d31bc]{display:flex;display:-ms-flexbox;overflow:hidden;flex-wrap:wrap;-ms-flex-wrap:wrap}#CtkDatePicker .datepicker-days .datepicker-day[data-v-5f5d31bc]{height:41px;flex-grow:1;width:14.28571%;position:relative;border:none;background:transparent;font-size:13px;outline:none}#CtkDatePicker .datepicker-days .datepicker-day.enable[data-v-5f5d31bc]{cursor:pointer}#CtkDatePicker .datepicker-days .datepicker-day .datepicker-day-effect[data-v-5f5d31bc]{position:absolute;opacity:.6;background:#1e90ff;height:30px;width:30px;border-radius:50%;transition:all .45s cubic-bezier(.23,1,.32,1) 0ms;-webkit-transform:scale(0);transform:scale(0)}#CtkDatePicker .datepicker-days .datepicker-day .datepicker-day-text[data-v-5f5d31bc]{position:relative}#CtkDatePicker .datepicker-days .datepicker-day[data-v-5f5d31bc]:hover{color:#fff}#CtkDatePicker .datepicker-days .datepicker-day:hover .datepicker-day-effect[data-v-5f5d31bc]{-webkit-transform:scale(1);transform:scale(1);opacity:.6}#CtkDatePicker .datepicker-days .datepicker-day.selected[data-v-5f5d31bc]{color:#fff}#CtkDatePicker .datepicker-days .datepicker-day.selected .datepicker-day-effect[data-v-5f5d31bc]{-webkit-transform:scale(1);transform:scale(1);opacity:1}#CtkDatePicker .datepicker-days .datepicker-day.disabled[data-v-5f5d31bc]{color:#ccc}#CtkDatePicker .datepicker-days .datepicker-day.disabled.selected[data-v-5f5d31bc]{color:#fff}#CtkDatePicker .datepicker-days .datepicker-day.disabled .datepicker-day-effect[data-v-5f5d31bc]{-webkit-transform:scale(0);transform:scale(0);opacity:0}@media screen and (max-width:412px){#CtkDatePicker[data-v-5f5d31bc]{width:100%}#CtkDatePicker:not(.inline) .datepicker-controls[data-v-5f5d31bc]{height:36px!important}#CtkDatePicker:not(.inline) .datepicker-week[data-v-5f5d31bc]{height:21px!important}}
/*# sourceMappingURL=vue-ctk-date-time-picker.min.css.map*/