mtl 1.0.3 → 1.1.0

Sign up to get free protection for your applications and to get access to all the features.
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 {