materialize-sass 1.0.0.beta → 1.0.0.rc1

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 (37) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +2 -2
  3. data/assets/javascripts/materialize.js +277 -195
  4. data/assets/javascripts/materialize/autocomplete.js +94 -37
  5. data/assets/javascripts/materialize/buttons.js +4 -6
  6. data/assets/javascripts/materialize/carousel.js +7 -7
  7. data/assets/javascripts/materialize/collapsible.js +0 -2
  8. data/assets/javascripts/materialize/datepicker.js +27 -44
  9. data/assets/javascripts/materialize/dropdown.js +29 -9
  10. data/assets/javascripts/materialize/extras/nouislider.js +1 -1
  11. data/assets/javascripts/materialize/extras/nouislider.min.js +1 -1
  12. data/assets/javascripts/materialize/forms.js +4 -4
  13. data/assets/javascripts/materialize/global.js +26 -11
  14. data/assets/javascripts/materialize/materialbox.js +6 -6
  15. data/assets/javascripts/materialize/modal.js +8 -4
  16. data/assets/javascripts/materialize/parallax.js +1 -1
  17. data/assets/javascripts/materialize/range.js +2 -19
  18. data/assets/javascripts/materialize/select.js +22 -23
  19. data/assets/javascripts/materialize/sidenav.js +3 -2
  20. data/assets/javascripts/materialize/slider.js +2 -1
  21. data/assets/javascripts/materialize/tabs.js +3 -3
  22. data/assets/javascripts/materialize/timepicker.js +22 -5
  23. data/assets/javascripts/materialize/toasts.js +4 -3
  24. data/assets/javascripts/materialize/tooltip.js +8 -3
  25. data/assets/stylesheets/materialize/components/_buttons.scss +2 -1
  26. data/assets/stylesheets/materialize/components/_collapsible.scss +7 -0
  27. data/assets/stylesheets/materialize/components/_datepicker.scss +4 -0
  28. data/assets/stylesheets/materialize/components/_dropdown.scss +10 -1
  29. data/assets/stylesheets/materialize/components/_sidenav.scss +1 -1
  30. data/assets/stylesheets/materialize/components/_toast.scss +0 -1
  31. data/assets/stylesheets/materialize/components/_variables.scss +1 -0
  32. data/assets/stylesheets/materialize/components/forms/_input-fields.scss +2 -0
  33. data/assets/stylesheets/materialize/components/forms/_range.scss +3 -3
  34. data/assets/stylesheets/materialize/components/forms/_select.scss +6 -4
  35. data/assets/stylesheets/materialize/extras/nouislider.css +1 -1
  36. data/lib/materialize-sass/version.rb +1 -1
  37. metadata +3 -3
@@ -102,6 +102,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
102
102
  this._overlay.parentNode.removeChild(this._overlay);
103
103
  this.dragTarget.parentNode.removeChild(this.dragTarget);
104
104
  this.el.M_Sidenav = undefined;
105
+ this.el.style.transform = '';
105
106
 
106
107
  var index = Sidenav._sidenavs.indexOf(this);
107
108
  if (index >= 0) {
@@ -290,7 +291,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
290
291
  key: '_handleDragTargetRelease',
291
292
  value: function _handleDragTargetRelease() {
292
293
  if (this.isDragged) {
293
- if (this.percentOpen > .5) {
294
+ if (this.percentOpen > 0.2) {
294
295
  this.open();
295
296
  } else {
296
297
  this._animateOut();
@@ -357,7 +358,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
357
358
  key: '_handleCloseRelease',
358
359
  value: function _handleCloseRelease() {
359
360
  if (this.isOpen && this.isDragged) {
360
- if (this.percentOpen > .5) {
361
+ if (this.percentOpen > 0.8) {
361
362
  this._animateIn();
362
363
  } else {
363
364
  this.close();
@@ -186,7 +186,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
186
186
  key: '_handleInterval',
187
187
  value: function _handleInterval() {
188
188
  var newActiveIndex = this.$slider.find('.active').index();
189
- if (this.$slides.length === newActiveIndex + 1) newActiveIndex = 0; // loop to start
189
+ if (this.$slides.length === newActiveIndex + 1) newActiveIndex = 0;
190
+ // loop to start
190
191
  else newActiveIndex += 1;
191
192
 
192
193
  this.set(newActiveIndex);
@@ -150,7 +150,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
150
150
  }
151
151
 
152
152
  // Act as regular link if target attribute is specified.
153
- if (!!tabLink.attr("target")) {
153
+ if (!!tabLink.attr('target')) {
154
154
  return;
155
155
  }
156
156
 
@@ -174,7 +174,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
174
174
  if (this.options.swipeable) {
175
175
  if (this._tabsCarousel) {
176
176
  this._tabsCarousel.set(this.index, function () {
177
- if (typeof _this2.options.onShow === "function") {
177
+ if (typeof _this2.options.onShow === 'function') {
178
178
  _this2.options.onShow.call(_this2, _this2.$content[0]);
179
179
  }
180
180
  });
@@ -290,7 +290,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
290
290
  _this4.$activeTabLink = _this4.$tabLinks.eq(_this4.index);
291
291
  _this4.$activeTabLink.addClass('active');
292
292
  _this4._animateIndicator(prevIndex);
293
- if (typeof _this4.options.onShow === "function") {
293
+ if (typeof _this4.options.onShow === 'function') {
294
294
  _this4.options.onShow.call(_this4, _this4.$content[0]);
295
295
  }
296
296
  }
@@ -31,7 +31,14 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
31
31
 
32
32
  autoClose: false, // auto close when minute is selected
33
33
  twelveHour: true, // change to 12 hour AM/PM clock from 24 hour
34
- vibrate: true // vibrate the device when dragging clock hand
34
+ vibrate: true, // vibrate the device when dragging clock hand
35
+
36
+ // Callbacks
37
+ onOpenStart: null,
38
+ onOpenEnd: null,
39
+ onCloseStart: null,
40
+ onCloseEnd: null,
41
+ onSelect: null
35
42
  };
36
43
 
37
44
  /**
@@ -175,6 +182,10 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
175
182
  }, this.options.duration / 2);
176
183
  }
177
184
 
185
+ if (typeof this.options.onSelect === 'function') {
186
+ this.options.onSelect.call(this, this.hours, this.minutes);
187
+ }
188
+
178
189
  // Unbind mousemove event
179
190
  document.removeEventListener('mousemove', this._handleDocumentClickMoveBound);
180
191
  document.removeEventListener('touchmove', this._handleDocumentClickMoveBound);
@@ -200,7 +211,13 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
200
211
  var _this3 = this;
201
212
 
202
213
  this.modal = M.Modal.init(this.modalEl, {
214
+ onOpenStart: this.options.onOpenStart,
215
+ onOpenEnd: this.options.onOpenEnd,
216
+ onCloseStart: this.options.onCloseStart,
203
217
  onCloseEnd: function () {
218
+ if (typeof _this3.options.onCloseEnd === 'function') {
219
+ _this3.options.onCloseEnd.call(_this3);
220
+ }
204
221
  _this3.isOpen = false;
205
222
  }
206
223
  });
@@ -225,7 +242,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
225
242
  }, {
226
243
  key: '_pickerSetup',
227
244
  value: function _pickerSetup() {
228
-
229
245
  var $clearBtn = $('<button class="btn-flat timepicker-clear waves-effect" style="visibility: hidden;" type="button" tabindex="' + (this.options.twelveHour ? '3' : '1') + '">' + this.options.i18n.clear + '</button>').appendTo(this.footer).on('click', this.clear.bind(this));
230
246
  if (this.options.showClearBtn) {
231
247
  $clearBtn.css({ visibility: '' });
@@ -357,12 +373,12 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
357
373
  // Get the time
358
374
  var value = ((this.el.value || this.options.defaultTime || '') + '').split(':');
359
375
  if (this.options.twelveHour && !(typeof value[1] === 'undefined')) {
360
- if (value[1].toUpperCase().indexOf("AM") > 0) {
376
+ if (value[1].toUpperCase().indexOf('AM') > 0) {
361
377
  this.amOrPm = 'AM';
362
378
  } else {
363
379
  this.amOrPm = 'PM';
364
380
  }
365
- value[1] = value[1].replace("AM", "").replace("PM", "");
381
+ value[1] = value[1].replace('AM', '').replace('PM', '');
366
382
  }
367
383
  if (value[0] === 'now') {
368
384
  var now = new Date(+new Date() + this.options.fromNow);
@@ -381,7 +397,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
381
397
  }, {
382
398
  key: 'showView',
383
399
  value: function showView(view, delay) {
384
- if (view === 'minutes' && $(this.hoursView).css("visibility") === "visible") {
400
+ if (view === 'minutes' && $(this.hoursView).css('visibility') === 'visible') {
385
401
  // raiseCallback(this.options.beforeHourSelect);
386
402
  }
387
403
  var isHours = view === 'hours',
@@ -519,6 +535,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
519
535
  this.isOpen = true;
520
536
  this._updateTimeFromInput();
521
537
  this.showView('hours');
538
+
522
539
  this.modal.open();
523
540
  }
524
541
  }, {
@@ -46,6 +46,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
46
46
  var toastElement = this._createToast();
47
47
  toastElement.M_Toast = this;
48
48
  this.el = toastElement;
49
+ this.$el = $(toastElement);
49
50
  this._animateIn();
50
51
  this._setTimer();
51
52
  }
@@ -96,7 +97,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
96
97
  targets: this.el,
97
98
  top: 0,
98
99
  opacity: 1,
99
- duration: 300,
100
+ duration: this.options.inDuration,
100
101
  easing: 'easeOutCubic'
101
102
  });
102
103
  }
@@ -156,7 +157,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
156
157
  _this2.options.completeCallback();
157
158
  }
158
159
  // Remove toast from DOM
159
- _this2.el.parentNode.removeChild(_this2.el);
160
+ _this2.$el.remove();
160
161
  Toast._toasts.splice(Toast._toasts.indexOf(_this2), 1);
161
162
  if (Toast._toasts.length === 0) {
162
163
  Toast._removeContainer();
@@ -210,7 +211,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
210
211
  document.removeEventListener('mousemove', Toast._onDragMove);
211
212
  document.removeEventListener('mouseup', Toast._onDragEnd);
212
213
 
213
- Toast._container.parentNode.removeChild(Toast._container);
214
+ $(Toast._container).remove();
214
215
  Toast._container = null;
215
216
  }
216
217
 
@@ -108,7 +108,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
108
108
  if (this.isOpen) {
109
109
  return;
110
110
  }
111
-
112
111
  this.isOpen = true;
113
112
  // Update tooltip content with HTML attribute options
114
113
  this.options = $.extend({}, this.options, this._getAttributeOptions());
@@ -122,6 +121,8 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
122
121
  return;
123
122
  }
124
123
 
124
+ this.isHovered = false;
125
+ this.isFocused = false;
125
126
  this.isOpen = false;
126
127
  this._setExitDelayTimeout();
127
128
  }
@@ -275,19 +276,23 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
275
276
  key: '_handleMouseEnter',
276
277
  value: function _handleMouseEnter() {
277
278
  this.isHovered = true;
279
+ this.isFocused = false; // Allows close of tooltip when opened by focus.
278
280
  this.open();
279
281
  }
280
282
  }, {
281
283
  key: '_handleMouseLeave',
282
284
  value: function _handleMouseLeave() {
283
285
  this.isHovered = false;
286
+ this.isFocused = false; // Allows close of tooltip when opened by focus.
284
287
  this.close();
285
288
  }
286
289
  }, {
287
290
  key: '_handleFocus',
288
291
  value: function _handleFocus() {
289
- this.isFocused = true;
290
- this.open();
292
+ if (M.tabPressed) {
293
+ this.isFocused = true;
294
+ this.open();
295
+ }
291
296
  }
292
297
  }, {
293
298
  key: '_handleBlur',
@@ -284,7 +284,8 @@ button.btn-floating {
284
284
  &:focus {
285
285
  background-color: rgba(0, 0, 0, .1);
286
286
  }
287
- &.disabled {
287
+ &.disabled,
288
+ &.btn-flat[disabled] {
288
289
  background-color: transparent !important;
289
290
  color: $button-flat-disabled-color !important;
290
291
  cursor: default;
@@ -7,6 +7,10 @@
7
7
  }
8
8
 
9
9
  .collapsible-header {
10
+ &:focus {
11
+ outline: 0
12
+ }
13
+
10
14
  display: flex;
11
15
  cursor: pointer;
12
16
  -webkit-tap-highlight-color: transparent;
@@ -23,6 +27,9 @@
23
27
  margin-right: 1rem;
24
28
  }
25
29
  }
30
+ .keyboard-focused .collapsible-header:focus {
31
+ background-color: #eee;
32
+ }
26
33
 
27
34
  .collapsible-body {
28
35
  display: none;
@@ -175,6 +175,10 @@
175
175
  flex-direction: row;
176
176
  }
177
177
 
178
+ .datepicker-date-display {
179
+ flex: 0 1 270px;
180
+ }
181
+
178
182
  .datepicker-controls,
179
183
  .datepicker-table,
180
184
  .datepicker-footer {
@@ -25,7 +25,6 @@
25
25
 
26
26
  &:focus {
27
27
  outline: none;
28
- background-color: darken($dropdown-hover-bg-color, 8%);
29
28
  }
30
29
 
31
30
  &.divider {
@@ -67,6 +66,12 @@
67
66
  }
68
67
  }
69
68
 
69
+ body.keyboard-focused {
70
+ .dropdown-content li:focus {
71
+ background-color: darken($dropdown-hover-bg-color, 8%);
72
+ }
73
+ }
74
+
70
75
  // Input field specificity bugfix
71
76
  .input-field.col .dropdown-content [type="checkbox"] + label {
72
77
  top: 1px;
@@ -74,3 +79,7 @@
74
79
  height: 18px;
75
80
  transform: none;
76
81
  }
82
+
83
+ .dropdown-trigger {
84
+ cursor: pointer;
85
+ }
@@ -1,6 +1,6 @@
1
1
  .sidenav {
2
2
  position: fixed;
3
- width: 300px;
3
+ width: $sidenav-width;
4
4
  left: 0;
5
5
  top: 0;
6
6
  margin: 0;
@@ -30,7 +30,6 @@
30
30
  height: auto;
31
31
  min-height: $toast-height;
32
32
  line-height: 1.5em;
33
- word-break: break-all;
34
33
  background-color: $toast-color;
35
34
  padding: 10px 25px;
36
35
  font-size: 1.1rem;
@@ -253,6 +253,7 @@ $navbar-brand-font-size: 2.1rem !default;
253
253
  // 14. Side Navigation
254
254
  // ==========================================================================
255
255
 
256
+ $sidenav-width: 300px !default;
256
257
  $sidenav-font-size: 14px !default;
257
258
  $sidenav-font-color: rgba(0,0,0,.87) !default;
258
259
  $sidenav-bg-color: #fff !default;
@@ -193,6 +193,8 @@ textarea.materialize-textarea {
193
193
  }
194
194
  }
195
195
 
196
+ // Autofill + date + time inputs
197
+ & > input[type]:-webkit-autofill:not(.browser-default) + label,
196
198
  & > input[type=date]:not(.browser-default) + label,
197
199
  & > input[type=time]:not(.browser-default) + label {
198
200
  transform: translateY(-14px) scale(.8);
@@ -94,7 +94,7 @@ input[type=range]::-webkit-slider-thumb {
94
94
 
95
95
  }
96
96
 
97
- input[type=range].focused:focus:not(.active)::-webkit-slider-thumb {
97
+ .keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb {
98
98
  box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
99
99
  }
100
100
 
@@ -125,7 +125,7 @@ input[type=range]:-moz-focusring {
125
125
  outline-offset: -1px;
126
126
  }
127
127
 
128
- input[type=range].focused:focus:not(.active)::-moz-range-thumb {
128
+ .keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb {
129
129
  box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
130
130
  }
131
131
 
@@ -156,6 +156,6 @@ input[type=range]::-ms-thumb {
156
156
  @include range-thumb;
157
157
  }
158
158
 
159
- input[type=range].focused:focus:not(.active)::-ms-thumb {
159
+ .keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb {
160
160
  box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
161
161
  }
@@ -125,6 +125,12 @@ select:disabled {
125
125
  background-color: transparent;
126
126
  }
127
127
 
128
+ body.keyboard-focused {
129
+ .select-dropdown.dropdown-content li:focus {
130
+ background-color: $select-option-focus;
131
+ }
132
+ }
133
+
128
134
  .select-dropdown.dropdown-content {
129
135
  li {
130
136
  &:hover {
@@ -134,10 +140,6 @@ select:disabled {
134
140
  &.selected {
135
141
  background-color: $select-option-selected;
136
142
  }
137
-
138
- &:focus {
139
- background-color: $select-option-focus;
140
- }
141
143
  }
142
144
  }
143
145
 
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Materialize v1.0.0-alpha.4 (http://materializecss.com)
2
+ * Materialize v1.0.0-rc.1 (http://materializecss.com)
3
3
  * Copyright 2014-2015 Materialize
4
4
  * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
5
5
  */
@@ -1,6 +1,6 @@
1
1
  module Materialize
2
2
  module Sass
3
- VERSION = "1.0.0.beta"
3
+ VERSION = "1.0.0.rc1"
4
4
  end
5
5
  end
6
6
 
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: materialize-sass
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.0.0.beta
4
+ version: 1.0.0.rc1
5
5
  platform: ruby
6
6
  authors:
7
7
  - mkhairi
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2018-03-24 00:00:00.000000000 Z
11
+ date: 2018-05-07 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler
@@ -177,7 +177,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
177
177
  version: 1.3.1
178
178
  requirements: []
179
179
  rubyforge_project:
180
- rubygems_version: 2.7.3
180
+ rubygems_version: 2.7.6
181
181
  signing_key:
182
182
  specification_version: 4
183
183
  summary: Materialzecss sass for rails.