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
@@ -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
- line-height: 48px;
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;
@@ -47,7 +47,7 @@
47
47
  .carousel-item {
48
48
  display: none;
49
49
  width: 200px;
50
- height: 400px;
50
+ height: 200px;
51
51
  position: absolute;
52
52
  top: 0;
53
53
  left: 0;
@@ -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
- line-height: 50px;
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: 1.5rem;
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
- .materialboxed.active {
16
- cursor: zoom-out;
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-item-height;
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-item-height;
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-item-height;
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-item-height;
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: 24px;
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 lighten(color("materialize-red", "base"),10%);
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 lighten(color("materialize-red", "base"),10%);
30
+ border-left: 2px solid $primary-color;
31
31
  }
32
32
  }
33
33
  }
@@ -22,7 +22,7 @@
22
22
  .toast {
23
23
  @extend .z-depth-1;
24
24
  border-radius: 2px;
25
- top: 0;
25
+ top: 35px;
26
26
  width: auto;
27
27
  clear: both;
28
28
  margin-top: 10px;
@@ -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
- transform: translate3d(0,0,0);
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: 20px !default;
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