materialize-sass 1.0.0.alpha4 → 1.0.0.beta

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.
@@ -46,6 +46,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
46
46
 
47
47
  _this.isOpen = false;
48
48
  _this.isHovered = false;
49
+ _this.isFocused = false;
49
50
  _this._appendTooltipEl();
50
51
  _this._setupEventHandlers();
51
52
  return _this;
@@ -61,7 +62,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
61
62
  value: function destroy() {
62
63
  $(this.tooltipEl).remove();
63
64
  this._removeEventHandlers();
64
- this.$el[0].M_Tooltip = undefined;
65
+ this.el.M_Tooltip = undefined;
65
66
  }
66
67
  }, {
67
68
  key: '_appendTooltipEl',
@@ -84,16 +85,22 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
84
85
  }, {
85
86
  key: '_setupEventHandlers',
86
87
  value: function _setupEventHandlers() {
87
- this.handleMouseEnterBound = this._handleMouseEnter.bind(this);
88
- this.handleMouseLeaveBound = this._handleMouseLeave.bind(this);
89
- this.$el[0].addEventListener('mouseenter', this.handleMouseEnterBound);
90
- this.$el[0].addEventListener('mouseleave', this.handleMouseLeaveBound);
88
+ this._handleMouseEnterBound = this._handleMouseEnter.bind(this);
89
+ this._handleMouseLeaveBound = this._handleMouseLeave.bind(this);
90
+ this._handleFocusBound = this._handleFocus.bind(this);
91
+ this._handleBlurBound = this._handleBlur.bind(this);
92
+ this.el.addEventListener('mouseenter', this._handleMouseEnterBound);
93
+ this.el.addEventListener('mouseleave', this._handleMouseLeaveBound);
94
+ this.el.addEventListener('focus', this._handleFocusBound, true);
95
+ this.el.addEventListener('blur', this._handleBlurBound, true);
91
96
  }
92
97
  }, {
93
98
  key: '_removeEventHandlers',
94
99
  value: function _removeEventHandlers() {
95
- this.$el[0].removeEventListener('mouseenter', this.handleMouseEnterBound);
96
- this.$el[0].removeEventListener('mouseleave', this.handleMouseLeaveBound);
100
+ this.el.removeEventListener('mouseenter', this._handleMouseEnterBound);
101
+ this.el.removeEventListener('mouseleave', this._handleMouseLeaveBound);
102
+ this.el.removeEventListener('focus', this._handleFocusBound, true);
103
+ this.el.removeEventListener('blur', this._handleBlurBound, true);
97
104
  }
98
105
  }, {
99
106
  key: 'open',
@@ -131,7 +138,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
131
138
  clearTimeout(this._exitDelayTimeout);
132
139
 
133
140
  this._exitDelayTimeout = setTimeout(function () {
134
- if (_this2.isHovered) {
141
+ if (_this2.isHovered || _this2.isFocused) {
135
142
  return;
136
143
  }
137
144
 
@@ -151,7 +158,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
151
158
  clearTimeout(this._enterDelayTimeout);
152
159
 
153
160
  this._enterDelayTimeout = setTimeout(function () {
154
- if (!_this3.isHovered) {
161
+ if (!_this3.isHovered && !_this3.isFocused) {
155
162
  return;
156
163
  }
157
164
 
@@ -161,7 +168,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
161
168
  }, {
162
169
  key: '_positionTooltip',
163
170
  value: function _positionTooltip() {
164
- var origin = this.$el[0],
171
+ var origin = this.el,
165
172
  tooltip = this.tooltipEl,
166
173
  originHeight = origin.offsetHeight,
167
174
  originWidth = origin.offsetWidth,
@@ -276,12 +283,24 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
276
283
  this.isHovered = false;
277
284
  this.close();
278
285
  }
286
+ }, {
287
+ key: '_handleFocus',
288
+ value: function _handleFocus() {
289
+ this.isFocused = true;
290
+ this.open();
291
+ }
292
+ }, {
293
+ key: '_handleBlur',
294
+ value: function _handleBlur() {
295
+ this.isFocused = false;
296
+ this.close();
297
+ }
279
298
  }, {
280
299
  key: '_getAttributeOptions',
281
300
  value: function _getAttributeOptions() {
282
301
  var attributeOptions = {};
283
- var tooltipTextOption = this.$el[0].getAttribute('data-tooltip');
284
- var positionOption = this.$el[0].getAttribute('data-position');
302
+ var tooltipTextOption = this.el.getAttribute('data-tooltip');
303
+ var positionOption = this.el.getAttribute('data-position');
285
304
 
286
305
  if (tooltipTextOption) {
287
306
  attributeOptions.html = tooltipTextOption;
@@ -160,8 +160,9 @@
160
160
  &:last-child {
161
161
  border-radius: 0 0 2px 2px;
162
162
  }
163
- position: relative;
163
+ background-color: inherit; // Use inherit to inherit color classes
164
164
  border-top: 1px solid rgba(160,160,160,.2);
165
+ position: relative;
165
166
  padding: 16px $card-padding;
166
167
 
167
168
  a:not(.btn):not(.btn-large):not(.btn-floating) {
@@ -152,6 +152,7 @@
152
152
  justify-content: space-between;
153
153
  }
154
154
 
155
+ .datepicker-cancel,
155
156
  .datepicker-clear,
156
157
  .datepicker-today,
157
158
  .datepicker-done {
@@ -45,6 +45,12 @@
45
45
  text-transform: uppercase;
46
46
 
47
47
  a {
48
+ &:focus,
49
+ &:focus.active {
50
+ background-color: transparentize($tabs-underline-color, .8);
51
+ outline: none;
52
+ }
53
+
48
54
  &:hover,
49
55
  &.active {
50
56
  background-color: transparent;
@@ -59,7 +65,7 @@
59
65
  font-size: 14px;
60
66
  text-overflow: ellipsis;
61
67
  overflow: hidden;
62
- transition: color .28s ease;
68
+ transition: color .28s ease, background-color .28s ease;
63
69
  }
64
70
 
65
71
  &.disabled a,
@@ -193,6 +193,12 @@ textarea.materialize-textarea {
193
193
  }
194
194
  }
195
195
 
196
+ & > input[type=date]:not(.browser-default) + label,
197
+ & > input[type=time]:not(.browser-default) + label {
198
+ transform: translateY(-14px) scale(.8);
199
+ transform-origin: 0 0;
200
+ }
201
+
196
202
  .helper-text {
197
203
  &::after {
198
204
  opacity: 1;
@@ -253,6 +259,7 @@ textarea.materialize-textarea {
253
259
  .input-field input[type=search] {
254
260
  display: block;
255
261
  line-height: inherit;
262
+ transition: .3s background-color;
256
263
 
257
264
  .nav-wrapper & {
258
265
  height: inherit;
@@ -328,11 +335,6 @@ textarea {
328
335
 
329
336
  /* Autocomplete */
330
337
  .autocomplete-content {
331
- margin-top: -1 * $input-margin-bottom;
332
- margin-bottom: $input-margin-bottom;
333
- opacity: 1;
334
- position: static;
335
-
336
338
  li {
337
339
  .highlight { color: #444; }
338
340
 
@@ -13,20 +13,6 @@ select {
13
13
  height: $input-height;
14
14
  }
15
15
 
16
-
17
- .input-field {
18
- select {
19
- display: block;
20
- position: absolute;
21
- width: 0;
22
- pointer-events: none;
23
- height: 0;
24
- bottom: 0;
25
- left: 0;
26
- opacity: 0;
27
- }
28
- }
29
-
30
16
  .select-label {
31
17
  position: absolute;
32
18
  }
@@ -1,6 +1,6 @@
1
1
  module Materialize
2
2
  module Sass
3
- VERSION = "1.0.0.alpha4"
3
+ VERSION = "1.0.0.beta"
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.alpha4
4
+ version: 1.0.0.beta
5
5
  platform: ruby
6
6
  authors:
7
7
  - mkhairi
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2018-02-20 00:00:00.000000000 Z
11
+ date: 2018-03-24 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler