playbook_ui 6.1.0.pre.alpha2 → 6.1.0.pre.alpha3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (42) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +0 -1
  3. data/app/pb_kits/playbook/data/menu.yml +0 -1
  4. data/app/pb_kits/playbook/index.js +0 -2
  5. data/app/pb_kits/playbook/packs/examples.js +0 -2
  6. data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb +1 -1
  7. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +5 -0
  8. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +7 -4
  9. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +2 -2
  10. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +2 -2
  11. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +2 -2
  12. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +2 -2
  13. data/app/pb_kits/playbook/pb_form/form_builder.rb +2 -1
  14. data/app/pb_kits/playbook/pb_form/form_builder/checkbox_field.rb +30 -0
  15. data/app/pb_kits/playbook/pb_form/form_builder/form_field_builder.rb +1 -0
  16. data/app/pb_kits/playbook/vendor.js +0 -6
  17. data/lib/playbook/version.rb +1 -1
  18. metadata +3 -26
  19. data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +0 -38
  20. data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +0 -101
  21. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +0 -846
  22. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +0 -41
  23. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +0 -91
  24. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb +0 -1
  25. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx +0 -12
  26. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +0 -24
  27. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +0 -30
  28. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb +0 -43
  29. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx +0 -48
  30. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +0 -4
  31. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +0 -13
  32. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +0 -19
  33. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx +0 -25
  34. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.html.erb +0 -4
  35. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx +0 -13
  36. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb +0 -14
  37. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx +0 -22
  38. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +0 -4
  39. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +0 -13
  40. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -23
  41. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +0 -8
  42. data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +0 -41
@@ -1,846 +0,0 @@
1
- // @import "~flatpickr/dist/flatpickr.css";
2
- @import "../pb_textarea/textarea_mixin";
3
- @import "../pb_title/title_mixin";
4
- @import "../tokens/colors";
5
- @import "../pb_caption/caption_mixin";
6
-
7
- [class^=pb_date_picker_kit] {
8
- // input styles
9
- [class^=pb_caption_kit] {
10
- margin-bottom: $space_xs;
11
- display: block;
12
- }
13
- .input_wrapper {
14
- margin-bottom: $space_sm;
15
-
16
- .flatpickr-wrapper {
17
- display: block;
18
- input::placeholder {
19
- @include pb_body_light;
20
- }
21
-
22
- > input:first-child {
23
- @include pb_textarea_light;
24
- @include pb_title_4;
25
- overflow: hidden;
26
- }
27
-
28
- input:focus, input:-webkit-autofill:focus {
29
- @include pb_textarea_focus;
30
- -webkit-box-shadow: 0 0 0px 1000px $focus_input_light inset;
31
- transition: background-color 5000s ease-in-out 0s;
32
- }
33
- }
34
- }
35
-
36
- &.error {
37
- [class^=pb_body_kit] {
38
- margin-top: $space_xs / 2;
39
- }
40
- .flatpickr-wrapper {
41
- > input:first-child {
42
- border-color: $error;
43
- }
44
- }
45
- }
46
- }
47
-
48
- // date-picker styles
49
-
50
- div.flatpickr-weekdays {
51
- margin-top: 5px;
52
- }
53
- span.flatpickr-weekday {
54
- @include caption;
55
- }
56
-
57
- .pb_popover_body {
58
- overflow: visible !important;
59
- }
60
-
61
- // flatpickr manual import
62
-
63
- .flatpickr-calendar {
64
- background: transparent;
65
- opacity: 0;
66
- display: none;
67
- text-align: center;
68
- visibility: hidden;
69
- padding: 0;
70
- -webkit-animation: none;
71
- animation: none;
72
- direction: ltr;
73
- border: 0;
74
- font-size: 14px;
75
- line-height: 24px;
76
- border-radius: 5px;
77
- position: absolute;
78
- width: 307.875px;
79
- -webkit-box-sizing: border-box;
80
- box-sizing: border-box;
81
- -ms-touch-action: manipulation;
82
- touch-action: manipulation;
83
- background: #fff;
84
- -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
85
- box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
86
- }
87
- .flatpickr-calendar.open,
88
- .flatpickr-calendar.inline {
89
- opacity: 1;
90
- max-height: 640px;
91
- visibility: visible;
92
- }
93
- .flatpickr-calendar.open {
94
- display: inline-block;
95
- z-index: 99999;
96
- }
97
- .flatpickr-calendar.animate.open {
98
- -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
99
- animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
100
- }
101
- .flatpickr-calendar.inline {
102
- display: block;
103
- position: relative;
104
- top: 2px;
105
- }
106
- .flatpickr-calendar.static {
107
- position: absolute;
108
- top: calc(100% + 2px);
109
- }
110
- .flatpickr-calendar.static.open {
111
- z-index: 999;
112
- display: block;
113
- }
114
- .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
115
- -webkit-box-shadow: none !important;
116
- box-shadow: none !important;
117
- }
118
- .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
119
- -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
120
- box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
121
- }
122
- .flatpickr-calendar .hasWeeks .dayContainer,
123
- .flatpickr-calendar .hasTime .dayContainer {
124
- border-bottom: 0;
125
- border-bottom-right-radius: 0;
126
- border-bottom-left-radius: 0;
127
- }
128
- .flatpickr-calendar .hasWeeks .dayContainer {
129
- border-left: 0;
130
- }
131
- .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
132
- height: 40px;
133
- border-top: 1px solid #e6e6e6;
134
- }
135
- .flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
136
- height: auto;
137
- }
138
- .flatpickr-calendar:before,
139
- .flatpickr-calendar:after {
140
- position: absolute;
141
- display: block;
142
- pointer-events: none;
143
- border: solid transparent;
144
- content: '';
145
- height: 0;
146
- width: 0;
147
- left: 22px;
148
- }
149
- .flatpickr-calendar.rightMost:before,
150
- .flatpickr-calendar.rightMost:after {
151
- left: auto;
152
- right: 22px;
153
- }
154
- .flatpickr-calendar:before {
155
- border-width: 5px;
156
- margin: 0 -5px;
157
- }
158
- .flatpickr-calendar:after {
159
- border-width: 4px;
160
- margin: 0 -4px;
161
- }
162
- .flatpickr-calendar.arrowTop:before,
163
- .flatpickr-calendar.arrowTop:after {
164
- bottom: 100%;
165
- }
166
- .flatpickr-calendar.arrowTop:before {
167
- border-bottom-color: #e6e6e6;
168
- }
169
- .flatpickr-calendar.arrowTop:after {
170
- border-bottom-color: #fff;
171
- }
172
- .flatpickr-calendar.arrowBottom:before,
173
- .flatpickr-calendar.arrowBottom:after {
174
- top: 100%;
175
- }
176
- .flatpickr-calendar.arrowBottom:before {
177
- border-top-color: #e6e6e6;
178
- }
179
- .flatpickr-calendar.arrowBottom:after {
180
- border-top-color: #fff;
181
- }
182
- .flatpickr-calendar:focus {
183
- outline: 0;
184
- }
185
- .flatpickr-wrapper {
186
- position: relative;
187
- display: inline-block;
188
- }
189
- .flatpickr-months {
190
- display: -webkit-box;
191
- display: -webkit-flex;
192
- display: -ms-flexbox;
193
- display: flex;
194
- }
195
- .flatpickr-months .flatpickr-month {
196
- background: transparent;
197
- color: rgba(0,0,0,0.9);
198
- fill: rgba(0,0,0,0.9);
199
- height: 34px;
200
- line-height: 1;
201
- text-align: center;
202
- position: relative;
203
- -webkit-user-select: none;
204
- -moz-user-select: none;
205
- -ms-user-select: none;
206
- user-select: none;
207
- overflow: hidden;
208
- -webkit-box-flex: 1;
209
- -webkit-flex: 1;
210
- -ms-flex: 1;
211
- flex: 1;
212
- }
213
- .flatpickr-months .flatpickr-prev-month,
214
- .flatpickr-months .flatpickr-next-month {
215
- text-decoration: none;
216
- cursor: pointer;
217
- position: absolute;
218
- top: 0;
219
- height: 34px;
220
- padding: 10px;
221
- z-index: 3;
222
- color: rgba(0,0,0,0.9);
223
- fill: rgba(0,0,0,0.9);
224
- }
225
- .flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
226
- .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
227
- display: none;
228
- }
229
- .flatpickr-months .flatpickr-prev-month i,
230
- .flatpickr-months .flatpickr-next-month i {
231
- position: relative;
232
- }
233
- .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
234
- .flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
235
- /*
236
- /*rtl:begin:ignore*/
237
- /*
238
- */
239
- left: 0;
240
- /*
241
- /*rtl:end:ignore*/
242
- /*
243
- */
244
- }
245
- /*
246
- /*rtl:begin:ignore*/
247
- /*
248
- /*rtl:end:ignore*/
249
- .flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
250
- .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
251
- /*
252
- /*rtl:begin:ignore*/
253
- /*
254
- */
255
- right: 0;
256
- /*
257
- /*rtl:end:ignore*/
258
- /*
259
- */
260
- }
261
- /*
262
- /*rtl:begin:ignore*/
263
- /*
264
- /*rtl:end:ignore*/
265
- .flatpickr-months .flatpickr-prev-month:hover,
266
- .flatpickr-months .flatpickr-next-month:hover {
267
- color: #959ea9;
268
- }
269
- .flatpickr-months .flatpickr-prev-month:hover svg,
270
- .flatpickr-months .flatpickr-next-month:hover svg {
271
- fill: #f64747;
272
- }
273
- .flatpickr-months .flatpickr-prev-month svg,
274
- .flatpickr-months .flatpickr-next-month svg {
275
- width: 14px;
276
- height: 14px;
277
- }
278
- .flatpickr-months .flatpickr-prev-month svg path,
279
- .flatpickr-months .flatpickr-next-month svg path {
280
- -webkit-transition: fill 0.1s;
281
- transition: fill 0.1s;
282
- fill: inherit;
283
- }
284
- .numInputWrapper {
285
- position: relative;
286
- height: auto;
287
- }
288
- .numInputWrapper input,
289
- .numInputWrapper span {
290
- display: inline-block;
291
- }
292
- .numInputWrapper input {
293
- width: 100%;
294
- }
295
- .numInputWrapper input::-ms-clear {
296
- display: none;
297
- }
298
- .numInputWrapper input::-webkit-outer-spin-button,
299
- .numInputWrapper input::-webkit-inner-spin-button {
300
- margin: 0;
301
- -webkit-appearance: none;
302
- }
303
- .numInputWrapper span {
304
- position: absolute;
305
- right: 0;
306
- width: 14px;
307
- padding: 0 4px 0 2px;
308
- height: 50%;
309
- line-height: 50%;
310
- opacity: 0;
311
- cursor: pointer;
312
- border: 1px solid rgba(57,57,57,0.15);
313
- -webkit-box-sizing: border-box;
314
- box-sizing: border-box;
315
- }
316
- .numInputWrapper span:hover {
317
- background: rgba(0,0,0,0.1);
318
- }
319
- .numInputWrapper span:active {
320
- background: rgba(0,0,0,0.2);
321
- }
322
- .numInputWrapper span:after {
323
- display: block;
324
- content: "";
325
- position: absolute;
326
- }
327
- .numInputWrapper span.arrowUp {
328
- top: 0;
329
- border-bottom: 0;
330
- }
331
- .numInputWrapper span.arrowUp:after {
332
- border-left: 4px solid transparent;
333
- border-right: 4px solid transparent;
334
- border-bottom: 4px solid rgba(57,57,57,0.6);
335
- top: 26%;
336
- }
337
- .numInputWrapper span.arrowDown {
338
- top: 50%;
339
- }
340
- .numInputWrapper span.arrowDown:after {
341
- border-left: 4px solid transparent;
342
- border-right: 4px solid transparent;
343
- border-top: 4px solid rgba(57,57,57,0.6);
344
- top: 40%;
345
- }
346
- .numInputWrapper span svg {
347
- width: inherit;
348
- height: auto;
349
- }
350
- .numInputWrapper span svg path {
351
- fill: rgba(0,0,0,0.5);
352
- }
353
- .numInputWrapper:hover {
354
- background: rgba(0,0,0,0.05);
355
- }
356
- .numInputWrapper:hover span {
357
- opacity: 1;
358
- }
359
- .flatpickr-current-month {
360
- font-size: 135%;
361
- line-height: inherit;
362
- font-weight: 300;
363
- color: inherit;
364
- position: absolute;
365
- width: 75%;
366
- left: 12.5%;
367
- padding: 7.48px 0 0 0;
368
- line-height: 1;
369
- height: 34px;
370
- display: inline-block;
371
- text-align: center;
372
- -webkit-transform: translate3d(0px, 0px, 0px);
373
- transform: translate3d(0px, 0px, 0px);
374
- }
375
- .flatpickr-current-month span.cur-month {
376
- font-family: inherit;
377
- font-weight: 700;
378
- color: inherit;
379
- display: inline-block;
380
- margin-left: 0.5ch;
381
- padding: 0;
382
- }
383
- .flatpickr-current-month span.cur-month:hover {
384
- background: rgba(0,0,0,0.05);
385
- }
386
- .flatpickr-current-month .numInputWrapper {
387
- width: 6ch;
388
- width: 7ch\0;
389
- display: inline-block;
390
- }
391
- .flatpickr-current-month .numInputWrapper span.arrowUp:after {
392
- border-bottom-color: rgba(0,0,0,0.9);
393
- }
394
- .flatpickr-current-month .numInputWrapper span.arrowDown:after {
395
- border-top-color: rgba(0,0,0,0.9);
396
- }
397
- .flatpickr-current-month input.cur-year {
398
- background: transparent;
399
- -webkit-box-sizing: border-box;
400
- box-sizing: border-box;
401
- color: inherit;
402
- cursor: text;
403
- padding: 0 0 0 0.5ch;
404
- margin: 0;
405
- display: inline-block;
406
- font-size: inherit;
407
- font-family: inherit;
408
- font-weight: 300;
409
- line-height: inherit;
410
- height: auto;
411
- border: 0;
412
- border-radius: 0;
413
- vertical-align: initial;
414
- -webkit-appearance: textfield;
415
- -moz-appearance: textfield;
416
- appearance: textfield;
417
- }
418
- .flatpickr-current-month input.cur-year:focus {
419
- outline: 0;
420
- }
421
- .flatpickr-current-month input.cur-year[disabled],
422
- .flatpickr-current-month input.cur-year[disabled]:hover {
423
- font-size: 100%;
424
- color: rgba(0,0,0,0.5);
425
- background: transparent;
426
- pointer-events: none;
427
- }
428
- .flatpickr-current-month .flatpickr-monthDropdown-months {
429
- appearance: menulist;
430
- background: transparent;
431
- border: none;
432
- border-radius: 0;
433
- box-sizing: border-box;
434
- color: inherit;
435
- cursor: pointer;
436
- font-size: inherit;
437
- font-family: inherit;
438
- font-weight: 300;
439
- height: auto;
440
- line-height: inherit;
441
- margin: -1px 0 0 0;
442
- outline: none;
443
- padding: 0 0 0 0.5ch;
444
- position: relative;
445
- vertical-align: initial;
446
- -webkit-box-sizing: border-box;
447
- -webkit-appearance: menulist;
448
- -moz-appearance: menulist;
449
- width: auto;
450
- }
451
- .flatpickr-current-month .flatpickr-monthDropdown-months:focus,
452
- .flatpickr-current-month .flatpickr-monthDropdown-months:active {
453
- outline: none;
454
- }
455
- .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
456
- background: rgba(0,0,0,0.05);
457
- }
458
- .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
459
- background-color: transparent;
460
- outline: none;
461
- padding: 0;
462
- }
463
- .flatpickr-weekdays {
464
- background: transparent;
465
- text-align: center;
466
- overflow: hidden;
467
- width: 100%;
468
- display: -webkit-box;
469
- display: -webkit-flex;
470
- display: -ms-flexbox;
471
- display: flex;
472
- -webkit-box-align: center;
473
- -webkit-align-items: center;
474
- -ms-flex-align: center;
475
- align-items: center;
476
- height: 28px;
477
- }
478
- .flatpickr-weekdays .flatpickr-weekdaycontainer {
479
- display: -webkit-box;
480
- display: -webkit-flex;
481
- display: -ms-flexbox;
482
- display: flex;
483
- -webkit-box-flex: 1;
484
- -webkit-flex: 1;
485
- -ms-flex: 1;
486
- flex: 1;
487
- }
488
- span.flatpickr-weekday {
489
- cursor: default;
490
- font-size: 90%;
491
- background: transparent;
492
- color: rgba(0,0,0,0.54);
493
- line-height: 1;
494
- margin: 0;
495
- text-align: center;
496
- display: block;
497
- -webkit-box-flex: 1;
498
- -webkit-flex: 1;
499
- -ms-flex: 1;
500
- flex: 1;
501
- font-weight: bolder;
502
- }
503
- .dayContainer,
504
- .flatpickr-weeks {
505
- padding: 1px 0 0 0;
506
- }
507
- .flatpickr-days {
508
- position: relative;
509
- overflow: hidden;
510
- display: -webkit-box;
511
- display: -webkit-flex;
512
- display: -ms-flexbox;
513
- display: flex;
514
- -webkit-box-align: start;
515
- -webkit-align-items: flex-start;
516
- -ms-flex-align: start;
517
- align-items: flex-start;
518
- width: 307.875px;
519
- }
520
- .flatpickr-days:focus {
521
- outline: 0;
522
- }
523
- .dayContainer {
524
- padding: 0;
525
- outline: 0;
526
- text-align: left;
527
- width: 307.875px;
528
- min-width: 307.875px;
529
- max-width: 307.875px;
530
- -webkit-box-sizing: border-box;
531
- box-sizing: border-box;
532
- display: inline-block;
533
- display: -ms-flexbox;
534
- display: -webkit-box;
535
- display: -webkit-flex;
536
- display: flex;
537
- -webkit-flex-wrap: wrap;
538
- flex-wrap: wrap;
539
- -ms-flex-wrap: wrap;
540
- -ms-flex-pack: justify;
541
- -webkit-justify-content: space-around;
542
- justify-content: space-around;
543
- -webkit-transform: translate3d(0px, 0px, 0px);
544
- transform: translate3d(0px, 0px, 0px);
545
- opacity: 1;
546
- }
547
- .dayContainer + .dayContainer {
548
- -webkit-box-shadow: -1px 0 0 #e6e6e6;
549
- box-shadow: -1px 0 0 #e6e6e6;
550
- }
551
- .flatpickr-day {
552
- background: none;
553
- border: 1px solid transparent;
554
- border-radius: 150px;
555
- -webkit-box-sizing: border-box;
556
- box-sizing: border-box;
557
- color: #393939;
558
- cursor: pointer;
559
- font-weight: 400;
560
- width: 14.2857143%;
561
- -webkit-flex-basis: 14.2857143%;
562
- -ms-flex-preferred-size: 14.2857143%;
563
- flex-basis: 14.2857143%;
564
- max-width: 39px;
565
- height: 39px;
566
- line-height: 39px;
567
- margin: 0;
568
- display: inline-block;
569
- position: relative;
570
- -webkit-box-pack: center;
571
- -webkit-justify-content: center;
572
- -ms-flex-pack: center;
573
- justify-content: center;
574
- text-align: center;
575
- }
576
- .flatpickr-day.inRange,
577
- .flatpickr-day.prevMonthDay.inRange,
578
- .flatpickr-day.nextMonthDay.inRange,
579
- .flatpickr-day.today.inRange,
580
- .flatpickr-day.prevMonthDay.today.inRange,
581
- .flatpickr-day.nextMonthDay.today.inRange,
582
- .flatpickr-day:hover,
583
- .flatpickr-day.prevMonthDay:hover,
584
- .flatpickr-day.nextMonthDay:hover,
585
- .flatpickr-day:focus,
586
- .flatpickr-day.prevMonthDay:focus,
587
- .flatpickr-day.nextMonthDay:focus {
588
- cursor: pointer;
589
- outline: 0;
590
- background: #e6e6e6;
591
- border-color: #e6e6e6;
592
- }
593
- .flatpickr-day.today {
594
- border-color: #959ea9;
595
- }
596
- .flatpickr-day.today:hover,
597
- .flatpickr-day.today:focus {
598
- border-color: #959ea9;
599
- background: #959ea9;
600
- color: #fff;
601
- }
602
- .flatpickr-day.selected,
603
- .flatpickr-day.startRange,
604
- .flatpickr-day.endRange,
605
- .flatpickr-day.selected.inRange,
606
- .flatpickr-day.startRange.inRange,
607
- .flatpickr-day.endRange.inRange,
608
- .flatpickr-day.selected:focus,
609
- .flatpickr-day.startRange:focus,
610
- .flatpickr-day.endRange:focus,
611
- .flatpickr-day.selected:hover,
612
- .flatpickr-day.startRange:hover,
613
- .flatpickr-day.endRange:hover,
614
- .flatpickr-day.selected.prevMonthDay,
615
- .flatpickr-day.startRange.prevMonthDay,
616
- .flatpickr-day.endRange.prevMonthDay,
617
- .flatpickr-day.selected.nextMonthDay,
618
- .flatpickr-day.startRange.nextMonthDay,
619
- .flatpickr-day.endRange.nextMonthDay {
620
- background: #569ff7;
621
- -webkit-box-shadow: none;
622
- box-shadow: none;
623
- color: #fff;
624
- border-color: #569ff7;
625
- }
626
- .flatpickr-day.selected.startRange,
627
- .flatpickr-day.startRange.startRange,
628
- .flatpickr-day.endRange.startRange {
629
- border-radius: 50px 0 0 50px;
630
- }
631
- .flatpickr-day.selected.endRange,
632
- .flatpickr-day.startRange.endRange,
633
- .flatpickr-day.endRange.endRange {
634
- border-radius: 0 50px 50px 0;
635
- }
636
- .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
637
- .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
638
- .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
639
- -webkit-box-shadow: -10px 0 0 #569ff7;
640
- box-shadow: -10px 0 0 #569ff7;
641
- }
642
- .flatpickr-day.selected.startRange.endRange,
643
- .flatpickr-day.startRange.startRange.endRange,
644
- .flatpickr-day.endRange.startRange.endRange {
645
- border-radius: 50px;
646
- }
647
- .flatpickr-day.inRange {
648
- border-radius: 0;
649
- -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
650
- box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
651
- }
652
- .flatpickr-day.flatpickr-disabled,
653
- .flatpickr-day.flatpickr-disabled:hover,
654
- .flatpickr-day.prevMonthDay,
655
- .flatpickr-day.nextMonthDay,
656
- .flatpickr-day.notAllowed,
657
- .flatpickr-day.notAllowed.prevMonthDay,
658
- .flatpickr-day.notAllowed.nextMonthDay {
659
- color: rgba(57,57,57,0.3);
660
- background: transparent;
661
- border-color: transparent;
662
- cursor: default;
663
- }
664
- .flatpickr-day.flatpickr-disabled,
665
- .flatpickr-day.flatpickr-disabled:hover {
666
- cursor: not-allowed;
667
- color: rgba(57,57,57,0.1);
668
- }
669
- .flatpickr-day.week.selected {
670
- border-radius: 0;
671
- -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
672
- box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
673
- }
674
- .flatpickr-day.hidden {
675
- visibility: hidden;
676
- }
677
- .rangeMode .flatpickr-day {
678
- margin-top: 1px;
679
- }
680
- .flatpickr-weekwrapper {
681
- float: left;
682
- }
683
- .flatpickr-weekwrapper .flatpickr-weeks {
684
- padding: 0 12px;
685
- -webkit-box-shadow: 1px 0 0 #e6e6e6;
686
- box-shadow: 1px 0 0 #e6e6e6;
687
- }
688
- .flatpickr-weekwrapper .flatpickr-weekday {
689
- float: none;
690
- width: 100%;
691
- line-height: 28px;
692
- }
693
- .flatpickr-weekwrapper span.flatpickr-day,
694
- .flatpickr-weekwrapper span.flatpickr-day:hover {
695
- display: block;
696
- width: 100%;
697
- max-width: none;
698
- color: rgba(57,57,57,0.3);
699
- background: transparent;
700
- cursor: default;
701
- border: none;
702
- }
703
- .flatpickr-innerContainer {
704
- display: block;
705
- display: -webkit-box;
706
- display: -webkit-flex;
707
- display: -ms-flexbox;
708
- display: flex;
709
- -webkit-box-sizing: border-box;
710
- box-sizing: border-box;
711
- overflow: hidden;
712
- }
713
- .flatpickr-rContainer {
714
- display: inline-block;
715
- padding: 0;
716
- -webkit-box-sizing: border-box;
717
- box-sizing: border-box;
718
- }
719
- .flatpickr-time {
720
- text-align: center;
721
- outline: 0;
722
- display: block;
723
- height: 0;
724
- line-height: 40px;
725
- max-height: 40px;
726
- -webkit-box-sizing: border-box;
727
- box-sizing: border-box;
728
- overflow: hidden;
729
- display: -webkit-box;
730
- display: -webkit-flex;
731
- display: -ms-flexbox;
732
- display: flex;
733
- }
734
- .flatpickr-time:after {
735
- content: "";
736
- display: table;
737
- clear: both;
738
- }
739
- .flatpickr-time .numInputWrapper {
740
- -webkit-box-flex: 1;
741
- -webkit-flex: 1;
742
- -ms-flex: 1;
743
- flex: 1;
744
- width: 40%;
745
- height: 40px;
746
- float: left;
747
- }
748
- .flatpickr-time .numInputWrapper span.arrowUp:after {
749
- border-bottom-color: #393939;
750
- }
751
- .flatpickr-time .numInputWrapper span.arrowDown:after {
752
- border-top-color: #393939;
753
- }
754
- .flatpickr-time.hasSeconds .numInputWrapper {
755
- width: 26%;
756
- }
757
- .flatpickr-time.time24hr .numInputWrapper {
758
- width: 49%;
759
- }
760
- .flatpickr-time input {
761
- background: transparent;
762
- -webkit-box-shadow: none;
763
- box-shadow: none;
764
- border: 0;
765
- border-radius: 0;
766
- text-align: center;
767
- margin: 0;
768
- padding: 0;
769
- height: inherit;
770
- line-height: inherit;
771
- color: #393939;
772
- font-size: 14px;
773
- position: relative;
774
- -webkit-box-sizing: border-box;
775
- box-sizing: border-box;
776
- -webkit-appearance: textfield;
777
- -moz-appearance: textfield;
778
- appearance: textfield;
779
- }
780
- .flatpickr-time input.flatpickr-hour {
781
- font-weight: bold;
782
- }
783
- .flatpickr-time input.flatpickr-minute,
784
- .flatpickr-time input.flatpickr-second {
785
- font-weight: 400;
786
- }
787
- .flatpickr-time input:focus {
788
- outline: 0;
789
- border: 0;
790
- }
791
- .flatpickr-time .flatpickr-time-separator,
792
- .flatpickr-time .flatpickr-am-pm {
793
- height: inherit;
794
- float: left;
795
- line-height: inherit;
796
- color: #393939;
797
- font-weight: bold;
798
- width: 2%;
799
- -webkit-user-select: none;
800
- -moz-user-select: none;
801
- -ms-user-select: none;
802
- user-select: none;
803
- -webkit-align-self: center;
804
- -ms-flex-item-align: center;
805
- align-self: center;
806
- }
807
- .flatpickr-time .flatpickr-am-pm {
808
- outline: 0;
809
- width: 18%;
810
- cursor: pointer;
811
- text-align: center;
812
- font-weight: 400;
813
- }
814
- .flatpickr-time input:hover,
815
- .flatpickr-time .flatpickr-am-pm:hover,
816
- .flatpickr-time input:focus,
817
- .flatpickr-time .flatpickr-am-pm:focus {
818
- background: #eee;
819
- }
820
- .flatpickr-input[readonly] {
821
- cursor: pointer;
822
- }
823
- @-webkit-keyframes fpFadeInDown {
824
- from {
825
- opacity: 0;
826
- -webkit-transform: translate3d(0, -20px, 0);
827
- transform: translate3d(0, -20px, 0);
828
- }
829
- to {
830
- opacity: 1;
831
- -webkit-transform: translate3d(0, 0, 0);
832
- transform: translate3d(0, 0, 0);
833
- }
834
- }
835
- @keyframes fpFadeInDown {
836
- from {
837
- opacity: 0;
838
- -webkit-transform: translate3d(0, -20px, 0);
839
- transform: translate3d(0, -20px, 0);
840
- }
841
- to {
842
- opacity: 1;
843
- -webkit-transform: translate3d(0, 0, 0);
844
- transform: translate3d(0, 0, 0);
845
- }
846
- }