bootstrap-daterangepicker-rails 0.1.1 → 0.1.8

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,320 +1,540 @@
1
- /*!
2
- * Stylesheet for the Date Range Picker, for use with Bootstrap 3.x
3
- *
4
- * Copyright 2013 Dan Grossman ( http://www.dangrossman.info )
5
- * Licensed under the Apache License v2.0
6
- * http://www.apache.org/licenses/LICENSE-2.0
7
- *
8
- * Built for http://www.improvely.com
9
- */
10
-
11
- .daterangepicker.dropdown-menu {
12
- max-width: none;
13
- z-index: 3000;
14
- }
15
-
16
- .daterangepicker.opensleft .ranges, .daterangepicker.opensleft .calendar {
17
- float: left;
18
- margin: 4px;
19
- }
20
-
21
- .daterangepicker.opensright .ranges, .daterangepicker.opensright .calendar,
22
- .daterangepicker.openscenter .ranges, .daterangepicker.openscenter .calendar {
23
- float: right;
24
- margin: 4px;
25
- }
26
-
27
- .daterangepicker.single .ranges, .daterangepicker.single .calendar {
28
- float: none;
29
- }
30
-
31
- .daterangepicker .ranges {
32
- width: 160px;
33
- text-align: left;
34
- }
35
-
36
- .daterangepicker .ranges .range_inputs>div {
37
- float: left;
38
- }
39
-
40
- .daterangepicker .ranges .range_inputs>div:nth-child(2) {
41
- padding-left: 11px;
42
- }
43
-
44
- .daterangepicker .calendar {
45
- display: none;
46
- max-width: 270px;
47
- }
48
-
49
- .daterangepicker.show-calendar .calendar {
50
- display: block;
51
- }
52
-
53
- .daterangepicker .calendar.single .calendar-date {
54
- border: none;
55
- }
56
-
57
- .daterangepicker .calendar th, .daterangepicker .calendar td {
58
- font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
59
- white-space: nowrap;
60
- text-align: center;
61
- min-width: 32px;
62
- }
63
-
64
- .daterangepicker .daterangepicker_start_input label,
65
- .daterangepicker .daterangepicker_end_input label {
66
- color: #333;
67
- display: block;
68
- font-size: 11px;
69
- font-weight: normal;
70
- height: 20px;
71
- line-height: 20px;
72
- margin-bottom: 2px;
73
- text-shadow: #fff 1px 1px 0px;
74
- text-transform: uppercase;
75
- width: 74px;
76
- }
77
-
78
- .daterangepicker .ranges input {
79
- font-size: 11px;
80
- }
81
-
82
- .daterangepicker .ranges .input-mini {
83
- border: 1px solid #ccc;
84
- border-radius: 4px;
85
- color: #555;
86
- display: block;
87
- font-size: 11px;
88
- height: 30px;
89
- line-height: 30px;
90
- vertical-align: middle;
91
- margin: 0 0 10px 0;
92
- padding: 0 6px;
93
- width: 74px;
94
- }
95
-
96
- .daterangepicker .ranges ul {
97
- list-style: none;
98
- margin: 0;
99
- padding: 0;
100
- }
101
-
102
- .daterangepicker .ranges li {
103
- font-size: 13px;
104
- background: #f5f5f5;
105
- border: 1px solid #f5f5f5;
106
- color: #08c;
107
- padding: 3px 12px;
108
- margin-bottom: 8px;
109
- -webkit-border-radius: 5px;
110
- -moz-border-radius: 5px;
111
- border-radius: 5px;
112
- cursor: pointer;
113
- }
114
-
115
- .daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
116
- background: #08c;
117
- border: 1px solid #08c;
118
- color: #fff;
119
- }
120
-
121
- .daterangepicker .calendar-date {
122
- border: 1px solid #ddd;
123
- padding: 4px;
124
- border-radius: 4px;
125
- background: #fff;
126
- }
127
-
128
- .daterangepicker .calendar-time {
129
- text-align: center;
130
- margin: 8px auto 0 auto;
131
- line-height: 30px;
132
- }
133
-
134
- .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} {
135
117
  position: absolute;
136
- 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??
137
126
  top: 100px;
138
127
  left: 20px;
139
- padding: 4px;
140
- margin-top: 1px;
141
- -webkit-border-radius: 4px;
142
- -moz-border-radius: 4px;
143
- border-radius: 4px;
144
- }
145
-
146
- .daterangepicker.opensleft:before {
147
- position: absolute;
148
- top: -7px;
149
- right: 9px;
150
- display: inline-block;
151
- border-right: 7px solid transparent;
152
- border-bottom: 7px solid #ccc;
153
- border-left: 7px solid transparent;
154
- border-bottom-color: rgba(0, 0, 0, 0.2);
155
- content: '';
156
- }
157
128
 
158
- .daterangepicker.opensleft:after {
159
- position: absolute;
160
- top: -6px;
161
- right: 10px;
162
- display: inline-block;
163
- border-right: 6px solid transparent;
164
- border-bottom: 6px solid #fff;
165
- border-left: 6px solid transparent;
166
- content: '';
167
- }
168
-
169
- .daterangepicker.openscenter:before {
170
- position: absolute;
171
- top: -7px;
172
- left: 0;
173
- right: 0;
174
- width: 0;
175
- margin-left: auto;
176
- margin-right: auto;
177
- display: inline-block;
178
- border-right: 7px solid transparent;
179
- border-bottom: 7px solid #ccc;
180
- border-left: 7px solid transparent;
181
- border-bottom-color: rgba(0, 0, 0, 0.2);
182
- content: '';
183
- }
184
-
185
- .daterangepicker.openscenter:after {
186
- position: absolute;
187
- top: -6px;
188
- left: 0;
189
- right: 0;
190
- width: 0;
191
- margin-left: auto;
192
- margin-right: auto;
193
- display: inline-block;
194
- border-right: 6px solid transparent;
195
- border-bottom: 6px solid #fff;
196
- border-left: 6px solid transparent;
197
- content: '';
198
- }
199
-
200
- .daterangepicker.opensright:before {
201
- position: absolute;
202
- top: -7px;
203
- left: 9px;
204
- display: inline-block;
205
- border-right: 7px solid transparent;
206
- border-bottom: 7px solid #ccc;
207
- border-left: 7px solid transparent;
208
- border-bottom-color: rgba(0, 0, 0, 0.2);
209
- content: '';
210
- }
211
-
212
- .daterangepicker.opensright:after {
213
- position: absolute;
214
- top: -6px;
215
- left: 10px;
216
- display: inline-block;
217
- border-right: 6px solid transparent;
218
- border-bottom: 6px solid #fff;
219
- border-left: 6px solid transparent;
220
- content: '';
221
- }
222
-
223
- .daterangepicker table {
224
- width: 100%;
225
- margin: 0;
226
- }
227
-
228
- .daterangepicker td, .daterangepicker th {
229
- text-align: center;
230
- width: 20px;
231
- height: 20px;
232
- -webkit-border-radius: 4px;
233
- -moz-border-radius: 4px;
234
- border-radius: 4px;
235
- cursor: pointer;
236
- white-space: nowrap;
237
- }
238
-
239
- .daterangepicker td.off {
240
- color: #999;
241
- }
242
-
243
- .daterangepicker td.disabled, .daterangepicker option.disabled {
244
- color: #999;
245
- }
246
-
247
- .daterangepicker td.available:hover, .daterangepicker th.available:hover {
248
- background: #eee;
249
- }
250
-
251
- .daterangepicker td.in-range {
252
- background: #ebf4f8;
253
- -webkit-border-radius: 0;
254
- -moz-border-radius: 0;
255
- border-radius: 0;
256
- }
257
-
258
- .daterangepicker td.start-date {
259
- -webkit-border-radius: 4px 0 0 4px;
260
- -moz-border-radius: 4px 0 0 4px;
261
- border-radius: 4px 0 0 4px;
262
- }
263
-
264
- .daterangepicker td.end-date {
265
- -webkit-border-radius: 0 4px 4px 0;
266
- -moz-border-radius: 0 4px 4px 0;
267
- border-radius: 0 4px 4px 0;
268
- }
269
-
270
- .daterangepicker td.start-date.end-date {
271
- -webkit-border-radius: 4px;
272
- -moz-border-radius: 4px;
273
- border-radius: 4px;
274
- }
275
-
276
- .daterangepicker td.active, .daterangepicker td.active:hover {
277
- background-color: #357ebd;
278
- border-color: #3071a9;
279
- color: #fff;
280
- }
281
-
282
- .daterangepicker td.week, .daterangepicker th.week {
283
- font-size: 80%;
284
- color: #ccc;
285
- }
286
-
287
- .daterangepicker select.monthselect, .daterangepicker select.yearselect {
288
- font-size: 12px;
289
- padding: 1px;
290
- height: auto;
291
- margin: 0;
292
- cursor: default;
293
- }
294
-
295
- .daterangepicker select.monthselect {
296
- margin-right: 2%;
297
- width: 56%;
298
- }
299
-
300
- .daterangepicker select.yearselect {
301
- width: 40%;
302
- }
303
-
304
- .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
305
- width: 50px;
306
- margin-bottom: 0;
307
- }
308
-
309
- .daterangepicker_start_input {
310
- float: left;
311
- }
312
-
313
- .daterangepicker_end_input {
314
- float: left;
315
- padding-left: 11px
316
- }
129
+ $arrow-prefix-size: $arrow-size;
130
+ $arrow-suffix-size: ($arrow-size - $daterangepicker-border-size);
131
+
132
+ &:before, &:after {
133
+ position: absolute;
134
+ display: inline-block;
135
+
136
+ border-bottom-color: rgba(0, 0, 0, 0.2);
137
+ content: '';
138
+ }
139
+
140
+ &:before {
141
+ top: -$arrow-prefix-size;
142
+
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
+ }
147
+
148
+ &:after {
149
+ top: -$arrow-suffix-size;
150
+
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
+ }
155
+
156
+ &.opensleft {
157
+ &:before {
158
+ // TODO: Make this relative to prefix size.
159
+ right: $arrow-prefix-size + 2px;
160
+ }
161
+
162
+ &:after {
163
+ // TODO: Make this relative to suffix size.
164
+ right: $arrow-suffix-size + 4px;
165
+ }
166
+ }
167
+
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
+ }
185
+
186
+ &.opensright {
187
+ &:before {
188
+ // TODO: Make this relative to prefix size.
189
+ left: $arrow-prefix-size + 2px;
190
+ }
191
+
192
+ &:after {
193
+ // TODO: Make this relative to suffix size.
194
+ left: $arrow-suffix-size + 4px;
195
+ }
196
+ }
197
+
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
+ }
216
+
217
+ &.dropdown-menu {
218
+ max-width: none;
219
+ z-index: $daterangepicker-dropdown-z-index;
220
+ }
221
+
222
+ &.single {
223
+ .ranges, .calendar {
224
+ float: none;
225
+ }
226
+ }
227
+
228
+ /* Calendars */
229
+ &.show-calendar {
230
+ .calendar {
231
+ display: block;
232
+ }
233
+ }
234
+
235
+ .calendar {
236
+ display: none;
237
+ max-width: $daterangepicker-width - ($daterangepicker-calendar-margin * 2);
238
+ margin: $daterangepicker-calendar-margin;
239
+
240
+ &.single {
241
+ .calendar-table {
242
+ border: none;
243
+ }
244
+ }
245
+
246
+ th, td {
247
+ white-space: nowrap;
248
+ text-align: center;
249
+
250
+ // TODO: Should this actually be hard-coded?
251
+ min-width: 32px;
252
+ }
253
+ }
254
+
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
+ }
261
+
262
+ table {
263
+ width: 100%;
264
+ margin: 0;
265
+ }
266
+
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
+ }
287
+
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
+ }
328
+
329
+ th {
330
+ &.month {
331
+ width: auto;
332
+ }
333
+ }
334
+
335
+ //
336
+ // Disabled Controls
337
+ //
338
+ td, option {
339
+ &.disabled {
340
+ color: #999;
341
+ cursor: not-allowed;
342
+ text-decoration: line-through;
343
+ }
344
+ }
345
+
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
+ }
369
+
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%;
386
+
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
+ }
392
+
393
+ .daterangepicker_input {
394
+ position: relative;
395
+
396
+ i {
397
+ position: absolute;
398
+
399
+ // NOTE: These appear to be eyeballed to me...
400
+ left: 8px;
401
+ top: 8px;
402
+ }
403
+ }
404
+
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
+ }
422
+ }
423
+
424
+ //
425
+ // Predefined Ranges
426
+ //
427
+
428
+ .ranges {
429
+ font-size: 11px;
430
+ float: none;
431
+ margin: 4px;
432
+ text-align: left;
317
433
 
318
- .daterangepicker th.month {
319
- width: auto;
434
+ ul {
435
+ list-style: none;
436
+ margin: 0 auto;
437
+ padding: 0;
438
+ width: 100%;
439
+ }
440
+
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
+ }
463
+ }
464
+
465
+ /* Larger Screen Styling */
466
+ @media (min-width: 564px) {
467
+ .#{$prefix-class} {
468
+ width: auto;
469
+
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
+ }
526
+ }
527
+ }
528
+
529
+ @media (min-width: 730px) {
530
+ .#{$prefix-class} {
531
+ .ranges {
532
+ width: auto;
533
+ float: left;
534
+ }
535
+
536
+ .calendar.left {
537
+ clear: none;
538
+ }
539
+ }
320
540
  }