mtl 1.0.3 → 1.1.0

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 (39) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile +1 -1
  3. data/app/assets/javascripts/mtl.js +1 -1
  4. data/app/assets/javascripts/mtl/dropdown.coffee +3 -2
  5. data/app/assets/javascripts/mtl/modal.coffee +6 -11
  6. data/app/assets/stylesheets/mtl/extend/_dropdown.scss +0 -1
  7. data/app/assets/stylesheets/mtl/extend/_forms.scss +13 -3
  8. data/lib/mtl/version.rb +3 -2
  9. data/package.json +1 -1
  10. data/vendor/assets/javascripts/materialize/buttons.js +181 -5
  11. data/vendor/assets/javascripts/materialize/carousel.js +1 -1
  12. data/vendor/assets/javascripts/materialize/chips.js +75 -53
  13. data/vendor/assets/javascripts/materialize/dropdown.js +20 -20
  14. data/vendor/assets/javascripts/materialize/forms.js +3 -2
  15. data/vendor/assets/javascripts/materialize/global.js +56 -3
  16. data/vendor/assets/javascripts/materialize/init.js +3 -2
  17. data/vendor/assets/javascripts/materialize/modal.js +184 -0
  18. data/vendor/assets/javascripts/materialize/parallax.js +2 -2
  19. data/vendor/assets/javascripts/materialize/scrollspy.js +6 -5
  20. data/vendor/assets/javascripts/materialize/sideNav.js +193 -175
  21. data/vendor/assets/javascripts/materialize/tabs.js +30 -14
  22. data/vendor/assets/javascripts/materialize/toasts.js +29 -28
  23. data/vendor/assets/javascripts/materialize/tooltip.js +6 -0
  24. data/vendor/assets/stylesheets/materialize/_buttons.scss +78 -8
  25. data/vendor/assets/stylesheets/materialize/_cards.scss +2 -0
  26. data/vendor/assets/stylesheets/materialize/_chips.scss +15 -6
  27. data/vendor/assets/stylesheets/materialize/_dropdown.scss +9 -1
  28. data/vendor/assets/stylesheets/materialize/_global.scss +34 -15
  29. data/vendor/assets/stylesheets/materialize/_modal.scss +1 -1
  30. data/vendor/assets/stylesheets/materialize/_navbar.scss +11 -3
  31. data/vendor/assets/stylesheets/materialize/_sideNav.scss +6 -17
  32. data/vendor/assets/stylesheets/materialize/_tabs.scss +62 -19
  33. data/vendor/assets/stylesheets/materialize/_variables.scss +82 -82
  34. data/vendor/assets/stylesheets/materialize/_waves.scss +1 -1
  35. data/vendor/assets/stylesheets/materialize/forms/_input-fields.scss +13 -0
  36. data/vendor/assets/stylesheets/materialize/forms/_radio-buttons.scss +0 -2
  37. data/vendor/assets/stylesheets/materialize/forms/_select.scss +6 -1
  38. metadata +3 -3
  39. data/vendor/assets/javascripts/materialize/leanModal.js +0 -192
@@ -14,12 +14,23 @@
14
14
  var $this = $(this),
15
15
  window_width = $(window).width();
16
16
 
17
- $this.width('100%');
18
17
  var $active, $content, $links = $this.find('li.tab a'),
19
18
  $tabs_width = $this.width(),
20
19
  $tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length,
21
20
  $index = 0;
22
21
 
22
+ // Finds right attribute for indicator based on active tab.
23
+ // el: jQuery Object
24
+ var calcRightPos = function(el) {
25
+ return $tabs_width - el.position().left - el.outerWidth() - $this.scrollLeft();
26
+ };
27
+
28
+ // Finds left attribute for indicator based on active tab.
29
+ // el: jQuery Object
30
+ var calcLeftPos = function(el) {
31
+ return el.position().left + $this.scrollLeft();
32
+ };
33
+
23
34
  // If the location.hash matches one of the links, use that as the active tab.
24
35
  $active = $($links.filter('[href="'+location.hash+'"]'));
25
36
 
@@ -45,8 +56,12 @@
45
56
  $this.append('<div class="indicator"></div>');
46
57
  var $indicator = $this.find('.indicator');
47
58
  if ($this.is(":visible")) {
48
- $indicator.css({"right": $tabs_width - (($index + 1) * $tab_width)});
49
- $indicator.css({"left": $index * $tab_width});
59
+ // $indicator.css({"right": $tabs_width - (($index + 1) * $tab_width)});
60
+ // $indicator.css({"left": $index * $tab_width});
61
+ setTimeout(function() {
62
+ $indicator.css({"right": calcRightPos($active) });
63
+ $indicator.css({"left": calcLeftPos($active) });
64
+ }, 0);
50
65
  }
51
66
  $(window).resize(function () {
52
67
  $tabs_width = $this.width();
@@ -55,14 +70,14 @@
55
70
  $index = 0;
56
71
  }
57
72
  if ($tab_width !== 0 && $tabs_width !== 0) {
58
- $indicator.css({"right": $tabs_width - (($index + 1) * $tab_width)});
59
- $indicator.css({"left": $index * $tab_width});
73
+ $indicator.css({"right": calcRightPos($active) });
74
+ $indicator.css({"left": calcLeftPos($active) });
60
75
  }
61
76
  });
62
77
 
63
78
  // Hide the remaining content
64
79
  $links.not($active).each(function () {
65
- $(this.hash).hide();
80
+ $(Materialize.escapeHash(this.hash)).hide();
66
81
  });
67
82
 
68
83
 
@@ -89,8 +104,9 @@
89
104
 
90
105
  // Update the variables with the new link and content
91
106
  $active = $(this);
92
- $content = $(this.hash);
107
+ $content = $(Materialize.escapeHash(this.hash));
93
108
  $links = $this.find('li.tab a');
109
+ var activeRect = $active.position();
94
110
 
95
111
  // Make the tab active.
96
112
  $active.addClass('active');
@@ -110,14 +126,14 @@
110
126
  }
111
127
 
112
128
  // Update indicator
129
+
113
130
  if (($index - $prev_index) >= 0) {
114
- $indicator.velocity({"right": $tabs_width - (($index + 1) * $tab_width)}, { duration: 300, queue: false, easing: 'easeOutQuad'});
115
- $indicator.velocity({"left": $index * $tab_width}, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
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});
116
133
 
117
- }
118
- else {
119
- $indicator.velocity({"left": $index * $tab_width}, { duration: 300, queue: false, easing: 'easeOutQuad'});
120
- $indicator.velocity({"right": $tabs_width - (($index + 1) * $tab_width)}, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
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});
121
137
  }
122
138
 
123
139
  // Prevent the anchor's default click action
@@ -138,7 +154,7 @@
138
154
  // Default to "init"
139
155
  return methods.init.apply( this, arguments );
140
156
  } else {
141
- $.error( 'Method ' + methodOrOptions + ' does not exist on jQuery.tooltip' );
157
+ $.error( 'Method ' + methodOrOptions + ' does not exist on jQuery.tabs' );
142
158
  }
143
159
  };
144
160
 
@@ -29,33 +29,34 @@ Materialize.toast = function (message, displayLength, className, completeCallbac
29
29
 
30
30
  // Allows timer to be pause while being panned
31
31
  var timeLeft = displayLength;
32
- var counterInterval = setInterval (function(){
33
-
34
-
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);
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);
59
+ }
59
60
 
60
61
 
61
62
 
@@ -82,7 +83,7 @@ Materialize.toast = function (message, displayLength, className, completeCallbac
82
83
  }
83
84
  else {
84
85
  // Insert as text;
85
- toast.innerHTML = html;
86
+ toast.innerHTML = html;
86
87
  }
87
88
  // Bind hammer
88
89
  var hammerHandler = new Hammer(toast, {prevent_default: false});
@@ -25,6 +25,12 @@
25
25
  return this.each(function() {
26
26
  var tooltipId = Materialize.guid();
27
27
  var origin = $(this);
28
+
29
+ // Destroy old tooltip
30
+ if (origin.attr('data-tooltip-id')) {
31
+ $('#' + origin.attr('data-tooltip-id')).remove();
32
+ }
33
+
28
34
  origin.attr('data-tooltip-id', tooltipId);
29
35
 
30
36
  // Get attributes.
@@ -6,7 +6,6 @@
6
6
  display: inline-block;
7
7
  height: $button-height;
8
8
  line-height: $button-height;
9
- outline: 0;
10
9
  padding: $button-padding;
11
10
  text-transform: uppercase;
12
11
  vertical-align: middle;
@@ -18,21 +17,21 @@
18
17
  .btn.disabled,
19
18
  .btn-floating.disabled,
20
19
  .btn-large.disabled,
20
+ .btn-flat.disabled,
21
21
  .btn:disabled,
22
- .btn-large:disabled,
23
22
  .btn-floating:disabled,
23
+ .btn-large:disabled,
24
+ .btn-flat:disabled,
24
25
  .btn[disabled],
26
+ .btn-floating[disabled],
25
27
  .btn-large[disabled],
26
- .btn-floating[disabled] {
28
+ .btn-flat[disabled] {
29
+ pointer-events: none;
27
30
  background-color: $button-disabled-background !important;
28
31
  box-shadow: none;
29
32
  color: $button-disabled-color !important;
30
33
  cursor: default;
31
34
 
32
- * {
33
- pointer-events: none;
34
- }
35
-
36
35
  &:hover {
37
36
  background-color: $button-disabled-background !important;
38
37
  color: $button-disabled-color !important;
@@ -44,12 +43,23 @@
44
43
  .btn-floating,
45
44
  .btn-large,
46
45
  .btn-flat {
46
+
47
+ outline: 0;
48
+
47
49
  i {
48
50
  font-size: $button-font-size;
49
51
  line-height: inherit;
50
52
  }
51
53
  }
52
54
 
55
+ // Shared focus button style
56
+ .btn,
57
+ .btn-floating {
58
+ &:focus {
59
+ background-color: darken($button-raised-background, 10%);
60
+ }
61
+ }
62
+
53
63
  // Raised Button
54
64
  .btn {
55
65
  text-decoration: none;
@@ -144,6 +154,48 @@ button.btn-floating {
144
154
  }
145
155
  }
146
156
 
157
+ &.toolbar {
158
+ &.active {
159
+ & > a i {
160
+ opacity: 0;
161
+ }
162
+ }
163
+
164
+ padding: 0;
165
+ height: $button-floating-large-size;
166
+
167
+ ul {
168
+ display: flex;
169
+ top: 0;
170
+ bottom: 0;
171
+
172
+ li {
173
+ flex: 1;
174
+ display: inline-block;
175
+ margin: 0;
176
+ height: 100%;
177
+ transition: none;
178
+
179
+ a {
180
+ display: block;
181
+ overflow: hidden;
182
+ position: relative;
183
+ width: 100%;
184
+ height: 100%;
185
+ background-color: transparent;
186
+ box-shadow: none;
187
+ color: #fff;
188
+ line-height: $button-floating-large-size;
189
+ z-index: 1;
190
+
191
+ i {
192
+ line-height: inherit;
193
+ }
194
+ }
195
+ }
196
+ }
197
+ }
198
+
147
199
  position: fixed;
148
200
  right: 23px;
149
201
  bottom: 23px;
@@ -168,6 +220,18 @@ button.btn-floating {
168
220
  opacity: 0;
169
221
  }
170
222
  }
223
+
224
+ .fab-backdrop {
225
+ position: absolute;
226
+ top: 0;
227
+ left: 0;
228
+ z-index: -1;
229
+ width: $button-floating-size;
230
+ height: $button-floating-size;
231
+ background-color: $button-floating-background;
232
+ border-radius: $button-floating-radius;
233
+ transform: scale(0);
234
+ }
171
235
  }
172
236
 
173
237
  // Flat button
@@ -183,13 +247,19 @@ button.btn-floating {
183
247
  background-color: transparent;
184
248
  }
185
249
 
250
+ &:focus,
186
251
  &:hover {
187
252
  background-color: rgba(0,0,0,.1);
188
253
  box-shadow: none;
189
254
  }
190
255
 
256
+ &:active {
257
+ background-color: rgba(0,0,0,.2);
258
+ }
259
+
191
260
  &.disabled {
192
- color: $button-flat-disabled-color;
261
+ background-color: transparent !important;
262
+ color: $button-flat-disabled-color !important;
193
263
  cursor: default;
194
264
  }
195
265
  }
@@ -80,6 +80,7 @@
80
80
  .card-image {
81
81
  max-width: 50%;
82
82
  img {
83
+ border-radius: 2px 0 0 2px;
83
84
  max-width: 100%;
84
85
  width: auto;
85
86
  }
@@ -172,6 +173,7 @@
172
173
  background-color: $card-bg-color;
173
174
  width: 100%;
174
175
  overflow-y: auto;
176
+ left: 0;
175
177
  top: 100%;
176
178
  height: 100%;
177
179
  z-index: 3;
@@ -32,10 +32,9 @@
32
32
  border: none;
33
33
  border-bottom: 1px solid $chip-border-color;
34
34
  box-shadow: none;
35
- margin-bottom: 30px;
35
+ margin: $input-margin;
36
36
  min-height: 45px;
37
37
  outline: none;
38
- padding-bottom: $chip-margin;
39
38
  transition: all .3s;
40
39
 
41
40
  &.focus {
@@ -57,12 +56,11 @@
57
56
  border: 0;
58
57
  color: rgba(0,0,0,.6);
59
58
  display: inline-block;
60
- font-size: 13px;
61
- font-weight: 500;
62
- height: 32px;
63
- margin-right: 20px;
59
+ font-size: $input-font-size;
60
+ height: $input-height;
64
61
  line-height: 32px;
65
62
  outline: 0;
63
+ margin: 0;
66
64
  padding: 0 !important;
67
65
  width: 120px !important;
68
66
  }
@@ -72,3 +70,14 @@
72
70
  box-shadow: none !important;
73
71
  }
74
72
  }
73
+
74
+ // Form prefix
75
+ .prefix ~ .chips {
76
+ margin-left: 3rem;
77
+ width: 92%;
78
+ width: calc(100% - 3rem);
79
+ }
80
+ .chips:empty ~ label {
81
+ font-size: 0.8rem;
82
+ transform: translateY(-140%);
83
+ }
@@ -44,7 +44,7 @@
44
44
 
45
45
  & > span > label {
46
46
  top: 1px;
47
- left: 3px;
47
+ left: 0;
48
48
  height: 18px;
49
49
  }
50
50
 
@@ -55,3 +55,11 @@
55
55
  }
56
56
  }
57
57
  }
58
+
59
+ // Input field specificity bugfix
60
+ .input-field.col .dropdown-content [type="checkbox"] + label {
61
+ top: 1px;
62
+ left: 0;
63
+ height: 18px;
64
+ }
65
+
@@ -18,16 +18,13 @@ main {
18
18
  }
19
19
 
20
20
  ul {
21
- &.browser-default,
22
- &.browser-default li {
23
- list-style-type: initial;
24
- }
25
-
26
- padding: 0;
27
- list-style-type: none;
28
-
29
- li {
21
+ &:not(.browser-default) {
22
+ padding-left: 0;
30
23
  list-style-type: none;
24
+
25
+ li {
26
+ list-style-type: none;
27
+ }
31
28
  }
32
29
  }
33
30
 
@@ -599,12 +596,12 @@ td, th{
599
596
  span.badge {
600
597
  min-width: 3rem;
601
598
  padding: 0 6px;
599
+ margin-left: 14px;
602
600
  text-align: center;
603
601
  font-size: 1rem;
604
602
  line-height: inherit;
605
603
  color: color('grey', 'darken-1');
606
- position: absolute;
607
- right: 15px;
604
+ float: right;
608
605
  box-sizing: border-box;
609
606
 
610
607
  &.new {
@@ -621,14 +618,36 @@ span.badge {
621
618
  &[data-badge-caption]::after {
622
619
  content: " " attr(data-badge-caption);
623
620
  }
624
-
625
-
626
621
  }
627
622
  nav ul a span.badge {
628
- position: static;
623
+ display: inline-block;
624
+ float: none;
629
625
  margin-left: 4px;
630
- line-height: 0;
626
+ line-height: 22px;
627
+ height: 22px;
631
628
  }
629
+ .side-nav span.badge.new,
630
+ .collapsible span.badge.new {
631
+ &::before {
632
+ content: '';
633
+ position: absolute;
634
+ top: 10px;
635
+ right: 0;
636
+ bottom: 10px;
637
+ left: 0;
638
+ background-color: $badge-bg-color;
639
+ border-radius: 2px;
640
+ z-index: -1;
641
+ }
642
+
643
+ position: relative;
644
+ background-color: transparent;
645
+ }
646
+ .collapsible span.badge.new {
647
+ z-index: 1;
648
+ }
649
+
650
+
632
651
 
633
652
  // Responsive Videos
634
653
  .video-container {