kingdot
Version:
A UI Components Library For Vue
1 lines • 3.15 kB
CSS
.kd-calendar-wrapper{width:300px;min-height:317px}.kd-calendar-header{text-align:center;line-height:20px;margin:5px 15px 20px}.kd-calendar-header .kd-calendar-text-btn{cursor:pointer}.kd-calendar-header .kd-calendar-text-btn:hover{color:#557dfc}.kd-calendar-header .page-left-icon{float:left}.kd-calendar-header .page-right-icon{float:right}.kd-calendar-header .kd-icon-date-forward,.kd-calendar-header .kd-icon-skip-forward{margin:0 5px;cursor:pointer;color:#4f576e}.kd-calendar-header .kd-icon-date-forward:first-child,.kd-calendar-header .kd-icon-date-forward:nth-child(2),.kd-calendar-header .kd-icon-skip-forward:first-child,.kd-calendar-header .kd-icon-skip-forward:nth-child(2){-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}.kd-calendar-header .kd-icon-date-forward:hover,.kd-calendar-header .kd-icon-skip-forward:hover{color:#557dfc}.kd-calendar-header span{text-align:center;font-size:14px;color:$-datepicker-header-text-default-color}.kd-calendar-default{margin:0 10px;width:280px}.kd-calendar-default .kd-week{display:-ms-flexbox;display:flex;border-bottom:1px solid #2f374f}.kd-calendar-default .kd-week span{-ms-flex:1;flex:1;text-align:center;margin-bottom:10px;font-size:12px}.kd-calendar-table.month,.kd-calendar-table.year{margin-top:40px}.kd-calendar-table .kd-calendar-row{display:-ms-flexbox;display:flex}.kd-calendar-table .kd-calendar-row.wide{margin:20px 0}.kd-calendar-table span.kd-month,.kd-calendar-table span.kd-year{-ms-flex:0 0 25%;flex:0 0 25%;text-align:center;line-height:40px;font-size:12px;cursor:pointer}.kd-calendar-table span.kd-month.kd-blue,.kd-calendar-table span.kd-year.kd-blue{color:#557dfc;font-weight:700}.kd-calendar-table span.kd-month.kd-in-range,.kd-calendar-table span.kd-year.kd-in-range{background-color:#3d4660}.kd-calendar-table span.kd-month.kd-selected,.kd-calendar-table span.kd-month:hover,.kd-calendar-table span.kd-year.kd-selected,.kd-calendar-table span.kd-year:hover{background:linear-gradient(180deg,#f8334c 0,#4e284d 91%);color:#fff}.kd-calendar-table span.kd-month.kd-disabled,.kd-calendar-table span.kd-year.kd-disabled{background:#2c314e;color:#ccc;cursor:no-drop}.kd-calendar-table div.kd-day-container{margin:8px 0;padding:0 8px}.kd-calendar-table div.kd-day-container.kd-in-range{background-color:#3d4660}.kd-calendar-table div.kd-day-container.kd-disabled{background:#2c314e;color:#ccc}.kd-calendar-table div.kd-day-container.kd-disMonth{background-color:#2c314e;color:#ccc}.kd-calendar-table div.kd-day{position:relative;text-align:center;line-height:24px;width:24px;font-size:12px;cursor:pointer;color:$-datepicker-day-text-default-color}.kd-calendar-table div.kd-day.kd-today{color:#557dfc;font-weight:700}.kd-calendar-table div.kd-day.kd-in-range{background-color:#3d4660}.kd-calendar-table div.kd-day.kd-selected,.kd-calendar-table div.kd-day:hover{border-radius:50%;background:linear-gradient(180deg,#f8334c 0,#4e284d 91%);color:#fff}.kd-calendar-table div.kd-day.kd-disMonth,.kd-calendar-table div.kd-day.kd-disabled{background:#2c314e;color:#ccc;cursor:no-drop}.kd-calendar-table div.kd-day.kd-disMonth:hover{color:#ccc}