jekyll-theme-mdui 0.2.3 → 0.2.4

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,737 +1,737 @@
1
- ---
2
- layout: compress
3
- ---
4
- /**
5
- * The picker input element.
6
- */
7
- .picker__table th{
8
- padding: 15px 5px;
9
- padding-top: 15px;
10
- padding-right: 5px;
11
- padding-bottom: 15px;
12
- padding-left: 5px;
13
- display: table-cell;
14
- text-align: left;
15
- vertical-align: middle;
16
- border-radius: 2px;
17
- }
18
- .picker__input {
19
- cursor: default;
20
- }
21
-
22
- /**
23
- * When the picker is opened, the input element is "activated".
24
- */
25
- .picker__input.picker__input--active {
26
- border-color: #0089ec;
27
- }
28
-
29
- /**
30
- * The holder is the only "scrollable" top-level container element.
31
- */
32
- .picker__holder {
33
- width: 100%;
34
- overflow-y: auto;
35
- -webkit-overflow-scrolling: touch;
36
- }
37
-
38
- /*!
39
- * Default mobile-first, responsive styling for pickadate.js
40
- * Demo: http://amsul.github.io/pickadate.js
41
- */
42
- /**
43
- * Note: the root picker element should *NOT* be styled more than what's here.
44
- */
45
- /**
46
- * Make the holder and frame fullscreen.
47
- */
48
- .picker__holder,
49
- .picker__frame {
50
- bottom: 0;
51
- left: 0;
52
- right: 0;
53
- top: 100%;
54
- }
55
-
56
- /**
57
- * The holder should overlay the entire screen.
58
- */
59
- .picker__holder {
60
- z-index: 10000;
61
- position: fixed;
62
- transition: background 0.15s ease-out, top 0s 0.15s;
63
- -webkit-backface-visibility: hidden;
64
- }
65
-
66
- /**
67
- * The frame that bounds the box contents of the picker.
68
- */
69
- .picker__frame {
70
- position: absolute;
71
- margin: 0 auto;
72
- min-width: 256px;
73
- width: 300px;
74
- max-height: 350px;
75
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
76
- filter: alpha(opacity=0);
77
- -moz-opacity: 0;
78
- opacity: 0;
79
- transition: all 0.15s ease-out;
80
- }
81
-
82
- @media (min-height: 28.875em) {
83
- .picker__frame {
84
- overflow: visible;
85
- top: auto;
86
- bottom: -100%;
87
- max-height: 80%;
88
- }
89
- }
90
-
91
- @media (min-height: 40.125em) {
92
- .picker__frame {
93
- margin-bottom: 7.5%;
94
- }
95
- }
96
-
97
- /**
98
- * The wrapper sets the stage to vertically align the box contents.
99
- */
100
- .picker__wrap {
101
- display: table;
102
- width: 100%;
103
- height: 100%;
104
- }
105
-
106
- @media (min-height: 28.875em) {
107
- .picker__wrap {
108
- display: block;
109
- }
110
- }
111
-
112
- /**
113
- * The box contains all the picker contents.
114
- */
115
- .picker__box {
116
- background: #ffffff;
117
- display: table-cell;
118
- vertical-align: middle;
119
- }
120
-
121
- @media (min-height: 28.875em) {
122
- .picker__box {
123
- display: block;
124
- border: 1px solid #777777;
125
- border-top-color: #898989;
126
- border-bottom-width: 0;
127
- border-radius: 5px 5px 0 0;
128
- box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
129
- }
130
- }
131
-
132
- /**
133
- * When the picker opens...
134
- */
135
- .picker--opened .picker__holder {
136
- top: 0;
137
- background: transparent;
138
- -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)";
139
- zoom: 1;
140
- background: rgba(0, 0, 0, 0.32);
141
- transition: background 0.15s ease-out;
142
- }
143
-
144
- .picker--opened .picker__frame {
145
- top: 0;
146
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
147
- filter: alpha(opacity=100);
148
- -moz-opacity: 1;
149
- opacity: 1;
150
- }
151
-
152
- @media (min-height: 35.875em) {
153
- .picker--opened .picker__frame {
154
- top: 10%;
155
- bottom: auto;
156
- }
157
- }
158
-
159
- /**
160
- * For `large` screens, transform into an inline picker.
161
- */
162
- /* ==========================================================================
163
- CUSTOM MATERIALIZE STYLES
164
- ========================================================================== */
165
- .picker__input.picker__input--active {
166
- border-color: #E3F2FD;
167
- }
168
-
169
- .picker__frame {
170
- margin: 0 auto;
171
- max-width: 325px;
172
- }
173
-
174
- @media (min-height: 38.875em) {
175
- .picker--opened .picker__frame {
176
- top: 10%;
177
- bottom: auto;
178
- }
179
- }
180
-
181
- /* ==========================================================================
182
- $BASE-DATE-PICKER
183
- ========================================================================== */
184
- /**
185
- * The picker box.
186
- */
187
- .picker__box {
188
- padding: 0 1em;
189
- }
190
-
191
- /**
192
- * The header containing the month and year stuff.
193
- */
194
- .picker__header {
195
- text-align: center;
196
- position: relative;
197
- margin-top: .75em;
198
- }
199
-
200
- /**
201
- * The month and year labels.
202
- */
203
- .picker__month,
204
- .picker__year {
205
- display: inline-block;
206
- margin-left: .25em;
207
- margin-right: .25em;
208
- }
209
-
210
- /**
211
- * The month and year selectors.
212
- */
213
- .picker__select--month,
214
- .picker__select--year {
215
- height: 2em;
216
- padding: 0;
217
- margin-left: .25em;
218
- margin-right: .25em;
219
- }
220
-
221
- .picker__select--month.browser-default {
222
- display: inline;
223
- background-color: #FFFFFF;
224
- width: 40%;
225
- }
226
-
227
- .picker__select--year.browser-default {
228
- display: inline;
229
- background-color: #FFFFFF;
230
- width: 26%;
231
- }
232
-
233
- .picker__select--month:focus,
234
- .picker__select--year:focus {
235
- border-color: rgba(0, 0, 0, 0.05);
236
- }
237
-
238
- /**
239
- * The month navigation buttons.
240
- */
241
- .picker__nav--prev,
242
- .picker__nav--next {
243
- position: absolute;
244
- padding: .5em 1.25em;
245
- width: 1em;
246
- height: 1em;
247
- box-sizing: content-box;
248
- top: -0.25em;
249
- }
250
-
251
- .picker__nav--prev {
252
- left: -1em;
253
- padding-right: 1.25em;
254
- }
255
-
256
- .picker__nav--next {
257
- right: -1em;
258
- padding-left: 1.25em;
259
- }
260
-
261
- .picker__nav--disabled,
262
- .picker__nav--disabled:hover,
263
- .picker__nav--disabled:before,
264
- .picker__nav--disabled:before:hover {
265
- cursor: default;
266
- background: none;
267
- border-right-color: #f5f5f5;
268
- border-left-color: #f5f5f5;
269
- }
270
-
271
- /**
272
- * The calendar table of dates
273
- */
274
- .picker__table {
275
- text-align: center;
276
- border-collapse: collapse;
277
- border-spacing: 0;
278
- table-layout: fixed;
279
- font-size: 1rem;
280
- width: 100%;
281
- margin-top: .75em;
282
- margin-bottom: .5em;
283
- }
284
-
285
- .picker__table th, .picker__table td {
286
- text-align: center;
287
- }
288
-
289
- .picker__table td {
290
- margin: 0;
291
- padding: 0;
292
- }
293
-
294
- /**
295
- * The weekday labels
296
- */
297
- .picker__weekday {
298
- width: 14.285714286%;
299
- font-size: .75em;
300
- padding-bottom: .25em;
301
- color: #999999;
302
- font-weight: 500;
303
- /* Increase the spacing a tad */
304
- }
305
-
306
- @media (min-height: 33.875em) {
307
- .picker__weekday {
308
- padding-bottom: .5em;
309
- }
310
- }
311
-
312
- /**
313
- * The days on the calendar
314
- */
315
- .picker__day--today {
316
- position: relative;
317
- color: #595959;
318
- letter-spacing: -.3;
319
- padding: .75rem 0;
320
- font-weight: 400;
321
- border: 1px solid transparent;
322
- }
323
-
324
- .picker__day--disabled:before {
325
- border-top-color: #aaaaaa;
326
- }
327
-
328
- .picker__day--infocus:hover {
329
- cursor: pointer;
330
- color: #000;
331
- font-weight: 500;
332
- }
333
-
334
- .picker__day--outfocus {
335
- display: none;
336
- padding: .75rem 0;
337
- color: #fff;
338
- }
339
-
340
- .picker__day--outfocus:hover {
341
- cursor: pointer;
342
- color: #dddddd;
343
- font-weight: 500;
344
- }
345
-
346
- .picker__day--highlighted:hover,
347
- .picker--focused .picker__day--highlighted {
348
- cursor: pointer;
349
- }
350
-
351
- .picker__day--selected,
352
- .picker__day--selected:hover,
353
- .picker--focused .picker__day--selected {
354
- border-radius: 50%;
355
- -webkit-transform: scale(0.75);
356
- transform: scale(0.75);
357
- background: #0089ec;
358
- color: #ffffff;
359
- width: 40px;
360
- }
361
-
362
- .picker__day--disabled,
363
- .picker__day--disabled:hover,
364
- .picker--focused .picker__day--disabled {
365
- background: #f5f5f5;
366
- border-color: #f5f5f5;
367
- color: #dddddd;
368
- cursor: default;
369
- }
370
-
371
- .picker__day--highlighted.picker__day--disabled,
372
- .picker__day--highlighted.picker__day--disabled:hover {
373
- background: #bbbbbb;
374
- }
375
-
376
- /**
377
- * The footer containing the "today", "clear", and "close" buttons.
378
- */
379
- .picker__footer {
380
- text-align: center;
381
- display: -webkit-flex;
382
- display: -ms-flexbox;
383
- display: flex;
384
- -webkit-align-items: center;
385
- -ms-flex-align: center;
386
- align-items: center;
387
- -webkit-justify-content: space-between;
388
- -ms-flex-pack: justify;
389
- justify-content: space-between;
390
- }
391
-
392
- .picker__button--today,
393
- .picker__button--clear,
394
- .picker__button--close {
395
- border: 1px solid #ffffff;
396
- background: #ffffff;
397
- font-size: .8em;
398
- padding: .66em 0;
399
- font-weight: bold;
400
- width: 33%;
401
- display: inline-block;
402
- vertical-align: bottom;
403
- }
404
-
405
- .picker__button--today:hover,
406
- .picker__button--clear:hover,
407
- .picker__button--close:hover {
408
- cursor: pointer;
409
- color: #000000;
410
- background: #b1dcfb;
411
- border-bottom-color: #b1dcfb;
412
- }
413
-
414
- .picker__button--today:focus,
415
- .picker__button--clear:focus,
416
- .picker__button--close:focus {
417
- background: #b1dcfb;
418
- border-color: rgba(0, 0, 0, 0.05);
419
- outline: none;
420
- }
421
-
422
- .picker__button--today:before,
423
- .picker__button--clear:before,
424
- .picker__button--close:before {
425
- position: relative;
426
- display: inline-block;
427
- height: 0;
428
- }
429
-
430
- .picker__button--today:before,
431
- .picker__button--clear:before {
432
- content: " ";
433
- margin-right: .45em;
434
- }
435
-
436
- .picker__button--today:before {
437
- top: -0.05em;
438
- width: 0;
439
- border-top: 0.66em solid #0059bc;
440
- border-left: .66em solid transparent;
441
- }
442
-
443
- .picker__button--clear:before {
444
- top: -0.25em;
445
- width: .66em;
446
- border-top: 3px solid #ee2200;
447
- }
448
-
449
- .picker__button--close:before {
450
- content: "\D7";
451
- top: -0.1em;
452
- vertical-align: top;
453
- font-size: 1.1em;
454
- margin-right: .35em;
455
- color: #777777;
456
- }
457
-
458
- .picker__button--today[disabled],
459
- .picker__button--today[disabled]:hover {
460
- background: #f5f5f5;
461
- border-color: #f5f5f5;
462
- color: #dddddd;
463
- cursor: default;
464
- }
465
-
466
- .picker__button--today[disabled]:before {
467
- border-top-color: #aaaaaa;
468
- }
469
-
470
- /* ==========================================================================
471
- CUSTOM MATERIALIZE STYLES
472
- ========================================================================== */
473
- .picker__box {
474
- border-radius: 2px;
475
- overflow: hidden;
476
- }
477
-
478
- .picker__date-display {
479
- text-align: center;
480
- background-color: #26a69a;
481
- color: #fff;
482
- padding-bottom: 15px;
483
- font-weight: 300;
484
- }
485
-
486
- .picker__nav--prev:hover,
487
- .picker__nav--next:hover {
488
- cursor: pointer;
489
- color: #000000;
490
- background: #a1ded8;
491
- }
492
-
493
- .picker__weekday-display {
494
- background-color: #1f897f;
495
- padding: 10px;
496
- font-weight: 200;
497
- letter-spacing: .5;
498
- font-size: 1rem;
499
- margin-bottom: 15px;
500
- }
501
-
502
- .picker__month-display {
503
- text-transform: uppercase;
504
- font-size: 2rem;
505
- }
506
-
507
- .picker__day-display {
508
- font-size: 4.5rem;
509
- font-weight: 400;
510
- }
511
-
512
- .picker__year-display {
513
- font-size: 1.8rem;
514
- color: rgba(255, 255, 255, 0.4);
515
- }
516
-
517
- .picker__box {
518
- padding: 0;
519
- }
520
-
521
- .picker__calendar-container {
522
- padding: 0 1rem;
523
- }
524
-
525
- .picker__calendar-container thead {
526
- border: none;
527
- }
528
-
529
- .picker__table {
530
- margin-top: 0;
531
- margin-bottom: .5em;
532
- }
533
-
534
- .picker__day--infocus {
535
- color: #595959;
536
- letter-spacing: -.3;
537
- padding: .75rem 0;
538
- font-weight: 400;
539
- border: 1px solid transparent;
540
- }
541
-
542
- .picker__day.picker__day--today {
543
- color: #26a69a;
544
- }
545
-
546
- .picker__day.picker__day--today.picker__day--selected {
547
- color: #fff;
548
- }
549
-
550
- .picker__weekday {
551
- font-size: .9rem;
552
- }
553
-
554
- .picker__day--selected,
555
- .picker__day--selected:hover,
556
- .picker--focused .picker__day--selected {
557
- border-radius: 50%;
558
- -webkit-transform: scale(0.9);
559
- transform: scale(0.9);
560
- background-color: #26a69a;
561
- color: #ffffff;
562
- }
563
-
564
- .picker__day--selected.picker__day--outfocus,
565
- .picker__day--selected:hover.picker__day--outfocus,
566
- .picker--focused .picker__day--selected.picker__day--outfocus {
567
- background-color: #a1ded8;
568
- }
569
-
570
- .picker__footer {
571
- text-align: right;
572
- padding: 5px 10px;
573
- }
574
-
575
- .picker__close, .picker__today {
576
- padding: 0 1rem;
577
- }
578
-
579
- .picker__nav--prev:before,
580
- .picker__nav--next:before {
581
- content: " ";
582
- border-top: .5em solid transparent;
583
- border-bottom: .5em solid transparent;
584
- border-right: 0.75em solid #676767;
585
- width: 0;
586
- height: 0;
587
- display: block;
588
- margin: 0 auto;
589
- }
590
-
591
- .picker__nav--next:before {
592
- border-right: 0;
593
- border-left: 0.75em solid #676767;
594
- }
595
-
596
- button.picker__today:focus, button.picker__clear:focus, button.picker__close:focus {
597
- background-color: #a1ded8;
598
- }
599
-
600
- /* ==========================================================================
601
- $BASE-TIME-PICKER
602
- ========================================================================== */
603
- /**
604
- * The list of times.
605
- */
606
- .picker__list {
607
- list-style: none;
608
- padding: 0.75em 0 4.2em;
609
- margin: 0;
610
- }
611
-
612
- /**
613
- * The times on the clock.
614
- */
615
- .picker__list-item {
616
- border-bottom: 1px solid #dddddd;
617
- border-top: 1px solid #dddddd;
618
- margin-bottom: -1px;
619
- position: relative;
620
- background: #ffffff;
621
- padding: .75em 1.25em;
622
- }
623
-
624
- @media (min-height: 46.75em) {
625
- .picker__list-item {
626
- padding: .5em 1em;
627
- }
628
- }
629
-
630
- /* Hovered time */
631
- .picker__list-item:hover {
632
- cursor: pointer;
633
- color: #000000;
634
- background: #b1dcfb;
635
- border-color: #0089ec;
636
- z-index: 10;
637
- }
638
-
639
- /* Highlighted and hovered/focused time */
640
- .picker__list-item--highlighted {
641
- border-color: #0089ec;
642
- z-index: 10;
643
- }
644
-
645
- .picker__list-item--highlighted:hover,
646
- .picker--focused .picker__list-item--highlighted {
647
- cursor: pointer;
648
- color: #000000;
649
- background: #b1dcfb;
650
- }
651
-
652
- /* Selected and hovered/focused time */
653
- .picker__list-item--selected,
654
- .picker__list-item--selected:hover,
655
- .picker--focused .picker__list-item--selected {
656
- background: #0089ec;
657
- color: #ffffff;
658
- z-index: 10;
659
- }
660
-
661
- /* Disabled time */
662
- .picker__list-item--disabled,
663
- .picker__list-item--disabled:hover,
664
- .picker--focused .picker__list-item--disabled {
665
- background: #f5f5f5;
666
- border-color: #f5f5f5;
667
- color: #dddddd;
668
- cursor: default;
669
- border-color: #dddddd;
670
- z-index: auto;
671
- }
672
-
673
- /**
674
- * The clear button
675
- */
676
- .picker--time .picker__button--clear {
677
- display: block;
678
- width: 80%;
679
- margin: 1em auto 0;
680
- padding: 1em 1.25em;
681
- background: none;
682
- border: 0;
683
- font-weight: 500;
684
- font-size: .67em;
685
- text-align: center;
686
- text-transform: uppercase;
687
- color: #666;
688
- }
689
-
690
- .picker--time .picker__button--clear:hover,
691
- .picker--time .picker__button--clear:focus {
692
- color: #000000;
693
- background: #b1dcfb;
694
- background: #ee2200;
695
- border-color: #ee2200;
696
- cursor: pointer;
697
- color: #ffffff;
698
- outline: none;
699
- }
700
-
701
- .picker--time .picker__button--clear:before {
702
- top: -0.25em;
703
- color: #666;
704
- font-size: 1.25em;
705
- font-weight: bold;
706
- }
707
-
708
- .picker--time .picker__button--clear:hover:before,
709
- .picker--time .picker__button--clear:focus:before {
710
- color: #ffffff;
711
- }
712
-
713
- /* ==========================================================================
714
- $DEFAULT-TIME-PICKER
715
- ========================================================================== */
716
- /**
717
- * The frame the bounds the time picker.
718
- */
719
- .picker--time .picker__frame {
720
- min-width: 256px;
721
- max-width: 320px;
722
- }
723
-
724
- /**
725
- * The picker box.
726
- */
727
- .picker--time .picker__box {
728
- font-size: 1em;
729
- background: #f2f2f2;
730
- padding: 0;
731
- }
732
-
733
- @media (min-height: 40.125em) {
734
- .picker--time .picker__box {
735
- margin-bottom: 5em;
736
- }
737
- }
1
+ ---
2
+ layout: compress
3
+ ---
4
+ /**
5
+ * The picker input element.
6
+ */
7
+ .picker__table th{
8
+ padding: 15px 5px;
9
+ padding-top: 15px;
10
+ padding-right: 5px;
11
+ padding-bottom: 15px;
12
+ padding-left: 5px;
13
+ display: table-cell;
14
+ text-align: left;
15
+ vertical-align: middle;
16
+ border-radius: 2px;
17
+ }
18
+ .picker__input {
19
+ cursor: default;
20
+ }
21
+
22
+ /**
23
+ * When the picker is opened, the input element is "activated".
24
+ */
25
+ .picker__input.picker__input--active {
26
+ border-color: #0089ec;
27
+ }
28
+
29
+ /**
30
+ * The holder is the only "scrollable" top-level container element.
31
+ */
32
+ .picker__holder {
33
+ width: 100%;
34
+ overflow-y: auto;
35
+ -webkit-overflow-scrolling: touch;
36
+ }
37
+
38
+ /*!
39
+ * Default mobile-first, responsive styling for pickadate.js
40
+ * Demo: http://amsul.github.io/pickadate.js
41
+ */
42
+ /**
43
+ * Note: the root picker element should *NOT* be styled more than what's here.
44
+ */
45
+ /**
46
+ * Make the holder and frame fullscreen.
47
+ */
48
+ .picker__holder,
49
+ .picker__frame {
50
+ bottom: 0;
51
+ left: 0;
52
+ right: 0;
53
+ top: 100%;
54
+ }
55
+
56
+ /**
57
+ * The holder should overlay the entire screen.
58
+ */
59
+ .picker__holder {
60
+ z-index: 10000;
61
+ position: fixed;
62
+ transition: background 0.15s ease-out, top 0s 0.15s;
63
+ -webkit-backface-visibility: hidden;
64
+ }
65
+
66
+ /**
67
+ * The frame that bounds the box contents of the picker.
68
+ */
69
+ .picker__frame {
70
+ position: absolute;
71
+ margin: 0 auto;
72
+ min-width: 256px;
73
+ width: 300px;
74
+ max-height: 350px;
75
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
76
+ filter: alpha(opacity=0);
77
+ -moz-opacity: 0;
78
+ opacity: 0;
79
+ transition: all 0.15s ease-out;
80
+ }
81
+
82
+ @media (min-height: 28.875em) {
83
+ .picker__frame {
84
+ overflow: visible;
85
+ top: auto;
86
+ bottom: -100%;
87
+ max-height: 80%;
88
+ }
89
+ }
90
+
91
+ @media (min-height: 40.125em) {
92
+ .picker__frame {
93
+ margin-bottom: 7.5%;
94
+ }
95
+ }
96
+
97
+ /**
98
+ * The wrapper sets the stage to vertically align the box contents.
99
+ */
100
+ .picker__wrap {
101
+ display: table;
102
+ width: 100%;
103
+ height: 100%;
104
+ }
105
+
106
+ @media (min-height: 28.875em) {
107
+ .picker__wrap {
108
+ display: block;
109
+ }
110
+ }
111
+
112
+ /**
113
+ * The box contains all the picker contents.
114
+ */
115
+ .picker__box {
116
+ background: #ffffff;
117
+ display: table-cell;
118
+ vertical-align: middle;
119
+ }
120
+
121
+ @media (min-height: 28.875em) {
122
+ .picker__box {
123
+ display: block;
124
+ border: 1px solid #777777;
125
+ border-top-color: #898989;
126
+ border-bottom-width: 0;
127
+ border-radius: 5px 5px 0 0;
128
+ box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
129
+ }
130
+ }
131
+
132
+ /**
133
+ * When the picker opens...
134
+ */
135
+ .picker--opened .picker__holder {
136
+ top: 0;
137
+ background: transparent;
138
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)";
139
+ zoom: 1;
140
+ background: rgba(0, 0, 0, 0.32);
141
+ transition: background 0.15s ease-out;
142
+ }
143
+
144
+ .picker--opened .picker__frame {
145
+ top: 0;
146
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
147
+ filter: alpha(opacity=100);
148
+ -moz-opacity: 1;
149
+ opacity: 1;
150
+ }
151
+
152
+ @media (min-height: 35.875em) {
153
+ .picker--opened .picker__frame {
154
+ top: 10%;
155
+ bottom: auto;
156
+ }
157
+ }
158
+
159
+ /**
160
+ * For `large` screens, transform into an inline picker.
161
+ */
162
+ /* ==========================================================================
163
+ CUSTOM MATERIALIZE STYLES
164
+ ========================================================================== */
165
+ .picker__input.picker__input--active {
166
+ border-color: #E3F2FD;
167
+ }
168
+
169
+ .picker__frame {
170
+ margin: 0 auto;
171
+ max-width: 325px;
172
+ }
173
+
174
+ @media (min-height: 38.875em) {
175
+ .picker--opened .picker__frame {
176
+ top: 10%;
177
+ bottom: auto;
178
+ }
179
+ }
180
+
181
+ /* ==========================================================================
182
+ $BASE-DATE-PICKER
183
+ ========================================================================== */
184
+ /**
185
+ * The picker box.
186
+ */
187
+ .picker__box {
188
+ padding: 0 1em;
189
+ }
190
+
191
+ /**
192
+ * The header containing the month and year stuff.
193
+ */
194
+ .picker__header {
195
+ text-align: center;
196
+ position: relative;
197
+ margin-top: .75em;
198
+ }
199
+
200
+ /**
201
+ * The month and year labels.
202
+ */
203
+ .picker__month,
204
+ .picker__year {
205
+ display: inline-block;
206
+ margin-left: .25em;
207
+ margin-right: .25em;
208
+ }
209
+
210
+ /**
211
+ * The month and year selectors.
212
+ */
213
+ .picker__select--month,
214
+ .picker__select--year {
215
+ height: 2em;
216
+ padding: 0;
217
+ margin-left: .25em;
218
+ margin-right: .25em;
219
+ }
220
+
221
+ .picker__select--month.browser-default {
222
+ display: inline;
223
+ background-color: #FFFFFF;
224
+ width: 40%;
225
+ }
226
+
227
+ .picker__select--year.browser-default {
228
+ display: inline;
229
+ background-color: #FFFFFF;
230
+ width: 26%;
231
+ }
232
+
233
+ .picker__select--month:focus,
234
+ .picker__select--year:focus {
235
+ border-color: rgba(0, 0, 0, 0.05);
236
+ }
237
+
238
+ /**
239
+ * The month navigation buttons.
240
+ */
241
+ .picker__nav--prev,
242
+ .picker__nav--next {
243
+ position: absolute;
244
+ padding: .5em 1.25em;
245
+ width: 1em;
246
+ height: 1em;
247
+ box-sizing: content-box;
248
+ top: -0.25em;
249
+ }
250
+
251
+ .picker__nav--prev {
252
+ left: -1em;
253
+ padding-right: 1.25em;
254
+ }
255
+
256
+ .picker__nav--next {
257
+ right: -1em;
258
+ padding-left: 1.25em;
259
+ }
260
+
261
+ .picker__nav--disabled,
262
+ .picker__nav--disabled:hover,
263
+ .picker__nav--disabled:before,
264
+ .picker__nav--disabled:before:hover {
265
+ cursor: default;
266
+ background: none;
267
+ border-right-color: #f5f5f5;
268
+ border-left-color: #f5f5f5;
269
+ }
270
+
271
+ /**
272
+ * The calendar table of dates
273
+ */
274
+ .picker__table {
275
+ text-align: center;
276
+ border-collapse: collapse;
277
+ border-spacing: 0;
278
+ table-layout: fixed;
279
+ font-size: 1rem;
280
+ width: 100%;
281
+ margin-top: .75em;
282
+ margin-bottom: .5em;
283
+ }
284
+
285
+ .picker__table th, .picker__table td {
286
+ text-align: center;
287
+ }
288
+
289
+ .picker__table td {
290
+ margin: 0;
291
+ padding: 0;
292
+ }
293
+
294
+ /**
295
+ * The weekday labels
296
+ */
297
+ .picker__weekday {
298
+ width: 14.285714286%;
299
+ font-size: .75em;
300
+ padding-bottom: .25em;
301
+ color: #999999;
302
+ font-weight: 500;
303
+ /* Increase the spacing a tad */
304
+ }
305
+
306
+ @media (min-height: 33.875em) {
307
+ .picker__weekday {
308
+ padding-bottom: .5em;
309
+ }
310
+ }
311
+
312
+ /**
313
+ * The days on the calendar
314
+ */
315
+ .picker__day--today {
316
+ position: relative;
317
+ color: #595959;
318
+ letter-spacing: -.3;
319
+ padding: .75rem 0;
320
+ font-weight: 400;
321
+ border: 1px solid transparent;
322
+ }
323
+
324
+ .picker__day--disabled:before {
325
+ border-top-color: #aaaaaa;
326
+ }
327
+
328
+ .picker__day--infocus:hover {
329
+ cursor: pointer;
330
+ color: #000;
331
+ font-weight: 500;
332
+ }
333
+
334
+ .picker__day--outfocus {
335
+ display: none;
336
+ padding: .75rem 0;
337
+ color: #fff;
338
+ }
339
+
340
+ .picker__day--outfocus:hover {
341
+ cursor: pointer;
342
+ color: #dddddd;
343
+ font-weight: 500;
344
+ }
345
+
346
+ .picker__day--highlighted:hover,
347
+ .picker--focused .picker__day--highlighted {
348
+ cursor: pointer;
349
+ }
350
+
351
+ .picker__day--selected,
352
+ .picker__day--selected:hover,
353
+ .picker--focused .picker__day--selected {
354
+ border-radius: 50%;
355
+ -webkit-transform: scale(0.75);
356
+ transform: scale(0.75);
357
+ background: #0089ec;
358
+ color: #ffffff;
359
+ width: 40px;
360
+ }
361
+
362
+ .picker__day--disabled,
363
+ .picker__day--disabled:hover,
364
+ .picker--focused .picker__day--disabled {
365
+ background: #f5f5f5;
366
+ border-color: #f5f5f5;
367
+ color: #dddddd;
368
+ cursor: default;
369
+ }
370
+
371
+ .picker__day--highlighted.picker__day--disabled,
372
+ .picker__day--highlighted.picker__day--disabled:hover {
373
+ background: #bbbbbb;
374
+ }
375
+
376
+ /**
377
+ * The footer containing the "today", "clear", and "close" buttons.
378
+ */
379
+ .picker__footer {
380
+ text-align: center;
381
+ display: -webkit-flex;
382
+ display: -ms-flexbox;
383
+ display: flex;
384
+ -webkit-align-items: center;
385
+ -ms-flex-align: center;
386
+ align-items: center;
387
+ -webkit-justify-content: space-between;
388
+ -ms-flex-pack: justify;
389
+ justify-content: space-between;
390
+ }
391
+
392
+ .picker__button--today,
393
+ .picker__button--clear,
394
+ .picker__button--close {
395
+ border: 1px solid #ffffff;
396
+ background: #ffffff;
397
+ font-size: .8em;
398
+ padding: .66em 0;
399
+ font-weight: bold;
400
+ width: 33%;
401
+ display: inline-block;
402
+ vertical-align: bottom;
403
+ }
404
+
405
+ .picker__button--today:hover,
406
+ .picker__button--clear:hover,
407
+ .picker__button--close:hover {
408
+ cursor: pointer;
409
+ color: #000000;
410
+ background: #b1dcfb;
411
+ border-bottom-color: #b1dcfb;
412
+ }
413
+
414
+ .picker__button--today:focus,
415
+ .picker__button--clear:focus,
416
+ .picker__button--close:focus {
417
+ background: #b1dcfb;
418
+ border-color: rgba(0, 0, 0, 0.05);
419
+ outline: none;
420
+ }
421
+
422
+ .picker__button--today:before,
423
+ .picker__button--clear:before,
424
+ .picker__button--close:before {
425
+ position: relative;
426
+ display: inline-block;
427
+ height: 0;
428
+ }
429
+
430
+ .picker__button--today:before,
431
+ .picker__button--clear:before {
432
+ content: " ";
433
+ margin-right: .45em;
434
+ }
435
+
436
+ .picker__button--today:before {
437
+ top: -0.05em;
438
+ width: 0;
439
+ border-top: 0.66em solid #0059bc;
440
+ border-left: .66em solid transparent;
441
+ }
442
+
443
+ .picker__button--clear:before {
444
+ top: -0.25em;
445
+ width: .66em;
446
+ border-top: 3px solid #ee2200;
447
+ }
448
+
449
+ .picker__button--close:before {
450
+ content: "\D7";
451
+ top: -0.1em;
452
+ vertical-align: top;
453
+ font-size: 1.1em;
454
+ margin-right: .35em;
455
+ color: #777777;
456
+ }
457
+
458
+ .picker__button--today[disabled],
459
+ .picker__button--today[disabled]:hover {
460
+ background: #f5f5f5;
461
+ border-color: #f5f5f5;
462
+ color: #dddddd;
463
+ cursor: default;
464
+ }
465
+
466
+ .picker__button--today[disabled]:before {
467
+ border-top-color: #aaaaaa;
468
+ }
469
+
470
+ /* ==========================================================================
471
+ CUSTOM MATERIALIZE STYLES
472
+ ========================================================================== */
473
+ .picker__box {
474
+ border-radius: 2px;
475
+ overflow: hidden;
476
+ }
477
+
478
+ .picker__date-display {
479
+ text-align: center;
480
+ background-color: #26a69a;
481
+ color: #fff;
482
+ padding-bottom: 15px;
483
+ font-weight: 300;
484
+ }
485
+
486
+ .picker__nav--prev:hover,
487
+ .picker__nav--next:hover {
488
+ cursor: pointer;
489
+ color: #000000;
490
+ background: #a1ded8;
491
+ }
492
+
493
+ .picker__weekday-display {
494
+ background-color: #1f897f;
495
+ padding: 10px;
496
+ font-weight: 200;
497
+ letter-spacing: .5;
498
+ font-size: 1rem;
499
+ margin-bottom: 15px;
500
+ }
501
+
502
+ .picker__month-display {
503
+ text-transform: uppercase;
504
+ font-size: 2rem;
505
+ }
506
+
507
+ .picker__day-display {
508
+ font-size: 4.5rem;
509
+ font-weight: 400;
510
+ }
511
+
512
+ .picker__year-display {
513
+ font-size: 1.8rem;
514
+ color: rgba(255, 255, 255, 0.4);
515
+ }
516
+
517
+ .picker__box {
518
+ padding: 0;
519
+ }
520
+
521
+ .picker__calendar-container {
522
+ padding: 0 1rem;
523
+ }
524
+
525
+ .picker__calendar-container thead {
526
+ border: none;
527
+ }
528
+
529
+ .picker__table {
530
+ margin-top: 0;
531
+ margin-bottom: .5em;
532
+ }
533
+
534
+ .picker__day--infocus {
535
+ color: #595959;
536
+ letter-spacing: -.3;
537
+ padding: .75rem 0;
538
+ font-weight: 400;
539
+ border: 1px solid transparent;
540
+ }
541
+
542
+ .picker__day.picker__day--today {
543
+ color: #26a69a;
544
+ }
545
+
546
+ .picker__day.picker__day--today.picker__day--selected {
547
+ color: #fff;
548
+ }
549
+
550
+ .picker__weekday {
551
+ font-size: .9rem;
552
+ }
553
+
554
+ .picker__day--selected,
555
+ .picker__day--selected:hover,
556
+ .picker--focused .picker__day--selected {
557
+ border-radius: 50%;
558
+ -webkit-transform: scale(0.9);
559
+ transform: scale(0.9);
560
+ background-color: #26a69a;
561
+ color: #ffffff;
562
+ }
563
+
564
+ .picker__day--selected.picker__day--outfocus,
565
+ .picker__day--selected:hover.picker__day--outfocus,
566
+ .picker--focused .picker__day--selected.picker__day--outfocus {
567
+ background-color: #a1ded8;
568
+ }
569
+
570
+ .picker__footer {
571
+ text-align: right;
572
+ padding: 5px 10px;
573
+ }
574
+
575
+ .picker__close, .picker__today {
576
+ padding: 0 1rem;
577
+ }
578
+
579
+ .picker__nav--prev:before,
580
+ .picker__nav--next:before {
581
+ content: " ";
582
+ border-top: .5em solid transparent;
583
+ border-bottom: .5em solid transparent;
584
+ border-right: 0.75em solid #676767;
585
+ width: 0;
586
+ height: 0;
587
+ display: block;
588
+ margin: 0 auto;
589
+ }
590
+
591
+ .picker__nav--next:before {
592
+ border-right: 0;
593
+ border-left: 0.75em solid #676767;
594
+ }
595
+
596
+ button.picker__today:focus, button.picker__clear:focus, button.picker__close:focus {
597
+ background-color: #a1ded8;
598
+ }
599
+
600
+ /* ==========================================================================
601
+ $BASE-TIME-PICKER
602
+ ========================================================================== */
603
+ /**
604
+ * The list of times.
605
+ */
606
+ .picker__list {
607
+ list-style: none;
608
+ padding: 0.75em 0 4.2em;
609
+ margin: 0;
610
+ }
611
+
612
+ /**
613
+ * The times on the clock.
614
+ */
615
+ .picker__list-item {
616
+ border-bottom: 1px solid #dddddd;
617
+ border-top: 1px solid #dddddd;
618
+ margin-bottom: -1px;
619
+ position: relative;
620
+ background: #ffffff;
621
+ padding: .75em 1.25em;
622
+ }
623
+
624
+ @media (min-height: 46.75em) {
625
+ .picker__list-item {
626
+ padding: .5em 1em;
627
+ }
628
+ }
629
+
630
+ /* Hovered time */
631
+ .picker__list-item:hover {
632
+ cursor: pointer;
633
+ color: #000000;
634
+ background: #b1dcfb;
635
+ border-color: #0089ec;
636
+ z-index: 10;
637
+ }
638
+
639
+ /* Highlighted and hovered/focused time */
640
+ .picker__list-item--highlighted {
641
+ border-color: #0089ec;
642
+ z-index: 10;
643
+ }
644
+
645
+ .picker__list-item--highlighted:hover,
646
+ .picker--focused .picker__list-item--highlighted {
647
+ cursor: pointer;
648
+ color: #000000;
649
+ background: #b1dcfb;
650
+ }
651
+
652
+ /* Selected and hovered/focused time */
653
+ .picker__list-item--selected,
654
+ .picker__list-item--selected:hover,
655
+ .picker--focused .picker__list-item--selected {
656
+ background: #0089ec;
657
+ color: #ffffff;
658
+ z-index: 10;
659
+ }
660
+
661
+ /* Disabled time */
662
+ .picker__list-item--disabled,
663
+ .picker__list-item--disabled:hover,
664
+ .picker--focused .picker__list-item--disabled {
665
+ background: #f5f5f5;
666
+ border-color: #f5f5f5;
667
+ color: #dddddd;
668
+ cursor: default;
669
+ border-color: #dddddd;
670
+ z-index: auto;
671
+ }
672
+
673
+ /**
674
+ * The clear button
675
+ */
676
+ .picker--time .picker__button--clear {
677
+ display: block;
678
+ width: 80%;
679
+ margin: 1em auto 0;
680
+ padding: 1em 1.25em;
681
+ background: none;
682
+ border: 0;
683
+ font-weight: 500;
684
+ font-size: .67em;
685
+ text-align: center;
686
+ text-transform: uppercase;
687
+ color: #666;
688
+ }
689
+
690
+ .picker--time .picker__button--clear:hover,
691
+ .picker--time .picker__button--clear:focus {
692
+ color: #000000;
693
+ background: #b1dcfb;
694
+ background: #ee2200;
695
+ border-color: #ee2200;
696
+ cursor: pointer;
697
+ color: #ffffff;
698
+ outline: none;
699
+ }
700
+
701
+ .picker--time .picker__button--clear:before {
702
+ top: -0.25em;
703
+ color: #666;
704
+ font-size: 1.25em;
705
+ font-weight: bold;
706
+ }
707
+
708
+ .picker--time .picker__button--clear:hover:before,
709
+ .picker--time .picker__button--clear:focus:before {
710
+ color: #ffffff;
711
+ }
712
+
713
+ /* ==========================================================================
714
+ $DEFAULT-TIME-PICKER
715
+ ========================================================================== */
716
+ /**
717
+ * The frame the bounds the time picker.
718
+ */
719
+ .picker--time .picker__frame {
720
+ min-width: 256px;
721
+ max-width: 320px;
722
+ }
723
+
724
+ /**
725
+ * The picker box.
726
+ */
727
+ .picker--time .picker__box {
728
+ font-size: 1em;
729
+ background: #f2f2f2;
730
+ padding: 0;
731
+ }
732
+
733
+ @media (min-height: 40.125em) {
734
+ .picker--time .picker__box {
735
+ margin-bottom: 5em;
736
+ }
737
+ }