materialize-sass 0.98.2 → 0.99.0

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.
Files changed (68) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +1 -0
  3. data/README.md +10 -1
  4. data/Rakefile +21 -3
  5. data/app/assets/fonts/roboto/Roboto-Bold.woff +0 -0
  6. data/app/assets/fonts/roboto/Roboto-Bold.woff2 +0 -0
  7. data/app/assets/fonts/roboto/Roboto-Light.woff +0 -0
  8. data/app/assets/fonts/roboto/Roboto-Light.woff2 +0 -0
  9. data/app/assets/fonts/roboto/Roboto-Medium.woff +0 -0
  10. data/app/assets/fonts/roboto/Roboto-Medium.woff2 +0 -0
  11. data/app/assets/fonts/roboto/Roboto-Regular.woff +0 -0
  12. data/app/assets/fonts/roboto/Roboto-Regular.woff2 +0 -0
  13. data/app/assets/fonts/roboto/Roboto-Thin.woff +0 -0
  14. data/app/assets/fonts/roboto/Roboto-Thin.woff2 +0 -0
  15. data/app/assets/javascripts/materialize-sprockets.js +2 -1
  16. data/app/assets/javascripts/materialize.js +9045 -5
  17. data/app/assets/javascripts/materialize/buttons.js +1 -1
  18. data/app/assets/javascripts/materialize/cards.js +13 -3
  19. data/app/assets/javascripts/materialize/carousel.js +33 -12
  20. data/app/assets/javascripts/materialize/character_counter.js +1 -1
  21. data/app/assets/javascripts/materialize/chips.js +8 -5
  22. data/app/assets/javascripts/materialize/collapsible.js +1 -1
  23. data/app/assets/javascripts/materialize/date_picker/picker.date.js +137 -136
  24. data/app/assets/javascripts/materialize/date_picker/picker.js +0 -1
  25. data/app/assets/javascripts/materialize/date_picker/picker.time.js +686 -0
  26. data/app/assets/javascripts/materialize/dropdown.js +17 -10
  27. data/app/assets/javascripts/materialize/extras/nouislider.js +1 -1
  28. data/app/assets/javascripts/materialize/extras/nouislider.min.js +1 -1
  29. data/app/assets/javascripts/materialize/forms.js +18 -12
  30. data/app/assets/javascripts/materialize/init.js +1 -0
  31. data/app/assets/javascripts/materialize/jquery.easing.1.4.js +166 -0
  32. data/app/assets/javascripts/materialize/materialbox.js +26 -17
  33. data/app/assets/javascripts/materialize/modal.js +2 -1
  34. data/app/assets/javascripts/materialize/scrollspy.js +11 -6
  35. data/app/assets/javascripts/materialize/sideNav.js +43 -13
  36. data/app/assets/javascripts/materialize/slider.js +3 -3
  37. data/app/assets/javascripts/materialize/tabs.js +10 -3
  38. data/app/assets/javascripts/materialize/tooltip.js +1 -1
  39. data/app/assets/javascripts/materialize/transitions.js +3 -3
  40. data/app/assets/javascripts/materialize/waves.js +1 -1
  41. data/app/assets/stylesheets/materialize.scss +0 -1
  42. data/app/assets/stylesheets/materialize/components/_buttons.scss +3 -8
  43. data/app/assets/stylesheets/materialize/components/_collapsible.scss +1 -0
  44. data/app/assets/stylesheets/materialize/components/_color.scss +1 -1
  45. data/app/assets/stylesheets/materialize/components/_global.scss +20 -20
  46. data/app/assets/stylesheets/materialize/components/_modal.scss +2 -2
  47. data/app/assets/stylesheets/materialize/components/_sideNav.scss +2 -0
  48. data/app/assets/stylesheets/materialize/components/_variables.scss +13 -4
  49. data/app/assets/stylesheets/materialize/components/date_picker/_default.date.scss +48 -27
  50. data/app/assets/stylesheets/materialize/components/date_picker/_default.scss +10 -0
  51. data/app/assets/stylesheets/materialize/components/date_picker/_default.time.scss +155 -13
  52. data/app/assets/stylesheets/materialize/components/forms/_input-fields.scss +12 -11
  53. data/app/assets/stylesheets/materialize/components/forms/_switches.scss +30 -17
  54. data/app/assets/stylesheets/materialize/extras/nouislider.css +1 -1
  55. data/lib/materialize-sass/version.rb +1 -1
  56. metadata +4 -14
  57. data/app/assets/fonts/roboto/Roboto-Bold.eot +0 -0
  58. data/app/assets/fonts/roboto/Roboto-Bold.ttf +0 -0
  59. data/app/assets/fonts/roboto/Roboto-Light.eot +0 -0
  60. data/app/assets/fonts/roboto/Roboto-Light.ttf +0 -0
  61. data/app/assets/fonts/roboto/Roboto-Medium.eot +0 -0
  62. data/app/assets/fonts/roboto/Roboto-Medium.ttf +0 -0
  63. data/app/assets/fonts/roboto/Roboto-Regular.eot +0 -0
  64. data/app/assets/fonts/roboto/Roboto-Regular.ttf +0 -0
  65. data/app/assets/fonts/roboto/Roboto-Thin.eot +0 -0
  66. data/app/assets/fonts/roboto/Roboto-Thin.ttf +0 -0
  67. data/app/assets/javascripts/materialize/jquery.easing.1.3.js +0 -205
  68. data/app/assets/stylesheets/materialize/components/_prefixer.scss +0 -384
@@ -6,7 +6,9 @@
6
6
  menuWidth: 300,
7
7
  edge: 'left',
8
8
  closeOnClick: false,
9
- draggable: true
9
+ draggable: true,
10
+ onOpen: null,
11
+ onClose: null
10
12
  };
11
13
  options = $.extend(defaults, options);
12
14
 
@@ -80,7 +82,9 @@
80
82
  // if closeOnClick, then add close event for all a tags in side sideNav
81
83
  if (options.closeOnClick === true) {
82
84
  menu.on("click.itemclick", "a:not(.collapsible-header)", function(){
83
- removeMenu();
85
+ if (!(window.innerWidth > 992 && menu.hasClass('fixed'))){
86
+ removeMenu();
87
+ }
84
88
  });
85
89
  }
86
90
 
@@ -133,7 +137,12 @@
133
137
  }
134
138
  });
135
139
  }
136
- };
140
+
141
+ // Callback
142
+ if (typeof(options.onClose) === 'function') {
143
+ options.onClose.call(this, menu);
144
+ }
145
+ }
137
146
 
138
147
 
139
148
 
@@ -150,7 +159,7 @@
150
159
 
151
160
  $dragTarget.hammer({
152
161
  prevent_default: false
153
- }).bind('pan', function(e) {
162
+ }).on('pan', function(e) {
154
163
 
155
164
  if (e.gesture.pointerType == "touch") {
156
165
 
@@ -159,6 +168,11 @@
159
168
  var y = e.gesture.center.y;
160
169
  var velocityX = e.gesture.velocityX;
161
170
 
171
+ // Vertical scroll bugfix
172
+ if (x === 0 && y === 0) {
173
+ return;
174
+ }
175
+
162
176
  // Disable Scrolling
163
177
  var $body = $('body');
164
178
  var $overlay = $('#sidenav-overlay');
@@ -172,6 +186,12 @@
172
186
  $overlay.css('opacity', 0).click( function(){
173
187
  removeMenu();
174
188
  });
189
+
190
+ // Run 'onOpen' when sidenav is opened via touch/swipe if applicable
191
+ if (typeof(options.onOpen) === 'function') {
192
+ options.onOpen.call(this, menu);
193
+ }
194
+
175
195
  $('body').append($overlay);
176
196
  }
177
197
 
@@ -218,7 +238,7 @@
218
238
  }
219
239
  }
220
240
 
221
- }).bind('panend', function(e) {
241
+ }).on('panend', function(e) {
222
242
 
223
243
  if (e.gesture.pointerType == "touch") {
224
244
  var $overlay = $('#sidenav-overlay');
@@ -256,6 +276,11 @@
256
276
  menu.velocity({'translateX': [-1 * options.menuWidth - 10, leftPos]}, {duration: 200, queue: false, easing: 'easeOutQuad'});
257
277
  $overlay.velocity({opacity: 0 }, {duration: 200, queue: false, easing: 'easeOutQuad',
258
278
  complete: function () {
279
+ // Run 'onClose' when sidenav is closed via touch/swipe if applicable
280
+ if (typeof(options.onClose) === 'function') {
281
+ options.onClose.call(this, menu);
282
+ }
283
+
259
284
  $(this).remove();
260
285
  }});
261
286
  $dragTarget.css({width: '10px', right: '', left: 0});
@@ -330,14 +355,19 @@
330
355
  $(this).remove();
331
356
  } });
332
357
 
333
- });
334
- $('body').append($overlay);
335
- $overlay.velocity({opacity: 1}, {duration: 300, queue: false, easing: 'easeOutQuad',
336
- complete: function () {
337
- menuOut = true;
338
- panning = false;
339
- }
340
- });
358
+ });
359
+ $('body').append($overlay);
360
+ $overlay.velocity({opacity: 1}, {duration: 300, queue: false, easing: 'easeOutQuad',
361
+ complete: function () {
362
+ menuOut = true;
363
+ panning = false;
364
+ }
365
+ });
366
+
367
+ // Callback
368
+ if (typeof(options.onOpen) === 'function') {
369
+ options.onOpen.call(this, menu);
370
+ }
341
371
  }
342
372
 
343
373
  return false;
@@ -96,7 +96,7 @@
96
96
  $slides.find('img').each(function () {
97
97
  var placeholderBase64 = 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
98
98
  if ($(this).attr('src') !== placeholderBase64) {
99
- $(this).css('background-image', 'url(' + $(this).attr('src') + ')' );
99
+ $(this).css('background-image', 'url("' + $(this).attr('src') + '")' );
100
100
  $(this).attr('src', placeholderBase64);
101
101
  }
102
102
  });
@@ -171,7 +171,7 @@
171
171
 
172
172
  $this.hammer({
173
173
  prevent_default: false
174
- }).bind('pan', function(e) {
174
+ }).on('pan', function(e) {
175
175
  if (e.gesture.pointerType === "touch") {
176
176
 
177
177
  // reset interval
@@ -219,7 +219,7 @@
219
219
 
220
220
  }
221
221
 
222
- }).bind('panend', function(e) {
222
+ }).on('panend', function(e) {
223
223
  if (e.gesture.pointerType === "touch") {
224
224
 
225
225
  $curr_slide = $slider.find('.active');
@@ -88,7 +88,7 @@
88
88
 
89
89
  // append indicator then set indicator width to tab width
90
90
  if (!$this.find('.indicator').length) {
91
- $this.append('<div class="indicator"></div>');
91
+ $this.append('<li class="indicator"></li>');
92
92
  }
93
93
  $indicator = $this.find('.indicator');
94
94
 
@@ -134,6 +134,9 @@
134
134
  index = $tabs_wrapper.index(item);
135
135
  $active = $links.eq(index);
136
136
  animateIndicator(prev_index);
137
+ if (typeof(options.onShow) === "function") {
138
+ options.onShow.call($this[0], $content);
139
+ }
137
140
  }
138
141
  },
139
142
  });
@@ -184,7 +187,11 @@
184
187
  // Swap content
185
188
  if (options.swipeable) {
186
189
  if ($tabs_content.length) {
187
- $tabs_content.carousel('set', index);
190
+ $tabs_content.carousel('set', index, function() {
191
+ if (typeof(options.onShow) === "function") {
192
+ options.onShow.call($this[0], $content);
193
+ }
194
+ });
188
195
  }
189
196
  } else {
190
197
  if ($content !== undefined) {
@@ -230,7 +237,7 @@
230
237
  }
231
238
  };
232
239
 
233
- $(document).on('turbolinks:load', function(){
240
+ $(document).on('ready turbolinks:load', function(){
234
241
  $('ul.tabs').tabs();
235
242
  });
236
243
  }( jQuery ));
@@ -232,7 +232,7 @@
232
232
  return {x: newX, y: newY};
233
233
  };
234
234
 
235
- $(document).on('turbolinks:load', function(){
235
+ $(document).on('ready turbolinks:load', function(){
236
236
  $('.tooltipped').tooltip();
237
237
  });
238
238
  }( jQuery ));
@@ -61,7 +61,7 @@
61
61
  };
62
62
 
63
63
 
64
- $(document).on('turbolinks:load', function() {
64
+ $(document).on('ready turbolinks:load', function() {
65
65
  // Hardcoded .staggered-list scrollFire
66
66
  // var staggeredListOptions = [];
67
67
  // $('ul.staggered-list').each(function (i) {
@@ -86,7 +86,7 @@
86
86
  $('.dismissable').each(function() {
87
87
  $(this).hammer({
88
88
  prevent_default: false
89
- }).bind('pan', function(e) {
89
+ }).on('pan', function(e) {
90
90
  if (e.gesture.pointerType === "touch") {
91
91
  var $this = $(this);
92
92
  var direction = e.gesture.direction;
@@ -106,7 +106,7 @@
106
106
  swipeRight = true;
107
107
  }
108
108
  }
109
- }).bind('panend', function(e) {
109
+ }).on('panend', function(e) {
110
110
  // Reset if collection is moved back into original position
111
111
  if (Math.abs(e.gesture.deltaX) < ($(this).innerWidth() / 2)) {
112
112
  swipeRight = false;
@@ -262,7 +262,7 @@
262
262
  if (!(target instanceof SVGElement) && target.className.indexOf('waves-effect') !== -1) {
263
263
  element = target;
264
264
  break;
265
- } else if (target.classList.contains('waves-effect')) {
265
+ } else if (target.className.indexOf('waves-effect') !== -1) {
266
266
  element = target;
267
267
  break;
268
268
  }
@@ -1,7 +1,6 @@
1
1
  @charset "UTF-8";
2
2
 
3
3
  // Mixins
4
- // @import "materialize/components/prefixer";
5
4
  @import "materialize/components/mixins";
6
5
  @import "materialize/components/color";
7
6
 
@@ -183,6 +183,7 @@ button.btn-floating {
183
183
  display: flex;
184
184
  top: 0;
185
185
  bottom: 0;
186
+ z-index: 1;
186
187
 
187
188
  li {
188
189
  flex: 1;
@@ -257,19 +258,13 @@ button.btn-floating {
257
258
  cursor: pointer;
258
259
  transition: background-color .2s;
259
260
 
260
- &:focus,
261
- &:active {
262
- background-color: transparent;
263
- }
264
-
265
261
  &:focus,
266
262
  &:hover {
267
- background-color: rgba(0,0,0,.1);
268
263
  box-shadow: none;
269
264
  }
270
265
 
271
- &:active {
272
- background-color: rgba(0,0,0,.2);
266
+ &:focus {
267
+ background-color: rgba(0,0,0,.1);
273
268
  }
274
269
 
275
270
  &.disabled {
@@ -9,6 +9,7 @@
9
9
  .collapsible-header {
10
10
  display: block;
11
11
  cursor: pointer;
12
+ -webkit-tap-highlight-color: transparent;
12
13
  min-height: $collapsible-height;
13
14
  line-height: $collapsible-line-height;
14
15
  padding: 0 1rem;
@@ -359,7 +359,7 @@ $colors: (
359
359
  "blue-grey": $blue-grey,
360
360
  "grey": $grey,
361
361
  "shades": $shades
362
- );
362
+ ) !default;
363
363
 
364
364
 
365
365
  // Color Classes
@@ -226,32 +226,31 @@ video.responsive-video {
226
226
  }
227
227
  }
228
228
 
229
-
230
229
  // Parallax
231
230
  .parallax-container {
232
231
  position: relative;
233
232
  overflow: hidden;
234
233
  height: 500px;
235
- }
236
-
237
- .parallax {
238
- position: absolute;
239
- top: 0;
240
- left: 0;
241
- right: 0;
242
- bottom: 0;
243
- z-index: -1;
244
234
 
245
- img {
246
- display: none;
235
+ .parallax {
247
236
  position: absolute;
248
- left: 50%;
237
+ top: 0;
238
+ left: 0;
239
+ right: 0;
249
240
  bottom: 0;
250
- min-width: 100%;
251
- min-height: 100%;
252
- -webkit-transform: translate3d(0,0,0);
253
- transform: translate3d(0,0,0);
254
- transform: translateX(-50%);
241
+ z-index: -1;
242
+
243
+ img {
244
+ display: none;
245
+ position: absolute;
246
+ left: 50%;
247
+ bottom: 0;
248
+ min-width: 100%;
249
+ min-height: 100%;
250
+ -webkit-transform: translate3d(0,0,0);
251
+ transform: translate3d(0,0,0);
252
+ transform: translateX(-50%);
253
+ }
255
254
  }
256
255
  }
257
256
 
@@ -342,6 +341,7 @@ ul.staggered-list li {
342
341
  // Footer
343
342
  .page-footer {
344
343
  padding-top: 20px;
344
+ color: $footer-font-color;
345
345
  background-color: $footer-bg-color;
346
346
 
347
347
  .footer-copyright {
@@ -350,8 +350,8 @@ ul.staggered-list li {
350
350
  display: flex;
351
351
  align-items: center;
352
352
  padding: 10px 0px;
353
- color: rgba(255,255,255,.8);
354
- background-color: rgba(51,51,51,.08);
353
+ color: $footer-copyright-font-color;
354
+ background-color: $footer-copyright-bg-color;
355
355
  @extend .light;
356
356
  }
357
357
  }
@@ -36,9 +36,9 @@
36
36
  padding: 4px 6px;
37
37
  height: 56px;
38
38
  width: 100%;
39
+ text-align: right;
39
40
 
40
41
  .btn, .btn-flat {
41
- float: right;
42
42
  margin: 6px 0;
43
43
  }
44
44
  }
@@ -46,7 +46,7 @@
46
46
  .modal-overlay {
47
47
  position: fixed;
48
48
  z-index: 999;
49
- top: -100px;
49
+ top: -25%;
50
50
  left: 0;
51
51
  bottom: 0;
52
52
  right: 0;
@@ -92,6 +92,7 @@
92
92
  line-height: $sidenav-line-height;
93
93
  }
94
94
 
95
+ .user-view,
95
96
  .userView {
96
97
  position: relative;
97
98
  padding: ($sidenav-padding * 2) ($sidenav-padding * 2) 0;
@@ -179,6 +180,7 @@
179
180
  padding: 0 $sidenav-padding;
180
181
  }
181
182
 
183
+ .user-view,
182
184
  .userView {
183
185
  padding: $sidenav-padding $sidenav-padding 0;
184
186
  }
@@ -10,8 +10,9 @@
10
10
  // 4. Cards
11
11
  // 5. Collapsible
12
12
  // 6. Chips
13
- // 7. Date Picker
13
+ // 7. Date + Time Picker
14
14
  // 8. Dropdown
15
+ // 9. Fonts
15
16
  // 10. Forms
16
17
  // 11. Global
17
18
  // 12. Grid
@@ -115,16 +116,21 @@ $chip-selected-color: #26a69a !default;
115
116
  $chip-margin: 5px !default;
116
117
 
117
118
 
118
- // 7. Date Picker
119
+ // 7. Date + Time Picker
119
120
  // ==========================================================================
120
121
 
122
+ $datepicker-display-font-size: 2.8rem;
123
+ $datepicker-weekday-color: rgba(0, 0, 0, .87) !default;
121
124
  $datepicker-weekday-bg: darken($secondary-color, 7%) !default;
122
125
  $datepicker-date-bg: $secondary-color !default;
123
- $datepicker-year: rgba(255, 255, 255, .4) !default;
126
+ $datepicker-year: rgba(255, 255, 255, .7) !default;
124
127
  $datepicker-focus: rgba(0,0,0, .05) !default;
125
128
  $datepicker-selected: $secondary-color !default;
126
129
  $datepicker-selected-outfocus: desaturate(lighten($secondary-color, 35%), 15%) !default;
127
130
 
131
+ $timepicker-clock-color: rgba(0, 0, 0, .87) !default;
132
+ $timepicker-clock-plate-bg: #eee;
133
+
128
134
 
129
135
  // 8. Dropdown
130
136
  // ==========================================================================
@@ -186,7 +192,7 @@ $select-disabled-color: rgba(0,0,0,.3) !default;
186
192
  $switch-bg-color: $secondary-color !default;
187
193
  $switch-checked-lever-bg: desaturate(lighten($secondary-color, 25%), 25%) !default;
188
194
  $switch-unchecked-bg: #F1F1F1 !default;
189
- $switch-unchecked-lever-bg: #818181 !default;
195
+ $switch-unchecked-lever-bg: rgba(0,0,0,.38) !default;
190
196
  $switch-radius: 15px !default;
191
197
 
192
198
 
@@ -293,7 +299,10 @@ $h6-fontsize: 1rem !default;
293
299
  // 21. Footer
294
300
  // ==========================================================================
295
301
 
302
+ $footer-font-color: #fff !default;
296
303
  $footer-bg-color: $primary-color !default;
304
+ $footer-copyright-font-color: rgba(255,255,255,.8) !default;
305
+ $footer-copyright-bg-color: rgba(51,51,51,.08) !default;
297
306
 
298
307
 
299
308
  // 22. Flow Text
@@ -5,7 +5,9 @@
5
5
  * The picker box.
6
6
  */
7
7
  .picker__box {
8
- padding: 0 1em;
8
+ padding: 0;
9
+ border-radius: 2px;
10
+ overflow: hidden;
9
11
  }
10
12
  /**
11
13
  * The header containing the month and year stuff.
@@ -229,10 +231,7 @@
229
231
  * The footer containing the "today", "clear", and "close" buttons.
230
232
  */
231
233
  .picker__footer {
232
- text-align: center;
233
- display: flex;
234
- align-items: center;
235
- justify-content: space-between;
234
+ text-align: right;
236
235
  }
237
236
  .picker__button--today,
238
237
  .picker__button--clear,
@@ -306,19 +305,31 @@
306
305
  /* ==========================================================================
307
306
  CUSTOM MATERIALIZE STYLES
308
307
  ========================================================================== */
309
- .picker__box {
308
+ /*.picker__box {
310
309
  border-radius: 2px;
311
310
  overflow: hidden;
312
- }
311
+ }*/
313
312
 
314
313
  .picker__date-display {
315
- text-align: center;
314
+ text-align: left;
316
315
  background-color: $datepicker-date-bg;
317
316
  color: #fff;
318
- padding-bottom: 15px;
317
+ padding: 18px;
319
318
  font-weight: 300;
320
319
  }
321
320
 
321
+ @media only screen and (min-width: 601px) {
322
+ .picker__date-display {
323
+ flex:1;
324
+ }
325
+ .picker__weekday-display {
326
+ display:block;
327
+ }
328
+ .picker__container__wrapper {
329
+ flex:2
330
+ }
331
+ }
332
+
322
333
  .picker__nav--prev:hover,
323
334
  .picker__nav--next:hover {
324
335
  cursor: pointer;
@@ -327,31 +338,31 @@
327
338
  }
328
339
 
329
340
  .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;
341
+ font-weight: 500;
342
+ font-size: $datepicker-display-font-size;
343
+ margin-right: 5px;
344
+ margin-top: 4px;
336
345
  }
337
346
 
338
347
  .picker__month-display {
339
- text-transform: uppercase;
340
- font-size: 2rem;
348
+ //text-transform: uppercase;
349
+ font-size: $datepicker-display-font-size;
350
+ font-weight: 500;
341
351
  }
342
352
  .picker__day-display {
343
-
344
- font-size: 4.5rem;
345
- font-weight: 400;
353
+ font-size: $datepicker-display-font-size;
354
+ font-weight: 500;
355
+ margin-right: 5px;
346
356
  }
347
357
  .picker__year-display {
348
- font-size: 1.8rem;
358
+ font-size: 1.5rem;
359
+ font-weight: 500;
349
360
  color: $datepicker-year;
350
361
  }
351
362
 
352
- .picker__box {
363
+ /*.picker__box {
353
364
  padding: 0;
354
- }
365
+ }*/
355
366
  .picker__calendar-container {
356
367
  padding: 0 1rem;
357
368
 
@@ -367,12 +378,18 @@
367
378
  }
368
379
 
369
380
  .picker__day--infocus {
370
- color: #595959;
371
- letter-spacing: -.3;
372
- padding: .75rem 0;
381
+ color: $datepicker-weekday-color;
382
+ letter-spacing: -.3px;
383
+ padding: 0.75rem 0;
373
384
  font-weight: 400;
374
385
  border: 1px solid transparent;
375
386
  }
387
+ @media only screen and (min-width: 601px) {
388
+ .picker__day--infocus {
389
+ padding: 1.1rem 0;
390
+ }
391
+ }
392
+
376
393
 
377
394
  //Today style
378
395
  .picker__day.picker__day--today {
@@ -408,11 +425,15 @@
408
425
  }
409
426
 
410
427
  // Materialize modified
411
- .picker__close, .picker__today {
428
+ .picker__close, .picker__today, .picker__clear {
412
429
  font-size: 1.1rem;
413
430
  padding: 0 1rem;
414
431
  color: $datepicker-selected;
415
432
  }
433
+ .picker__clear {
434
+ color:#f44336;
435
+ float:left;
436
+ }
416
437
 
417
438
  //month nav buttons
418
439
  .picker__nav--prev:before,