Skip to content

Commit bd3f139

Browse files
martijnrusschenmartijnrusschen
committed
Make the datepicker className more specific
1 parent 47978a6 commit bd3f139

File tree

8 files changed

+50
-50
lines changed

8 files changed

+50
-50
lines changed

‎src/calendar.jsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -89,17 +89,17 @@ var Calendar = React.createClass({
8989
return [0, 1, 2, 3, 4, 5, 6].map(offset => {
9090
const day = startOfWeek.clone().add(offset, 'days')
9191
return (
92-
<div key={offset} className="datepicker__day">
92+
<div key={offset} className="react-datepicker__day">
9393
{day.localeData().weekdaysMin(day)}
9494
</div>
9595
)
9696
})
9797
},
9898

9999
renderCurrentMonth () {
100-
var classes = ['datepicker__current-month']
100+
var classes = ['react-datepicker__current-month']
101101
if (this.props.showYearDropdown) {
102-
classes.push('datepicker__current-month--hasYearDropdown')
102+
classes.push('react-datepicker__current-month--hasYearDropdown')
103103
}
104104
return (
105105
<div className={classes.join(' ')}>
@@ -124,23 +124,23 @@ var Calendar = React.createClass({
124124
return
125125
}
126126
return (
127-
<div className="datepicker__today-button" onClick={() => this.props.onSelect(moment())}>
127+
<div className="react-datepicker__today-button" onClick={() => this.props.onSelect(moment())}>
128128
{this.props.todayButton}
129129
</div>
130130
)
131131
},
132132

133133
render () {
134134
return (
135-
<div className="datepicker">
136-
<div className="datepicker__triangle"></div>
137-
<div className="datepicker__header">
138-
<a className="datepicker__navigation datepicker__navigation--previous"
135+
<div className="react-datepicker">
136+
<div className="react-datepicker__triangle"></div>
137+
<div className="react-datepicker__header">
138+
<a className="react-datepicker__navigation react-datepicker__navigation--previous"
139139
onClick={this.decreaseMonth}>
140140
</a>
141141
{this.renderCurrentMonth()}
142142
{this.renderYearDropdown()}
143-
<a className="datepicker__navigation datepicker__navigation--next"
143+
<a className="react-datepicker__navigation react-datepicker__navigation--next"
144144
onClick={this.increaseMonth}>
145145
</a>
146146
<div>

‎src/datepicker.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ var DatePicker = React.createClass({
139139

140140
renderClearButton () {
141141
if (this.props.isClearable && this.props.selected != null) {
142-
return <a className="close-icon" href="#" onClick={this.onClearClick}></a>
142+
return <a className="react-datepicker__close-icon" href="#" onClick={this.onClearClick}></a>
143143
} else {
144144
return null
145145
}
@@ -148,7 +148,7 @@ var DatePicker = React.createClass({
148148
render () {
149149
return (
150150
<TetherComponent
151-
classPrefix={"datepicker__tether"}
151+
classPrefix={"react-datepicker__tether"}
152152
attachment={this.props.popoverAttachment}
153153
targetAttachment={this.props.popoverTargetAttachment}
154154
targetOffset={this.props.popoverTargetOffset}

‎src/day.jsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,13 @@ var Day = React.createClass({
5454
},
5555

5656
getClassNames () {
57-
return classnames('datepicker__day', {
58-
'datepicker__day--disabled': this.isDisabled(),
59-
'datepicker__day--selected': this.isSameDay(this.props.selected),
60-
'datepicker__day--in-range': this.isInRange(),
61-
'datepicker__day--today': this.isSameDay(moment()),
62-
'datepicker__day--weekend': this.isWeekend(),
63-
'datepicker__day--outside-month': this.isOutsideMonth()
57+
return classnames('react-datepicker__day', {
58+
'react-datepicker__day--disabled': this.isDisabled(),
59+
'react-datepicker__day--selected': this.isSameDay(this.props.selected),
60+
'react-datepicker__day--in-range': this.isInRange(),
61+
'react-datepicker__day--today': this.isSameDay(moment()),
62+
'react-datepicker__day--weekend': this.isWeekend(),
63+
'react-datepicker__day--outside-month': this.isOutsideMonth()
6464
})
6565
},
6666

‎src/month.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ var Month = React.createClass({
5353

5454
render () {
5555
return (
56-
<div className="datepicker__month">
56+
<div className="react-datepicker__month">
5757
{this.renderWeeks()}
5858
</div>
5959
)

‎src/stylesheets/datepicker.scss

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import "variables";
22
@import "mixins";
33

4-
.datepicker {
4+
.react-datepicker {
55
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
66
font-size: 11px;
77
background-color: #fff;
@@ -12,24 +12,24 @@
1212
position: relative;
1313
}
1414

15-
.datepicker__triangle {
15+
.react-datepicker__triangle {
1616
position: absolute;
1717
left: 50px;
1818
}
1919

20-
.datepicker__tether-element-attached-top .datepicker__triangle {
20+
.react-datepicker__tether-element-attached-top .react-datepicker__triangle {
2121
@extend %triangle-arrow-up;
2222
}
2323

24-
.datepicker__tether-element-attached-bottom .datepicker__triangle {
24+
.react-datepicker__tether-element-attached-bottom .react-datepicker__triangle {
2525
@extend %triangle-arrow-down;
2626
}
2727

28-
.datepicker__tether-element-attached-bottom.datepicker__tether-element {
28+
.react-datepicker__tether-element-attached-bottom.react-datepicker__tether-element {
2929
margin-top: -20px;
3030
}
3131

32-
.datepicker__header {
32+
.react-datepicker__header {
3333
text-align: center;
3434
background-color: $background-color;
3535
border-bottom: 1px solid $border-color;
@@ -39,7 +39,7 @@
3939
position: relative;
4040
}
4141

42-
.datepicker__current-month {
42+
.react-datepicker__current-month {
4343
margin-top: 0;
4444
color: #000;
4545
font-weight: bold;
@@ -50,7 +50,7 @@
5050
}
5151
}
5252

53-
.datepicker__navigation {
53+
.react-datepicker__navigation {
5454
line-height: $item-size;
5555
text-align: center;
5656
cursor: pointer;
@@ -104,19 +104,19 @@
104104
}
105105
}
106106

107-
.datepicker__week-day {
107+
.react-datepicker__week-day {
108108
color: $muted-color;
109109
display: inline-block;
110110
width: $item-size + (2 * $day-margin);
111111
line-height: $item-size;
112112
}
113113

114-
.datepicker__month {
114+
.react-datepicker__month {
115115
margin: $datepicker__margin;
116116
text-align: center;
117117
}
118118

119-
.datepicker__day {
119+
.react-datepicker__day {
120120
color: $text-color;
121121
display: inline-block;
122122
width: $item-size;
@@ -179,7 +179,7 @@
179179
}
180180
}
181181

182-
.datepicker__year-read-view {
182+
.react-datepicker__year-read-view {
183183
width: 50%;
184184
left: 25%;
185185
position: absolute;
@@ -190,7 +190,7 @@
190190
&:hover {
191191
cursor: pointer;
192192

193-
.datepicker__year-read-view--down-arrow {
193+
.react-datepicker__year-read-view--down-arrow {
194194
border-top-color: darken($muted-color, 10%);
195195
}
196196
}
@@ -211,7 +211,7 @@
211211
}
212212
}
213213

214-
.datepicker__year-dropdown {
214+
.react-datepicker__year-dropdown {
215215
background-color: $background-color;
216216
position: absolute;
217217
width: 50%;
@@ -226,7 +226,7 @@
226226
}
227227
}
228228

229-
.datepicker__year-option {
229+
.react-datepicker__year-option {
230230
line-height: 20px;
231231
width: 100%;
232232
display: block;
@@ -250,11 +250,11 @@
250250
&:hover {
251251
background-color: $muted-color;
252252

253-
.datepicker__navigation--years-upcoming {
253+
.react-datepicker__navigation--years-upcoming {
254254
border-bottom-color: darken($muted-color, 10%);
255255
}
256256

257-
.datepicker__navigation--years-previous {
257+
.react-datepicker__navigation--years-previous {
258258
border-top-color: darken($muted-color, 10%);
259259
}
260260
}
@@ -265,7 +265,7 @@
265265
}
266266
}
267267

268-
.close-icon {
268+
.react-datepicker__close-icon {
269269
background-color: transparent;
270270
border: 0;
271271
cursor: pointer;
@@ -296,7 +296,7 @@
296296
}
297297
}
298298

299-
.datepicker__today-button {
299+
.react-datepicker__today-button {
300300
background: $background-color;
301301
border-top: 1px solid $border-color;
302302
cursor: pointer;
@@ -305,6 +305,6 @@
305305
padding: 5px 0;
306306
}
307307

308-
.datepicker__tether-element {
308+
.react-datepicker__tether-element {
309309
z-index: 2147483647;
310310
}

‎src/week.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ var Week = React.createClass({
4848

4949
render () {
5050
return (
51-
<div className="datepicker__week">
51+
<div className="react-datepicker__week">
5252
{this.renderDays()}
5353
</div>
5454
)

‎src/year_dropdown.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ var YearDropdown = React.createClass({
1717

1818
renderReadView () {
1919
return (
20-
<div className="datepicker__year-read-view" onClick={this.toggleDropdown}>
21-
<span className="datepicker__year-read-view--selected-year">{this.props.year}</span>
22-
<span className="datepicker__year-read-view--down-arrow"></span>
20+
<div className="react-datepicker__year-read-view" onClick={this.toggleDropdown}>
21+
<span className="react-datepicker__year-read-view--selected-year">{this.props.year}</span>
22+
<span className="react-datepicker__year-read-view--down-arrow"></span>
2323
</div>
2424
)
2525
},

‎src/year_dropdown_options.jsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,28 +28,28 @@ var YearDropdownOptions = React.createClass({
2828
renderOptions () {
2929
var selectedYear = this.props.year
3030
var options = this.state.yearsList.map(year =>
31-
<div className="datepicker__year-option"
31+
<div className="react-datepicker__year-option"
3232
key={year}
3333
onClick={this.onChange.bind(this, year)}>
34-
{selectedYear === year ? <span className="datepicker__year-option--selected">✓</span> : ''}
34+
{selectedYear === year ? <span className="react-datepicker__year-option--selected">✓</span> : ''}
3535
{year}
3636
</div>
3737
)
3838

3939
options.unshift(
40-
<div className="datepicker__year-option"
40+
<div className="react-datepicker__year-option"
4141
ref={"upcoming"}
4242
key={"upcoming"}
4343
onClick={this.incrementYears}>
44-
<a className="datepicker__navigation datepicker__navigation--years datepicker__navigation--years-upcoming"></a>
44+
<a className="react-datepicker__navigation react-datepicker__navigation--years react-datepicker__navigation--years-upcoming"></a>
4545
</div>
4646
)
4747
options.push(
48-
<div className="datepicker__year-option"
48+
<div className="react-datepicker__year-option"
4949
ref={"previous"}
5050
key={"previous"}
5151
onClick={this.decrementYears}>
52-
<a className="datepicker__navigation datepicker__navigation--years datepicker__navigation--years-previous"></a>
52+
<a className="react-datepicker__navigation react-datepicker__navigation--years react-datepicker__navigation--years-previous"></a>
5353
</div>
5454
)
5555
return options
@@ -83,7 +83,7 @@ var YearDropdownOptions = React.createClass({
8383

8484
render () {
8585
return (
86-
<div className="datepicker__year-dropdown">
86+
<div className="react-datepicker__year-dropdown">
8787
{this.renderOptions()}
8888
</div>
8989
)

0 commit comments

Comments
 (0)