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.
- checksums.yaml +4 -4
- data/README.md +2 -2
- data/assets/javascripts/materialize.js +277 -195
- data/assets/javascripts/materialize/autocomplete.js +94 -37
- data/assets/javascripts/materialize/buttons.js +4 -6
- data/assets/javascripts/materialize/carousel.js +7 -7
- data/assets/javascripts/materialize/collapsible.js +0 -2
- data/assets/javascripts/materialize/datepicker.js +27 -44
- data/assets/javascripts/materialize/dropdown.js +29 -9
- data/assets/javascripts/materialize/extras/nouislider.js +1 -1
- data/assets/javascripts/materialize/extras/nouislider.min.js +1 -1
- data/assets/javascripts/materialize/forms.js +4 -4
- data/assets/javascripts/materialize/global.js +26 -11
- data/assets/javascripts/materialize/materialbox.js +6 -6
- data/assets/javascripts/materialize/modal.js +8 -4
- data/assets/javascripts/materialize/parallax.js +1 -1
- data/assets/javascripts/materialize/range.js +2 -19
- data/assets/javascripts/materialize/select.js +22 -23
- data/assets/javascripts/materialize/sidenav.js +3 -2
- data/assets/javascripts/materialize/slider.js +2 -1
- data/assets/javascripts/materialize/tabs.js +3 -3
- data/assets/javascripts/materialize/timepicker.js +22 -5
- data/assets/javascripts/materialize/toasts.js +4 -3
- data/assets/javascripts/materialize/tooltip.js +8 -3
- data/assets/stylesheets/materialize/components/_buttons.scss +2 -1
- data/assets/stylesheets/materialize/components/_collapsible.scss +7 -0
- data/assets/stylesheets/materialize/components/_datepicker.scss +4 -0
- data/assets/stylesheets/materialize/components/_dropdown.scss +10 -1
- data/assets/stylesheets/materialize/components/_sidenav.scss +1 -1
- data/assets/stylesheets/materialize/components/_toast.scss +0 -1
- data/assets/stylesheets/materialize/components/_variables.scss +1 -0
- data/assets/stylesheets/materialize/components/forms/_input-fields.scss +2 -0
- data/assets/stylesheets/materialize/components/forms/_range.scss +3 -3
- data/assets/stylesheets/materialize/components/forms/_select.scss +6 -4
- data/assets/stylesheets/materialize/extras/nouislider.css +1 -1
- data/lib/materialize-sass/version.rb +1 -1
- 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 > .
|
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 > .
|
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;
|
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(
|
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 ===
|
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 ===
|
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(
|
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(
|
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(
|
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:
|
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
|
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.
|
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
|
-
|
290
|
-
|
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;
|
@@ -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
|
+
}
|
@@ -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]
|
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]
|
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]
|
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
|
|
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.
|
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-
|
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.
|
180
|
+
rubygems_version: 2.7.6
|
181
181
|
signing_key:
|
182
182
|
specification_version: 4
|
183
183
|
summary: Materialzecss sass for rails.
|