mtl 1.1.0 → 1.1.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/javascripts/mtl/dropdown.coffee +1 -1
- data/app/assets/stylesheets/mtl/extend/_chips.scss +20 -0
- data/app/assets/stylesheets/mtl/extend/_side-nav.scss +4 -2
- data/lib/generators/mtl/templates/_variables.scss +5 -0
- data/lib/mtl/version.rb +2 -2
- data/mtl.gemspec +11 -0
- data/package.json +1 -1
- data/vendor/assets/javascripts/materialize/animation.js +8 -9
- data/vendor/assets/javascripts/materialize/carousel.js +51 -24
- data/vendor/assets/javascripts/materialize/character_counter.js +2 -2
- data/vendor/assets/javascripts/materialize/chips.js +40 -11
- data/vendor/assets/javascripts/materialize/dropdown.js +12 -12
- data/vendor/assets/javascripts/materialize/forms.js +131 -35
- data/vendor/assets/javascripts/materialize/global.js +55 -0
- data/vendor/assets/javascripts/materialize/init.js +40 -3
- data/vendor/assets/javascripts/materialize/materialbox.js +93 -77
- data/vendor/assets/javascripts/materialize/modal.js +12 -12
- data/vendor/assets/javascripts/materialize/parallax.js +48 -48
- data/vendor/assets/javascripts/materialize/scrollFire.js +40 -37
- data/vendor/assets/javascripts/materialize/scrollspy.js +2 -53
- data/vendor/assets/javascripts/materialize/sideNav.js +46 -40
- data/vendor/assets/javascripts/materialize/slider.js +15 -12
- data/vendor/assets/javascripts/materialize/tabs.js +104 -35
- data/vendor/assets/javascripts/materialize/toasts.js +122 -123
- data/vendor/assets/javascripts/materialize/tooltip.js +15 -13
- data/vendor/assets/javascripts/materialize/transitions.js +24 -24
- data/vendor/assets/stylesheets/materialize/_badges.scss +46 -0
- data/vendor/assets/stylesheets/materialize/_buttons.scss +29 -17
- data/vendor/assets/stylesheets/materialize/_cards.scss +9 -3
- data/vendor/assets/stylesheets/materialize/_carousel.scss +1 -1
- data/vendor/assets/stylesheets/materialize/_collapsible.scss +3 -7
- data/vendor/assets/stylesheets/materialize/_global.scss +5 -61
- data/vendor/assets/stylesheets/materialize/_materialbox.scss +13 -12
- data/vendor/assets/stylesheets/materialize/_navbar.scss +26 -7
- data/vendor/assets/stylesheets/materialize/_sideNav.scss +5 -5
- data/vendor/assets/stylesheets/materialize/_table_of_contents.scss +2 -2
- data/vendor/assets/stylesheets/materialize/_toast.scss +1 -1
- data/vendor/assets/stylesheets/materialize/_tooltip.scss +2 -3
- data/vendor/assets/stylesheets/materialize/_transitions.scss +13 -0
- data/vendor/assets/stylesheets/materialize/_variables.scss +7 -1
- data/vendor/assets/stylesheets/materialize/_waves.scss +80 -143
- data/vendor/assets/stylesheets/materialize/forms/_input-fields.scss +4 -4
- metadata +9 -4
@@ -79,6 +79,35 @@
|
|
79
79
|
|
80
80
|
// Floating button
|
81
81
|
.btn-floating {
|
82
|
+
&:hover {
|
83
|
+
background-color: $button-floating-background-hover;
|
84
|
+
@extend .z-depth-1-half;
|
85
|
+
}
|
86
|
+
|
87
|
+
&:before {
|
88
|
+
border-radius: 0;
|
89
|
+
}
|
90
|
+
|
91
|
+
&.btn-large {
|
92
|
+
width: $button-floating-large-size;
|
93
|
+
height: $button-floating-large-size;
|
94
|
+
i {
|
95
|
+
line-height: $button-floating-large-size;
|
96
|
+
}
|
97
|
+
}
|
98
|
+
|
99
|
+
&.halfway-fab {
|
100
|
+
&.left {
|
101
|
+
right: auto;
|
102
|
+
left: 24px;
|
103
|
+
}
|
104
|
+
|
105
|
+
position: absolute;
|
106
|
+
right: 24px;
|
107
|
+
bottom: 0;
|
108
|
+
transform: translateY(50%);
|
109
|
+
}
|
110
|
+
|
82
111
|
display: inline-block;
|
83
112
|
color: $button-floating-color;
|
84
113
|
position: relative;
|
@@ -103,23 +132,6 @@
|
|
103
132
|
font-size: $button-large-icon-font-size;
|
104
133
|
line-height: $button-floating-size;
|
105
134
|
}
|
106
|
-
|
107
|
-
&:hover {
|
108
|
-
background-color: $button-floating-background-hover;
|
109
|
-
@extend .z-depth-1-half;
|
110
|
-
}
|
111
|
-
|
112
|
-
&:before {
|
113
|
-
border-radius: 0;
|
114
|
-
}
|
115
|
-
|
116
|
-
&.btn-large {
|
117
|
-
width: $button-floating-large-size;
|
118
|
-
height: $button-floating-large-size;
|
119
|
-
i {
|
120
|
-
line-height: $button-floating-large-size;
|
121
|
-
}
|
122
|
-
}
|
123
135
|
}
|
124
136
|
|
125
137
|
// button fix
|
@@ -133,9 +133,9 @@
|
|
133
133
|
position: absolute;
|
134
134
|
bottom: 0;
|
135
135
|
left: 0;
|
136
|
+
max-width: 100%;
|
136
137
|
padding: $card-padding;
|
137
138
|
}
|
138
|
-
|
139
139
|
}
|
140
140
|
|
141
141
|
.card-content {
|
@@ -147,7 +147,13 @@
|
|
147
147
|
color: inherit;
|
148
148
|
}
|
149
149
|
.card-title {
|
150
|
-
|
150
|
+
display: block;
|
151
|
+
line-height: 32px;
|
152
|
+
margin-bottom: 8px;
|
153
|
+
|
154
|
+
i {
|
155
|
+
line-height: 32px;
|
156
|
+
}
|
151
157
|
}
|
152
158
|
}
|
153
159
|
|
@@ -155,7 +161,7 @@
|
|
155
161
|
position: relative;
|
156
162
|
background-color: inherit;
|
157
163
|
border-top: 1px solid rgba(160,160,160,.2);
|
158
|
-
padding: $card-padding;
|
164
|
+
padding: 16px $card-padding;
|
159
165
|
|
160
166
|
a:not(.btn):not(.btn-large):not(.btn-floating) {
|
161
167
|
color: $card-link-color;
|
@@ -10,7 +10,7 @@
|
|
10
10
|
display: block;
|
11
11
|
cursor: pointer;
|
12
12
|
min-height: $collapsible-height;
|
13
|
-
line-height: $collapsible-height;
|
13
|
+
line-height: $collapsible-line-height;
|
14
14
|
padding: 0 1rem;
|
15
15
|
background-color: $collapsible-header-color;
|
16
16
|
border-bottom: 1px solid $collapsible-border-color;
|
@@ -18,7 +18,7 @@
|
|
18
18
|
i {
|
19
19
|
width: 2rem;
|
20
20
|
font-size: 1.6rem;
|
21
|
-
line-height: $collapsible-height;
|
21
|
+
line-height: $collapsible-line-height;
|
22
22
|
display: block;
|
23
23
|
float: left;
|
24
24
|
text-align: center;
|
@@ -30,11 +30,7 @@
|
|
30
30
|
display: none;
|
31
31
|
border-bottom: 1px solid $collapsible-border-color;
|
32
32
|
box-sizing: border-box;
|
33
|
-
|
34
|
-
p {
|
35
|
-
margin: 0;
|
36
|
-
padding: 2rem;
|
37
|
-
}
|
33
|
+
padding: 2rem;
|
38
34
|
}
|
39
35
|
|
40
36
|
// sideNav collapsible styling
|
@@ -345,14 +345,15 @@ ul.staggered-list li {
|
|
345
345
|
|
346
346
|
// Footer
|
347
347
|
footer.page-footer {
|
348
|
-
margin-top: 20px;
|
349
348
|
padding-top: 20px;
|
350
349
|
background-color: $footer-bg-color;
|
351
350
|
|
352
351
|
.footer-copyright {
|
353
352
|
overflow: hidden;
|
354
|
-
height: 50px;
|
355
|
-
|
353
|
+
min-height: 50px;
|
354
|
+
display: flex;
|
355
|
+
align-items: center;
|
356
|
+
padding: 10px 0px;
|
356
357
|
color: rgba(255,255,255,.8);
|
357
358
|
background-color: rgba(51,51,51,.08);
|
358
359
|
@extend .light;
|
@@ -495,7 +496,7 @@ td, th{
|
|
495
496
|
|
496
497
|
.collection-item {
|
497
498
|
background-color: $collection-bg-color;
|
498
|
-
line-height:
|
499
|
+
line-height: $collection-line-height;
|
499
500
|
padding: 10px 20px;
|
500
501
|
margin: 0;
|
501
502
|
border-bottom: 1px solid $collection-border-color;
|
@@ -592,63 +593,6 @@ td, th{
|
|
592
593
|
|
593
594
|
|
594
595
|
|
595
|
-
// Badges
|
596
|
-
span.badge {
|
597
|
-
min-width: 3rem;
|
598
|
-
padding: 0 6px;
|
599
|
-
margin-left: 14px;
|
600
|
-
text-align: center;
|
601
|
-
font-size: 1rem;
|
602
|
-
line-height: inherit;
|
603
|
-
color: color('grey', 'darken-1');
|
604
|
-
float: right;
|
605
|
-
box-sizing: border-box;
|
606
|
-
|
607
|
-
&.new {
|
608
|
-
font-weight: 300;
|
609
|
-
font-size: 0.8rem;
|
610
|
-
color: #fff;
|
611
|
-
background-color: $badge-bg-color;
|
612
|
-
border-radius: 2px;
|
613
|
-
}
|
614
|
-
&.new:after {
|
615
|
-
content: " new";
|
616
|
-
}
|
617
|
-
|
618
|
-
&[data-badge-caption]::after {
|
619
|
-
content: " " attr(data-badge-caption);
|
620
|
-
}
|
621
|
-
}
|
622
|
-
nav ul a span.badge {
|
623
|
-
display: inline-block;
|
624
|
-
float: none;
|
625
|
-
margin-left: 4px;
|
626
|
-
line-height: 22px;
|
627
|
-
height: 22px;
|
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
|
-
|
651
|
-
|
652
596
|
// Responsive Videos
|
653
597
|
.video-container {
|
654
598
|
position: relative;
|
@@ -1,38 +1,39 @@
|
|
1
1
|
.materialboxed {
|
2
|
-
display: block;
|
3
|
-
cursor: zoom-in;
|
4
|
-
position: relative;
|
5
|
-
transition: opacity .4s;
|
6
|
-
|
7
2
|
&:hover {
|
8
3
|
&:not(.active) {
|
9
4
|
opacity: .8;
|
10
5
|
}
|
11
|
-
will-change: left, top, width, height;
|
12
6
|
}
|
13
|
-
}
|
14
7
|
|
15
|
-
|
16
|
-
cursor: zoom-
|
8
|
+
display: block;
|
9
|
+
cursor: zoom-in;
|
10
|
+
position: relative;
|
11
|
+
transition: opacity .4s;
|
12
|
+
-webkit-backface-visibility: hidden;
|
13
|
+
|
14
|
+
&.active {
|
15
|
+
cursor: zoom-out;
|
16
|
+
}
|
17
17
|
}
|
18
18
|
|
19
19
|
#materialbox-overlay {
|
20
20
|
position:fixed;
|
21
|
-
top:0;
|
22
|
-
left:0;
|
21
|
+
top: 0;
|
23
22
|
right: 0;
|
24
23
|
bottom: 0;
|
24
|
+
left: 0;
|
25
25
|
background-color: #292929;
|
26
26
|
z-index: 1000;
|
27
|
-
|
28
27
|
will-change: opacity;
|
29
28
|
}
|
29
|
+
|
30
30
|
.materialbox-caption {
|
31
31
|
position: fixed;
|
32
32
|
display: none;
|
33
33
|
color: #fff;
|
34
34
|
line-height: 50px;
|
35
35
|
bottom: 0;
|
36
|
+
left: 0;
|
36
37
|
width: 100%;
|
37
38
|
text-align: center;
|
38
39
|
padding: 0% 15%;
|
@@ -3,8 +3,14 @@ nav {
|
|
3
3
|
height: auto;
|
4
4
|
|
5
5
|
.nav-wrapper {
|
6
|
+
min-height: $navbar-height-mobile;
|
6
7
|
height: auto;
|
7
8
|
}
|
9
|
+
|
10
|
+
.nav-content {
|
11
|
+
position: relative;
|
12
|
+
line-height: normal;
|
13
|
+
}
|
8
14
|
}
|
9
15
|
|
10
16
|
color: $navbar-font-color;
|
@@ -12,7 +18,7 @@ nav {
|
|
12
18
|
background-color: $primary-color;
|
13
19
|
width: 100%;
|
14
20
|
height: $navbar-height-mobile;
|
15
|
-
line-height: $navbar-height-mobile;
|
21
|
+
line-height: $navbar-line-height-mobile;
|
16
22
|
|
17
23
|
a { color: $navbar-font-color; }
|
18
24
|
|
@@ -22,7 +28,7 @@ nav {
|
|
22
28
|
display: block;
|
23
29
|
font-size: 24px;
|
24
30
|
height: $navbar-height-mobile;
|
25
|
-
line-height: $navbar-height-mobile;
|
31
|
+
line-height: $navbar-line-height-mobile;
|
26
32
|
}
|
27
33
|
|
28
34
|
.nav-wrapper {
|
@@ -45,7 +51,7 @@ nav {
|
|
45
51
|
|
46
52
|
i {
|
47
53
|
height: $navbar-height-mobile;
|
48
|
-
line-height: $navbar-height-mobile;
|
54
|
+
line-height: $navbar-line-height-mobile;
|
49
55
|
}
|
50
56
|
}
|
51
57
|
|
@@ -94,6 +100,14 @@ nav {
|
|
94
100
|
}
|
95
101
|
|
96
102
|
|
103
|
+
// Title
|
104
|
+
.nav-title {
|
105
|
+
display: inline-block;
|
106
|
+
font-size: 32px;
|
107
|
+
padding: 28px 0;
|
108
|
+
}
|
109
|
+
|
110
|
+
|
97
111
|
// Navbar Links
|
98
112
|
ul {
|
99
113
|
margin: 0;
|
@@ -119,6 +133,11 @@ nav {
|
|
119
133
|
margin-top: -2px;
|
120
134
|
margin-left: 15px;
|
121
135
|
margin-right: 15px;
|
136
|
+
|
137
|
+
& > .material-icons {
|
138
|
+
height: inherit;
|
139
|
+
line-height: inherit;
|
140
|
+
}
|
122
141
|
}
|
123
142
|
|
124
143
|
&:hover {
|
@@ -162,9 +181,6 @@ nav {
|
|
162
181
|
transition: color .3s;
|
163
182
|
}
|
164
183
|
&.active i { color: $navbar-font-color; }
|
165
|
-
&.active {
|
166
|
-
transform: translateY(0);
|
167
|
-
}
|
168
184
|
}
|
169
185
|
}
|
170
186
|
}
|
@@ -180,9 +196,12 @@ nav {
|
|
180
196
|
}
|
181
197
|
}
|
182
198
|
@media #{$medium-and-up} {
|
199
|
+
nav.nav-extended .nav-wrapper {
|
200
|
+
min-height: $navbar-height;
|
201
|
+
}
|
183
202
|
nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
|
184
203
|
height: $navbar-height;
|
185
|
-
line-height: $navbar-height;
|
204
|
+
line-height: $navbar-line-height;
|
186
205
|
}
|
187
206
|
.navbar-fixed {
|
188
207
|
height: $navbar-height;
|
@@ -33,7 +33,7 @@
|
|
33
33
|
|
34
34
|
li {
|
35
35
|
float: none;
|
36
|
-
line-height: $sidenav-
|
36
|
+
line-height: $sidenav-line-height;
|
37
37
|
|
38
38
|
&.active { background-color: rgba(0,0,0,.05); }
|
39
39
|
}
|
@@ -44,7 +44,7 @@
|
|
44
44
|
font-size: $sidenav-font-size;
|
45
45
|
font-weight: 500;
|
46
46
|
height: $sidenav-item-height;
|
47
|
-
line-height: $sidenav-
|
47
|
+
line-height: $sidenav-line-height;
|
48
48
|
padding: 0 ($sidenav-padding * 2);
|
49
49
|
|
50
50
|
&:hover { background-color: rgba(0,0,0,.05);}
|
@@ -68,7 +68,7 @@
|
|
68
68
|
li > a > i.material-icons {
|
69
69
|
float: left;
|
70
70
|
height: $sidenav-item-height;
|
71
|
-
line-height: $sidenav-
|
71
|
+
line-height: $sidenav-line-height;
|
72
72
|
margin: 0 ($sidenav-padding * 2) 0 0;
|
73
73
|
width: $sidenav-item-height / 2;
|
74
74
|
color: rgba(0,0,0,.54);
|
@@ -88,7 +88,7 @@
|
|
88
88
|
color: rgba(0,0,0,.54);
|
89
89
|
font-size: $sidenav-font-size;
|
90
90
|
font-weight: 500;
|
91
|
-
line-height: $sidenav-
|
91
|
+
line-height: $sidenav-line-height;
|
92
92
|
}
|
93
93
|
|
94
94
|
.userView {
|
@@ -124,7 +124,7 @@
|
|
124
124
|
.name,
|
125
125
|
.email {
|
126
126
|
font-size: $sidenav-font-size;
|
127
|
-
line-height:
|
127
|
+
line-height: $sidenav-line-height / 2;
|
128
128
|
}
|
129
129
|
|
130
130
|
.name {
|
@@ -22,12 +22,12 @@
|
|
22
22
|
&:hover {
|
23
23
|
color: lighten(#757575, 20%);
|
24
24
|
padding-left: 19px;
|
25
|
-
border-left: 1px solid
|
25
|
+
border-left: 1px solid $primary-color;
|
26
26
|
}
|
27
27
|
&.active {
|
28
28
|
font-weight: 500;
|
29
29
|
padding-left: 18px;
|
30
|
-
border-left: 2px solid
|
30
|
+
border-left: 2px solid $primary-color;
|
31
31
|
}
|
32
32
|
}
|
33
33
|
}
|
@@ -8,7 +8,6 @@
|
|
8
8
|
min-height: 36px;
|
9
9
|
line-height: 120%;
|
10
10
|
opacity: 0;
|
11
|
-
display: none;
|
12
11
|
position: absolute;
|
13
12
|
text-align: center;
|
14
13
|
max-width: calc(100% - 4px);
|
@@ -16,17 +15,17 @@
|
|
16
15
|
left: 0;
|
17
16
|
top: 0;
|
18
17
|
pointer-events: none;
|
18
|
+
visibility: hidden;
|
19
19
|
}
|
20
20
|
|
21
21
|
.backdrop {
|
22
22
|
position: absolute;
|
23
23
|
opacity: 0;
|
24
|
-
display: none;
|
25
24
|
height: 7px;
|
26
25
|
width: 14px;
|
27
26
|
border-radius: 0 0 50% 50%;
|
28
27
|
background-color: #323232;
|
29
28
|
z-index: -1;
|
30
29
|
transform-origin: 50% 0%;
|
31
|
-
|
30
|
+
visibility: hidden;
|
32
31
|
}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
// Scale transition
|
2
|
+
.scale-transition {
|
3
|
+
&.scale-out {
|
4
|
+
transform: scale(0);
|
5
|
+
transition: transform .2s !important;
|
6
|
+
}
|
7
|
+
|
8
|
+
&.scale-in {
|
9
|
+
transform: scale(1);
|
10
|
+
}
|
11
|
+
|
12
|
+
transition: transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
|
13
|
+
}
|
@@ -47,6 +47,7 @@ $link-color: color("light-blue", "darken-1") !default;
|
|
47
47
|
// ==========================================================================
|
48
48
|
|
49
49
|
$badge-bg-color: $secondary-color !default;
|
50
|
+
$badge-height: 22px !default;
|
50
51
|
|
51
52
|
|
52
53
|
// 3. Buttons
|
@@ -89,7 +90,7 @@ $button-floating-radius: 50% !default;
|
|
89
90
|
// 4. Cards
|
90
91
|
// ==========================================================================
|
91
92
|
|
92
|
-
$card-padding:
|
93
|
+
$card-padding: 24px !default;
|
93
94
|
$card-bg-color: #fff !default;
|
94
95
|
$card-link-color: color("orange", "accent-2") !default;
|
95
96
|
$card-link-color-light: lighten($card-link-color, 20%) !default;
|
@@ -99,6 +100,7 @@ $card-link-color-light: lighten($card-link-color, 20%) !default;
|
|
99
100
|
// ==========================================================================
|
100
101
|
|
101
102
|
$collapsible-height: 3rem !default;
|
103
|
+
$collapsible-line-height: $collapsible-height !default;
|
102
104
|
$collapsible-header-color: #fff !default;
|
103
105
|
$collapsible-border-color: #ddd !default;
|
104
106
|
|
@@ -217,7 +219,9 @@ $element-bottom-margin: ($gutter-width*2)/3 !default;
|
|
217
219
|
// ==========================================================================
|
218
220
|
|
219
221
|
$navbar-height: 64px !default;
|
222
|
+
$navbar-line-height: $navbar-height !default;
|
220
223
|
$navbar-height-mobile: 56px !default;
|
224
|
+
$navbar-line-height-mobile: $navbar-height-mobile !default;
|
221
225
|
$navbar-font-size: 1rem !default;
|
222
226
|
$navbar-font-color: #fff !default;
|
223
227
|
$navbar-brand-font-size: 2.1rem !default;
|
@@ -230,6 +234,7 @@ $sidenav-font-color: rgba(0,0,0,.87) !default;
|
|
230
234
|
$sidenav-bg-color: #fff !default;
|
231
235
|
$sidenav-padding: 16px !default;
|
232
236
|
$sidenav-item-height: 48px !default;
|
237
|
+
$sidenav-line-height: $sidenav-item-height !default;
|
233
238
|
|
234
239
|
|
235
240
|
// 15. Photo Slider
|
@@ -305,6 +310,7 @@ $collection-active-bg-color: $secondary-color !default;
|
|
305
310
|
$collection-active-color: lighten($secondary-color, 55%) !default;
|
306
311
|
$collection-hover-bg-color: #ddd !default;
|
307
312
|
$collection-link-color: $secondary-color !default;
|
313
|
+
$collection-line-height: 1.5rem !default;
|
308
314
|
|
309
315
|
|
310
316
|
// 24. Progress Bar
|