materialize-sass 0.97.0 → 1.0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (153) hide show
  1. checksums.yaml +5 -5
  2. data/.gitattributes +1 -0
  3. data/.gitignore +3 -0
  4. data/README.md +48 -10
  5. data/Rakefile +129 -1
  6. data/assets/javascripts/materialize/anime.min.js +417 -0
  7. data/assets/javascripts/materialize/autocomplete.js +504 -0
  8. data/assets/javascripts/materialize/buttons.js +409 -0
  9. data/assets/javascripts/materialize/cards.js +34 -0
  10. data/assets/javascripts/materialize/carousel.js +797 -0
  11. data/assets/javascripts/materialize/cash.js +990 -0
  12. data/assets/javascripts/materialize/characterCounter.js +180 -0
  13. data/assets/javascripts/materialize/chips.js +564 -0
  14. data/assets/javascripts/materialize/collapsible.js +337 -0
  15. data/assets/javascripts/materialize/component.js +57 -0
  16. data/assets/javascripts/materialize/datepicker.js +935 -0
  17. data/assets/javascripts/materialize/dropdown.js +659 -0
  18. data/assets/javascripts/materialize/extras/nouislider.js +2147 -0
  19. data/assets/javascripts/materialize/extras/nouislider.min.js +1 -0
  20. data/assets/javascripts/materialize/forms.js +244 -0
  21. data/assets/javascripts/materialize/global.js +408 -0
  22. data/assets/javascripts/materialize/materialbox.js +513 -0
  23. data/assets/javascripts/materialize/modal.js +449 -0
  24. data/assets/javascripts/materialize/parallax.js +173 -0
  25. data/assets/javascripts/materialize/pushpin.js +179 -0
  26. data/assets/javascripts/materialize/range.js +310 -0
  27. data/assets/javascripts/materialize/scrollspy.js +328 -0
  28. data/assets/javascripts/materialize/select.js +497 -0
  29. data/assets/javascripts/materialize/sidenav.js +655 -0
  30. data/assets/javascripts/materialize/slider.js +424 -0
  31. data/assets/javascripts/materialize/tabs.js +476 -0
  32. data/assets/javascripts/materialize/tapTarget.js +364 -0
  33. data/assets/javascripts/materialize/timepicker.js +647 -0
  34. data/assets/javascripts/materialize/toasts.js +355 -0
  35. data/assets/javascripts/materialize/tooltip.js +351 -0
  36. data/{app/assets → assets}/javascripts/materialize/waves.js +42 -47
  37. data/assets/javascripts/materialize-sprockets.js +29 -0
  38. data/assets/javascripts/materialize.js +12374 -0
  39. data/assets/stylesheets/materialize/components/_badges.scss +55 -0
  40. data/assets/stylesheets/materialize/components/_buttons.scss +322 -0
  41. data/{app/assets → assets}/stylesheets/materialize/components/_cards.scss +72 -29
  42. data/assets/stylesheets/materialize/components/_carousel.scss +90 -0
  43. data/assets/stylesheets/materialize/components/_chips.scss +90 -0
  44. data/{app/assets → assets}/stylesheets/materialize/components/_collapsible.scss +23 -17
  45. data/assets/stylesheets/materialize/components/_color-classes.scss +32 -0
  46. data/{app/assets/stylesheets/materialize/components/_color.scss → assets/stylesheets/materialize/components/_color-variables.scss} +22 -64
  47. data/assets/stylesheets/materialize/components/_datepicker.scss +191 -0
  48. data/assets/stylesheets/materialize/components/_dropdown.scss +85 -0
  49. data/{app/assets → assets}/stylesheets/materialize/components/_global.scss +197 -144
  50. data/{app/assets → assets}/stylesheets/materialize/components/_grid.scss +57 -18
  51. data/assets/stylesheets/materialize/components/_icons-material-design.scss +5 -0
  52. data/{app/assets → assets}/stylesheets/materialize/components/_materialbox.scss +15 -13
  53. data/{app/assets → assets}/stylesheets/materialize/components/_modal.scss +18 -14
  54. data/{app/assets → assets}/stylesheets/materialize/components/_navbar.scss +89 -25
  55. data/assets/stylesheets/materialize/components/_normalize.scss +447 -0
  56. data/{app/assets → assets}/stylesheets/materialize/components/_preloader.scss +5 -3
  57. data/assets/stylesheets/materialize/components/_pulse.scss +34 -0
  58. data/assets/stylesheets/materialize/components/_sidenav.scss +208 -0
  59. data/{app/assets → assets}/stylesheets/materialize/components/_slider.scss +2 -2
  60. data/{app/assets → assets}/stylesheets/materialize/components/_table_of_contents.scss +5 -5
  61. data/assets/stylesheets/materialize/components/_tabs.scss +99 -0
  62. data/assets/stylesheets/materialize/components/_tapTarget.scss +103 -0
  63. data/assets/stylesheets/materialize/components/_timepicker.scss +183 -0
  64. data/{app/assets → assets}/stylesheets/materialize/components/_toast.scss +17 -22
  65. data/assets/stylesheets/materialize/components/_tooltip.scss +32 -0
  66. data/assets/stylesheets/materialize/components/_transitions.scss +13 -0
  67. data/{app/assets → assets}/stylesheets/materialize/components/_typography.scss +11 -9
  68. data/assets/stylesheets/materialize/components/_variables.scss +349 -0
  69. data/assets/stylesheets/materialize/components/_waves.scss +114 -0
  70. data/assets/stylesheets/materialize/components/forms/_checkboxes.scss +200 -0
  71. data/assets/stylesheets/materialize/components/forms/_file-input.scss +44 -0
  72. data/assets/stylesheets/materialize/components/forms/_forms.scss +22 -0
  73. data/assets/stylesheets/materialize/components/forms/_input-fields.scss +354 -0
  74. data/assets/stylesheets/materialize/components/forms/_radio-buttons.scss +115 -0
  75. data/assets/stylesheets/materialize/components/forms/_range.scss +161 -0
  76. data/assets/stylesheets/materialize/components/forms/_select.scss +190 -0
  77. data/assets/stylesheets/materialize/components/forms/_switches.scss +89 -0
  78. data/assets/stylesheets/materialize/extras/nouislider.css +406 -0
  79. data/{app/assets → assets}/stylesheets/materialize.scss +13 -10
  80. data/lib/materialize-sass/engine.rb +11 -6
  81. data/lib/materialize-sass/helpers.rb +38 -0
  82. data/lib/materialize-sass/version.rb +1 -1
  83. data/lib/materialize-sass.rb +13 -28
  84. data/materialize-sass.gemspec +5 -5
  85. metadata +97 -105
  86. data/app/assets/fonts/material-design-icons/LICENSE.txt +0 -428
  87. data/app/assets/fonts/material-design-icons/Material-Design-Icons.eot +0 -0
  88. data/app/assets/fonts/material-design-icons/Material-Design-Icons.svg +0 -769
  89. data/app/assets/fonts/material-design-icons/Material-Design-Icons.ttf +0 -0
  90. data/app/assets/fonts/material-design-icons/Material-Design-Icons.woff +0 -0
  91. data/app/assets/fonts/material-design-icons/Material-Design-Icons.woff2 +0 -0
  92. data/app/assets/fonts/roboto/Roboto-Bold.ttf +0 -0
  93. data/app/assets/fonts/roboto/Roboto-Bold.woff +0 -0
  94. data/app/assets/fonts/roboto/Roboto-Bold.woff2 +0 -0
  95. data/app/assets/fonts/roboto/Roboto-Light.ttf +0 -0
  96. data/app/assets/fonts/roboto/Roboto-Light.woff +0 -0
  97. data/app/assets/fonts/roboto/Roboto-Light.woff2 +0 -0
  98. data/app/assets/fonts/roboto/Roboto-Medium.ttf +0 -0
  99. data/app/assets/fonts/roboto/Roboto-Medium.woff +0 -0
  100. data/app/assets/fonts/roboto/Roboto-Medium.woff2 +0 -0
  101. data/app/assets/fonts/roboto/Roboto-Regular.ttf +0 -0
  102. data/app/assets/fonts/roboto/Roboto-Regular.woff +0 -0
  103. data/app/assets/fonts/roboto/Roboto-Regular.woff2 +0 -0
  104. data/app/assets/fonts/roboto/Roboto-Thin.ttf +0 -0
  105. data/app/assets/fonts/roboto/Roboto-Thin.woff +0 -0
  106. data/app/assets/fonts/roboto/Roboto-Thin.woff2 +0 -0
  107. data/app/assets/javascripts/materialize/animation.js +0 -9
  108. data/app/assets/javascripts/materialize/buttons.js +0 -61
  109. data/app/assets/javascripts/materialize/cards.js +0 -27
  110. data/app/assets/javascripts/materialize/character_counter.js +0 -59
  111. data/app/assets/javascripts/materialize/collapsible.js +0 -139
  112. data/app/assets/javascripts/materialize/date_picker/picker.date.js +0 -1430
  113. data/app/assets/javascripts/materialize/date_picker/picker.js +0 -1123
  114. data/app/assets/javascripts/materialize/dropdown.js +0 -178
  115. data/app/assets/javascripts/materialize/forms.js +0 -456
  116. data/app/assets/javascripts/materialize/global.js +0 -36
  117. data/app/assets/javascripts/materialize/hammer.min.js +0 -1
  118. data/app/assets/javascripts/materialize/init.js +0 -136
  119. data/app/assets/javascripts/materialize/jquery.easing.1.3.js +0 -205
  120. data/app/assets/javascripts/materialize/jquery.hammer.js +0 -33
  121. data/app/assets/javascripts/materialize/jquery.timeago.min.js +0 -1
  122. data/app/assets/javascripts/materialize/leanModal.js +0 -178
  123. data/app/assets/javascripts/materialize/materialbox.js +0 -249
  124. data/app/assets/javascripts/materialize/parallax.js +0 -58
  125. data/app/assets/javascripts/materialize/prism.js +0 -8
  126. data/app/assets/javascripts/materialize/pushpin.js +0 -62
  127. data/app/assets/javascripts/materialize/scrollFire.js +0 -44
  128. data/app/assets/javascripts/materialize/scrollspy.js +0 -284
  129. data/app/assets/javascripts/materialize/sideNav.js +0 -312
  130. data/app/assets/javascripts/materialize/slider.js +0 -301
  131. data/app/assets/javascripts/materialize/tabs.js +0 -136
  132. data/app/assets/javascripts/materialize/toasts.js +0 -125
  133. data/app/assets/javascripts/materialize/tooltip.js +0 -166
  134. data/app/assets/javascripts/materialize/transitions.js +0 -154
  135. data/app/assets/javascripts/materialize/velocity.min.js +0 -4
  136. data/app/assets/javascripts/materialize-sprockets.js +0 -27
  137. data/app/assets/javascripts/materialize.js +0 -6159
  138. data/app/assets/stylesheets/materialize/components/_buttons.scss +0 -157
  139. data/app/assets/stylesheets/materialize/components/_dropdown.scss +0 -40
  140. data/app/assets/stylesheets/materialize/components/_form.scss +0 -886
  141. data/app/assets/stylesheets/materialize/components/_icons-material-design.scss +0 -3257
  142. data/app/assets/stylesheets/materialize/components/_mixins.scss +0 -5
  143. data/app/assets/stylesheets/materialize/components/_normalize.scss +0 -427
  144. data/app/assets/stylesheets/materialize/components/_prefixer.scss +0 -376
  145. data/app/assets/stylesheets/materialize/components/_roboto.scss +0 -38
  146. data/app/assets/stylesheets/materialize/components/_sideNav.scss +0 -111
  147. data/app/assets/stylesheets/materialize/components/_tabs.scss +0 -47
  148. data/app/assets/stylesheets/materialize/components/_tooltip.scss +0 -34
  149. data/app/assets/stylesheets/materialize/components/_variables.scss +0 -152
  150. data/app/assets/stylesheets/materialize/components/_waves.scss +0 -167
  151. data/app/assets/stylesheets/materialize/components/date_picker/_default.date.scss +0 -435
  152. data/app/assets/stylesheets/materialize/components/date_picker/_default.scss +0 -201
  153. data/app/assets/stylesheets/materialize/components/date_picker/_default.time.scss +0 -125
@@ -1,435 +0,0 @@
1
- /* ==========================================================================
2
- $BASE-DATE-PICKER
3
- ========================================================================== */
4
- /**
5
- * The picker box.
6
- */
7
- .picker__box {
8
- padding: 0 1em;
9
- }
10
- /**
11
- * The header containing the month and year stuff.
12
- */
13
- .picker__header {
14
- text-align: center;
15
- position: relative;
16
- margin-top: .75em;
17
- }
18
- /**
19
- * The month and year labels.
20
- */
21
- .picker__month,
22
- .picker__year {
23
- // font-weight: 500;
24
- display: inline-block;
25
- margin-left: .25em;
26
- margin-right: .25em;
27
- }
28
- /**
29
- * The month and year selectors.
30
- */
31
- .picker__select--month,
32
- .picker__select--year {
33
-
34
- height: 2em;
35
- padding: 0;
36
- margin-left: .25em;
37
- margin-right: .25em;
38
- }
39
-
40
- // Modified
41
- .picker__select--month.browser-default {
42
- display: inline;
43
- background-color: #FFFFFF;
44
- width: 40%;
45
- }
46
- .picker__select--year.browser-default {
47
- display: inline;
48
- background-color: #FFFFFF;
49
- width: 25%;
50
- }
51
- .picker__select--month:focus,
52
- .picker__select--year:focus {
53
- border-color: $datepicker-focus;
54
- }
55
- /**
56
- * The month navigation buttons.
57
- */
58
- .picker__nav--prev,
59
- .picker__nav--next {
60
- position: absolute;
61
- padding: .5em 1.25em;
62
- width: 1em;
63
- height: 1em;
64
- box-sizing: content-box;
65
- top: -0.25em;
66
- }
67
- //@media (min-width: 24.5em) {
68
- // .picker__nav--prev,
69
- // .picker__nav--next {
70
- // top: -0.33em;
71
- // }
72
- //}
73
- .picker__nav--prev {
74
- left: -1em;
75
- padding-right: 1.25em;
76
- }
77
- //@media (min-width: 24.5em) {
78
- // .picker__nav--prev {
79
- // padding-right: 1.5em;
80
- // }
81
- //}
82
- .picker__nav--next {
83
- right: -1em;
84
- padding-left: 1.25em;
85
- }
86
- //@media (min-width: 24.5em) {
87
- // .picker__nav--next {
88
- // padding-left: 1.5em;
89
- // }
90
- //}
91
-
92
- .picker__nav--disabled,
93
- .picker__nav--disabled:hover,
94
- .picker__nav--disabled:before,
95
- .picker__nav--disabled:before:hover {
96
- cursor: default;
97
- background: none;
98
- border-right-color: #f5f5f5;
99
- border-left-color: #f5f5f5;
100
- }
101
- /**
102
- * The calendar table of dates
103
- */
104
- .picker__table {
105
- text-align: center;
106
- border-collapse: collapse;
107
- border-spacing: 0;
108
- table-layout: fixed;
109
- font-size: 1rem;
110
- width: 100%;
111
- margin-top: .75em;
112
- margin-bottom: .5em;
113
- }
114
-
115
-
116
-
117
- .picker__table th, .picker__table td {
118
- text-align: center;
119
- }
120
-
121
-
122
-
123
-
124
-
125
-
126
- .picker__table td {
127
- margin: 0;
128
- padding: 0;
129
- }
130
- /**
131
- * The weekday labels
132
- */
133
- .picker__weekday {
134
- width: 14.285714286%;
135
- font-size: .75em;
136
- padding-bottom: .25em;
137
- color: #999999;
138
- font-weight: 500;
139
- /* Increase the spacing a tad */
140
- }
141
- @media (min-height: 33.875em) {
142
- .picker__weekday {
143
- padding-bottom: .5em;
144
- }
145
- }
146
- /**
147
- * The days on the calendar
148
- */
149
-
150
- .picker__day--today {
151
- position: relative;
152
- color: #595959;
153
- letter-spacing: -.3;
154
- padding: .75rem 0;
155
- font-weight: 400;
156
- border: 1px solid transparent;
157
-
158
- }
159
-
160
- //.picker__day--today:before {
161
- // content: " ";
162
- // position: absolute;
163
- // top: 2px;
164
- // right: 2px;
165
- // width: 0;
166
- // height: 0;
167
- // border-top: 0.5em solid #0059bc;
168
- // border-left: .5em solid transparent;
169
- //}
170
- .picker__day--disabled:before {
171
- border-top-color: #aaaaaa;
172
- }
173
-
174
-
175
- .picker__day--infocus:hover{
176
- cursor: pointer;
177
- color: #000;
178
- font-weight: 500;
179
- }
180
-
181
- .picker__day--outfocus {
182
- display: none;
183
- padding: .75rem 0;
184
- color: #fff;
185
-
186
- }
187
- .picker__day--outfocus:hover {
188
- cursor: pointer;
189
- color: #dddddd;
190
- // background: #b1dcfb;
191
- font-weight: 500;
192
- }
193
-
194
-
195
- .picker__day--highlighted {
196
- // border-color: #0089ec;
197
- }
198
- .picker__day--highlighted:hover,
199
- .picker--focused .picker__day--highlighted {
200
- cursor: pointer;
201
- // color: #000000;
202
- // background: #b1dcfb;
203
- // font-weight: 500;
204
- }
205
- .picker__day--selected,
206
- .picker__day--selected:hover,
207
- .picker--focused .picker__day--selected {
208
-
209
-
210
- // Circle background
211
- border-radius: 50%;
212
- @include transform(scale(.75));
213
- background: #0089ec;
214
- color: #ffffff;
215
- }
216
- .picker__day--disabled,
217
- .picker__day--disabled:hover,
218
- .picker--focused .picker__day--disabled {
219
- background: #f5f5f5;
220
- border-color: #f5f5f5;
221
- color: #dddddd;
222
- cursor: default;
223
- }
224
- .picker__day--highlighted.picker__day--disabled,
225
- .picker__day--highlighted.picker__day--disabled:hover {
226
- background: #bbbbbb;
227
- }
228
- /**
229
- * The footer containing the "today", "clear", and "close" buttons.
230
- */
231
- .picker__footer {
232
- text-align: center;
233
- display: flex;
234
- align-items: center;
235
- justify-content: space-between;
236
- }
237
- .picker__button--today,
238
- .picker__button--clear,
239
- .picker__button--close {
240
- border: 1px solid #ffffff;
241
- background: #ffffff;
242
- font-size: .8em;
243
- padding: .66em 0;
244
- font-weight: bold;
245
- width: 33%;
246
- display: inline-block;
247
- vertical-align: bottom;
248
- }
249
- .picker__button--today:hover,
250
- .picker__button--clear:hover,
251
- .picker__button--close:hover {
252
- cursor: pointer;
253
- color: #000000;
254
- background: #b1dcfb;
255
- border-bottom-color: #b1dcfb;
256
- }
257
- .picker__button--today:focus,
258
- .picker__button--clear:focus,
259
- .picker__button--close:focus {
260
- background: #b1dcfb;
261
- border-color: $datepicker-focus;
262
- outline: none;
263
- }
264
- .picker__button--today:before,
265
- .picker__button--clear:before,
266
- .picker__button--close:before {
267
- position: relative;
268
- display: inline-block;
269
- height: 0;
270
- }
271
- .picker__button--today:before,
272
- .picker__button--clear:before {
273
- content: " ";
274
- margin-right: .45em;
275
- }
276
- .picker__button--today:before {
277
- top: -0.05em;
278
- width: 0;
279
- border-top: 0.66em solid #0059bc;
280
- border-left: .66em solid transparent;
281
- }
282
- .picker__button--clear:before {
283
- top: -0.25em;
284
- width: .66em;
285
- border-top: 3px solid #ee2200;
286
- }
287
- .picker__button--close:before {
288
- content: "\D7";
289
- top: -0.1em;
290
- vertical-align: top;
291
- font-size: 1.1em;
292
- margin-right: .35em;
293
- color: #777777;
294
- }
295
- .picker__button--today[disabled],
296
- .picker__button--today[disabled]:hover {
297
- background: #f5f5f5;
298
- border-color: #f5f5f5;
299
- color: #dddddd;
300
- cursor: default;
301
- }
302
- .picker__button--today[disabled]:before {
303
- border-top-color: #aaaaaa;
304
- }
305
-
306
- /* ==========================================================================
307
- CUSTOM MATERIALIZE STYLES
308
- ========================================================================== */
309
- .picker__box {
310
- border-radius: 2px;
311
- overflow: hidden;
312
- }
313
-
314
- .picker__date-display {
315
- text-align: center;
316
- background-color: $datepicker-date-bg;
317
- color: #fff;
318
- padding-bottom: 15px;
319
- font-weight: 300;
320
- }
321
-
322
- .picker__nav--prev:hover,
323
- .picker__nav--next:hover {
324
- cursor: pointer;
325
- color: #000000;
326
- background: $datepicker-selected-outfocus;
327
- }
328
-
329
- .picker__weekday-display {
330
- background-color: $datepicker-weekday-bg;
331
- padding: 10px;
332
- font-weight: 200;
333
- letter-spacing: .5;
334
- font-size: 1rem;
335
- margin-bottom: 15px;
336
- }
337
-
338
- .picker__month-display {
339
- text-transform: uppercase;
340
- font-size: 2rem;
341
- }
342
- .picker__day-display {
343
-
344
- font-size: 4.5rem;
345
- font-weight: 400;
346
- }
347
- .picker__year-display {
348
- font-size: 1.8rem;
349
- color: $datepicker-year;
350
- }
351
-
352
- .picker__box {
353
- padding: 0;
354
- }
355
- .picker__calendar-container {
356
- padding: 0 1rem;
357
-
358
- thead {
359
- border: none;
360
- }
361
- }
362
-
363
- // Calendar
364
- .picker__table {
365
- margin-top: 0;
366
- margin-bottom: .5em;
367
- }
368
-
369
- .picker__day--infocus {
370
- color: #595959;
371
- letter-spacing: -.3;
372
- padding: .75rem 0;
373
- font-weight: 400;
374
- border: 1px solid transparent;
375
- }
376
-
377
- //Today style
378
- .picker__day.picker__day--today {
379
- color: $datepicker-selected;
380
- }
381
-
382
- .picker__day.picker__day--today.picker__day--selected {
383
- color: #fff;
384
- }
385
-
386
- // Table Header
387
- .picker__weekday {
388
- font-size: .9rem;
389
- }
390
-
391
-
392
- .picker__day--selected,
393
- .picker__day--selected:hover,
394
- .picker--focused .picker__day--selected {
395
- // Circle background
396
- border-radius: 50%;
397
- @include transform(scale(.9));
398
- background-color: $datepicker-selected;
399
- &.picker__day--outfocus {
400
- background-color: $datepicker-selected-outfocus;
401
- }
402
- color: #ffffff;
403
- }
404
-
405
- .picker__footer {
406
- text-align: right;
407
- padding: 5px 10px;
408
- }
409
-
410
- // Materialize modified
411
- .picker__close, .picker__today {
412
- font-size: 1.1rem;
413
- padding: 0 1rem;
414
- color: $datepicker-selected;
415
- }
416
-
417
- //month nav buttons
418
- .picker__nav--prev:before,
419
- .picker__nav--next:before {
420
- content: " ";
421
- border-top: .5em solid transparent;
422
- border-bottom: .5em solid transparent;
423
- border-right: 0.75em solid #676767;
424
- width: 0;
425
- height: 0;
426
- display: block;
427
- margin: 0 auto;
428
- }
429
- .picker__nav--next:before {
430
- border-right: 0;
431
- border-left: 0.75em solid #676767;
432
- }
433
- button.picker__today:focus, button.picker__clear:focus, button.picker__close:focus {
434
- background-color: $datepicker-selected-outfocus;
435
- }
@@ -1,201 +0,0 @@
1
- /* ==========================================================================
2
- $BASE-PICKER
3
- ========================================================================== */
4
- /**
5
- * Note: the root picker element should *NOT* be styled more than what's here.
6
- */
7
- .picker {
8
- font-size: 16px;
9
- text-align: left;
10
- line-height: 1.2;
11
- color: #000000;
12
- position: absolute;
13
- z-index: 10000;
14
- -webkit-user-select: none;
15
- -moz-user-select: none;
16
- -ms-user-select: none;
17
- user-select: none;
18
- }
19
- /**
20
- * The picker input element.
21
- */
22
- .picker__input {
23
- cursor: default;
24
- }
25
- /**
26
- * When the picker is opened, the input element is "activated".
27
- */
28
- .picker__input.picker__input--active {
29
- border-color: #0089ec;
30
- }
31
- /**
32
- * The holder is the only "scrollable" top-level container element.
33
- */
34
- .picker__holder {
35
- width: 100%;
36
- overflow-y: auto;
37
- -webkit-overflow-scrolling: touch;
38
- }
39
-
40
- /*!
41
- * Default mobile-first, responsive styling for pickadate.js
42
- * Demo: http://amsul.github.io/pickadate.js
43
- */
44
- /**
45
- * Note: the root picker element should *NOT* be styled more than what's here.
46
- */
47
- /**
48
- * Make the holder and frame fullscreen.
49
- */
50
- .picker__holder,
51
- .picker__frame {
52
- bottom: 0;
53
- left: 0;
54
- right: 0;
55
- top: 100%;
56
- }
57
- /**
58
- * The holder should overlay the entire screen.
59
- */
60
- .picker__holder {
61
- position: fixed;
62
- -webkit-transition: background 0.15s ease-out, top 0s 0.15s;
63
- -moz-transition: background 0.15s ease-out, top 0s 0.15s;
64
- transition: background 0.15s ease-out, top 0s 0.15s;
65
- -webkit-backface-visibility: hidden;
66
- }
67
- /**
68
- * The frame that bounds the box contents of the picker.
69
- */
70
- .picker__frame {
71
- position: absolute;
72
- margin: 0 auto;
73
- min-width: 256px;
74
-
75
- // picker width
76
- width: 300px;
77
- max-height: 350px;
78
-
79
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
80
- filter: alpha(opacity=0);
81
- -moz-opacity: 0;
82
- opacity: 0;
83
- -webkit-transition: all 0.15s ease-out;
84
- -moz-transition: all 0.15s ease-out;
85
- transition: all 0.15s ease-out;
86
- }
87
- @media (min-height: 28.875em) {
88
- .picker__frame {
89
- overflow: visible;
90
- top: auto;
91
- bottom: -100%;
92
- max-height: 80%;
93
- }
94
- }
95
- @media (min-height: 40.125em) {
96
- .picker__frame {
97
- margin-bottom: 7.5%;
98
- }
99
- }
100
- /**
101
- * The wrapper sets the stage to vertically align the box contents.
102
- */
103
- .picker__wrap {
104
- display: table;
105
- width: 100%;
106
- height: 100%;
107
- }
108
- @media (min-height: 28.875em) {
109
- .picker__wrap {
110
- display: block;
111
- }
112
- }
113
- /**
114
- * The box contains all the picker contents.
115
- */
116
- .picker__box {
117
- background: #ffffff;
118
- display: table-cell;
119
- vertical-align: middle;
120
- }
121
- //@media (min-height: 26.5em) {
122
- // .picker__box {
123
- //// font-size: 1.25em;
124
- // }
125
- //}
126
- @media (min-height: 28.875em) {
127
- .picker__box {
128
- display: block;
129
-
130
- // picker header font-size
131
- // font-size: 1rem;
132
-
133
- border: 1px solid #777777;
134
- border-top-color: #898989;
135
- border-bottom-width: 0;
136
- -webkit-border-radius: 5px 5px 0 0;
137
- -moz-border-radius: 5px 5px 0 0;
138
- border-radius: 5px 5px 0 0;
139
- -webkit-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
140
- -moz-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
141
- box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
142
- }
143
- }
144
- //@media (min-height: 40.125em) {
145
- // .picker__box {
146
- // font-size: 1.1rem;
147
- // border-bottom-width: 1px;
148
- // -webkit-border-radius: 5px;
149
- // -moz-border-radius: 5px;
150
- // border-radius: 5px;
151
- // }
152
- //}
153
- /**
154
- * When the picker opens...
155
- */
156
- .picker--opened .picker__holder {
157
- top: 0;
158
- background: transparent;
159
- -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)";
160
- zoom: 1;
161
- background: rgba(0, 0, 0, 0.32);
162
- -webkit-transition: background 0.15s ease-out;
163
- -moz-transition: background 0.15s ease-out;
164
- transition: background 0.15s ease-out;
165
- }
166
- .picker--opened .picker__frame {
167
- top: 0;
168
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
169
- filter: alpha(opacity=100);
170
- -moz-opacity: 1;
171
- opacity: 1;
172
- }
173
- @media (min-height: 35.875em) {
174
- .picker--opened .picker__frame {
175
- top: 10%;
176
- bottom: 20%auto;
177
- }
178
- }
179
- /**
180
- * For `large` screens, transform into an inline picker.
181
- */
182
-
183
- /* ==========================================================================
184
- CUSTOM MATERIALIZE STYLES
185
- ========================================================================== */
186
-
187
- .picker__input.picker__input--active {
188
- border-color: color("blue", "lighten-5");
189
- }
190
-
191
- .picker__frame {
192
- margin: 0 auto;
193
- max-width: 325px;
194
- }
195
-
196
- @media (min-height: 38.875em) {
197
- .picker--opened .picker__frame {
198
- top: 10%;
199
- bottom: auto;
200
- }
201
- }