react-infinite-calendar-with-range
Version:
Infinite scrolling date-picker built with React, with localization, themes, keyboard support, and more.
11 lines (10 loc) • 11.4 kB
CSS
.Cal__Today__root{position:absolute;top:0;left:0;right:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:32px;padding:6px;box-sizing:border-box;-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);font-weight:500;line-height:0;z-index:10;cursor:pointer;-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease;-webkit-transition-delay:0.3s;transition-delay:0.3s}.Cal__Today__root.Cal__Today__show{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition-delay:0s;transition-delay:0s}.Cal__Today__root.Cal__Today__show .Cal__Today__chevron{-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease}.Cal__Today__root .Cal__Today__chevron{position:absolute;top:50%;margin-top:-6px;margin-left:5px;-webkit-transform:rotate(270deg);transform:rotate(270deg);-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease}.Cal__Today__root.Cal__Today__chevronUp .Cal__Today__chevron{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.Cal__Today__root.Cal__Today__chevronDown .Cal__Today__chevron{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
.Cal__Header__root{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;padding:10px;line-height:1.3;font-weight:400;border-top-left-radius:3px;border-top-right-radius:3px}.Cal__Header__root.Cal__Header__blank{height:98px}.Cal__Header__root.Cal__Header__blank .Cal__Header__wrapper{color:rgba(255,255,255,0.5);font-size:18px;cursor:default}.Cal__Header__root.Cal__Header__landscape{-webkit-box-align:start;-ms-flex-align:start;-ms-grid-row-align:flex-start;align-items:flex-start;min-width:200px;border-top-right-radius:0;border-bottom-left-radius:3px}.Cal__Header__root.Cal__Header__landscape .Cal__Header__dateWrapper.Cal__Header__day{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:76px}.Cal__Header__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;cursor:pointer}.Cal__Header__dateWrapper{position:relative;display:block;overflow:hidden;color:rgba(255,255,255,0.5);-webkit-transition:color 0.3s ease;transition:color 0.3s ease}.Cal__Header__dateWrapper.Cal__Header__active{color:#fff}.Cal__Header__dateWrapper.Cal__Header__day{height:44px;font-size:34px;line-height:44px}.Cal__Header__dateWrapper.Cal__Header__start{height:30px;font-size:22px;line-height:26px}.Cal__Header__dateWrapper.Cal__Header__end{height:14px;font-size:14px;line-height:14px}.Cal__Header__dateWrapper.Cal__Header__year{height:20px;font-size:18px;line-height:18px}.Cal__Header__dateWrapper i{opacity:0.5;font-style:normal;margin-left:10px}.Cal__Header__date{position:absolute;top:0;left:0;right:0;bottom:0}.Cal__Header__rangeLabel{height:1em}
.Cal__Animation__enter{opacity:0;-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);-webkit-transition:0.25s ease;transition:0.25s ease}.Cal__Animation__enter.Cal__Animation__enterActive{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.Cal__Animation__leave{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition:0.25s ease;transition:0.25s ease}.Cal__Animation__leave.Cal__Animation__leaveActive{opacity:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}
.Cal__Day__root{display:inline-block;box-sizing:border-box;width:14.28571%;list-style:none;font-size:16px;text-align:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.Cal__Day__root.Cal__Day__enabled.Cal__Day__highlighted,.Cal__Day__root.Cal__Day__enabled:active,.Cal__Day__root.Cal__Day__enabled:hover{position:relative;z-index:1}.Cal__Day__root.Cal__Day__enabled.Cal__Day__highlighted:before,.Cal__Day__root.Cal__Day__enabled:active:before,.Cal__Day__root.Cal__Day__enabled:hover:before{content:'';position:absolute;top:50%;left:50%;width:52px;height:52px;margin-top:-26px;margin-left:-26px;border-radius:50% 50% 50% 50%;z-index:5;background-color:#EFEFEF;z-index:-1}.Cal__Day__root.Cal__Day__enabled:hover:before{opacity:0.5}.Cal__Day__root.Cal__Day__enabled.Cal__Day__highlighted:before,.Cal__Day__root.Cal__Day__enabled:active:before{opacity:1}.Cal__Day__root:first-child{position:relative}.Cal__Day__root.Cal__Day__today{position:relative;z-index:2}.Cal__Day__root.Cal__Day__today>span{color:#3d3d3d}.Cal__Day__root.Cal__Day__today.Cal__Day__disabled>span{color:#AAA}.Cal__Day__root.Cal__Day__today:before{content:'';position:absolute;top:50%;left:50%;width:52px;height:52px;margin-top:-26px;margin-left:-26px;border-radius:50% 50% 50% 50%;z-index:5;box-shadow:inset 0 0 0 1px;z-index:-1}.Cal__Day__root.Cal__Day__today.Cal__Day__disabled:before{box-shadow:inset 0 0 0 1px #BBB}.Cal__Day__root.Cal__Day__today.Cal__Day__badge{background-color:#2581ca;color:#fff}.Cal__Day__root.Cal__Day__selected{position:relative}.Cal__Day__root.Cal__Day__selected>.Cal__Day__month,.Cal__Day__root.Cal__Day__selected>.Cal__Day__year{display:none}.Cal__Day__root.Cal__Day__selected:before{display:none}.Cal__Day__root.Cal__Day__selected .Cal__Day__selection{content:'';position:absolute;top:50%;left:50%;width:52px;height:52px;margin-top:-26px;margin-left:-26px;border-radius:50% 50% 50% 50%;z-index:5;line-height:56px;z-index:2}.Cal__Day__root.Cal__Day__selected .Cal__Day__selection .Cal__Day__month{top:9px}.Cal__Day__root.Cal__Day__selected .Cal__Day__selection .Cal__Day__day{position:relative;top:5px;font-weight:bold;font-size:18px}.Cal__Day__root.Cal__Day__selected .Cal__Day__selectionStart{border-radius:50% 0% 0% 50%}.Cal__Day__root.Cal__Day__selected .Cal__Day__selectionEnd{border-radius:0% 50% 50% 0%}.Cal__Day__root.Cal__Day__selected .Cal__Day__selectionBetween{border-radius:0%}.Cal__Day__root.Cal__Day__disabled{cursor:default;color:#AAA;cursor:not-allowed}.Cal__Day__month,.Cal__Day__year{position:absolute;left:0;right:0;font-size:12px;line-height:12px}.Cal__Day__month{top:5px}.Cal__Day__year{bottom:5px}.Cal__Day__badge{background-color:#919191;color:#fff;font-size:0.8em;font-weight:bold;border-radius:50%;padding:2px;z-index:6;position:absolute;height:1em;min-width:1em;line-height:1em}.Cal__Day__badge_overdue{background-color:#d8292d}
.Cal__Month__root{position:relative;background:-webkit-linear-gradient(top, rgba(255,255,255,0) 50%, rgba(0,0,0,0.05) 100%);background:linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(0,0,0,0.05) 100%)}.Cal__Month__row{padding:0;margin:0}.Cal__Month__row:first-child{text-align:right}.Cal__Month__row:first-child li{position:relative;top:1px;z-index:1;margin-top:-1px;background-color:#FFF;box-shadow:0 -1px 0 #E9E9E9}.Cal__Month__row:nth-child(2){box-shadow:0 -1px 0 #E9E9E9}.Cal__Month__row.Cal__Month__partial:first-child li:first-child{border-left:1px solid #E9E9E9}.Cal__Month__row.Cal__Month__partial:last-child li{position:relative;z-index:1}.Cal__Month__label{position:absolute;top:0;bottom:0;left:0;right:0;font-size:30px;font-weight:500;z-index:3;pointer-events:none;background-color:rgba(255,255,255,0.6);opacity:0;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease}.Cal__Month__label>span{position:absolute;left:0;right:0;top:0;bottom:56px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.Cal__Month__label.Cal__Month__partialFirstRow{top:56px}
.Cal__List__root{width:100% ;background-color:#FFF}.Cal__List__root.Cal__List__scrolling label{opacity:1}
.Cal__Weekdays__root{position:relative;z-index:5;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0;margin:0;list-style:none}.Cal__Weekdays__day{padding:15px 0;-ms-flex-preferred-size:14.28571%;flex-basis:14.28571%;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;font-weight:500;text-align:center}
.Cal__Years__root{position:absolute;left:0;right:0;bottom:0;z-index:10;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:#F9F9F9}.Cal__Years__root:before,.Cal__Years__root:after{content:'';position:absolute;left:0;right:0;height:100px;pointer-events:none;z-index:1}.Cal__Years__root:before{top:0;background:-webkit-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);background:linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) 100%)}.Cal__Years__root:after{bottom:0;background:-webkit-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 100%);background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%)}.Cal__Years__list{box-sizing:border-box}.Cal__Years__list.Cal__Years__center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.Cal__Years__year{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:18px;font-weight:500;text-align:center;cursor:pointer;-webkit-user-select:none}.Cal__Years__year>span{color:#666}.Cal__Years__year:hover>span,.Cal__Years__year.Cal__Years__active>span{color:inherit}.Cal__Years__year:hover,.Cal__Years__year.Cal__Years__active{position:relative;z-index:2}.Cal__Years__year.Cal__Years__active{font-size:32px}.Cal__Years__year.Cal__Years__currentYear{position:relative}.Cal__Years__year.Cal__Years__currentYear>span{min-width:50px;padding-bottom:5px;border-bottom:3px solid}.Cal__Years__year.Cal__Years__currentYear.Cal__Years__active>span{padding-bottom:10px;min-width:85px}
.Cal__Container__root{position:relative;display:table;z-index:1;font:14px 'Helvetica Neue', Helvetica, Arial, sans-serif;line-height:1.4em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:300;outline:none}.Cal__Container__root.Cal__Container__landscape{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.Cal__Container__root.Cal__Container__landscape .Cal__Container__wrapper{position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;z-index:1;border-top-right-radius:3px;border-bottom-right-radius:3px}.Cal__Container__root .VirtualScroll{-webkit-overflow-scrolling:touch;outline:none;overflow-x:hidden }.Cal__Container__root .Grid__innerScrollContainer{width:100% }.Cal__Container__listWrapper{position:relative;overflow:hidden}.VirtualScroll{position:relative;overflow:auto}.Grid__cell{position:absolute}
/*# sourceMappingURL=styles.min.css.map*/