react-calendar-z
Version:
React hook calendar (lib). Ultimate calendar
1 lines • 16.4 kB
CSS
.ps{overflow:hidden;overflow-anchor:none;-ms-overflow-style:none;touch-action:auto;-ms-touch-action:auto}.ps__rail-x{height:15px;bottom:0}.ps__rail-x,.ps__rail-y{display:none;opacity:0;transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;position:absolute}.ps__rail-y{width:15px;right:0}.ps--active-x>.ps__rail-x,.ps--active-y>.ps__rail-y{display:block;background-color:transparent}.ps--focus>.ps__rail-x,.ps--focus>.ps__rail-y,.ps--scrolling-x>.ps__rail-x,.ps--scrolling-y>.ps__rail-y,.ps:hover>.ps__rail-x,.ps:hover>.ps__rail-y{opacity:.6}.ps .ps__rail-x.ps--clicking,.ps .ps__rail-x:focus,.ps .ps__rail-x:hover,.ps .ps__rail-y.ps--clicking,.ps .ps__rail-y:focus,.ps .ps__rail-y:hover{background-color:#eee;opacity:.9}.ps__thumb-x{transition:background-color .2s linear,height .2s ease-in-out;-webkit-transition:background-color .2s linear,height .2s ease-in-out;height:6px;bottom:2px}.ps__thumb-x,.ps__thumb-y{background-color:#aaa;border-radius:6px;position:absolute}.ps__thumb-y{transition:background-color .2s linear,width .2s ease-in-out;-webkit-transition:background-color .2s linear,width .2s ease-in-out;width:6px;right:2px}.ps__rail-x.ps--clicking .ps__thumb-x,.ps__rail-x:focus>.ps__thumb-x,.ps__rail-x:hover>.ps__thumb-x{background-color:#999;height:11px}.ps__rail-y.ps--clicking .ps__thumb-y,.ps__rail-y:focus>.ps__thumb-y,.ps__rail-y:hover>.ps__thumb-y{background-color:#999;width:11px}@supports (-ms-overflow-style:none){.ps{overflow:auto}}@media (-ms-high-contrast:none),screen and (-ms-high-contrast:active){.ps{overflow:auto}}.list-dk-scroll-view .ps__thumb-x{bottom:0}.list-dk-scroll-view .ps__rail-y{left:auto}.list-dk-scroll-view .ps__rail-x,.list-dk-scroll-view .ps__rail-y{z-index:1}.list-dk-scroll-view.perfect-list{position:relative;width:100%;padding:0;margin:0;overflow:hidden}.list-dk-scroll-view.perfect-list .scroll-content{position:relative;display:block;width:100%;height:inherit;max-height:inherit}.list-dk-scroll-view.perfect-list .scroll-content.scroll-always>.ps__rail-x,.list-dk-scroll-view.perfect-list .scroll-content.scroll-always>.ps__rail-y{opacity:.65}.list-dk-scroll-view.perfect-list .scroll-content.scroll-wheel-stop{overscroll-behavior:contain}.list-dk-scroll-view.perfect-list.ps{border:0}.list-dk-scroll-view.perfect-list.ps.scroll-always>.ps__rail-x,.list-dk-scroll-view.perfect-list.ps.scroll-always>.ps__rail-y{opacity:.65}.list-dk-scroll-view.perfect-table{width:100%;border-collapse:collapse;margin:0}.list-dk-scroll-view.perfect-table thead{display:block}.list-dk-scroll-view.perfect-table thead tr{display:table;width:100%;table-layout:fixed}.list-dk-scroll-view.perfect-table tbody{display:block;position:relative;overflow:hidden}.list-dk-scroll-view.perfect-table tbody tr{display:table;width:100%;table-layout:fixed}.list-dk-scroll-view.perfect-table tbody.ps{border:0}.list-dk-scroll-view.perfect-table tbody.scroll-always>.ps__rail-x,.list-dk-scroll-view.perfect-table tbody.scroll-always>.ps__rail-y{opacity:.65}.list-dk-scroll-view.perfect-table tbody.scroll-wheel-stop{overscroll-behavior:contain}@keyframes dropdown2-fade-in-out{0%{opacity:0}50%{opacity:1}}.dp-dropdown2-container{position:relative;display:inline-flex;flex-direction:column;user-select:none}.dp-dropdown2-container .dropdown2-button{display:flex;align-items:center;position:relative;color:#212529;background-color:#e2e6ea;border-color:#f8f9fa;text-align:left;cursor:pointer;height:100%;font-weight:400;white-space:nowrap;vertical-align:middle;outline:none;border:none;border-radius:4px;padding:.375rem 2rem .375rem .5rem;font-size:1rem;line-height:1.2;min-height:32px}.dp-dropdown2-container .dropdown2-button:disabled{opacity:.65;pointer-events:none}.dp-dropdown2-container .dropdown2-button.dropdown2-button-no-data{pointer-events:none}.dp-dropdown2-container .dropdown2-button .dropdown2-arrow{position:absolute;display:inline-block;transform:translateY(-56%);top:56%;right:.75rem;width:0;height:0;margin-left:.255em;vertical-align:.255em;content:" ";border-color:#999 transparent;border-style:solid solid none;border-width:.3em .3em 0}.dp-dropdown2-container .dropdown2-button .dropdown2-arrow.dropdown2-arrow-active{transform:rotate(180deg);top:45%}.dp-dropdown2-container .dropdown2-button .dropdown2-label{display:block;width:100%;margin-left:.375rem;overflow:hidden;text-overflow:ellipsis}.dp-dropdown2-container .dropdown2-button .dropdown2-label.dropdown2-selected{font-weight:400}.dp-dropdown2-container .dropdown2-button .dropdown2-label.dropdown2-placeholder{color:#777}.dp-dropdown2-container .dropdown2-list-default{overflow-y:auto}.dp-dropdown2-container .dropdown2-list-items{position:absolute;display:flex;flex-direction:column;color:#212529;background-color:#fff;font-size:1rem;text-align:left;border-radius:.25rem;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);background-clip:padding-box;z-index:1099;-webkit-animation:dropdown2-fade-in-out .6s linear forwards;animation:dropdown2-fade-in-out .6s linear forwards;transition:all .2s ease;-webkit-overflow-scrolling:touch}.dp-dropdown2-container .dropdown2-list-items .dropdown2-group-item{padding:0 2px;font-style:italic}.dp-dropdown2-container .dropdown2-list-items .dropdown2-item{display:block;width:100%;padding:.375rem .5rem;text-decoration:none;min-height:32px;padding-right:1rem;cursor:pointer;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}.dp-dropdown2-container .dropdown2-list-items .dropdown2-item:hover{background-color:#f2f9fc;border-radius:.25rem}.dp-dropdown2-container .dropdown2-list-items .dropdown2-item.dropdown2-item-disabled{opacity:.65;pointer-events:none}.dp-dropdown2-container .dropdown2-list-items .dropdown2-item.dropdown2-item-selected{background-color:#f2f9fc;color:#333}.dp-dropdown2-container .dropdown2-list-items .dropdown2-item>span{display:block;margin:0;line-height:24px;width:98%;white-space:normal;text-overflow:ellipsis;overflow:hidden;word-break:break-all;padding:.25rem .375rem}.dp-dropdown2-container .dropdown2-list-items .dropdown2-item-tooltip>span{padding:0}.dp-dropdown2-container .dropdown2-list-items .dropdown2-item-tooltip>span>span{width:96%;padding:.25rem 0 .25rem .5rem}.date-picker2{position:absolute;width:350px;height:auto;font:13px Arial,san-serif;background-color:#fff;z-index:1080;border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:0 3px 3px rgba(0,0,0,.25)}.date-picker2 .date-picker2-anchor{width:9px;height:28px;position:absolute;bottom:60%;border-radius:10px;background:#ececec;box-shadow:0 -1px 2px rgba(0,0,0,.65)}.date-picker2 .date-picker2-anchor.right-label{right:20%}.date-picker2 .date-picker2-anchor.left-label{left:20%}.date-picker2 .date-picker2-header{display:flex;align-items:center;justify-content:space-around;padding:0 4px;background:-webkit-gradient(linear,left top,left bottom,from(#aecbfa),to(#1a73e8));min-height:44px;position:relative;color:#fff;border-top-left-radius:8px;border-top-right-radius:8px}.date-picker2 .date-picker2-header span{display:inline-block}.date-picker2 .date-picker2-header .date-picker2-label-month-year{cursor:pointer;width:100%}.date-picker2 .date-picker2-header .date-picker2-title-month-year{width:calc(100% - 72px);text-align:center;font-weight:700;user-select:none;opacity:1;transition:opacity .1s}.date-picker2 .date-picker2-header .date-picker2-title-month-year.fade{opacity:0}.date-picker2 .date-picker2-header .date-picker2-nav-button{width:40px;text-align:center;position:relative;display:flex;justify-content:center;cursor:pointer;user-select:none}.date-picker2 .date-picker2-header .date-picker2-nav-button.button-left .date-picker2-arrow-inner:before{transform:rotate(-135deg)}.date-picker2 .date-picker2-header .date-picker2-nav-button.button-right .date-picker2-arrow-inner:before{transform:rotate(45deg)}.date-picker2 .date-picker2-header .date-picker2-nav-button.button-disabled{cursor:default!important;opacity:.3}.date-picker2 .date-picker2-header .date-picker2-nav-button.button-disabled>span:hover{background:transparent}.date-picker2 .date-picker2-header .date-picker2-nav-button .date-picker2-arrow-inner{border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;position:relative}.date-picker2 .date-picker2-header .date-picker2-nav-button .date-picker2-arrow-inner:before{content:"";position:absolute;width:.7em;height:.7em;border-style:solid;border-width:.15em .15em 0 0;display:inline-block;transform-origin:center center;transform:rotate(-45deg);border-radius:1px;color:#fff}.date-picker2 .date-picker2-header .date-picker2-nav-button .date-picker2-arrow-inner:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:35px;height:35px;border-radius:50%;background-color:#fff;opacity:0;z-index:-1;transition:opacity .3s ease;will-change:opacity}.date-picker2 .date-picker2-header .date-picker2-nav-button .date-picker2-arrow-inner:focus,.date-picker2 .date-picker2-header .date-picker2-nav-button .date-picker2-arrow-inner:hover{background-color:rgba(0,0,0,.07)}.date-picker2 .date-picker2-header .date-picker2-select{color:#000;min-width:64px;text-align:center}.date-picker2 .date-picker2-header .date-picker2-select-year{min-width:36px}.date-picker2 .date-picker2-header .date-picker2-select-month,.date-picker2 .date-picker2-header .date-picker2-select-year{margin:0 5px;border-radius:4px}.date-picker2 .date-picker2-header .date-picker2-select-month:hover,.date-picker2 .date-picker2-header .date-picker2-select-year:hover{background-color:rgba(0,0,0,.07)}.date-picker2 .date-picker2-header .date-picker2-select-month .dropdown2-button,.date-picker2 .date-picker2-header .date-picker2-select-year .dropdown2-button{min-height:24px;font-size:13px;font-weight:bolder;background-color:transparent;color:#fff}.date-picker2 .date-picker2-header .date-picker2-select-month .dropdown2-button .dropdown2-label,.date-picker2 .date-picker2-header .date-picker2-select-year .dropdown2-button .dropdown2-label{text-align:center}.date-picker2 .date-picker2-header .date-picker2-select-month .dropdown2-item,.date-picker2 .date-picker2-header .date-picker2-select-year .dropdown2-item{min-height:24px;padding:0 .5rem;font-size:12px}.date-picker2 .date-picker2-header .date-picker2-select-month .dropdown2-item>span,.date-picker2 .date-picker2-header .date-picker2-select-year .dropdown2-item>span{padding:0 .5rem;margin-top:1px;margin-bottom:1px}.date-picker2 .date-picker2-header .date-picker2-select-month .dropdown2-arrow,.date-picker2 .date-picker2-header .date-picker2-select-year .dropdown2-arrow{border-top-color:#fff;border-bottom-color:#fff}.date-picker2 .date-picker2-header .date-picker2-select-month>div,.date-picker2 .date-picker2-header .date-picker2-select-year>div{height:28px}.date-picker2 .date-picker2-header .date-picker2-select-month-year select{color:#fff;font-weight:700;appearance:none;-webkit-appearance:none;border:0;padding:0 32px 0 12px;border-radius:4px;outline:0;background:url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='12' height='12' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='white'/></g></svg>") no-repeat;background-position:right 10px center;cursor:pointer;text-align:center}.date-picker2 .date-picker2-content{padding:8px 8px 12px}.date-picker2 .date-picker2-calendar{display:table;table-layout:fixed;color:#70757a;min-height:270px;text-align:center;border-bottom:none;width:100%}.date-picker2 .date-picker2-calendar .date-row{display:table-row}.date-picker2 .date-picker2-calendar .date-cell{display:table-cell;min-width:36px;min-height:36px;line-height:36px;text-align:center;user-select:none;transition:background-color .1s linear}.date-picker2 .date-picker2-calendar .week-label.date-cell{height:36px;line-height:36px;font-size:90%;border:none}.date-picker2 .date-picker2-calendar .week-cell-box{border-top:1px solid rgba(0,0,0,.075);margin:4px 0}.date-picker2 .date-picker2-calendar .picker-cell{position:relative;cursor:pointer;user-select:none;text-decoration:none}.date-picker2 .date-picker2-calendar .picker-cell.disabled-over-range-time{pointer-events:none;color:#3c4043;opacity:.3}.date-picker2 .date-picker2-calendar .picker-cell.disabled-over-range-time .date-cell-box{background-color:#dadce0}.date-picker2 .date-picker2-calendar .picker-cell.disabled-over-range-time .date-cell-box:focus,.date-picker2 .date-picker2-calendar .picker-cell.disabled-over-range-time .date-cell-box:hover{box-shadow:none}.date-picker2 .date-picker2-calendar .picker-cell:not(.read-only):focus .date-cell-box,.date-picker2 .date-picker2-calendar .picker-cell:not(.read-only):hover .date-cell-box{color:#3c4043;background:#f1f3f4;box-shadow:0 0 12px 4px rgba(0,0,0,.25)}.date-picker2 .date-picker2-calendar .picker-cell.read-only:focus .date-cell-box,.date-picker2 .date-picker2-calendar .picker-cell.read-only:hover .date-cell-box{cursor:default}.date-picker2 .date-picker2-calendar .date-cell-box{position:absolute;z-index:-1;width:88%;height:88%;top:50%;left:50%;transform:translate(-50%,-50%);transition:background-color .5s linear;border-radius:8px}.date-picker2 .date-picker2-calendar .date-cell-box:focus,.date-picker2 .date-picker2-calendar .date-cell-box:hover{outline:0 solid transparent}.date-picker2 .date-picker2-calendar .picker-cell.date-is-selected{font-weight:700;color:#fff}.date-picker2 .date-picker2-calendar .picker-cell.date-is-selected .date-cell-box{background-color:#8ab4f8}.date-picker2 .date-picker2-calendar .picker-cell.date-is-selected:focus .date-cell-box,.date-picker2 .date-picker2-calendar .picker-cell.date-is-selected:hover .date-cell-box{background-color:#aecbfa;box-shadow:0 0 12px 6px rgba(0,0,0,.3)}.date-picker2 .date-picker2-calendar .picker-cell.date-is-today{font-weight:700;color:#fff}.date-picker2 .date-picker2-calendar .picker-cell.date-is-today .date-cell-box{background-color:#1a73e8}.date-picker2 .date-picker2-calendar .picker-cell.date-is-today:focus .date-cell-box,.date-picker2 .date-picker2-calendar .picker-cell.date-is-today:hover .date-cell-box{background-color:#174ea6;box-shadow:0 0 12px 6px rgba(0,0,0,.3)}.date-picker2 .date-picker2-calendar .date-is-bookmark{color:#1a73e8}.date-picker2 .date-picker2-calendar .date-is-bookmark .date-cell-value{border-bottom:1px solid}.date-picker2 .date-picker2-calendar .date-neighbor-target{color:rgba(0,0,0,.3)}.date-picker2 .date-picker2-calendar .date-neighbor-target.date-is-today{opacity:.3}.date-picker2 .date-picker2-calendar .month-year-cell{display:table-cell;max-width:33.222222%;line-height:64px;cursor:pointer;transition:background-color .1s linear}.date-picker2 .date-picker2-footer{padding:0 12px}.date-picker2 .date-picker2-footer-content{position:relative;display:flex;padding:4px 0 8px;justify-content:space-between;min-height:40px;line-height:36px;border-top:1px solid rgba(0,0,0,.075);text-align:left!important}.date-picker2 .date-picker2-calendar-selected{color:#70757a;opacity:.6}.date-picker2 .date-picker2-calendar-close{position:relative}.date-picker2 .date-picker2-calendar-close .date-picker2-calendar-close-icon{position:absolute;cursor:pointer;opacity:.3;user-select:none}.date-picker2 .date-picker2-calendar-close .date-picker2-calendar-close-icon:hover{opacity:1}.date-picker2 .date-picker2-calendar-close-x-icon{top:8px;right:12px}.date-picker2 .date-picker2-calendar-close-x-icon:after,.date-picker2 .date-picker2-calendar-close-x-icon:before{position:absolute;left:0;content:" ";height:18px;width:2px;background-color:#3c4043}.date-picker2 .date-picker2-calendar-close-x-icon:before{transform:rotate(45deg)}.date-picker2 .date-picker2-calendar-close-x-icon:after{transform:rotate(-45deg)}.date-picker2 .date-picker2-calendar-your-icon{right:8px}