@kissmy/vue-hotel-datepicker
Version:
A responsive date range picker for Vue.js that displays the number of nights selected and allow several useful options like custom check-in/check-out rules, localization support and more
1 lines • 12.9 kB
CSS
.vhd-square{position:relative;width:14.28571%;float:left;font-family:Helvetica Neue}.vhd-datepicker__wrapper *,.vhd-datepicker__wrapper :after,.vhd-datepicker__wrapper :before{box-sizing:border-box}.vhd-datepicker{transition:all .2s ease-in-out;background-color:#fff;font-size:16px;line-height:14px;overflow:hidden;top:48px;position:absolute;z-index:999}.vhd-datepicker--right{right:0}.vhd-datepicker button.next--mobile{background:none;border:1px solid #eaeaea;float:none;height:50px;width:100%;position:relative;background-position:50%;-webkit-appearance:none;-moz-appearance:none;appearance:none;overflow:hidden;position:fixed;bottom:0;left:0;outline:none;box-shadow:0 5px 30px 10px rgba(0,0,0,.08);background:#fff}.vhd-datepicker button.next--mobile:after{background:transparent url(img/ic-arrow-right-green.regular.83ed3b6c.svg) no-repeat 50%/8px;transform:rotate(90deg);content:"";position:absolute;width:200%;height:200%;top:-50%;left:-50%}.vhd-datepicker--closed{box-shadow:0 15px 30px 10px transparent;max-height:0}.vhd-datepicker--open{box-shadow:0 15px 30px 10px rgba(0,0,0,.08);max-height:900px}@media screen and (max-width:767px){.vhd-datepicker--open{box-shadow:none;height:100%;left:0;right:0;bottom:0;-webkit-overflow-scrolling:touch;position:fixed;top:0;width:100%}}.vhd-datepicker__wrapper{position:relative;display:inline-block;width:100%;height:48px;background:#fff url(img/calendar_icon.regular.98f9a773.svg) no-repeat 17px/16px}.vhd-datepicker__wrapper--grid .vhd-square .vhd-datepicker__month-day{border:1px solid #eaeaea;margin:-1px 0 0 -1px}.vhd-datepicker__wrapper--booking .vhd-datepicker__month-day-wrapper span{text-align:right;padding-top:10px;padding-right:10px;right:0;top:0;transform:none}.vhd-datepicker__wrapper--booking .vhd-datepicker__month-day:before{display:none}.vhd-datepicker__fullview{background:none;height:auto}.vhd-datepicker__fullview .-hide-on-desktop,.vhd-datepicker__fullview .vhd-datepicker__clear-button,.vhd-datepicker__fullview .vhd-datepicker__close-button,.vhd-datepicker__fullview .vhd-datepicker__dummy-wrapper{display:none}.vhd-datepicker__fullview .vhd-datepicker{position:relative;top:0}.vhd-datepicker__fullview .-hide-up-to-tablet{display:block}.vhd-datepicker__fullview .vhd-datepicker__month-button{display:inline-block}.vhd-datepicker__fullview .vhd-datepicker__months{position:static;margin:0;width:auto}.vhd-datepicker__fullview .vhd-datepicker__months:before{display:none}.vhd-datepicker__input{background:transparent;font-size:12px;outline:none;padding:4px 30px 2px;width:100%;word-spacing:5px;border:0}.vhd-datepicker__input:focus{outline:none}.vhd-datepicker__input:-moz-placeholder,.vhd-datepicker__input:-ms-input-placeholder,.vhd-datepicker__input::-moz-placeholder,.vhd-datepicker__input::-webkit-input-placeholder{color:#35343d}.vhd-datepicker__dummy-wrapper{border:1px solid #eaeaea;cursor:pointer;display:flex;flex-wrap:wrap;justify-content:space-between;width:100%;height:100%}.vhd-datepicker__dummy-wrapper--no-border.vhd-datepicker__dummy-wrapper{border:0}.vhd-datepicker__dummy-wrapper--is-active{border:1px solid #195252}.vhd-datepicker__input{color:#35343d;padding-top:0;font-size:14px;height:48px;line-height:48px;text-align:left;text-indent:5px;width:calc(50% + 4px)}@media screen and (max-width:479px){.vhd-datepicker__input{text-indent:0;text-align:center}}.vhd-datepicker__input:first-child{background:transparent url(img/ic-arrow-right-datepicker.regular.99ab0620.svg) no-repeat 100%/8px;width:calc(50% - 4px);text-indent:20px}.vhd-datepicker__input--is-active{color:#195252}.vhd-datepicker__input--is-active::placeholder{color:#195252}.vhd-datepicker__input--is-active::-moz-placeholder{color:#195252}.vhd-datepicker__input--is-active:-ms-input-placeholder{color:#195252}.vhd-datepicker__input--is-active:-moz-placeholder{color:#195252}.vhd-datepicker__input--single-date:first-child{width:100%;background:none;text-align:left}.vhd-datepicker__month-day-wrapper{height:0;padding-top:calc(100% - 1px)}.vhd-datepicker__month-day-wrapper span{z-index:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.vhd-datepicker__month-day{visibility:visible;text-align:center;color:#195252;cursor:pointer}.vhd-datepicker__month-day:focus{outline:none}.vhd-datepicker__month-day--today{border:0}.vhd-datepicker__month-day--today .vhd-datepicker__month-day-wrapper{border:2px solid #195252;padding-top:calc(100% - 5px)}.vhd-datepicker__month-day--invalid-range{background-color:rgba(25,82,82,.3);color:#f3f5f8;cursor:not-allowed;position:relative}.vhd-datepicker__month-day--invalid{cursor:not-allowed;pointer-events:none}.vhd-datepicker__month-day--allowed-checkout:hover,.vhd-datepicker__month-day--valid:hover{background-color:#195252;color:#fff}.vhd-datepicker__month-day--disabled{opacity:1;background:#f5f7f8;color:#d8d8d8;cursor:not-allowed;pointer-events:none;font-weight:400;position:relative}.vhd-datepicker__month-day--disabled span{text-decoration:line-through}.vhd-datepicker__month-day--not-allowed.vhd-currentDay,.vhd-datepicker__month-day--valid.vhd-datepicker__month-day--not-allowed,.vhd-datepicker__month-day--valid.vhd-datepicker__month-day--not-allowed:hover{color:#195252;font-weight:400;cursor:default;background:transparent}.vhd-datepicker__month-day--not-allowed.vhd-currentDay span,.vhd-datepicker__month-day--valid.vhd-datepicker__month-day--not-allowed:hover span,.vhd-datepicker__month-day--valid.vhd-datepicker__month-day--not-allowed span{text-decoration:none}.vhd-datepicker__month-day--hovering.vhd-datepicker__month-day--not-allowed:hover{cursor:pointer}.vhd-datepicker__month-day--halfCheckIn,.vhd-datepicker__month-day--halfCheckOut{position:relative;overflow:hidden}.vhd-datepicker__month-day--halfCheckIn:before,.vhd-datepicker__month-day--halfCheckOut:before{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);content:"";z-index:-1;height:0;width:0;border-bottom:120px solid #f5f7f8;border-left:120px solid transparent}.vhd-datepicker__month-day--halfCheckOut:before{border-top:120px solid #f5f7f8;border-bottom:0;border-left:0;border-right:120px solid transparent}.vhd-datepicker__month-day--selected{background-color:rgba(25,82,82,.7);color:#fff}.vhd-datepicker__month-day--selected span{text-decoration:none}.vhd-datepicker__month-day--selected:hover{font-weight:700;background-color:#195252;color:#fff;z-index:1}.vhd-datepicker__month-day--hovering{background-color:rgba(25,82,82,.7);color:#fff;font-weight:700;cursor:pointer}.vhd-datepicker__month-day--hovering span{text-decoration:none}.vhd-datepicker__month-day--first-day-selected,.vhd-datepicker__month-day--last-day-selected{background:#195252;color:#fff;cursor:pointer;font-weight:700;pointer-events:auto}.vhd-datepicker__month-day--first-day-selected span,.vhd-datepicker__month-day--last-day-selected span{text-decoration:none}.vhd-datepicker__month-day--allowed-checkout{color:#424b53}.vhd-datepicker__month-day--out-of-range{color:#f3f5f8;cursor:not-allowed;font-weight:400;position:relative;pointer-events:none}.vhd-datepicker__month-day--out-of-range span{text-decoration:none}.vhd-datepicker__month-day--valid{cursor:pointer;font-weight:700}.vhd-datepicker__month-day--valid.vhd-datepicker__month-day--halfCheckIn.vhd-datepicker__month-day--last-day-selected{color:#fff}.vhd-datepicker__month-day--hidden{opacity:0;pointer-events:none}.vhd-datepicker__month-button{background:transparent url(img/ic-arrow-right-green.regular.83ed3b6c.svg) no-repeat 50%/8px;width:40px;height:40px;border:1px solid #00ca9d;outline:none;text-align:center;cursor:pointer;opacity:1;transition:opacity .5s ease}.vhd-datepicker__month-button:hover{opacity:.65}.vhd-datepicker__month-button:focus{outline:none}.vhd-datepicker__month-button--prev{transform:rotateY(180deg)}.vhd-datepicker__month-button--next{float:right}.vhd-datepicker__month-button[disabled]{opacity:.2;cursor:not-allowed;pointer-events:none}.vhd-datepicker__inner{padding:1.5rem 2.5rem}@media screen and (max-width:767px){.vhd-datepicker__inner{padding:0}}.vhd-datepicker .vhd-show-tooltip .vhd-datepicker__months{margin-top:160px;height:calc(100% - 160px)}.vhd-datepicker .vhd-show-tooltip .vhd-datepicker__tooltip--mobile{height:auto;opacity:1;padding:15px;visibility:visible}@media screen and (min-width:768px){.vhd-datepicker__months{display:flex;flex-wrap:wrap;width:650px;justify-content:space-between}}@media screen and (max-width:767px){.vhd-datepicker__months{margin-top:90px;height:calc(100% - 90px);position:absolute;left:0;top:0;overflow-y:scroll;right:0;bottom:0;transition:all .2s ease}}.vhd-datepicker__months:before{content:"";background:#eaeaea;bottom:0;display:block;left:50%;position:absolute;top:0;width:1px}@media screen and (max-width:767px){.vhd-datepicker__months:before{display:none}}.vhd-datepicker__months--full{width:100%}.vhd-datepicker__months--full .vhd-datepicker__month{width:470px;padding:0}.vhd-datepicker__months--full:before{display:none}.vhd-datepicker__month{font-size:12px;width:50%;padding-right:10px}@media screen and (max-width:767px){.vhd-datepicker__month{width:100%;padding-right:0;padding-top:60px;height:360px}.vhd-datepicker__month:last-of-type{margin-bottom:65px}}@media screen and (min-width:768px){.vhd-datepicker__month:last-of-type{padding-right:0;padding-left:10px}}.vhd-datepicker__month-caption{height:2.5em;vertical-align:middle}.vhd-datepicker__month-name{font-size:16px;font-weight:700;margin-top:-40px;padding:13px 0 26px;pointer-events:none;text-align:center}@media screen and (max-width:767px){.vhd-datepicker__month-name{margin-top:-50px;margin-bottom:0;position:absolute;width:100%}}.vhd-datepicker__week-days{height:2em;vertical-align:middle}.vhd-datepicker__week-row{height:40px;line-height:40px}@media screen and (max-width:767px){.vhd-datepicker__week-row{box-shadow:0 8px 12px 0 rgba(0,0,0,.1)}}.vhd-datepicker__week-name{width:14.28571%;float:left;font-size:12px;font-weight:400;color:#424b53;text-align:center}.vhd-datepicker__close-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:#195252;cursor:pointer;font-size:21px;font-weight:700;margin-top:0;outline:0;z-index:10000;position:fixed;right:15px;top:0;height:48px;line-height:48px}.vhd-datepicker__close-button i{display:block;font-style:inherit;transform:rotate(45deg)}.vhd-datepicker__clear-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;cursor:pointer;font-size:25px;font-weight:700;height:100%;margin:0;padding:0;position:absolute;right:0;top:0;width:40px}.vhd-datepicker__clear-button svg{fill:none;stroke-linecap:round;stroke-width:8px;stroke:#424b53;width:20px;width:14px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.vhd-datepicker__clear-button:focus{outline:none}.vhd-datepicker__tooltip{background-color:#2d3047;border-radius:2px;color:#fff;font-size:11px;padding:5px 10px;position:absolute;z-index:50;left:50%;bottom:100%;white-space:nowrap;transform:translateX(-50%);text-align:center}.vhd-datepicker__tooltip--mobile{height:0;opacity:0;visibility:hidden;padding:0 15px;border:1px solid #d7d9e2;font-size:14px;line-height:1.4;transition:all .2s ease}.vhd-datepicker__tooltip:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #2d3047;bottom:-4px;content:"";left:50%;margin-left:-4px;position:absolute}.-vhd-is-hidden{display:none}@media screen and (max-width:767px){.-vhd-hide-up-to-tablet{display:none}}@media screen and (min-width:768px){.-vhd-hide-on-desktop{display:none}}.vhd-parent-bullet{top:50%;height:100%;display:block;z-index:-1}.vhd-parent-bullet,.vhd-parent-bullet .vhd-bullet{position:absolute;left:50%;transform:translate(-50%,-50%);width:100%}.vhd-parent-bullet .vhd-bullet{top:60%;height:4px;transition:opacity .3s ease}@media screen and (min-width:768px){.vhd-parent-bullet .vhd-bullet{top:50%}}.vhd-parent-bullet .vhd-bullet.vhd-checkIn,.vhd-parent-bullet .vhd-bullet.vhd-checkInCheckOut,.vhd-parent-bullet .vhd-bullet.vhd-checkOut{width:8px;height:18px;border-radius:10px}.vhd-parent-bullet .vhd-bullet.vhd-checkIn.vhd-bullet--small,.vhd-parent-bullet .vhd-bullet.vhd-checkInCheckOut.vhd-bullet--small,.vhd-parent-bullet .vhd-bullet.vhd-checkOut.vhd-bullet--small{height:6px;width:14px}.vhd-parent-bullet .vhd-bullet.vhd-checkInCheckOut{left:calc(50% - 15px)}.vhd-parent-bullet .vhd-pipe{display:block;width:100%;height:4px;position:absolute;top:60%;transform:translateY(-50%);transition:opacity .3s ease}@media screen and (min-width:768px){.vhd-parent-bullet .vhd-pipe{top:50%}}.vhd-parent-bullet .vhd-pipe.vhd-pipe--small{height:3px}.vhd-parent-bullet .vhd-pipe.vhd-checkIn{left:calc(50% + 4px);width:calc(50% - 4px)}.vhd-parent-bullet .vhd-pipe.vhd-checkOut{left:0;width:calc(50% - 4px)}.vhd-parent-bullet .vhd-pipe.vhd-checkInCheckOut{width:calc(50% - 19px)}