@prettyy/ui/dist/css/datepicker/index.css

vue2 UI

.vl-date-picker--panel-value,.vl-date-picker--panel-value--solar,.vl-date-picker--table+.vl-date-picker--panel-time .vl-date-picker--panel-time--value{position:relative}.vl-date-picker--panel-month .vl-date-picker--panel-value,.vl-date-picker--panel-year .vl-date-picker--panel-value{width:60px;height:40px}.vl-date-picker--panel-month .vl-date-picker--panel-value--lunar,.vl-date-picker--panel-year .vl-date-picker--panel-value--lunar{transform:scale(.9);margin-top:0}.vl-date-picker--panel-quarter .vl-date-picker--table-body .vl-date-picker--table-row,.vl-date-picker--panel-week .vl-date-picker--table-body .vl-date-picker--table-row{color:unset;transition:color 312ms,background-color 312ms;border-radius:20px}.vl-date-picker--panel-quarter .vl-date-picker--table-body .vl-date-picker--table-row .vl-date-picker--panel-value:not(.vl-date-picker--panel-value-disabled),.vl-date-picker--panel-week .vl-date-picker--table-body .vl-date-picker--table-row .vl-date-picker--panel-value:not(.vl-date-picker--panel-value-disabled){background-color:transparent}.vl-date-picker--panel-quarter .vl-date-picker--table-body .vl-date-picker--table-row-active,.vl-date-picker--panel-week .vl-date-picker--table-body .vl-date-picker--table-row-active{background-color:color-mix(in srgb,#9155fd 10%,#fff);color:#9155fd;transition-duration:312ms}.vl-date-picker--panel-quarter .vl-date-picker--table-body .vl-date-picker--table-row-active .vl-date-picker--panel-value:not(.vl-date-picker--panel-value-disabled),.vl-date-picker--panel-week .vl-date-picker--table-body .vl-date-picker--table-row-active .vl-date-picker--panel-value:not(.vl-date-picker--panel-value-disabled){color:inherit}.vl-date-picker--panel-quarter .vl-date-picker--table-body .vl-date-picker--table-row:hover,.vl-date-picker--panel-week .vl-date-picker--table-body .vl-date-picker--table-row:hover{background-color:color-mix(in srgb,#9155fd 10%,#fff);transition-duration:312ms}.vl-date-picker--table+.vl-date-picker--panel-time{border-top:1px solid #ededed;padding-top:5px}.vl-date-picker--table+.vl-date-picker--panel-time .vl-date-picker--panel-time--value:hover .vl-date-picker--panel-time-wheel{display:block}.vl-date-picker--table+.vl-date-picker--panel-time .vl-date-picker--panel-time--value:hover>span:first-child{color:#9155fd}.vl-date-picker--table+.vl-date-picker--panel-time .vl-date-picker--panel-time-wheel{display:none;position:absolute;bottom:40px;left:-10px;background-color:#fff;width:80px}.vl-date-picker--panel-value-active,.vl-date-picker--panel-value:not(.vl-date-picker--panel-value-disabled):hover{background-color:color-mix(in srgb,#9155fd 10%,#fff);transition-duration:312ms}.vl-date-picker--table+.vl-date-picker--panel-time .vl-date-picker--panel-time-wheel:after{content:"";display:block;position:absolute;left:36px;border:4px solid;border-color:transparent #fff #fff transparent;transform:rotate(45deg);bottom:-4px;box-shadow:2px 2px 2px 1px #ddd}.vl-date-picker--panel-time--body{margin:0 auto;display:flex;flex-direction:row;justify-content:center;line-height:24px}.vl-date-picker--panel-time--value{width:60px;padding:10px 0}.vl-date-picker--panel-time--value>span:first-child{font-size:18px;color:#444;font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;display:inline-block}.vl-date-picker--panel-time--sep{flex-shrink:0;width:24px;padding:10px 0}.vl-date-picker--panel-time-wheel{border-radius:10px;box-shadow:0 0 12px rgba(0,0,0,.12);overflow:hidden}.vl-date-picker--panel-time-wheel-value{color:#9155fd;padding:2px 0;border-top:1px solid;border-bottom:1px solid;background:color-mix(in srgb,#9155fd 10%,#fff)}.vl-date-picker--panel-time-wheel-next,.vl-date-picker--panel-time-wheel-prev{color:#aaa}.vl-date-picker--panel-time-wheel-next>span,.vl-date-picker--panel-time-wheel-prev>span{display:block;border:1px solid #EEE}.vl-date-picker--panel-time-wheel-next>span:not(.vl-date-picker--panel-value-disabled):hover,.vl-date-picker--panel-time-wheel-prev>span:not(.vl-date-picker--panel-value-disabled):hover{color:color-mix(in srgb,#9155fd 90%,#fff)}.vl-date-picker--panel-time-wheel-next>span:last-child,.vl-date-picker--panel-time-wheel-prev>span:first-child{color:#ccc;border:1px solid #f0f0f0}.vl-date-picker--panel-time-wheel-next-button,.vl-date-picker--panel-time-wheel-prev-button{cursor:pointer}.vl-date-picker--panel-body{box-sizing:border-box}.vl-date-picker--table{border-collapse:collapse;width:280px;height:280px;display:flex;justify-content:center;align-items:center;flex-direction:column}.vl-date-picker--table-body{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-around}.vl-date-picker--table-row{display:flex;justify-content:space-around;align-items:center;flex-direction:row}.vl-date-picker--table-cell{cursor:default;border:none;padding:0}.vl-date-picker--table-header{width:100%}.vl-date-picker--table-header .vl-date-picker--table-cell{font-weight:400;padding:10px 0;border:none}.vl-date-picker--panel-header{display:flex;justify-content:space-around;align-items:center;font-size:larger;color:#555;line-height:25px}.vl-date-picker--panel-header .vl-icon{cursor:pointer;flex-shrink:0}.vl-date-picker--panel-header-next,.vl-date-picker--panel-header-prev{cursor:default;flex-shrink:0}.vl-date-picker--panel-header-month,.vl-date-picker--panel-header-year{cursor:pointer;padding:0 2px}.vl-date-picker--panel-header-month:hover,.vl-date-picker--panel-header-year:hover{color:color-mix(in srgb,#9155fd 90%,#fff)}.vl-date-picker--panel-header-container{display:flex;justify-content:space-between;align-items:center}.vl-date-picker--panel-value{width:40px;height:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:14px;border:1px solid transparent;margin:0 auto;background-clip:padding-box;box-sizing:border-box;border-radius:8px;transition:border-color 618ms,background-color 618ms,color 618ms;cursor:default}.vl-date-picker--panel-value-active{color:#9155fd}.vl-date-picker--panel-value-highlight{background-color:rgba(98,163,226,.07);transition-duration:312ms}.vl-date-picker--panel-value-current{font-weight:700;color:#9155fd}.vl-date-picker--panel-value-current .vl-date-picker--panel-value--lunar{font-weight:400}.vl-date-picker--panel-value-overflow{color:#888}.vl-date-picker--panel-value-overflow .vl-date-picker--panel-value--lunar{color:#aaa}.vl-date-picker--panel-value-disabled{color:#aaa!important;cursor:not-allowed}.vl-date-picker--panel-value-disabled .vl-date-picker--panel-value--lunar{text-shadow:none;color:#ccc}.vl-date-picker--panel-value--solar.is-festival:after{content:"";display:block;width:3px;height:3px;background-color:#ffb7b7;position:absolute;right:-5px;top:0;border-radius:50%}.vl-date-picker--panel-value--lunar{font-size:12px;display:block;transform:scale(.8);margin-top:-5px;color:#888}.vl-date-picker--panel-value--lunar.is-festival{color:#d58237}.vl-date-picker--panel-value--marker{position:absolute;text-align:left;left:0;top:0;width:100%;height:100%}.vl-date-picker--year:not(.vl-date-picker--custom-render){width:90px}.vl-date-picker--year:not(.vl-date-picker--custom-render).vl-date-picker--range{width:140px}.vl-date-picker--month:not(.vl-date-picker--custom-render){width:100px}.vl-date-picker--month:not(.vl-date-picker--custom-render).vl-date-picker--range{width:200px}.vl-date-picker--date:not(.vl-date-picker--custom-render),.vl-date-picker--quarter:not(.vl-date-picker--custom-render),.vl-date-picker--week:not(.vl-date-picker--custom-render){min-width:125px}.vl-date-picker--date:not(.vl-date-picker--custom-render).vl-date-picker--range,.vl-date-picker--quarter:not(.vl-date-picker--custom-render).vl-date-picker--range,.vl-date-picker--week:not(.vl-date-picker--custom-render).vl-date-picker--range{min-width:220px}.vl-date-picker--time:not(.vl-date-picker--custom-render){min-width:100px}.vl-date-picker--datetime:not(.vl-date-picker--custom-render),.vl-date-picker--time:not(.vl-date-picker--custom-render).vl-date-picker--range{min-width:180px}.vl-date-picker--datetime:not(.vl-date-picker--custom-render).vl-date-picker--range{min-width:320px}.vl-date-picker--mini:not(.vl-date-picker--custom-render){height:22px;line-height:22px}.vl-date-picker--mini:not(.vl-date-picker--custom-render) .vl-date-picker--icon:before{font-size:16px}.vl-date-picker--normal:not(.vl-date-picker--custom-render) .vl-date-picker--icon:before,.vl-date-picker--small:not(.vl-date-picker--custom-render) .vl-date-picker--icon:before{font-size:18px}.vl-date-picker--small:not(.vl-date-picker--custom-render){height:26px;line-height:26px}.vl-date-picker--large:not(.vl-date-picker--custom-render),.vl-date-picker--normal:not(.vl-date-picker--custom-render){height:40px;line-height:40px}.vl-date-picker--large:not(.vl-date-picker--custom-render) .vl-date-picker--icon:before{font-size:20px}.vl-date-picker--container{display:flex;width:100%}.icon-left-arrow-d:before{content:"\e61c";display:inline-block;transform:rotate(180deg)}.icon-bottom:before,.icon-top:before{content:"\e606";display:inline-block}.icon-top:before{transform:rotate(-90deg)}.icon-bottom:before{transform:rotate(90deg)}.vl-date-picker{display:inline-block;vertical-align:middle;color:#444}.vl-date-picker:active,.vl-date-picker:focus{outline:#a777fd solid 1px;outline-radius:4px}.vl-date-picker input{border:none;width:100%;height:100%;min-width:0;outline:0;padding:0;box-sizing:border-box;text-align:center;color:inherit;background-color:#fff;cursor:pointer;float:left}.vl-date-picker--value-wrapper{display:inline-block;width:100%;flex-grow:1;position:relative}.vl-date-picker--value-wrapper input{pointer-events:none}.vl-date-picker--container{border-radius:4px;border:1px solid #DCDFE6;overflow:hidden;background-color:#fff;box-sizing:border-box;height:inherit}.vl-date-picker--popper,.vl-date-picker--popper-reference{height:100%}.vl-date-picker--popper-arrow{position:absolute;z-index:1;overflow:hidden}.vl-date-picker--popper-arrow:before{position:absolute;z-index:-1;width:100%;height:100%;content:"";box-sizing:border-box;border:8px solid transparent}.vl-date-picker--popper-arrow:after{position:absolute;z-index:1;width:16px;height:16px;transform:rotate(45deg);content:"";box-sizing:border-box;box-shadow:0 0 12px rgba(0,0,0,.12)}.vl-date-picker--popper-body{position:relative;z-index:0;text-align:center;display:flex}.vl-date-picker--popper-footer{word-break:break-all;white-space:break-spaces;display:none}.vl-date-picker--popper-dialog{user-select:none;display:flex;flex-direction:column;background-color:#fff;box-shadow:0 0 12px rgba(0,0,0,.12);outline:0;z-index:2029;border-radius:6px}.vl-date-picker--popper-dialog:after{content:"";display:block;clear:both}.vl-date-picker--popper-dialog .vl-date-picker--box+.vl-date-picker--box{border-left:1px solid #e7e7e7}.vl-date-picker--popper-dialog[data-popper-placement^=top]>.vl-date-picker--popper-arrow{bottom:-8px;width:16px;height:8px}.vl-date-picker--popper-dialog[data-popper-placement^=top]>.vl-date-picker--popper-arrow:before{border-bottom-width:0;border-top-color:#fff}.vl-date-picker--popper-dialog[data-popper-placement^=top]>.vl-date-picker--popper-arrow:after{bottom:4px}.vl-date-picker--popper-dialog[data-popper-placement^=bottom]>.vl-date-picker--popper-arrow{top:-8px;width:16px;height:8px}.vl-date-picker--popper-dialog[data-popper-placement^=bottom]>.vl-date-picker--popper-arrow:before{border-top-width:0;border-bottom-color:#fff}.vl-date-picker--popper-dialog[data-popper-placement^=bottom]>.vl-date-picker--popper-arrow:after{top:4px}.vl-date-picker--popper-dialog[data-popper-placement^=left]>.vl-date-picker--popper-arrow{right:-8px;width:8px;height:16px}.vl-date-picker--popper-dialog[data-popper-placement^=left]>.vl-date-picker--popper-arrow:before{border-right-width:0;border-left-color:#fff}.vl-date-picker--popper-dialog[data-popper-placement^=left]>.vl-date-picker--popper-arrow:after{right:4px}.vl-date-picker--popper-dialog[data-popper-placement^=right]>.vl-date-picker--popper-arrow{left:-8px;width:8px;height:16px}.vl-date-picker--popper-dialog[data-popper-placement^=right]>.vl-date-picker--popper-arrow:before{border-left-width:0;border-right-color:#fff}.vl-date-picker--popper-dialog[data-popper-placement^=right]>.vl-date-picker--popper-arrow:after{left:4px}.vl-date-picker--box{padding:10px;width:300px;box-sizing:border-box}.vl-date-picker--range .vl-date-picker--container input{border:none}.vl-date-picker--range-begin,.vl-date-picker--range-end{display:flex}.vl-date-picker--range-separator{display:flex;align-items:center;justify-content:center;flex-shrink:0}.vl-date-picker--range-separator:after{content:" ";display:block;height:1px;width:8px;background-color:#a0a0a0}.vl-date-picker--clear{display:flex;justify-content:center;align-items:center;width:24px;flex-shrink:0}.vl-date-picker--clear-button{display:inline-block;width:16px;text-align:center;user-select:none;cursor:pointer}.vl-date-picker--clear-button:before{font-size:16px;font-weight:bolder}.vl-date-picker--empty .vl-date-picker--clear-button{color:#e0e0e0;display:none}.vl-date-picker--shortcuts-button{display:block;width:80px;border:1px solid #eaeaea;background-color:#fff;cursor:pointer;color:#555;padding:10px 5px;outline:0;margin-bottom:-1px;border-right:none;overflow:hidden;text-overflow:ellipsis;word-break:keep-all;white-space:nowrap;font-size:14px}.vl-date-picker--shortcuts-button:active,.vl-date-picker--shortcuts-button:hover{color:#137DE2}.vl-date-picker--shortcuts{position:relative;box-sizing:border-box;overflow:hidden;float:left;height:340px;border-right:1px solid #eaeaea}.vl-date-picker--icon{display:flex;justify-content:center;align-items:center;width:30px;flex-shrink:0}.vl-date-picker--icon:before{content:"\e643"}.vl-date-picker--time .vl-date-picker--icon:before{content:"\e6f1"}.vl-date-picker--datetime .vl-date-picker--icon:before{content:"\e62b"}.vl-date-picker--panel-title{position:relative}