@parsonsnguyen/react-month-picker/dist/style.css

React month-picker Component

ul{list-style-type:none}a{text-decoration:none}.monthPicker{background-color:#fff;border:1px solid #bdc7d8;height:16px;padding:2px;text-align:center}.monthPicker a{width:16px;height:16px;box-sizing:border-box;position:relative;opacity:.7}.monthPicker a:hover{opacity:1}.monthPicker a:before{content:"";border:5px solid transparent;position:absolute;top:3px}.monthPicker a.prev{float:left}.monthPicker a.prev:before{border-right-color:#333;left:0}.monthPicker a.next{float:right}.monthPicker a.next:before{border-left-color:#333;right:0}.monthPicker a.disabled,.monthPicker a.disabled:hover{opacity:.2;cursor:default}.monthPicker span{padding:2px 5px 4px;cursor:pointer;position:relative;top:-2px}.monthPicker span:hover{border-radius:2px;-moz-border-radius:2px;background-color:#3b5998;border:1px solid transparent;color:#fff;box-shadow:inset 0 0 0 1px #fff;font-weight:700}.monthPicker span.disabled{color:#ccc}.monthPicker span.disabled:hover{background:none;border:0;border-radius:unset;color:#ccc;box-shadow:none;font-weight:400;cursor:default}.monthPickerDropDown{position:absolute;top:23px;display:none;z-index:9999;border:1px solid #ccc;border-spacing:2px;box-shadow:0 0 5px #aaa;margin:0;padding:1.5em .3em;width:140px;background:#fff;background:-moz-linear-gradient(top,#e5e5e5 0,#fff 20%,#fff 100%);background:-webkit-gradient(left top,left bottom,color-stop(0,#e5e5e5),color-stop(20%,#fff),color-stop(100%,#fff));background:-webkit-linear-gradient(top,#e5e5e5,#fff 20%,#fff);background:-o-linear-gradient(top,#e5e5e5 0,#fff 20%,#fff 100%);background:linear-gradient(180deg,#e5e5e5 0,#fff 20%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#e5e5e5",endColorstr="#ffffff",GradientType=0)}.monthPickerDropDownInner{margin:0 20px 0 10px}.monthPickerDropDownInner li{height:1.5em}.monthPickerDropDownInner li.month{opacity:0;height:0;overflow:hidden;transition:all .5s ease-out}.monthPickerDropDownInner li.month.active{opacity:1;height:2em;width:85px}.monthPickerDropDownInner li a{float:left;width:95%;font-family:Verdana,Sans-Serif;color:#333!important;border:1px solid transparent;border-radius:2px;padding:3px 0 3px 5px;margin-bottom:1px}.monthPickerDropDownInner li a:hover{background:#dbedf1;background:-moz-linear-gradient(top,#dbedf1 0,#d3edee 40%,#c9e7e9 100%);background:-webkit-linear-gradient(top,#dbedf1,#d3edee 40%,#c9e7e9);background:linear-gradient(180deg,#dbedf1 0,#d3edee 40%,#c9e7e9);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#dbedf1",endColorstr="#c9e7e9",GradientType=0);border-color:#6482aa!important;border:1px solid #ccc;text-decoration:none!important;text-shadow:0 1px 1px #fff;color:#6482aa!important}.monthPickerDropDownInner .year a{color:#3b5998!important}.monthPickerDropDownInner .year a .bullet{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAA8CAYAAABFLcuDAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAANFJREFUOE/dk9ENwyAMRD0FQ7S/HYEFKmWKDMASfKc7ZINkEJZgCdqjPRonEFXqH5GsKPfwGeMgy7KmGGN6PbINeUxTQoQQFMwAGd57BTOABSFtCyB0zmWH84xmjequmn3sG+O36lZ13ksGBoRjOYx2HMeEmOdZjxYiMu7DoKAAwIaQtgUAwu56uWWH84xmjequmn30Mqj/+8DR41apnxqiMSZHARSttV+wFQvYiwWgEH35PhTv8kb9PCh1usyCKCLvqIoEaiUzqiJgni9Xfd7QnpMD4RqcKbR9AAAAAElFTkSuQmCC") no-repeat 0 4px;font-size:16px;padding-left:10px}.monthPickerDropDownInner .year a:hover .bullet{background-position:0 -15px}.monthPickerDropDownInner .year a.selected .bullet{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAA8CAYAAABFLcuDAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAANFJREFUOE/dk9ENwyAMRD0FQ7S/HYEFKmWKDMASfKc7ZINkEJZgCdqjPRonEFXqH5GsKPfwGeMgy7KmGGN6PbINeUxTQoQQFMwAGd57BTOABSFtCyB0zmWH84xmjequmn3sG+O36lZ13ksGBoRjOYx2HMeEmOdZjxYiMu7DoKAAwIaQtgUAwu56uWWH84xmjequmn30Mqj/+8DR41apnxqiMSZHARSttV+wFQvYiwWgEH35PhTv8kb9PCh1usyCKCLvqIoEaiUzqiJgni9Xfd7QnpMD4RqcKbR9AAAAAElFTkSuQmCC") no-repeat 0 -30px}.monthPickerDropDownInner .year a.selected:hover .bullet{background-position:0 -46px}.monthPickerDropDownInner .year a.selected.collapse .bullet{background-position:0 4px}.monthPickerDropDownInner .year a.selected.collapse:hover .bullet{background-position:0 -15px}.monthPickerDropDownInner .month a{font-size:11px;text-indent:20px;padding:1px}.monthPickerDropDownInner .month a.selected{color:#333!important;font-weight:700}