@wslyhbb/vuejs-datepicker
Version:
A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations. Fork of initial vuejs-datepicker which is abandoned.
2 lines (1 loc) • 3.61 kB
CSS
.rtl{direction:rtl}.vdp-datepicker{position:relative;text-align:left}.vdp-datepicker *{box-sizing:border-box}.vdp-datepicker__calendar{position:absolute;z-index:100;background:#fff;width:300px;border:1px solid #ccc}.vdp-datepicker__calendar .today{background-color:#eee}.vdp-datepicker__calendar button{background:inherit;text-align:center}.vdp-datepicker__calendar button:disabled{color:#ddd}.vdp-datepicker__calendar header{display:flex;line-height:40px;justify-content:space-between}.vdp-datepicker__calendar header button{border:none}.vdp-datepicker__calendar header button:hover:not(:disabled){background:#eee;cursor:pointer}.vdp-datepicker__calendar header button.day__month_btn,.vdp-datepicker__calendar header button.month__year_btn{color:#000;flex-grow:5}.vdp-datepicker__calendar header span{text-align:center;width:71.4285714286%}.vdp-datepicker__calendar header .prev,.vdp-datepicker__calendar header .next{width:14.2857142857%;text-indent:-10000px;position:relative}.vdp-datepicker__calendar header .prev:after,.vdp-datepicker__calendar header .next:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%) translateY(-50%);border:6px solid transparent}.vdp-datepicker__calendar header .prev:after{border-right:10px solid #000;margin-left:-5px}.vdp-datepicker__calendar header .prev.disabled:after{border-right:10px solid #ddd}.vdp-datepicker__calendar header .next:after{border-left:10px solid #000;margin-left:5px}.vdp-datepicker__calendar header .next.disabled:after{border-left:10px solid #ddd}.vdp-datepicker__calendar header .prev:not(.disabled),.vdp-datepicker__calendar header .next:not(.disabled),.vdp-datepicker__calendar header .up:not(.disabled){cursor:pointer}.vdp-datepicker__calendar header .prev:not(.disabled):hover,.vdp-datepicker__calendar header .next:not(.disabled):hover,.vdp-datepicker__calendar header .up:not(.disabled):hover{background:#eee}.vdp-datepicker__calendar .disabled{color:#ddd;cursor:default}.vdp-datepicker__calendar .flex-rtl{display:flex;width:inherit;flex-wrap:wrap}.vdp-datepicker__calendar .cell{display:inline-block;padding:0 5px;width:14.2857142857%;height:40px;line-height:40px;text-align:center;vertical-align:middle;border:1px solid transparent}.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day,.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month,.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year{cursor:pointer}.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover{border:1px solid #4bd}.vdp-datepicker__calendar .cell.selected,.vdp-datepicker__calendar .cell.selected:hover,.vdp-datepicker__calendar .cell.selected.highlighted{background:#4bd}.vdp-datepicker__calendar .cell.highlighted{background:#cae5ed}.vdp-datepicker__calendar .cell.highlighted.disabled{color:#a3a3a3}.vdp-datepicker__calendar .cell.muted{color:#757575}.vdp-datepicker__calendar .cell.muted:hover{background:inherit}.vdp-datepicker__calendar .cell.day-header{font-size:75%;white-space:nowrap;cursor:inherit}.vdp-datepicker__calendar .cell.day-header:hover{background:inherit}.vdp-datepicker__calendar .month,.vdp-datepicker__calendar .year{width:33.333%}.vdp-datepicker__clear-button,.vdp-datepicker__calendar-button{border:none;font-style:normal}.vdp-datepicker__clear-button.input-group-prepend,.vdp-datepicker__clear-button.input-group-append,.vdp-datepicker__calendar-button.input-group-prepend,.vdp-datepicker__calendar-button.input-group-append{padding:0}