materialize-sass 1.0.0.alpha1 → 1.0.0.alpha2

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 (46) hide show
  1. checksums.yaml +4 -4
  2. data/assets/javascripts/materialize-sprockets.js +1 -1
  3. data/assets/javascripts/materialize.js +1162 -1218
  4. data/assets/javascripts/materialize/anime.min.js +417 -0
  5. data/assets/javascripts/materialize/buttons.js +49 -26
  6. data/assets/javascripts/materialize/cards.js +14 -8
  7. data/assets/javascripts/materialize/cash.js +3 -5
  8. data/assets/javascripts/materialize/chips.js +22 -19
  9. data/assets/javascripts/materialize/collapsible.js +53 -17
  10. data/assets/javascripts/materialize/datepicker.js +94 -78
  11. data/assets/javascripts/materialize/dropdown.js +33 -26
  12. data/assets/javascripts/materialize/extras/nouislider.js +1 -1
  13. data/assets/javascripts/materialize/extras/nouislider.min.js +1 -1
  14. data/assets/javascripts/materialize/forms.js +17 -6
  15. data/assets/javascripts/materialize/global.js +17 -15
  16. data/assets/javascripts/materialize/materialbox.js +62 -35
  17. data/assets/javascripts/materialize/modal.js +50 -19
  18. data/assets/javascripts/materialize/range.js +40 -16
  19. data/assets/javascripts/materialize/scrollspy.js +9 -3
  20. data/assets/javascripts/materialize/select.js +62 -38
  21. data/assets/javascripts/materialize/sidenav.js +52 -18
  22. data/assets/javascripts/materialize/slider.js +56 -16
  23. data/assets/javascripts/materialize/tabs.js +35 -23
  24. data/assets/javascripts/materialize/timepicker.js +581 -579
  25. data/assets/javascripts/materialize/toasts.js +11 -7
  26. data/assets/javascripts/materialize/tooltip.js +16 -18
  27. data/assets/stylesheets/materialize.scss +3 -3
  28. data/assets/stylesheets/materialize/components/_buttons.scss +2 -2
  29. data/assets/stylesheets/materialize/components/_color-classes.scss +32 -0
  30. data/assets/stylesheets/materialize/components/{_color.scss → _color-variables.scss} +0 -42
  31. data/assets/stylesheets/materialize/components/_datepicker.scss +10 -4
  32. data/assets/stylesheets/materialize/components/_dropdown.scss +5 -0
  33. data/assets/stylesheets/materialize/components/_navbar.scss +3 -3
  34. data/assets/stylesheets/materialize/components/_pulse.scss +1 -1
  35. data/assets/stylesheets/materialize/components/_timepicker.scss +1 -0
  36. data/assets/stylesheets/materialize/components/_variables.scss +0 -1
  37. data/assets/stylesheets/materialize/components/forms/_input-fields.scss +6 -4
  38. data/assets/stylesheets/materialize/components/forms/_range.scss +3 -3
  39. data/assets/stylesheets/materialize/components/forms/_select.scss +7 -7
  40. data/assets/stylesheets/materialize/extras/nouislider.css +1 -1
  41. data/lib/materialize-sass/engine.rb +2 -0
  42. data/lib/materialize-sass/helpers.rb +38 -0
  43. data/lib/materialize-sass/version.rb +1 -1
  44. metadata +6 -5
  45. data/assets/javascripts/materialize/velocity.min.js +0 -782
  46. data/assets/stylesheets/materialize/components/_mixins.scss +0 -5
@@ -2,7 +2,7 @@ var _createClass = function () { function defineProperties(target, props) { for
2
2
 
3
3
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
4
4
 
5
- (function ($, Vel) {
5
+ (function ($, anim) {
6
6
  'use strict';
7
7
 
8
8
  var _defaults = {};
@@ -66,12 +66,14 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
66
66
  key: '_setupEventHandlers',
67
67
  value: function _setupEventHandlers() {
68
68
  this._handleRangeChangeBound = this._handleRangeChange.bind(this);
69
+ this._handleRangeFocusBound = this._handleRangeFocus.bind(this);
69
70
  this._handleRangeMousedownTouchstartBound = this._handleRangeMousedownTouchstart.bind(this);
70
71
  this._handleRangeInputMousemoveTouchmoveBound = this._handleRangeInputMousemoveTouchmove.bind(this);
71
72
  this._handleRangeMouseupTouchendBound = this._handleRangeMouseupTouchend.bind(this);
72
73
  this._handleRangeBlurMouseoutTouchleaveBound = this._handleRangeBlurMouseoutTouchleave.bind(this);
73
74
 
74
75
  this.el.addEventListener('change', this._handleRangeChangeBound);
76
+ this.el.addEventListener('focus', this._handleRangeFocusBound);
75
77
 
76
78
  this.el.addEventListener('mousedown', this._handleRangeMousedownTouchstartBound);
77
79
  this.el.addEventListener('touchstart', this._handleRangeMousedownTouchstartBound);
@@ -96,6 +98,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
96
98
  key: '_removeEventHandlers',
97
99
  value: function _removeEventHandlers() {
98
100
  this.el.removeEventListener('change', this._handleRangeChangeBound);
101
+ this.el.removeEventListener('focus', this._handleRangeFocusBound);
99
102
 
100
103
  this.el.removeEventListener('mousedown', this._handleRangeMousedownTouchstartBound);
101
104
  this.el.removeEventListener('touchstart', this._handleRangeMousedownTouchstartBound);
@@ -130,6 +133,19 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
130
133
  $(this.thumb).addClass('active').css('left', offsetLeft + 'px');
131
134
  }
132
135
 
136
+ /**
137
+ * Handle Range Focus
138
+ * @param {Event} e
139
+ */
140
+
141
+ }, {
142
+ key: '_handleRangeFocus',
143
+ value: function _handleRangeFocus() {
144
+ if (M.tabPressed) {
145
+ this.$el.addClass('focused');
146
+ }
147
+ }
148
+
133
149
  /**
134
150
  * Handle Range Mousedown and Touchstart
135
151
  * @param {Event} e
@@ -191,17 +207,21 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
191
207
  key: '_handleRangeBlurMouseoutTouchleave',
192
208
  value: function _handleRangeBlurMouseoutTouchleave() {
193
209
  if (!this._mousedown) {
210
+ this.$el.removeClass('focused');
194
211
  var paddingLeft = parseInt(this.$el.css('padding-left'));
195
212
  var marginLeft = 7 + paddingLeft + 'px';
196
213
 
197
214
  if ($(this.thumb).hasClass('active')) {
198
- Vel(this.thumb, 'stop');
199
- Vel(this.thumb, {
200
- height: '0px',
201
- width: '0px',
202
- top: '10px',
203
- marginLeft: marginLeft
204
- }, { duration: 100 });
215
+ anim.remove(this.thumb);
216
+ anim({
217
+ targets: this.thumb,
218
+ height: 0,
219
+ width: 0,
220
+ top: 10,
221
+ easing: 'easeOutQuad',
222
+ marginLeft: marginLeft,
223
+ duration: 100
224
+ });
205
225
  }
206
226
  $(this.thumb).removeClass('active');
207
227
  }
@@ -241,12 +261,16 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
241
261
  value: function _showRangeBubble() {
242
262
  var paddingLeft = parseInt($(this.thumb).parent().css('padding-left'));
243
263
  var marginLeft = -7 + paddingLeft + 'px'; // TODO: fix magic number?
244
- Vel(this.thumb, {
245
- height: "30px",
246
- width: "30px",
247
- top: "-30px",
248
- marginLeft: marginLeft
249
- }, { duration: 300, easing: 'easeOutExpo' });
264
+ anim.remove(this.thumb);
265
+ anim({
266
+ targets: this.thumb,
267
+ height: 30,
268
+ width: 30,
269
+ top: -30,
270
+ marginLeft: marginLeft,
271
+ duration: 300,
272
+ easing: 'easeOutQuint'
273
+ });
250
274
  }
251
275
 
252
276
  /**
@@ -301,5 +325,5 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
301
325
  M.initializeJqueryWrapper(Range, 'range', 'M_Range');
302
326
  }
303
327
 
304
- Range.init($('input[type=range'));
305
- })(cash, M.Vel);
328
+ Range.init($('input[type=range]'));
329
+ })(cash, M.anime);
@@ -2,7 +2,7 @@ var _createClass = function () { function defineProperties(target, props) { for
2
2
 
3
3
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
4
4
 
5
- (function ($, Vel) {
5
+ (function ($, anim) {
6
6
  'use strict';
7
7
 
8
8
  var _defaults = {
@@ -120,7 +120,13 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
120
120
  if ($trigger.is('a[href="#' + scrollspy.$el.attr('id') + '"]')) {
121
121
  e.preventDefault();
122
122
  var offset = scrollspy.$el.offset().top + 1;
123
- Vel(document.body, 'scroll', { duration: 400, offset: offset - scrollspy.options.scrollOffset, easing: 'easeOutCubic' });
123
+
124
+ anim({
125
+ targets: [document.documentElement, document.body],
126
+ scrollTop: offset - scrollspy.options.scrollOffset,
127
+ duration: 400,
128
+ easing: 'easeOutCubic'
129
+ });
124
130
  break;
125
131
  }
126
132
  }
@@ -319,4 +325,4 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
319
325
  if (M.jQueryLoaded) {
320
326
  M.initializeJqueryWrapper(ScrollSpy, 'scrollSpy', 'M_ScrollSpy');
321
327
  }
322
- })(cash, M.Vel);
328
+ })(cash, M.anime);
@@ -42,8 +42,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
42
42
  this.isMultiple = this.$el.prop('multiple');
43
43
 
44
44
  // Setup
45
- this.valuesSelected = [];
46
- this.$selectedOptions = $();
45
+ this._keysSelected = {};
46
+ this._valueDict = {}; // Maps key to original and generated option element.
47
47
  this._setupDropdown();
48
48
 
49
49
  this._setupEventHandlers();
@@ -120,14 +120,14 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
120
120
  value: function _handleOptionClick(e) {
121
121
  e.preventDefault();
122
122
  var option = $(e.target).closest('li')[0];
123
- var optionIndex = $(this.dropdownOptions).find('li:not(.optgroup)').index(option);
124
- if (!$(option).hasClass('disabled') && !$(option).hasClass('optgroup')) {
123
+ var key = option.id;
124
+ if (!$(option).hasClass('disabled') && !$(option).hasClass('optgroup') && key.length) {
125
125
  var selected = true;
126
126
 
127
127
  if (this.isMultiple) {
128
128
  var checkbox = $(option).find('input[type="checkbox"]');
129
129
  checkbox.prop('checked', !checkbox.prop('checked'));
130
- selected = this._toggleEntryFromArray(optionIndex);
130
+ selected = this._toggleEntryFromArray(key);
131
131
  } else {
132
132
  $(this.dropdownOptions).find('li').removeClass('active');
133
133
  $(option).toggleClass('active');
@@ -135,7 +135,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
135
135
  }
136
136
 
137
137
  this._activateOption($(this.dropdownOptions), option);
138
- this.$el.find('option').eq(optionIndex).prop('selected', selected);
138
+ $(this._valueDict[key].el).prop('selected', selected);
139
139
  this.$el.trigger('change');
140
140
  }
141
141
 
@@ -165,7 +165,6 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
165
165
  var _this3 = this;
166
166
 
167
167
  this.wrapper = document.createElement('div');
168
- this.wrapper.classList.add();
169
168
  $(this.wrapper).addClass('select-wrapper' + ' ' + this.options.classes);
170
169
  this.$el.before($(this.wrapper));
171
170
  this.wrapper.appendChild(this.el);
@@ -192,9 +191,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
192
191
  optionEl = _this3._appendOptionWithIcon(_this3.$el, el);
193
192
  }
194
193
 
195
- if ($(el).prop('selected')) {
196
- _this3.$selectedOptions.add(optionEl);
197
- }
194
+ _this3._addOptionToValueDict(el, optionEl);
198
195
  } else if ($(el).is('optgroup')) {
199
196
  // Optgroup.
200
197
  var selectOptions = $(el).children('option');
@@ -202,9 +199,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
202
199
 
203
200
  selectOptions.each(function (el) {
204
201
  var optionEl = _this3._appendOptionWithIcon(_this3.$el, el, 'optgroup-option');
205
- if ($(el).prop('selected')) {
206
- _this3.$selectedOptions.add(optionEl);
207
- }
202
+ _this3._addOptionToValueDict(el, optionEl);
208
203
  });
209
204
  }
210
205
  });
@@ -226,7 +221,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
226
221
  this._setValueToInput();
227
222
 
228
223
  // Add caret
229
- var dropdownIcon = $('<svg class="caret" fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
224
+ var dropdownIcon = $('<svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
230
225
  this.$el.before(dropdownIcon[0]);
231
226
 
232
227
  // Initialize dropdown
@@ -242,6 +237,25 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
242
237
  this._setSelectedStates();
243
238
  }
244
239
 
240
+ /**
241
+ * Add option to value dict
242
+ * @param {Element} el original option element
243
+ * @param {Element} optionEl generated option element
244
+ */
245
+
246
+ }, {
247
+ key: '_addOptionToValueDict',
248
+ value: function _addOptionToValueDict(el, optionEl) {
249
+ var index = Object.keys(this._valueDict).length;
250
+ var key = this.dropdownOptions.id + index;
251
+ var obj = {};
252
+ optionEl.id = key;
253
+
254
+ obj.el = el;
255
+ obj.optionEl = optionEl;
256
+ this._valueDict[key] = obj;
257
+ }
258
+
245
259
  /**
246
260
  * Remove dropdown
247
261
  */
@@ -292,26 +306,24 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
292
306
 
293
307
  /**
294
308
  * Toggle entry from option
295
- * @param {Number} entryIndex
309
+ * @param {String} key Option key
296
310
  * @return {Boolean} if entry was added or removed
297
311
  */
298
312
 
299
313
  }, {
300
314
  key: '_toggleEntryFromArray',
301
- value: function _toggleEntryFromArray(entryIndex) {
302
- var index = this.valuesSelected.indexOf(entryIndex),
303
- notAdded = index === -1;
304
-
315
+ value: function _toggleEntryFromArray(key) {
316
+ var notAdded = !this._keysSelected.hasOwnProperty(key);
305
317
  if (notAdded) {
306
- this.valuesSelected.push(entryIndex);
318
+ this._keysSelected[key] = true;
307
319
  } else {
308
- this.valuesSelected.splice(index, 1);
320
+ delete this._keysSelected[key];
309
321
  }
310
322
 
311
- $(this.dropdownOptions).find('li:not(.optgroup)').eq(entryIndex).toggleClass('active');
323
+ $(this._valueDict[key].optionEl).toggleClass('active');
312
324
 
313
325
  // use notAdded instead of true (to detect if the option is selected or not)
314
- this.$el.find('option').eq(entryIndex).prop('selected', notAdded);
326
+ $(this._valueDict[key].el).prop('selected', notAdded);
315
327
 
316
328
  return notAdded;
317
329
  }
@@ -326,7 +338,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
326
338
  var value = '';
327
339
  var options = this.$el.find('option');
328
340
 
329
- options.each(function (el, i) {
341
+ options.each(function (el) {
330
342
  if ($(el).prop('selected')) {
331
343
  var text = $(el).text();
332
344
  value === '' ? value += text : value += ', ' + text;
@@ -350,22 +362,19 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
350
362
  }, {
351
363
  key: '_setSelectedStates',
352
364
  value: function _setSelectedStates() {
353
- var _this4 = this;
354
-
355
- this.valuesSelected = [];
356
- var $onlyOptions = $(this.dropdownOptions).find('li:not(.optgroup)');
357
- this.$el.find('option').each(function (el, i) {
358
- var option = $onlyOptions.eq(i);
359
-
360
- if ($(el).prop('selected')) {
361
- option.find('input[type="checkbox"]').prop("checked", true);
362
- _this4._activateOption($(_this4.dropdownOptions), option);
363
- _this4.valuesSelected.push(i);
365
+ this._keysSelected = {};
366
+
367
+ for (var key in this._valueDict) {
368
+ var option = this._valueDict[key];
369
+ if ($(option.el).prop('selected')) {
370
+ $(option.optionEl).find('input[type="checkbox"]').prop("checked", true);
371
+ this._activateOption($(this.dropdownOptions), $(option.optionEl));
372
+ this._keysSelected[key] = true;
364
373
  } else {
365
- option.find('input[type="checkbox"]').prop("checked", false);
366
- option.removeClass('selected');
374
+ $(option.optionEl).find('input[type="checkbox"]').prop("checked", false);
375
+ $(option.optionEl).removeClass('selected');
367
376
  }
368
- });
377
+ }
369
378
  }
370
379
 
371
380
  /**
@@ -386,6 +395,21 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
386
395
  option.addClass('selected');
387
396
  }
388
397
  }
398
+
399
+ /**
400
+ * Get Selected Values
401
+ * @return {Array} Array of selected values
402
+ */
403
+
404
+ }, {
405
+ key: 'getSelectedValues',
406
+ value: function getSelectedValues() {
407
+ var selectedValues = [];
408
+ for (var key in this._keysSelected) {
409
+ selectedValues.push(this._valueDict[key].el.value);
410
+ }
411
+ return selectedValues;
412
+ }
389
413
  }], [{
390
414
  key: 'init',
391
415
  value: function init($els, options) {
@@ -2,7 +2,7 @@ var _createClass = function () { function defineProperties(target, props) { for
2
2
 
3
3
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
4
4
 
5
- (function ($, Vel) {
5
+ (function ($, anim) {
6
6
  'use strict';
7
7
 
8
8
  var _defaults = {
@@ -181,7 +181,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
181
181
 
182
182
  /**
183
183
  * Set variables needed at the beggining of drag
184
- * and stop any current Velocity transition.
184
+ * and stop any current transition.
185
185
  * @param {Event} e
186
186
  */
187
187
 
@@ -195,8 +195,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
195
195
  this._time = Date.now();
196
196
  this._width = this.el.getBoundingClientRect().width;
197
197
  this._overlay.style.display = 'block';
198
- Vel(this.el, 'stop');
199
- Vel(this._overlay, 'stop');
198
+ anim.remove(this.el);
199
+ anim.remove(this._overlay);
200
200
  }
201
201
 
202
202
  /**
@@ -425,8 +425,13 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
425
425
 
426
426
  // Handle fixed Sidenav
427
427
  if (this.isFixed && window.innerWidth > 992) {
428
- Vel(this.el, 'stop');
429
- Vel(this.el, { translateX: 0 }, { duration: 0, queue: false });
428
+ anim.remove(this.el);
429
+ anim({
430
+ targets: this.el,
431
+ translateX: 0,
432
+ duration: 0,
433
+ easing: 'easeOutQuad'
434
+ });
430
435
  this._enableBodyScrolling();
431
436
  this._overlay.style.display = 'none';
432
437
 
@@ -485,13 +490,19 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
485
490
  slideOutPercent = this.options.edge === 'left' ? slideOutPercent + this.percentOpen : slideOutPercent - this.percentOpen;
486
491
  }
487
492
 
488
- Vel(this.el, 'stop');
489
- Vel(this.el, { 'translateX': [0, slideOutPercent * 100 + '%'] }, { duration: this.options.inDuration, queue: false, easing: 'easeOutQuad', complete: function () {
493
+ anim.remove(this.el);
494
+ anim({
495
+ targets: this.el,
496
+ translateX: [slideOutPercent * 100 + '%', 0],
497
+ duration: this.options.inDuration,
498
+ easing: 'easeOutQuad',
499
+ complete: function () {
490
500
  // Run onOpenEnd callback
491
501
  if (typeof _this.options.onOpenEnd === 'function') {
492
502
  _this.options.onOpenEnd.call(_this, _this.el);
493
503
  }
494
- } });
504
+ }
505
+ });
495
506
  }
496
507
  }, {
497
508
  key: '_animateOverlayIn',
@@ -500,11 +511,18 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
500
511
  if (this.isDragged) {
501
512
  start = this.percentOpen;
502
513
  } else {
503
- Vel.hook(this._overlay, 'display', 'block');
514
+ $(this._overlay).css({
515
+ display: 'block'
516
+ });
504
517
  }
505
518
 
506
- Vel(this._overlay, 'stop');
507
- Vel(this._overlay, { opacity: [1, start] }, { duration: this.options.inDuration, queue: false, easing: 'easeOutQuad' });
519
+ anim.remove(this._overlay);
520
+ anim({
521
+ targets: this._overlay,
522
+ opacity: [start, 1],
523
+ duration: this.options.inDuration,
524
+ easing: 'easeOutQuad'
525
+ });
508
526
  }
509
527
  }, {
510
528
  key: '_animateOut',
@@ -523,19 +541,35 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
523
541
  slideOutPercent = this.options.edge === 'left' ? endPercent + this.percentOpen : endPercent - this.percentOpen;
524
542
  }
525
543
 
526
- Vel(this.el, 'stop');
527
- Vel(this.el, { 'translateX': [endPercent * 105 + '%', slideOutPercent * 100 + '%'] }, { duration: this.options.outDuration, queue: false, easing: 'easeOutQuad', complete: function () {
544
+ anim.remove(this.el);
545
+ anim({
546
+ targets: this.el,
547
+ translateX: [slideOutPercent * 100 + '%', endPercent * 105 + '%'],
548
+ duration: this.options.outDuration,
549
+ easing: 'easeOutQuad',
550
+ complete: function () {
528
551
  // Run onOpenEnd callback
529
552
  if (typeof _this2.options.onCloseEnd === 'function') {
530
553
  _this2.options.onCloseEnd.call(_this2, _this2.el);
531
554
  }
532
- } });
555
+ }
556
+ });
533
557
  }
534
558
  }, {
535
559
  key: '_animateOverlayOut',
536
560
  value: function _animateOverlayOut() {
537
- Vel(this._overlay, 'stop');
538
- Vel(this._overlay, 'fadeOut', { duration: this.options.outDuration, queue: false, easing: 'easeOutQuad' });
561
+ var _this3 = this;
562
+
563
+ anim.remove(this._overlay);
564
+ anim({
565
+ targets: this._overlay,
566
+ opacity: 0,
567
+ duration: this.options.outDuration,
568
+ easing: 'easeOutQuad',
569
+ complete: function () {
570
+ $(_this3._overlay).css('display', 'none');
571
+ }
572
+ });
539
573
  }
540
574
  }], [{
541
575
  key: 'init',
@@ -581,4 +615,4 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
581
615
  if (M.jQueryLoaded) {
582
616
  M.initializeJqueryWrapper(Sidenav, 'sidenav', 'M_Sidenav');
583
617
  }
584
- })(cash, M.Vel);
618
+ })(cash, M.anime);