rc-day-picker/lib/style.css

Day picker component of react

.DayPicker {
    display: inline-block;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: relative;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    /* border: 1px solid #d3d7da; */
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}


.DayPicker-Month {
    display: table;
    border-collapse: collapse;
    border-spacing: 0;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.DayPicker-NavBar {
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5em;
    padding: .6em 0;
}

.DayPicker-NavButton {
    position: absolute;
    top: 50%;
    margin-top: -6.5px;
    width: 13px;
    height: 13px;
    background-repeat: no-repeat;
    cursor: pointer;
}


.DayPicker-NavButton--prev {
    left: 20px;
    /*这里的相对路径的依据是构建后的common.css文件*/
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAOCAYAAAASVl2WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1NDUxMjhkNy0zYTU5LTQwYzMtOGM3MC04OTVmYmE2ZTFhMDAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTY3NTkwMkY1QThDMTFFNTgzOTA5Qjc2QTUxRkMzRjYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTY3NTkwMkU1QThDMTFFNTgzOTA5Qjc2QTUxRkMzRjYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1NDUxMjhkNy0zYTU5LTQwYzMtOGM3MC04OTVmYmE2ZTFhMDAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTQ1MTI4ZDctM2E1OS00MGMzLThjNzAtODk1ZmJhNmUxYTAwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+DG+IrAAAAKZJREFUeNpiYWi6w4AD6ALxEhYckipAvBOIM5iwSMoA8S4gLgXiTegKRIF4BxD3AfFSkACyAn4g3gzEq4B4CkwQpoAdiNcB8UkgbkI2EqZgGRA/BeICdAcxIdHfsXkHpiAaiLWBuA2Xgm9A7A3EXkBcgawAOaA+ArELEB8F4vdAPBNdAQi8BmJXID4IxB+AeCW2oH4ItQoUmh9xxcU1IA4G4rkAAQYA5IwdRZRbAocAAAAASUVORK5CYII=) no-repeat;
}

.DayPicker-NavButton--next {
    right: 20px;
    /*这里的相对路径的依据是构建后的common.css文件*/
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAOCAYAAAASVl2WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1NDUxMjhkNy0zYTU5LTQwYzMtOGM3MC04OTVmYmE2ZTFhMDAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTY3NTkwMkI1QThDMTFFNTgzOTA5Qjc2QTUxRkMzRjYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTY3NTkwMkE1QThDMTFFNTgzOTA5Qjc2QTUxRkMzRjYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1NDUxMjhkNy0zYTU5LTQwYzMtOGM3MC04OTVmYmE2ZTFhMDAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTQ1MTI4ZDctM2E1OS00MGMzLThjNzAtODk1ZmJhNmUxYTAwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+JFYItAAAAKRJREFUeNpiYWi6wwAEJ4A4H4hPMqABJijdAMRrgVgLl4IdQFwMxNuAWB5ZAQsSeyUQCwDxbiC2BuLX6ApAYCYQCwLxHiC2A+KPTAyYoANq1VYg5sKmAASqgPgqEK/ApeA/EP8CYm4WHAoagdgUiF2wKcgD4kAgdgbiL+gKYqEKHLB50w/qA3sgfoIeUE5APAuIXYH4Drag7gLiACC+jO4ggAADABZfHJIH/WrvAAAAAElFTkSuQmCC) no-repeat;
}

.DayPicker-Caption {
    display: table-caption;
    height: 1.5em;
    text-align: center;
    padding: .6em 0;
}

.DayPicker-Weekdays {
    display: table-header-group;
    background-color: #f5f9fc;
    color: #0082dc;
    width: 245px;
}
.DayPicker-Weekdays > div {
    display: table-row;

    border-left: 20px solid #fff;
    border-right: 20px solid #fff;
}

.DayPicker-Weekday {
    display: table-cell;
    padding: .5em;
    font-size: .875em;
    text-align: center;
}

.DayPicker-Body {
    display: table-row-group;

    border-left: 20px solid #fff;
    border-right: 20px solid #fff;
}

.DayPicker-Week {
    display: table-row;
}

.DayPicker-Day {
    display: table-cell;
    padding: .5em;
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
}

.DayPicker--interactionDisabled .DayPicker-Day {
    cursor: default;
}

.DayPicker-Day--today {
    color: #d0021b;
    font-weight: 500;
}

.DayPicker-Day--sunday {
    color: #dce0e0;
    background-color: #f7f8f8;
}


.DayPicker-Day.DayPicker-Day--selected {
    color: #fff;
    background-color: #0082dc;
    border-radius: 0;
}

.DayPicker-Day.DayPicker-Day--between {
    color: #0082dc;
    background-color: #e3edf4;
}

.DayPicker-Day.DayPicker-Day--outside {
    cursor: default;
    color: #dce0e0;
    background-color: #fff;
}


.DayPicker-Day.DayPicker-Day--disabled {
    color: #dce0e0;
    cursor: default;
    background-color: #eff1f1;
}



.DayPicker--ar {
    direction: rtl;
}