mtl 1.1.0 → 1.1.1

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