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.
- checksums.yaml +4 -4
- data/Gemfile +1 -1
- data/app/assets/javascripts/mtl.js +1 -1
- data/app/assets/javascripts/mtl/dropdown.coffee +3 -2
- data/app/assets/javascripts/mtl/modal.coffee +6 -11
- data/app/assets/stylesheets/mtl/extend/_dropdown.scss +0 -1
- data/app/assets/stylesheets/mtl/extend/_forms.scss +13 -3
- data/lib/mtl/version.rb +3 -2
- data/package.json +1 -1
- data/vendor/assets/javascripts/materialize/buttons.js +181 -5
- data/vendor/assets/javascripts/materialize/carousel.js +1 -1
- data/vendor/assets/javascripts/materialize/chips.js +75 -53
- data/vendor/assets/javascripts/materialize/dropdown.js +20 -20
- data/vendor/assets/javascripts/materialize/forms.js +3 -2
- data/vendor/assets/javascripts/materialize/global.js +56 -3
- data/vendor/assets/javascripts/materialize/init.js +3 -2
- data/vendor/assets/javascripts/materialize/modal.js +184 -0
- data/vendor/assets/javascripts/materialize/parallax.js +2 -2
- data/vendor/assets/javascripts/materialize/scrollspy.js +6 -5
- data/vendor/assets/javascripts/materialize/sideNav.js +193 -175
- data/vendor/assets/javascripts/materialize/tabs.js +30 -14
- data/vendor/assets/javascripts/materialize/toasts.js +29 -28
- data/vendor/assets/javascripts/materialize/tooltip.js +6 -0
- data/vendor/assets/stylesheets/materialize/_buttons.scss +78 -8
- data/vendor/assets/stylesheets/materialize/_cards.scss +2 -0
- data/vendor/assets/stylesheets/materialize/_chips.scss +15 -6
- data/vendor/assets/stylesheets/materialize/_dropdown.scss +9 -1
- data/vendor/assets/stylesheets/materialize/_global.scss +34 -15
- data/vendor/assets/stylesheets/materialize/_modal.scss +1 -1
- data/vendor/assets/stylesheets/materialize/_navbar.scss +11 -3
- data/vendor/assets/stylesheets/materialize/_sideNav.scss +6 -17
- data/vendor/assets/stylesheets/materialize/_tabs.scss +62 -19
- data/vendor/assets/stylesheets/materialize/_variables.scss +82 -82
- data/vendor/assets/stylesheets/materialize/_waves.scss +1 -1
- data/vendor/assets/stylesheets/materialize/forms/_input-fields.scss +13 -0
- data/vendor/assets/stylesheets/materialize/forms/_radio-buttons.scss +0 -2
- data/vendor/assets/stylesheets/materialize/forms/_select.scss +6 -1
- metadata +3 -3
- 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":
|
59
|
-
$indicator.css({"left": $
|
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":
|
115
|
-
$indicator.velocity({"left": $
|
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
|
-
|
119
|
-
$indicator.velocity({"
|
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.
|
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
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
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-
|
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:
|
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
|
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:
|
61
|
-
|
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:
|
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
|
-
|
22
|
-
|
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
|
-
|
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
|
-
|
623
|
+
display: inline-block;
|
624
|
+
float: none;
|
629
625
|
margin-left: 4px;
|
630
|
-
line-height:
|
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 {
|