Web: Components: fix calendar combobox style
This commit is contained in:
parent
ce1875c098
commit
764f4c2876
@ -31,7 +31,6 @@ const CalendarStyle = styled.div`
|
||||
:
|
||||
'max-width: 325px;'
|
||||
}
|
||||
|
||||
padding: 16px 16px 16px 17px;
|
||||
box-sizing: content-box;
|
||||
|
||||
@ -44,10 +43,7 @@ const CalendarStyle = styled.div`
|
||||
}
|
||||
}
|
||||
|
||||
.react-calendar {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.react-calendar { border: none; }
|
||||
.react-calendar__month-view__weekdays :nth-child(6) { color: #A3A9AE !important; }
|
||||
.react-calendar__month-view__weekdays :nth-child(7) { color: #A3A9AE !important; }
|
||||
|
||||
@ -59,7 +55,6 @@ const CalendarStyle = styled.div`
|
||||
.react-calendar__tile {
|
||||
${HoverStyle}
|
||||
margin-top: 10px;
|
||||
background-color: none !important;
|
||||
/*flex-basis: 11.2857% !important;*/
|
||||
|
||||
${props => props.size === 'base' ?
|
||||
@ -68,19 +63,13 @@ const CalendarStyle = styled.div`
|
||||
}
|
||||
}
|
||||
|
||||
.react-calendar__tile:disabled {
|
||||
background-color: #fff;
|
||||
}
|
||||
.react-calendar__tile:disabled { background-color: #fff; }
|
||||
|
||||
.react-calendar__tile--active {
|
||||
background-color: ${props => props.color ? `${props.color} !important;` : `none !important;`}
|
||||
color: #fff !important;
|
||||
border-radius: 16px;
|
||||
|
||||
&:hover {
|
||||
${HoverStyle}
|
||||
color: #333;
|
||||
}
|
||||
&:hover { ${HoverStyle} color: #333; }
|
||||
}
|
||||
|
||||
.react-calendar__month-view__days__day--weekend {
|
||||
@ -191,14 +180,28 @@ class Calendar extends Component {
|
||||
this.state.months = moment.months();
|
||||
const disabled = this.props.disabled;
|
||||
|
||||
const dropDownSize = this.getArrayYears().length > 6 ? 200 : undefined;
|
||||
const dropDownSize = this.getArrayYears().length > 6 ? 201 : undefined;
|
||||
|
||||
return (
|
||||
<CalendarStyle color={this.props.themeColor} size={this.props.size} >
|
||||
<ComboBoxStyle>
|
||||
<ComboBox scaled={true} dropDownMaxHeight={200} onSelect={this.selectedMonth.bind(this)} selectedOption={this.getCurrentMonth()} options={this.getArrayMonth()} isDisabled={this.props.disabled} />
|
||||
<ComboBox
|
||||
scaled={true}
|
||||
dropDownMaxHeight={201}
|
||||
onSelect={this.selectedMonth.bind(this)}
|
||||
selectedOption={this.getCurrentMonth()}
|
||||
options={this.getArrayMonth()}
|
||||
isDisabled={disabled}
|
||||
/>
|
||||
<ComboBoxDateStyle>
|
||||
<ComboBox scaled={true} dropDownMaxHeight={dropDownSize} onSelect={this.selectedYear.bind(this)} selectedOption={this.getCurrentYear()} options={this.getArrayYears()} isDisabled={this.props.disabled} />
|
||||
<ComboBox
|
||||
scaled={true}
|
||||
dropDownMaxHeight={dropDownSize}
|
||||
onSelect={this.selectedYear.bind(this)}
|
||||
selectedOption={this.getCurrentYear()}
|
||||
options={this.getArrayYears()}
|
||||
isDisabled={disabled}
|
||||
/>
|
||||
</ComboBoxDateStyle>
|
||||
</ComboBoxStyle>
|
||||
<ReactCalendar
|
||||
|
Loading…
Reference in New Issue
Block a user