bootstrap-daterangepicker-rails 0.1.3 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,375 +1,540 @@
1
- /**
2
- * A stylesheet for use with Bootstrap 3.x
3
- * @author: Dan Grossman http://www.dangrossman.info/
4
- * @copyright: Copyright (c) 2012-2015 Dan Grossman. All rights reserved.
5
- * @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php
6
- * @website: https://www.improvely.com/
7
- */
8
-
9
- /* Container Appearance */
10
-
11
- .daterangepicker {
1
+ //
2
+ // A stylesheet for use with Bootstrap 3.x
3
+ // @author: Dan Grossman http://www.dangrossman.info/
4
+ // @copyright: Copyright (c) 2012-2015 Dan Grossman. All rights reserved.
5
+ // @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php
6
+ // @website: https://www.improvely.com/
7
+ //
8
+
9
+ //
10
+ // VARIABLES
11
+ //
12
+
13
+ //
14
+ // Settings
15
+
16
+ // The class name to contain everything within.
17
+ $prefix-class: daterangepicker;
18
+ $arrow-size: 7px !default;
19
+
20
+ //
21
+ // Colors
22
+ $daterangepicker-color: inherit !default;
23
+ $daterangepicker-bg-color: #fff !default;
24
+
25
+ $daterangepicker-cell-color: $daterangepicker-color !default;
26
+ $daterangepicker-cell-border-color: transparent !default;
27
+ $daterangepicker-cell-bg-color: $daterangepicker-bg-color !default;
28
+
29
+ $daterangepicker-cell-hover-color: $daterangepicker-color !default;
30
+ $daterangepicker-cell-hover-border-color: $daterangepicker-cell-border-color !default;
31
+ $daterangepicker-cell-hover-bg-color: #eee !default;
32
+
33
+ $daterangepicker-in-range-color: #000 !default;
34
+ $daterangepicker-in-range-border-color: transparent !default;
35
+ $daterangepicker-in-range-bg-color: #ebf4f8 !default;
36
+
37
+ $daterangepicker-active-color: #fff !default;
38
+ $daterangepicker-active-bg-color: #357ebd !default;
39
+ $daterangepicker-active-border-color: transparent !default;
40
+
41
+ $daterangepicker-unselected-color: #999 !default;
42
+ $daterangepicker-unselected-border-color: transparent !default;
43
+ $daterangepicker-unselected-bg-color: #fff !default;
44
+
45
+ //
46
+ // daterangepicker
47
+ $daterangepicker-width: 278px !default;
48
+ $daterangepicker-padding: 4px !default;
49
+ $daterangepicker-z-index: 3000 !default;
50
+
51
+ $daterangepicker-border-size: 1px !default;
52
+ $daterangepicker-border-color: #ccc !default;
53
+ $daterangepicker-border-radius: 4px !default;
54
+
55
+
56
+ //
57
+ // Calendar
58
+ $daterangepicker-calendar-margin: $daterangepicker-padding !default;
59
+ $daterangepicker-calendar-bg-color: $daterangepicker-bg-color !default;
60
+
61
+ $daterangepicker-calendar-border-size: 1px !default;
62
+ $daterangepicker-calendar-border-color: $daterangepicker-bg-color !default;
63
+ $daterangepicker-calendar-border-radius: $daterangepicker-border-radius !default;
64
+
65
+ //
66
+ // Calendar Cells
67
+ $daterangepicker-cell-size: 20px !default;
68
+ $daterangepicker-cell-width: $daterangepicker-cell-size !default;
69
+ $daterangepicker-cell-height: $daterangepicker-cell-size !default;
70
+
71
+ $daterangepicker-cell-border-radius: $daterangepicker-calendar-border-radius !default;
72
+ $daterangepicker-cell-border-size: 1px !default;
73
+
74
+ //
75
+ // Dropdowns
76
+ $daterangepicker-dropdown-z-index: $daterangepicker-z-index + 1 !default;
77
+
78
+ //
79
+ // Controls
80
+ $daterangepicker-control-height: 30px !default;
81
+ $daterangepicker-control-line-height: $daterangepicker-control-height !default;
82
+ $daterangepicker-control-color: #555 !default;
83
+
84
+ $daterangepicker-control-border-size: 1px !default;
85
+ $daterangepicker-control-border-color: #ccc !default;
86
+ $daterangepicker-control-border-radius: 4px !default;
87
+
88
+ $daterangepicker-control-active-border-size: 1px !default;
89
+ $daterangepicker-control-active-border-color: #08c !default;
90
+ $daterangepicker-control-active-border-radius: $daterangepicker-control-border-radius !default;
91
+
92
+ $daterangepicker-control-disabled-color: #ccc !default;
93
+
94
+ //
95
+ // Ranges
96
+ $daterangepicker-ranges-color: #08c !default;
97
+ $daterangepicker-ranges-bg-color: #f5f5f5 !default;
98
+
99
+ $daterangepicker-ranges-border-size: 1px !default;
100
+ $daterangepicker-ranges-border-color: $daterangepicker-ranges-bg-color !default;
101
+ $daterangepicker-ranges-border-radius: $daterangepicker-border-radius !default;
102
+
103
+ $daterangepicker-ranges-hover-color: #fff !default;
104
+ $daterangepicker-ranges-hover-bg-color: $daterangepicker-ranges-color !default;
105
+ $daterangepicker-ranges-hover-border-size: $daterangepicker-ranges-border-size !default;
106
+ $daterangepicker-ranges-hover-border-color: $daterangepicker-ranges-hover-bg-color !default;
107
+ $daterangepicker-ranges-hover-border-radius: $daterangepicker-border-radius !default;
108
+
109
+ $daterangepicker-ranges-active-border-size: $daterangepicker-ranges-border-size !default;
110
+ $daterangepicker-ranges-active-border-color: $daterangepicker-ranges-bg-color !default;
111
+ $daterangepicker-ranges-active-border-radius: $daterangepicker-border-radius !default;
112
+
113
+ //
114
+ // STYLESHEETS
115
+ //
116
+ .#{$prefix-class} {
12
117
  position: absolute;
13
- background: #fff;
118
+ color: $daterangepicker-color;
119
+ background: $daterangepicker-bg-color;
120
+ border-radius: $daterangepicker-border-radius;
121
+ width: $daterangepicker-width;
122
+ padding: $daterangepicker-padding;
123
+ margin-top: $daterangepicker-border-size;
124
+
125
+ // TODO: Should these be parameterized??
14
126
  top: 100px;
15
127
  left: 20px;
16
- padding: 4px;
17
- margin-top: 1px;
18
- border-radius: 4px;
19
- width:278px;
20
- }
21
-
22
- .daterangepicker.opensleft:before {
23
- position: absolute;
24
- top: -7px;
25
- right: 9px;
26
- display: inline-block;
27
- border-right: 7px solid transparent;
28
- border-bottom: 7px solid #ccc;
29
- border-left: 7px solid transparent;
30
- border-bottom-color: rgba(0, 0, 0, 0.2);
31
- content: '';
32
- }
33
-
34
- .daterangepicker.opensleft:after {
35
- position: absolute;
36
- top: -6px;
37
- right: 10px;
38
- display: inline-block;
39
- border-right: 6px solid transparent;
40
- border-bottom: 6px solid #fff;
41
- border-left: 6px solid transparent;
42
- content: '';
43
- }
44
-
45
- .daterangepicker.openscenter:before {
46
- position: absolute;
47
- top: -7px;
48
- left: 0;
49
- right: 0;
50
- width: 0;
51
- margin-left: auto;
52
- margin-right: auto;
53
- display: inline-block;
54
- border-right: 7px solid transparent;
55
- border-bottom: 7px solid #ccc;
56
- border-left: 7px solid transparent;
57
- border-bottom-color: rgba(0, 0, 0, 0.2);
58
- content: '';
59
- }
60
-
61
- .daterangepicker.openscenter:after {
62
- position: absolute;
63
- top: -6px;
64
- left: 0;
65
- right: 0;
66
- width: 0;
67
- margin-left: auto;
68
- margin-right: auto;
69
- display: inline-block;
70
- border-right: 6px solid transparent;
71
- border-bottom: 6px solid #fff;
72
- border-left: 6px solid transparent;
73
- content: '';
74
- }
75
128
 
76
- .daterangepicker.opensright:before {
77
- position: absolute;
78
- top: -7px;
79
- left: 9px;
80
- display: inline-block;
81
- border-right: 7px solid transparent;
82
- border-bottom: 7px solid #ccc;
83
- border-left: 7px solid transparent;
84
- border-bottom-color: rgba(0, 0, 0, 0.2);
85
- content: '';
86
- }
129
+ $arrow-prefix-size: $arrow-size;
130
+ $arrow-suffix-size: ($arrow-size - $daterangepicker-border-size);
87
131
 
88
- .daterangepicker.opensright:after {
89
- position: absolute;
90
- top: -6px;
91
- left: 10px;
92
- display: inline-block;
93
- border-right: 6px solid transparent;
94
- border-bottom: 6px solid #fff;
95
- border-left: 6px solid transparent;
96
- content: '';
97
- }
132
+ &:before, &:after {
133
+ position: absolute;
134
+ display: inline-block;
98
135
 
99
- .daterangepicker.dropup{
100
- margin-top: -5px;
101
- }
102
- .daterangepicker.dropup:before{
103
- top: initial;
104
- bottom:-7px;
105
- border-bottom: initial;
106
- border-top: 7px solid #ccc;
107
- }
108
- .daterangepicker.dropup:after{
109
- top: initial;
110
- bottom:-6px;
111
- border-bottom: initial;
112
- border-top: 6px solid #fff;
113
- }
114
-
115
- .daterangepicker.dropdown-menu {
116
- max-width: none;
117
- z-index: 3000;
118
- }
136
+ border-bottom-color: rgba(0, 0, 0, 0.2);
137
+ content: '';
138
+ }
119
139
 
120
- .daterangepicker.single .ranges, .daterangepicker.single .calendar {
121
- float: none;
122
- }
140
+ &:before {
141
+ top: -$arrow-prefix-size;
123
142
 
124
- .daterangepicker .calendar {
125
- display: none;
126
- max-width: 270px;
127
- margin: 4px;
128
- }
143
+ border-right: $arrow-prefix-size solid transparent;
144
+ border-left: $arrow-prefix-size solid transparent;
145
+ border-bottom: $arrow-prefix-size solid $daterangepicker-border-color;
146
+ }
129
147
 
130
- .daterangepicker.show-calendar .calendar {
131
- display: block;
132
- }
148
+ &:after {
149
+ top: -$arrow-suffix-size;
133
150
 
134
- .daterangepicker .calendar.single .calendar-table {
135
- border: none;
136
- }
151
+ border-right: $arrow-suffix-size solid transparent;
152
+ border-bottom: $arrow-suffix-size solid $daterangepicker-bg-color;
153
+ border-left: $arrow-suffix-size solid transparent;
154
+ }
137
155
 
138
- /* Calendars */
156
+ &.opensleft {
157
+ &:before {
158
+ // TODO: Make this relative to prefix size.
159
+ right: $arrow-prefix-size + 2px;
160
+ }
139
161
 
140
- .daterangepicker .calendar th, .daterangepicker .calendar td {
141
- white-space: nowrap;
142
- text-align: center;
143
- min-width: 32px;
144
- }
162
+ &:after {
163
+ // TODO: Make this relative to suffix size.
164
+ right: $arrow-suffix-size + 4px;
165
+ }
166
+ }
145
167
 
146
- .daterangepicker .calendar-table {
147
- border: 1px solid #ddd;
148
- padding: 4px;
149
- border-radius: 4px;
150
- background: #fff;
151
- }
168
+ &.openscenter {
169
+ &:before {
170
+ left: 0;
171
+ right: 0;
172
+ width: 0;
173
+ margin-left: auto;
174
+ margin-right: auto;
175
+ }
176
+
177
+ &:after {
178
+ left: 0;
179
+ right: 0;
180
+ width: 0;
181
+ margin-left: auto;
182
+ margin-right: auto;
183
+ }
184
+ }
152
185
 
153
- .daterangepicker table {
154
- width: 100%;
155
- margin: 0;
156
- }
186
+ &.opensright {
187
+ &:before {
188
+ // TODO: Make this relative to prefix size.
189
+ left: $arrow-prefix-size + 2px;
190
+ }
157
191
 
158
- .daterangepicker td, .daterangepicker th {
159
- text-align: center;
160
- width: 20px;
161
- height: 20px;
162
- border-radius: 4px;
163
- white-space: nowrap;
164
- cursor: pointer;
165
- }
192
+ &:after {
193
+ // TODO: Make this relative to suffix size.
194
+ left: $arrow-suffix-size + 4px;
195
+ }
196
+ }
166
197
 
167
- .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
168
- color: #999;
169
- background: #fff;
170
- }
198
+ &.dropup {
199
+ margin-top: -5px;
200
+
201
+ // NOTE: Note sure why these are special-cased.
202
+ &:before {
203
+ top: initial;
204
+ bottom: -$arrow-prefix-size;
205
+ border-bottom: initial;
206
+ border-top: $arrow-prefix-size solid $daterangepicker-border-color;
207
+ }
208
+
209
+ &:after {
210
+ top: initial;
211
+ bottom:-$arrow-suffix-size;
212
+ border-bottom: initial;
213
+ border-top: $arrow-suffix-size solid $daterangepicker-bg-color;
214
+ }
215
+ }
171
216
 
172
- .daterangepicker td.disabled, .daterangepicker option.disabled {
173
- color: #999;
174
- cursor: not-allowed;
175
- text-decoration: line-through;
176
- }
217
+ &.dropdown-menu {
218
+ max-width: none;
219
+ z-index: $daterangepicker-dropdown-z-index;
220
+ }
177
221
 
178
- .daterangepicker td.available:hover, .daterangepicker th.available:hover {
179
- background: #eee;
180
- }
222
+ &.single {
223
+ .ranges, .calendar {
224
+ float: none;
225
+ }
226
+ }
181
227
 
182
- .daterangepicker td.in-range {
183
- background: #ebf4f8;
184
- border-radius: 0;
185
- }
228
+ /* Calendars */
229
+ &.show-calendar {
230
+ .calendar {
231
+ display: block;
232
+ }
233
+ }
186
234
 
187
- .daterangepicker td.start-date {
188
- border-radius: 4px 0 0 4px;
189
- }
235
+ .calendar {
236
+ display: none;
237
+ max-width: $daterangepicker-width - ($daterangepicker-calendar-margin * 2);
238
+ margin: $daterangepicker-calendar-margin;
190
239
 
191
- .daterangepicker td.end-date {
192
- border-radius: 0 4px 4px 0;
193
- }
240
+ &.single {
241
+ .calendar-table {
242
+ border: none;
243
+ }
244
+ }
194
245
 
195
- .daterangepicker td.start-date.end-date {
196
- border-radius: 4px;
197
- }
246
+ th, td {
247
+ white-space: nowrap;
248
+ text-align: center;
198
249
 
199
- .daterangepicker td.active, .daterangepicker td.active:hover {
200
- background-color: #357ebd;
201
- border-color: #3071a9;
202
- color: #fff;
203
- }
250
+ // TODO: Should this actually be hard-coded?
251
+ min-width: 32px;
252
+ }
253
+ }
204
254
 
205
- .daterangepicker td.week, .daterangepicker th.week {
206
- font-size: 80%;
207
- color: #ccc;
208
- }
255
+ .calendar-table {
256
+ border: $daterangepicker-calendar-border-size solid $daterangepicker-calendar-border-color;
257
+ padding: $daterangepicker-calendar-margin;
258
+ border-radius: $daterangepicker-calendar-border-radius;
259
+ background: $daterangepicker-calendar-bg-color;
260
+ }
209
261
 
210
- .daterangepicker select.monthselect, .daterangepicker select.yearselect {
211
- font-size: 12px;
212
- padding: 1px;
213
- height: auto;
214
- margin: 0;
215
- cursor: default;
216
- }
262
+ table {
263
+ width: 100%;
264
+ margin: 0;
265
+ }
217
266
 
218
- .daterangepicker select.monthselect {
219
- margin-right: 2%;
220
- width: 56%;
221
- }
267
+ td, th {
268
+ text-align: center;
269
+ width: $daterangepicker-cell-width;
270
+ height: $daterangepicker-cell-height;
271
+ border-radius: $daterangepicker-cell-border-radius;
272
+ border: $daterangepicker-cell-border-size solid $daterangepicker-cell-border-color;
273
+ white-space: nowrap;
274
+ cursor: pointer;
275
+
276
+ &.available {
277
+ &:hover {
278
+ background: $daterangepicker-cell-hover-bg-color;
279
+ }
280
+ }
281
+
282
+ &.week {
283
+ font-size: 80%;
284
+ color: #ccc;
285
+ }
286
+ }
222
287
 
223
- .daterangepicker select.yearselect {
224
- width: 40%;
225
- }
288
+ td {
289
+ &.off {
290
+ &, &.in-range, &.start-date, &.end-date {
291
+ background-color: $daterangepicker-unselected-bg-color;
292
+ border-color: $daterangepicker-unselected-border-color;
293
+ color: $daterangepicker-unselected-color;
294
+ }
295
+ }
296
+
297
+ //
298
+ // Date Range
299
+ &.in-range {
300
+ background-color: $daterangepicker-in-range-bg-color;
301
+ border-color: $daterangepicker-in-range-border-color;
302
+ color: $daterangepicker-in-range-color;
303
+
304
+ // TODO: Should this be static or should it be parameterized?
305
+ border-radius: 0;
306
+ }
307
+
308
+ &.start-date {
309
+ border-radius: $daterangepicker-cell-border-radius 0 0 $daterangepicker-cell-border-radius;
310
+ }
311
+
312
+ &.end-date {
313
+ border-radius: 0 $daterangepicker-cell-border-radius $daterangepicker-cell-border-radius 0;
314
+ }
315
+
316
+ &.start-date.end-date {
317
+ border-radius: $daterangepicker-cell-border-radius;
318
+ }
319
+
320
+ &.active {
321
+ &, &:hover {
322
+ background-color: $daterangepicker-active-bg-color;
323
+ border-color: $daterangepicker-active-border-color;
324
+ color: $daterangepicker-active-color;
325
+ }
326
+ }
327
+ }
226
328
 
227
- .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
228
- width: 50px;
229
- margin-bottom: 0;
230
- }
329
+ th {
330
+ &.month {
331
+ width: auto;
332
+ }
333
+ }
231
334
 
232
- .daterangepicker th.month {
233
- width: auto;
234
- }
335
+ //
336
+ // Disabled Controls
337
+ //
338
+ td, option {
339
+ &.disabled {
340
+ color: #999;
341
+ cursor: not-allowed;
342
+ text-decoration: line-through;
343
+ }
344
+ }
235
345
 
236
- /* Text Input Above Each Calendar */
237
-
238
- .daterangepicker .input-mini {
239
- border: 1px solid #ccc;
240
- border-radius: 4px;
241
- color: #555;
242
- display: block;
243
- height: 30px;
244
- line-height: 30px;
245
- vertical-align: middle;
246
- margin: 0 0 5px 0;
247
- padding: 0 6px 0 28px;
248
- width: 100%;
249
- }
346
+ select {
347
+ &.monthselect, &.yearselect {
348
+ font-size: 12px;
349
+ padding: 1px;
350
+ height: auto;
351
+ margin: 0;
352
+ cursor: default;
353
+ }
354
+
355
+ &.monthselect {
356
+ margin-right: 2%;
357
+ width: 56%;
358
+ }
359
+
360
+ &.yearselect {
361
+ width: 40%;
362
+ }
363
+
364
+ &.hourselect, &.minuteselect, &.secondselect, &.ampmselect {
365
+ width: 50px;
366
+ margin-bottom: 0;
367
+ }
368
+ }
250
369
 
251
- .daterangepicker .input-mini.active {
252
- border: 1px solid #357ebd;
253
- }
370
+ //
371
+ // Text Input Controls (above calendar)
372
+ //
373
+ .input-mini {
374
+ border: $daterangepicker-control-border-size solid $daterangepicker-control-border-color;
375
+ border-radius: $daterangepicker-control-border-radius;
376
+ color: $daterangepicker-control-color;
377
+ height: $daterangepicker-control-line-height;
378
+ line-height: $daterangepicker-control-height;
379
+ display: block;
380
+ vertical-align: middle;
381
+
382
+ // TODO: Should these all be static, too??
383
+ margin: 0 0 5px 0;
384
+ padding: 0 6px 0 28px;
385
+ width: 100%;
254
386
 
255
- .daterangepicker .daterangepicker_input i {
256
- position: absolute;
257
- left: 8px;
258
- top: 8px;
259
- }
387
+ &.active {
388
+ border: $daterangepicker-control-active-border-size solid $daterangepicker-control-active-border-color;
389
+ border-radius: $daterangepicker-control-active-border-radius;
390
+ }
391
+ }
260
392
 
261
- .daterangepicker .daterangepicker_input {
262
- position: relative;
263
- }
393
+ .daterangepicker_input {
394
+ position: relative;
264
395
 
265
- /* Time Picker */
396
+ i {
397
+ position: absolute;
266
398
 
267
- .daterangepicker .calendar-time {
268
- text-align: center;
269
- margin: 5px auto;
270
- line-height: 30px;
271
- position: relative;
272
- padding-left: 28px;
273
- }
399
+ // NOTE: These appear to be eyeballed to me...
400
+ left: 8px;
401
+ top: 8px;
402
+ }
403
+ }
274
404
 
275
- .daterangepicker .calendar-time select.disabled {
276
- color: #ccc;
277
- cursor: not-allowed;
405
+ //
406
+ // Time Picker
407
+ //
408
+ .calendar-time {
409
+ text-align: center;
410
+ margin: 5px auto;
411
+ line-height: $daterangepicker-control-line-height;
412
+ position: relative;
413
+ padding-left: 28px;
414
+
415
+ select {
416
+ &.disabled {
417
+ color: $daterangepicker-control-disabled-color;
418
+ cursor: not-allowed;
419
+ }
420
+ }
421
+ }
278
422
  }
279
423
 
280
- /* Predefined Ranges */
424
+ //
425
+ // Predefined Ranges
426
+ //
281
427
 
282
- .daterangepicker .ranges {
428
+ .ranges {
283
429
  font-size: 11px;
284
430
  float: none;
285
431
  margin: 4px;
286
432
  text-align: left;
287
- }
288
433
 
289
- .daterangepicker .ranges ul {
290
- list-style: none;
291
- margin: 0 auto;
292
- padding: 0;
293
- width: 100%;
294
- }
295
-
296
- .daterangepicker .ranges li {
297
- font-size: 13px;
298
- background: #f5f5f5;
299
- border: 1px solid #f5f5f5;
300
- color: #08c;
301
- padding: 3px 12px;
302
- margin-bottom: 8px;
303
- border-radius: 5px;
304
- cursor: pointer;
305
- }
434
+ ul {
435
+ list-style: none;
436
+ margin: 0 auto;
437
+ padding: 0;
438
+ width: 100%;
439
+ }
306
440
 
307
- .daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
308
- background: #08c;
309
- border: 1px solid #08c;
310
- color: #fff;
441
+ li {
442
+ font-size: 13px;
443
+ background: $daterangepicker-ranges-bg-color;
444
+ border: $daterangepicker-ranges-border-size solid $daterangepicker-ranges-border-color;
445
+ border-radius: $daterangepicker-ranges-border-radius;
446
+ color: $daterangepicker-ranges-color;
447
+ padding: 3px 12px;
448
+ margin-bottom: 8px;
449
+ cursor: pointer;
450
+
451
+ &:hover {
452
+ background: $daterangepicker-ranges-hover-bg-color;
453
+ border: $daterangepicker-ranges-hover-border-size solid $daterangepicker-ranges-hover-border-color;
454
+ color: $daterangepicker-ranges-hover-color;
455
+ }
456
+
457
+ &.active {
458
+ background: $daterangepicker-ranges-hover-bg-color;
459
+ border: $daterangepicker-ranges-hover-border-size solid $daterangepicker-ranges-hover-border-color;
460
+ color: $daterangepicker-ranges-hover-color;
461
+ }
462
+ }
311
463
  }
312
464
 
313
465
  /* Larger Screen Styling */
314
466
  @media (min-width: 564px) {
315
- .daterangepicker{
467
+ .#{$prefix-class} {
316
468
  width: auto;
317
- }
318
-
319
- .daterangepicker .ranges ul {
320
- width: 160px;
321
- }
322
- .daterangepicker.single .ranges ul {
323
- width: 100%;
324
- }
325
- .daterangepicker .calendar.left .calendar-table {
326
- border-right: none;
327
- border-top-right-radius: 0;
328
- border-bottom-right-radius: 0;
329
- }
330
-
331
- .daterangepicker .calendar.right .calendar-table {
332
- border-left: none;
333
- border-top-left-radius: 0;
334
- border-bottom-left-radius: 0;
335
- }
336
-
337
- .daterangepicker .calendar.left {
338
- clear: left;
339
- margin-right: 0;
340
- }
341
- .daterangepicker.single .calendar.left {
342
- clear: none;
343
- }
344
- .daterangepicker.single .ranges,
345
- .daterangepicker.single .calendar{
346
- float:left;
347
- }
348
-
349
- .daterangepicker .calendar.right {
350
- margin-left: 0;
351
- }
352
469
 
353
- .daterangepicker .left .daterangepicker_input {
354
- padding-right: 12px;
355
- }
356
-
357
- .daterangepicker .calendar.left .calendar-table {
358
- padding-right: 12px;
359
- }
360
-
361
- .daterangepicker .ranges,
362
- .daterangepicker .calendar {
363
- float: left;
470
+ .ranges {
471
+ ul {
472
+ width: 160px;
473
+ }
474
+ }
475
+
476
+ &.single {
477
+ .ranges {
478
+ ul {
479
+ width: 100%;
480
+ }
481
+ }
482
+
483
+ .calendar.left {
484
+ clear: none;
485
+ }
486
+
487
+ .ranges, .calendar {
488
+ float:left;
489
+ }
490
+ }
491
+
492
+ .calendar{
493
+ &.left {
494
+ clear: left;
495
+ margin-right: 0;
496
+
497
+ .calendar-table {
498
+ border-right: none;
499
+ border-top-right-radius: 0;
500
+ border-bottom-right-radius: 0;
501
+ }
502
+ }
503
+
504
+ &.right {
505
+ margin-left: 0;
506
+
507
+ .calendar-table {
508
+ border-left: none;
509
+ border-top-left-radius: 0;
510
+ border-bottom-left-radius: 0;
511
+ }
512
+ }
513
+ }
514
+
515
+ .left .daterangepicker_input {
516
+ padding-right: 12px;
517
+ }
518
+
519
+ .calendar.left .calendar-table {
520
+ padding-right: 12px;
521
+ }
522
+
523
+ .ranges, .calendar {
524
+ float: left;
525
+ }
364
526
  }
365
527
  }
366
528
 
367
529
  @media (min-width: 730px) {
368
- .daterangepicker .ranges {
369
- width: auto;
370
- float: left;
371
- }
372
- .daterangepicker .calendar.left {
373
- clear: none;
530
+ .#{$prefix-class} {
531
+ .ranges {
532
+ width: auto;
533
+ float: left;
534
+ }
535
+
536
+ .calendar.left {
537
+ clear: none;
538
+ }
374
539
  }
375
540
  }