mtl 1.1.0 → 1.1.1

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 (44) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/mtl/dropdown.coffee +1 -1
  3. data/app/assets/stylesheets/mtl/extend/_chips.scss +20 -0
  4. data/app/assets/stylesheets/mtl/extend/_side-nav.scss +4 -2
  5. data/lib/generators/mtl/templates/_variables.scss +5 -0
  6. data/lib/mtl/version.rb +2 -2
  7. data/mtl.gemspec +11 -0
  8. data/package.json +1 -1
  9. data/vendor/assets/javascripts/materialize/animation.js +8 -9
  10. data/vendor/assets/javascripts/materialize/carousel.js +51 -24
  11. data/vendor/assets/javascripts/materialize/character_counter.js +2 -2
  12. data/vendor/assets/javascripts/materialize/chips.js +40 -11
  13. data/vendor/assets/javascripts/materialize/dropdown.js +12 -12
  14. data/vendor/assets/javascripts/materialize/forms.js +131 -35
  15. data/vendor/assets/javascripts/materialize/global.js +55 -0
  16. data/vendor/assets/javascripts/materialize/init.js +40 -3
  17. data/vendor/assets/javascripts/materialize/materialbox.js +93 -77
  18. data/vendor/assets/javascripts/materialize/modal.js +12 -12
  19. data/vendor/assets/javascripts/materialize/parallax.js +48 -48
  20. data/vendor/assets/javascripts/materialize/scrollFire.js +40 -37
  21. data/vendor/assets/javascripts/materialize/scrollspy.js +2 -53
  22. data/vendor/assets/javascripts/materialize/sideNav.js +46 -40
  23. data/vendor/assets/javascripts/materialize/slider.js +15 -12
  24. data/vendor/assets/javascripts/materialize/tabs.js +104 -35
  25. data/vendor/assets/javascripts/materialize/toasts.js +122 -123
  26. data/vendor/assets/javascripts/materialize/tooltip.js +15 -13
  27. data/vendor/assets/javascripts/materialize/transitions.js +24 -24
  28. data/vendor/assets/stylesheets/materialize/_badges.scss +46 -0
  29. data/vendor/assets/stylesheets/materialize/_buttons.scss +29 -17
  30. data/vendor/assets/stylesheets/materialize/_cards.scss +9 -3
  31. data/vendor/assets/stylesheets/materialize/_carousel.scss +1 -1
  32. data/vendor/assets/stylesheets/materialize/_collapsible.scss +3 -7
  33. data/vendor/assets/stylesheets/materialize/_global.scss +5 -61
  34. data/vendor/assets/stylesheets/materialize/_materialbox.scss +13 -12
  35. data/vendor/assets/stylesheets/materialize/_navbar.scss +26 -7
  36. data/vendor/assets/stylesheets/materialize/_sideNav.scss +5 -5
  37. data/vendor/assets/stylesheets/materialize/_table_of_contents.scss +2 -2
  38. data/vendor/assets/stylesheets/materialize/_toast.scss +1 -1
  39. data/vendor/assets/stylesheets/materialize/_tooltip.scss +2 -3
  40. data/vendor/assets/stylesheets/materialize/_transitions.scss +13 -0
  41. data/vendor/assets/stylesheets/materialize/_variables.scss +7 -1
  42. data/vendor/assets/stylesheets/materialize/_waves.scss +80 -143
  43. data/vendor/assets/stylesheets/materialize/forms/_input-fields.scss +4 -4
  44. metadata +9 -4
@@ -3,7 +3,9 @@
3
3
  var methods = {
4
4
  init : function(options) {
5
5
  var defaults = {
6
- onShow: null
6
+ onShow: null,
7
+ swipeable: false,
8
+ responsiveThreshold: Infinity, // breakpoint for swipeable
7
9
  };
8
10
  options = $.extend(defaults, options);
9
11
 
@@ -16,8 +18,15 @@
16
18
 
17
19
  var $active, $content, $links = $this.find('li.tab a'),
18
20
  $tabs_width = $this.width(),
21
+ $tabs_content = $(),
22
+ $tabs_wrapper,
19
23
  $tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length,
20
- $index = 0;
24
+ $indicator,
25
+ index = prev_index = 0,
26
+ clicked = false,
27
+ clickedTimeout,
28
+ transition = 300;
29
+
21
30
 
22
31
  // Finds right attribute for indicator based on active tab.
23
32
  // el: jQuery Object
@@ -31,6 +40,27 @@
31
40
  return el.position().left + $this.scrollLeft();
32
41
  };
33
42
 
43
+ // Animates Indicator to active tab.
44
+ // prev_index: Number
45
+ var animateIndicator = function(prev_index) {
46
+ if ((index - prev_index) >= 0) {
47
+ $indicator.velocity({"right": calcRightPos($active) }, { duration: transition, queue: false, easing: 'easeOutQuad'});
48
+ $indicator.velocity({"left": calcLeftPos($active) }, {duration: transition, queue: false, easing: 'easeOutQuad', delay: 90});
49
+
50
+ } else {
51
+ $indicator.velocity({"left": calcLeftPos($active) }, { duration: transition, queue: false, easing: 'easeOutQuad'});
52
+ $indicator.velocity({"right": calcRightPos($active) }, {duration: transition, queue: false, easing: 'easeOutQuad', delay: 90});
53
+ }
54
+ };
55
+
56
+ // Change swipeable according to responsive threshold
57
+ if (options.swipeable) {
58
+ if (window_width > options.responsiveThreshold) {
59
+ options.swipeable = false;
60
+ }
61
+ }
62
+
63
+
34
64
  // If the location.hash matches one of the links, use that as the active tab.
35
65
  $active = $($links.filter('[href="'+location.hash+'"]'));
36
66
 
@@ -43,21 +73,28 @@
43
73
  }
44
74
 
45
75
  $active.addClass('active');
46
- $index = $links.index($active);
47
- if ($index < 0) {
48
- $index = 0;
76
+ index = $links.index($active);
77
+ if (index < 0) {
78
+ index = 0;
49
79
  }
50
80
 
51
81
  if ($active[0] !== undefined) {
52
82
  $content = $($active[0].hash);
83
+ $content.addClass('active');
53
84
  }
54
85
 
55
86
  // append indicator then set indicator width to tab width
56
- $this.append('<div class="indicator"></div>');
57
- var $indicator = $this.find('.indicator');
87
+ if (!$this.find('.indicator').length) {
88
+ $this.append('<div class="indicator"></div>');
89
+ }
90
+ $indicator = $this.find('.indicator');
91
+
92
+ // we make sure that the indicator is at the end of the tabs
93
+ $this.append($indicator);
94
+
58
95
  if ($this.is(":visible")) {
59
- // $indicator.css({"right": $tabs_width - (($index + 1) * $tab_width)});
60
- // $indicator.css({"left": $index * $tab_width});
96
+ // $indicator.css({"right": $tabs_width - ((index + 1) * $tab_width)});
97
+ // $indicator.css({"left": index * $tab_width});
61
98
  setTimeout(function() {
62
99
  $indicator.css({"right": calcRightPos($active) });
63
100
  $indicator.css({"left": calcLeftPos($active) });
@@ -66,8 +103,8 @@
66
103
  $(window).resize(function () {
67
104
  $tabs_width = $this.width();
68
105
  $tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length;
69
- if ($index < 0) {
70
- $index = 0;
106
+ if (index < 0) {
107
+ index = 0;
71
108
  }
72
109
  if ($tab_width !== 0 && $tabs_width !== 0) {
73
110
  $indicator.css({"right": calcRightPos($active) });
@@ -75,10 +112,34 @@
75
112
  }
76
113
  });
77
114
 
78
- // Hide the remaining content
79
- $links.not($active).each(function () {
80
- $(Materialize.escapeHash(this.hash)).hide();
81
- });
115
+ // Initialize Tabs Content.
116
+ if (options.swipeable) {
117
+ // TODO: Duplicate calls with swipeable? handle multiple div wrapping.
118
+ $links.each(function () {
119
+ var $curr_content = $(Materialize.escapeHash(this.hash));
120
+ $curr_content.addClass('carousel-item');
121
+ $tabs_content = $tabs_content.add($curr_content);
122
+ });
123
+ $tabs_wrapper = $tabs_content.wrapAll('<div class="tabs-content carousel"></div>');
124
+ $tabs_content.css('display', '');
125
+ $('.tabs-content.carousel').carousel({
126
+ fullWidth: true,
127
+ noWrap: true,
128
+ onCycleTo: function(item) {
129
+ if (!clicked) {
130
+ var prev_index = index;
131
+ index = $tabs_wrapper.index(item);
132
+ $active = $links.eq(index);
133
+ animateIndicator(prev_index);
134
+ }
135
+ },
136
+ });
137
+ } else {
138
+ // Hide the remaining content
139
+ $links.not($active).each(function () {
140
+ $(Materialize.escapeHash(this.hash)).hide();
141
+ });
142
+ }
82
143
 
83
144
 
84
145
  // Bind the click event handler
@@ -93,14 +154,13 @@
93
154
  return;
94
155
  }
95
156
 
157
+ clicked = true;
96
158
  $tabs_width = $this.width();
97
159
  $tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length;
98
160
 
99
161
  // Make the old tab inactive.
100
162
  $active.removeClass('active');
101
- if ($content !== undefined) {
102
- $content.hide();
103
- }
163
+ var $oldContent = $content
104
164
 
105
165
  // Update the variables with the new link and content
106
166
  $active = $(this);
@@ -110,31 +170,40 @@
110
170
 
111
171
  // Make the tab active.
112
172
  $active.addClass('active');
113
- var $prev_index = $index;
114
- $index = $links.index($(this));
115
- if ($index < 0) {
116
- $index = 0;
173
+ prev_index = index;
174
+ index = $links.index($(this));
175
+ if (index < 0) {
176
+ index = 0;
117
177
  }
118
178
  // Change url to current tab
119
179
  // window.location.hash = $active.attr('href');
120
180
 
121
- if ($content !== undefined) {
122
- $content.show();
123
- if (typeof(options.onShow) === "function") {
124
- options.onShow.call(this, $content);
181
+ // Swap content
182
+ if (options.swipeable) {
183
+ if ($tabs_content.length) {
184
+ $tabs_content.carousel('set', index);
185
+ }
186
+ } else {
187
+ if ($content !== undefined) {
188
+ $content.show();
189
+ $content.addClass('active');
190
+ if (typeof(options.onShow) === "function") {
191
+ options.onShow.call(this, $content);
192
+ }
125
193
  }
126
- }
127
194
 
128
- // Update indicator
195
+ if ($oldContent !== undefined &&
196
+ !$oldContent.is($content)) {
197
+ $oldContent.hide();
198
+ $oldContent.removeClass('active');
199
+ }
200
+ }
129
201
 
130
- if (($index - $prev_index) >= 0) {
131
- $indicator.velocity({"right": calcRightPos($active) }, { duration: 300, queue: false, easing: 'easeOutQuad'});
132
- $indicator.velocity({"left": calcLeftPos($active) }, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
202
+ // Reset clicked state
203
+ clickedTimeout = setTimeout(function(){ clicked = false; }, transition);
133
204
 
134
- } else {
135
- $indicator.velocity({"left": calcLeftPos($active) }, { duration: 300, queue: false, easing: 'easeOutQuad'});
136
- $indicator.velocity({"right": calcRightPos($active) }, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
137
- }
205
+ // Update indicator
206
+ animateIndicator(prev_index);
138
207
 
139
208
  // Prevent the anchor's default click action
140
209
  e.preventDefault();
@@ -1,137 +1,136 @@
1
1
  Materialize.toast = function (message, displayLength, className, completeCallback) {
2
- className = className || "";
2
+ className = className || "";
3
+
4
+ var container = document.getElementById('toast-container');
5
+
6
+ // Create toast container if it does not exist
7
+ if (container === null) {
8
+ // create notification container
9
+ container = document.createElement('div');
10
+ container.id = 'toast-container';
11
+ document.body.appendChild(container);
12
+ }
13
+
14
+ // Select and append toast
15
+ var newToast = createToast(message);
16
+
17
+ // only append toast if message is not undefined
18
+ if(message){
19
+ container.appendChild(newToast);
20
+ }
21
+
22
+ newToast.style.opacity = 0;
23
+
24
+ // Animate toast in
25
+ Vel(newToast, {translateY: '-35px', opacity: 1 }, {duration: 300,
26
+ easing: 'easeOutCubic',
27
+ queue: false});
28
+
29
+ // Allows timer to be pause while being panned
30
+ var timeLeft = displayLength;
31
+ var counterInterval;
32
+ if (timeLeft != null) {
33
+ counterInterval = setInterval (function(){
34
+ if (newToast.parentNode === null)
35
+ window.clearInterval(counterInterval);
36
+
37
+ // If toast is not being dragged, decrease its time remaining
38
+ if (!newToast.classList.contains('panning')) {
39
+ timeLeft -= 20;
40
+ }
41
+
42
+ if (timeLeft <= 0) {
43
+ // Animate toast out
44
+ Vel(newToast, {"opacity": 0, marginTop: '-40px'}, { duration: 375,
45
+ easing: 'easeOutExpo',
46
+ queue: false,
47
+ complete: function(){
48
+ // Call the optional callback
49
+ if(typeof(completeCallback) === "function")
50
+ completeCallback();
51
+ // Remove toast after it times out
52
+ this[0].parentNode.removeChild(this[0]);
53
+ }
54
+ });
55
+ window.clearInterval(counterInterval);
56
+ }
57
+ }, 20);
58
+ }
3
59
 
4
- var container = document.getElementById('toast-container');
5
60
 
6
- // Create toast container if it does not exist
7
- if (container === null) {
8
- // create notification container
9
- container = document.createElement('div');
10
- container.id = 'toast-container';
11
- document.body.appendChild(container);
12
- }
13
61
 
14
- // Select and append toast
15
- var newToast = createToast(message);
62
+ function createToast(html) {
16
63
 
17
- // only append toast if message is not undefined
18
- if(message){
19
- container.appendChild(newToast);
20
- }
64
+ // Create toast
65
+ var toast = document.createElement('div');
66
+ toast.classList.add('toast');
67
+ if (className) {
68
+ var classes = className.split(' ');
21
69
 
22
- newToast.style.top = '35px';
23
- newToast.style.opacity = 0;
24
-
25
- // Animate toast in
26
- Vel(newToast, { "top" : "0px", opacity: 1 }, {duration: 300,
27
- easing: 'easeOutCubic',
28
- queue: false});
29
-
30
- // Allows timer to be pause while being panned
31
- var timeLeft = displayLength;
32
- var counterInterval;
33
- if (timeLeft != null) {
34
- counterInterval = setInterval (function(){
35
- if (newToast.parentNode === null)
36
- window.clearInterval(counterInterval);
37
-
38
- // If toast is not being dragged, decrease its time remaining
39
- if (!newToast.classList.contains('panning')) {
40
- timeLeft -= 20;
41
- }
42
-
43
- if (timeLeft <= 0) {
44
- // Animate toast out
45
- Vel(newToast, {"opacity": 0, marginTop: '-40px'}, { duration: 375,
46
- easing: 'easeOutExpo',
47
- queue: false,
48
- complete: function(){
49
- // Call the optional callback
50
- if(typeof(completeCallback) === "function")
51
- completeCallback();
52
- // Remove toast after it times out
53
- this[0].parentNode.removeChild(this[0]);
54
- }
55
- });
56
- window.clearInterval(counterInterval);
57
- }
58
- }, 20);
70
+ for (var i = 0, count = classes.length; i < count; i++) {
71
+ toast.classList.add(classes[i]);
72
+ }
59
73
  }
60
-
61
-
62
-
63
- function createToast(html) {
64
-
65
- // Create toast
66
- var toast = document.createElement('div');
67
- toast.classList.add('toast');
68
- if (className) {
69
- var classes = className.split(' ');
70
-
71
- for (var i = 0, count = classes.length; i < count; i++) {
72
- toast.classList.add(classes[i]);
73
- }
74
- }
75
- // If type of parameter is HTML Element
76
- if ( typeof HTMLElement === "object" ? html instanceof HTMLElement : html && typeof html === "object" && html !== null && html.nodeType === 1 && typeof html.nodeName==="string"
74
+ // If type of parameter is HTML Element
75
+ if ( typeof HTMLElement === "object" ? html instanceof HTMLElement : html && typeof html === "object" && html !== null && html.nodeType === 1 && typeof html.nodeName==="string"
77
76
  ) {
78
- toast.appendChild(html);
79
- }
80
- else if (html instanceof jQuery) {
81
- // Check if it is jQuery object
82
- toast.appendChild(html[0]);
83
- }
84
- else {
85
- // Insert as text;
86
- toast.innerHTML = html;
87
- }
88
- // Bind hammer
89
- var hammerHandler = new Hammer(toast, {prevent_default: false});
90
- hammerHandler.on('pan', function(e) {
91
- var deltaX = e.deltaX;
92
- var activationDistance = 80;
93
-
94
- // Change toast state
95
- if (!toast.classList.contains('panning')){
96
- toast.classList.add('panning');
77
+ toast.appendChild(html);
78
+ }
79
+ else if (html instanceof jQuery) {
80
+ // Check if it is jQuery object
81
+ toast.appendChild(html[0]);
82
+ }
83
+ else {
84
+ // Insert as text;
85
+ toast.innerHTML = html;
86
+ }
87
+ // Bind hammer
88
+ var hammerHandler = new Hammer(toast, {prevent_default: false});
89
+ hammerHandler.on('pan', function(e) {
90
+ var deltaX = e.deltaX;
91
+ var activationDistance = 80;
92
+
93
+ // Change toast state
94
+ if (!toast.classList.contains('panning')){
95
+ toast.classList.add('panning');
96
+ }
97
+
98
+ var opacityPercent = 1-Math.abs(deltaX / activationDistance);
99
+ if (opacityPercent < 0)
100
+ opacityPercent = 0;
101
+
102
+ Vel(toast, {left: deltaX, opacity: opacityPercent }, {duration: 50, queue: false, easing: 'easeOutQuad'});
103
+
104
+ });
105
+
106
+ hammerHandler.on('panend', function(e) {
107
+ var deltaX = e.deltaX;
108
+ var activationDistance = 80;
109
+
110
+ // If toast dragged past activation point
111
+ if (Math.abs(deltaX) > activationDistance) {
112
+ Vel(toast, {marginTop: '-40px'}, { duration: 375,
113
+ easing: 'easeOutExpo',
114
+ queue: false,
115
+ complete: function(){
116
+ if(typeof(completeCallback) === "function") {
117
+ completeCallback();
118
+ }
119
+ toast.parentNode.removeChild(toast);
97
120
  }
98
-
99
- var opacityPercent = 1-Math.abs(deltaX / activationDistance);
100
- if (opacityPercent < 0)
101
- opacityPercent = 0;
102
-
103
- Vel(toast, {left: deltaX, opacity: opacityPercent }, {duration: 50, queue: false, easing: 'easeOutQuad'});
104
-
105
121
  });
106
122
 
107
- hammerHandler.on('panend', function(e) {
108
- var deltaX = e.deltaX;
109
- var activationDistance = 80;
110
-
111
- // If toast dragged past activation point
112
- if (Math.abs(deltaX) > activationDistance) {
113
- Vel(toast, {marginTop: '-40px'}, { duration: 375,
114
- easing: 'easeOutExpo',
115
- queue: false,
116
- complete: function(){
117
- if(typeof(completeCallback) === "function") {
118
- completeCallback();
119
- }
120
- toast.parentNode.removeChild(toast);
121
- }
122
- });
123
-
124
- } else {
125
- toast.classList.remove('panning');
126
- // Put toast back into original position
127
- Vel(toast, { left: 0, opacity: 1 }, { duration: 300,
128
- easing: 'easeOutExpo',
129
- queue: false
130
- });
131
-
132
- }
123
+ } else {
124
+ toast.classList.remove('panning');
125
+ // Put toast back into original position
126
+ Vel(toast, { left: 0, opacity: 1 }, { duration: 300,
127
+ easing: 'easeOutExpo',
128
+ queue: false
133
129
  });
134
130
 
135
- return toast;
136
- }
131
+ }
132
+ });
133
+
134
+ return toast;
135
+ }
137
136
  };
@@ -86,18 +86,20 @@
86
86
  started = true;
87
87
  tooltipEl.velocity('stop');
88
88
  backdrop.velocity('stop');
89
- tooltipEl.css({ display: 'block', left: '0px', top: '0px' });
89
+ tooltipEl.css({ visibility: 'visible', left: '0px', top: '0px' });
90
90
 
91
91
  // Tooltip positioning
92
92
  var originWidth = origin.outerWidth();
93
93
  var originHeight = origin.outerHeight();
94
-
95
94
  var tooltipHeight = tooltipEl.outerHeight();
96
95
  var tooltipWidth = tooltipEl.outerWidth();
97
96
  var tooltipVerticalMovement = '0px';
98
97
  var tooltipHorizontalMovement = '0px';
98
+ var backdropOffsetWidth = backdrop[0].offsetWidth;
99
+ var backdropOffsetHeight = backdrop[0].offsetHeight;
99
100
  var scaleXFactor = 8;
100
101
  var scaleYFactor = 8;
102
+ var scaleFactor = 0;
101
103
  var targetTop, targetLeft, newCoordinates;
102
104
 
103
105
  if (tooltipPosition === "top") {
@@ -105,7 +107,6 @@
105
107
  targetTop = origin.offset().top - tooltipHeight - margin;
106
108
  targetLeft = origin.offset().left + originWidth/2 - tooltipWidth/2;
107
109
  newCoordinates = repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight);
108
-
109
110
  tooltipVerticalMovement = '-10px';
110
111
  backdrop.css({
111
112
  bottom: 0,
@@ -113,7 +114,7 @@
113
114
  borderRadius: '14px 14px 0 0',
114
115
  transformOrigin: '50% 100%',
115
116
  marginTop: tooltipHeight,
116
- marginLeft: (tooltipWidth/2) - (backdrop.width()/2)
117
+ marginLeft: (tooltipWidth/2) - (backdropOffsetWidth/2)
117
118
  });
118
119
  }
119
120
  // Left Position
@@ -161,7 +162,7 @@
161
162
  backdrop.css({
162
163
  top: 0,
163
164
  left: 0,
164
- marginLeft: (tooltipWidth/2) - (backdrop.width()/2)
165
+ marginLeft: (tooltipWidth/2) - (backdropOffsetWidth/2)
165
166
  });
166
167
  }
167
168
 
@@ -172,14 +173,15 @@
172
173
  });
173
174
 
174
175
  // Calculate Scale to fill
175
- scaleXFactor = Math.SQRT2 * tooltipWidth / parseInt(backdrop.css('width'));
176
- scaleYFactor = Math.SQRT2 * tooltipHeight / parseInt(backdrop.css('height'));
176
+ scaleXFactor = Math.SQRT2 * tooltipWidth / parseInt(backdropOffsetWidth);
177
+ scaleYFactor = Math.SQRT2 * tooltipHeight / parseInt(backdropOffsetHeight);
178
+ scaleFactor = Math.max(scaleXFactor, scaleYFactor);
177
179
 
178
- tooltipEl.velocity({ marginTop: tooltipVerticalMovement, marginLeft: tooltipHorizontalMovement}, { duration: 350, queue: false })
180
+ tooltipEl.velocity({ translateY: tooltipVerticalMovement, translateX: tooltipHorizontalMovement}, { duration: 350, queue: false })
179
181
  .velocity({opacity: 1}, {duration: 300, delay: 50, queue: false});
180
- backdrop.css({ display: 'block' })
182
+ backdrop.css({ visibility: 'visible' })
181
183
  .velocity({opacity:1},{duration: 55, delay: 0, queue: false})
182
- .velocity({scaleX: scaleXFactor, scaleY: scaleYFactor}, {duration: 300, delay: 0, queue: false, easing: 'easeInOutQuad'});
184
+ .velocity({scaleX: scaleFactor, scaleY: scaleFactor}, {duration: 300, delay: 0, queue: false, easing: 'easeInOutQuad'});
183
185
  };
184
186
 
185
187
  timeoutRef = setTimeout(showTooltip, tooltipDelay); // End Interval
@@ -195,13 +197,13 @@
195
197
  setTimeout(function() {
196
198
  if (started !== true) {
197
199
  tooltipEl.velocity({
198
- opacity: 0, marginTop: 0, marginLeft: 0}, { duration: 225, queue: false});
200
+ opacity: 0, translateY: 0, translateX: 0}, { duration: 225, queue: false});
199
201
  backdrop.velocity({opacity: 0, scaleX: 1, scaleY: 1}, {
200
202
  duration:225,
201
203
  queue: false,
202
204
  complete: function(){
203
- backdrop.css('display', 'none');
204
- tooltipEl.css('display', 'none');
205
+ backdrop.css({ visibility: 'hidden' });
206
+ tooltipEl.css({ visibility: 'hidden' });
205
207
  started = false;}
206
208
  });
207
209
  }
@@ -1,6 +1,6 @@
1
1
  (function ($) {
2
2
  // Image transition function
3
- Materialize.fadeInImage = function(selectorOrEl) {
3
+ Materialize.fadeInImage = function(selectorOrEl) {
4
4
  var element;
5
5
  if (typeof(selectorOrEl) === 'string') {
6
6
  element = $(selectorOrEl);
@@ -11,30 +11,30 @@
11
11
  }
12
12
  element.css({opacity: 0});
13
13
  $(element).velocity({opacity: 1}, {
14
- duration: 650,
15
- queue: false,
16
- easing: 'easeOutSine'
17
- });
14
+ duration: 650,
15
+ queue: false,
16
+ easing: 'easeOutSine'
17
+ });
18
18
  $(element).velocity({opacity: 1}, {
19
- duration: 1300,
20
- queue: false,
21
- easing: 'swing',
22
- step: function(now, fx) {
23
- fx.start = 100;
24
- var grayscale_setting = now/100;
25
- var brightness_setting = 150 - (100 - now)/1.75;
26
-
27
- if (brightness_setting < 100) {
28
- brightness_setting = 100;
29
- }
30
- if (now >= 0) {
31
- $(this).css({
32
- "-webkit-filter": "grayscale("+grayscale_setting+")" + "brightness("+brightness_setting+"%)",
33
- "filter": "grayscale("+grayscale_setting+")" + "brightness("+brightness_setting+"%)"
34
- });
35
- }
36
- }
37
- });
19
+ duration: 1300,
20
+ queue: false,
21
+ easing: 'swing',
22
+ step: function(now, fx) {
23
+ fx.start = 100;
24
+ var grayscale_setting = now/100;
25
+ var brightness_setting = 150 - (100 - now)/1.75;
26
+
27
+ if (brightness_setting < 100) {
28
+ brightness_setting = 100;
29
+ }
30
+ if (now >= 0) {
31
+ $(this).css({
32
+ "-webkit-filter": "grayscale("+grayscale_setting+")" + "brightness("+brightness_setting+"%)",
33
+ "filter": "grayscale("+grayscale_setting+")" + "brightness("+brightness_setting+"%)"
34
+ });
35
+ }
36
+ }
37
+ });
38
38
  };
39
39
 
40
40
  // Horizontal staggered list
@@ -0,0 +1,46 @@
1
+ // Badges
2
+ span.badge {
3
+ min-width: 3rem;
4
+ padding: 0 6px;
5
+ margin-left: 14px;
6
+ text-align: center;
7
+ font-size: 1rem;
8
+ line-height: $badge-height;
9
+ height: $badge-height;
10
+ color: color('grey', 'darken-1');
11
+ float: right;
12
+ box-sizing: border-box;
13
+
14
+ &.new {
15
+ font-weight: 300;
16
+ font-size: 0.8rem;
17
+ color: #fff;
18
+ background-color: $badge-bg-color;
19
+ border-radius: 2px;
20
+ }
21
+ &.new:after {
22
+ content: " new";
23
+ }
24
+
25
+ &[data-badge-caption]::after {
26
+ content: " " attr(data-badge-caption);
27
+ }
28
+ }
29
+ nav ul a span.badge {
30
+ display: inline-block;
31
+ float: none;
32
+ margin-left: 4px;
33
+ line-height: $badge-height;
34
+ height: $badge-height;
35
+ }
36
+
37
+ // Line height centering
38
+ .collection-item span.badge {
39
+ margin-top: calc(#{$collection-line-height / 2} - #{$badge-height / 2});
40
+ }
41
+ .collapsible span.badge {
42
+ margin-top: calc(#{$collapsible-line-height / 2} - #{$badge-height / 2});
43
+ }
44
+ .side-nav span.badge {
45
+ margin-top: calc(#{$sidenav-line-height / 2} - #{$badge-height / 2});
46
+ }