react-datepicker2-elhampour/docs/css/react-datepicker2.min.css

react datepicker component. (include persian jalaali calendar)

.calendarContainer{font-family:'Open Sans','Vazir';border-radius:3px;box-shadow:0 3px 10px #dbdbdb;border:1px solid #ccc;width:300px;margin:auto;text-align:center;padding:10px;background-color:#fff}.calendarContainer *{box-sizing:border-box}.calendarContainer .dayPickerContainer:after,.calendarContainer .monthsList:after,.calendarContainer .daysOfWeek:after{content:'';display:block;clear:both}.datepicker-input{box-sizing:border-box}.calendarContainer .heading{height:42px;font-weight:bold;margin-bottom:10px}.calendarContainer .heading>button{border-radius:3px;background:none;margin:5px 0;border:1px solid #f7f7f7;text-align:center;line-height:30px;width:36px;height:32px;cursor:pointer}.calendarContainer .heading>button:hover{background-color:#f2f2f2}.calendarContainer .heading>span{line-height:35px}.calendarContainer .heading svg{width:10px}.calendarContainer .heading .prev{float:right}.calendarContainer .heading .next{float:left}.calendarContainer .heading .title{line-height:32px;width:auto;height:32px;font-size:1em;margin:5px 0;border:1px solid #f7f7f7;text-align:center;display:inline-block;font-weight:normal;padding:0 6px}.calendarContainer .dayWrapper{padding:5;float:left;width:14.28571429%}.calendarContainer .dayWrapper button{border:none;background:none;outline:none;width:100%;height:36px;border-radius:3px;cursor:pointer}.calendarContainer .dayWrapper button:hover{background-color:#eef}.calendarContainer .dayWrapper button[disabled]{color:#aaa;cursor:not-allowed;background-color:#ebebeb}.calendarContainer .dayWrapper button.selected{background-color:#337ab7;color:#fff}.calendarContainer .dayWrapper:not(.currentMonth) button{opacity:.5}.calendarContainer .daysOfWeek{border-bottom:1px solid #eee;margin-bottom:5px;padding-bottom:5px;display:flex;width:100%}.calendarContainer .daysOfWeek>div{flex-grow:1;justify-content:space-between}.calendarContainer .monthsList{clear:both;width:100%}.calendarContainer .monthsList button{width:33.33333332%;height:25%;float:right;border:1px solid #f9f9f9;outline:none;font-size:1em;background:#fff;padding:10px 0;cursor:pointer}.calendarContainer .monthsList button:hover{background:#eee;cursor:pointer}.calendarContainer .selected button,.calendarContainer .selected button:hover,.calendarContainer .selected button:active,.calendarContainer .selected button:focus{background-color:#337ab7;color:#fff}.calendarContainer.jalaali{direction:rtl}.calendarContainer.jalaali .dayWrapper{float:right}.time-picker-container{margin-bottom:10}.time-picker-container>.time-label{float:left;line-height:30px;width:50%;text-align:center}.time-picker-container>.time-picker-panel{float:right;width:50%}.time-picker-container.jalaali>.time-label{float:right}.time-picker-container.jalaali>.time-picker-panel{float:left}.rc-time-picker{display:inline-block;box-sizing:border-box}.rc-time-picker *{box-sizing:border-box}.rc-time-picker-input{direction:ltr;text-align:center;width:100%;position:relative;display:inline-block;padding:4px 7px;height:28px;cursor:text;font-size:12px;line-height:1.5;color:#666;background-color:#fff;background-image:none;border:1px solid #d9d9d9;border-radius:3px;transition:border .2s cubic-bezier(.645,.045,.355,1),background .2s cubic-bezier(.645,.045,.355,1),box-shadow .2s cubic-bezier(.645,.045,.355,1)}.rc-time-picker-panel{font-family:'Open Sans','Vazir';z-index:1070;width:170px;position:absolute;box-sizing:border-box}.rc-time-picker-panel *{box-sizing:border-box}.rc-time-picker-panel-inner{display:inline-block;position:relative;outline:none;list-style:none;font-size:12px;text-align:left;background-color:#fff;border-radius:3px;box-shadow:0 1px 5px #ccc;background-clip:padding-box;border:1px solid #ccc;line-height:1.5}.rc-time-picker-panel-input{margin:0;padding:0;width:100%;cursor:auto;line-height:1.5;outline:0;border:1px solid transparent}.rc-time-picker-panel-input-wrap{box-sizing:border-box;position:relative;padding:6px;border-bottom:1px solid #e9e9e9}.rc-time-picker-panel-input-invalid{border-color:#f00}.rc-time-picker-panel-clear-btn{position:absolute;right:6px;cursor:pointer;overflow:hidden;width:20px;height:20px;text-align:center;line-height:20px;top:6px;margin:0}.rc-time-picker-panel-clear-btn:after{content:"x";font-size:12px;color:#aaa;display:inline-block;line-height:1;width:20px;transition:color .3s ease}.rc-time-picker-panel-clear-btn:hover:after{color:#666}.rc-time-picker-panel-select{float:left;font-size:12px;border:1px solid #e9e9e9;border-width:0 1px;margin-left:-1px;box-sizing:border-box;width:56px;overflow:hidden;position:relative}.rc-time-picker-panel-select-active{overflow-y:auto}.rc-time-picker-panel-select:first-child{border-left:0;margin-left:0}.rc-time-picker-panel-select:last-child{border-right:0}.rc-time-picker-panel-select ul{list-style:none;box-sizing:border-box;margin:0;padding:0;width:100%;max-height:144px;overflow-x:hidden;overflow-y:scroll}.rc-time-picker-panel-select li{list-style:none;box-sizing:content-box;margin:0;padding:0 0 0 16px;width:100%;height:24px;line-height:24px;text-align:left;cursor:pointer;user-select:none}.rc-time-picker-panel-select li:hover{background:#edfaff}li.rc-time-picker-panel-select-option-selected{background:#edfaff;color:#2db7f5}li.rc-time-picker-panel-select-option-disabled{color:#bfbfbf}li.rc-time-picker-panel-select-option-disabled:hover{background:transparent;cursor:not-allowed}