mtl 1.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (158) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +12 -0
  3. data/Gemfile +9 -0
  4. data/LICENSE.txt +22 -0
  5. data/README.md +104 -0
  6. data/Rakefile +6 -0
  7. data/app/assets/javascripts/mtl/clickables.coffee +25 -0
  8. data/app/assets/javascripts/mtl/collapsible.coffee +43 -0
  9. data/app/assets/javascripts/mtl/configuration.coffee.erb +1 -0
  10. data/app/assets/javascripts/mtl/document_modal.coffee +130 -0
  11. data/app/assets/javascripts/mtl/dropdown.coffee +24 -0
  12. data/app/assets/javascripts/mtl/hooks.coffee +14 -0
  13. data/app/assets/javascripts/mtl/icon.coffee.erb +17 -0
  14. data/app/assets/javascripts/mtl/modal.coffee +32 -0
  15. data/app/assets/javascripts/mtl/select.coffee +44 -0
  16. data/app/assets/javascripts/mtl/templates.coffee +4 -0
  17. data/app/assets/javascripts/mtl/toc.coffee +31 -0
  18. data/app/assets/javascripts/mtl.js +42 -0
  19. data/app/assets/stylesheets/mtl/all.scss +69 -0
  20. data/app/assets/stylesheets/mtl/extend/_avatars.scss +37 -0
  21. data/app/assets/stylesheets/mtl/extend/_buttons.scss +31 -0
  22. data/app/assets/stylesheets/mtl/extend/_cards.scss +21 -0
  23. data/app/assets/stylesheets/mtl/extend/_chips.scss +3 -0
  24. data/app/assets/stylesheets/mtl/extend/_collection-files.scss +108 -0
  25. data/app/assets/stylesheets/mtl/extend/_document-modals.scss +95 -0
  26. data/app/assets/stylesheets/mtl/extend/_dropdown.scss +12 -0
  27. data/app/assets/stylesheets/mtl/extend/_forms.scss +66 -0
  28. data/app/assets/stylesheets/mtl/extend/_global.scss +77 -0
  29. data/app/assets/stylesheets/mtl/extend/_grid.scss +25 -0
  30. data/app/assets/stylesheets/mtl/extend/_material-icons.scss +37 -0
  31. data/app/assets/stylesheets/mtl/extend/_mixins.scss +10 -0
  32. data/app/assets/stylesheets/mtl/extend/_roboto-rails.scss +49 -0
  33. data/app/assets/stylesheets/mtl/extend/_side-nav.scss +22 -0
  34. data/app/assets/stylesheets/mtl/extend/_toc.scss +12 -0
  35. data/app/assets/stylesheets/mtl/extend/_typography.scss +32 -0
  36. data/app/assets/stylesheets/mtl/extend/forms/_input-fields.scss +50 -0
  37. data/app/assets/stylesheets/mtl/layouts/_default.scss +220 -0
  38. data/app/assets/stylesheets/mtl/layouts/_single.scss +25 -0
  39. data/app/views/mtl/header.html.erb +25 -0
  40. data/bin/coffeelint.rb +16 -0
  41. data/lib/generators/mtl/install_generator.rb +20 -0
  42. data/lib/generators/mtl/templates/_color.scss +410 -0
  43. data/lib/generators/mtl/templates/_variables.scss +330 -0
  44. data/lib/generators/mtl/templates/mtl.scss +8 -0
  45. data/lib/generators/mtl/templates/simple_form.rb +211 -0
  46. data/lib/mtl/rails/card_file_presenter.rb +70 -0
  47. data/lib/mtl/rails/view_helpers.rb +412 -0
  48. data/lib/mtl/simple_form/suffix.rb +52 -0
  49. data/lib/mtl/version.rb +6 -0
  50. data/lib/mtl.rb +38 -0
  51. data/mtl.gemspec +35 -0
  52. data/package.json +11 -0
  53. data/spec/mtl/rails/card_file_presenter_spec.rb +126 -0
  54. data/spec/mtl/rails/view_helpers_spec.rb +193 -0
  55. data/spec/mtl/simple_form/suffix_spec.rb +39 -0
  56. data/spec/mtl_spec.rb +34 -0
  57. data/spec/spec_helper.rb +18 -0
  58. data/spec/support/dom.rb +15 -0
  59. data/vendor/assets/fonts/material-icons/MaterialIcons-Regular.eot +0 -0
  60. data/vendor/assets/fonts/material-icons/MaterialIcons-Regular.ijmap +1 -0
  61. data/vendor/assets/fonts/material-icons/MaterialIcons-Regular.svg +2373 -0
  62. data/vendor/assets/fonts/material-icons/MaterialIcons-Regular.ttf +0 -0
  63. data/vendor/assets/fonts/material-icons/MaterialIcons-Regular.woff +0 -0
  64. data/vendor/assets/fonts/material-icons/MaterialIcons-Regular.woff2 +0 -0
  65. data/vendor/assets/fonts/roboto/Roboto-Bold.eot +0 -0
  66. data/vendor/assets/fonts/roboto/Roboto-Bold.ttf +0 -0
  67. data/vendor/assets/fonts/roboto/Roboto-Bold.woff +0 -0
  68. data/vendor/assets/fonts/roboto/Roboto-Bold.woff2 +0 -0
  69. data/vendor/assets/fonts/roboto/Roboto-Light.eot +0 -0
  70. data/vendor/assets/fonts/roboto/Roboto-Light.ttf +0 -0
  71. data/vendor/assets/fonts/roboto/Roboto-Light.woff +0 -0
  72. data/vendor/assets/fonts/roboto/Roboto-Light.woff2 +0 -0
  73. data/vendor/assets/fonts/roboto/Roboto-Medium.eot +0 -0
  74. data/vendor/assets/fonts/roboto/Roboto-Medium.ttf +0 -0
  75. data/vendor/assets/fonts/roboto/Roboto-Medium.woff +0 -0
  76. data/vendor/assets/fonts/roboto/Roboto-Medium.woff2 +0 -0
  77. data/vendor/assets/fonts/roboto/Roboto-Regular.eot +0 -0
  78. data/vendor/assets/fonts/roboto/Roboto-Regular.ttf +0 -0
  79. data/vendor/assets/fonts/roboto/Roboto-Regular.woff +0 -0
  80. data/vendor/assets/fonts/roboto/Roboto-Regular.woff2 +0 -0
  81. data/vendor/assets/fonts/roboto/Roboto-Thin.eot +0 -0
  82. data/vendor/assets/fonts/roboto/Roboto-Thin.ttf +0 -0
  83. data/vendor/assets/fonts/roboto/Roboto-Thin.woff +0 -0
  84. data/vendor/assets/fonts/roboto/Roboto-Thin.woff2 +0 -0
  85. data/vendor/assets/javascripts/lodash.js +16607 -0
  86. data/vendor/assets/javascripts/materialize/animation.js +9 -0
  87. data/vendor/assets/javascripts/materialize/buttons.js +91 -0
  88. data/vendor/assets/javascripts/materialize/cards.js +26 -0
  89. data/vendor/assets/javascripts/materialize/carousel.js +454 -0
  90. data/vendor/assets/javascripts/materialize/character_counter.js +72 -0
  91. data/vendor/assets/javascripts/materialize/chips.js +267 -0
  92. data/vendor/assets/javascripts/materialize/collapsible.js +160 -0
  93. data/vendor/assets/javascripts/materialize/date_picker/picker.date.js +1430 -0
  94. data/vendor/assets/javascripts/materialize/date_picker/picker.js +1123 -0
  95. data/vendor/assets/javascripts/materialize/dropdown.js +265 -0
  96. data/vendor/assets/javascripts/materialize/forms.js +681 -0
  97. data/vendor/assets/javascripts/materialize/global.js +45 -0
  98. data/vendor/assets/javascripts/materialize/hammer.min.js +1 -0
  99. data/vendor/assets/javascripts/materialize/init.js +173 -0
  100. data/vendor/assets/javascripts/materialize/initial.js +11 -0
  101. data/vendor/assets/javascripts/materialize/jquery.easing.1.3.js +205 -0
  102. data/vendor/assets/javascripts/materialize/jquery.hammer.js +33 -0
  103. data/vendor/assets/javascripts/materialize/jquery.timeago.min.js +1 -0
  104. data/vendor/assets/javascripts/materialize/leanModal.js +192 -0
  105. data/vendor/assets/javascripts/materialize/materialbox.js +269 -0
  106. data/vendor/assets/javascripts/materialize/parallax.js +58 -0
  107. data/vendor/assets/javascripts/materialize/prism.js +8 -0
  108. data/vendor/assets/javascripts/materialize/pushpin.js +71 -0
  109. data/vendor/assets/javascripts/materialize/scrollFire.js +48 -0
  110. data/vendor/assets/javascripts/materialize/scrollspy.js +283 -0
  111. data/vendor/assets/javascripts/materialize/sideNav.js +352 -0
  112. data/vendor/assets/javascripts/materialize/slider.js +321 -0
  113. data/vendor/assets/javascripts/materialize/tabs.js +148 -0
  114. data/vendor/assets/javascripts/materialize/toasts.js +136 -0
  115. data/vendor/assets/javascripts/materialize/tooltip.js +230 -0
  116. data/vendor/assets/javascripts/materialize/transitions.js +169 -0
  117. data/vendor/assets/javascripts/materialize/velocity.min.js +5 -0
  118. data/vendor/assets/javascripts/materialize/waves.js +338 -0
  119. data/vendor/assets/javascripts/pdfobject.js +254 -0
  120. data/vendor/assets/stylesheets/materialize/_buttons.scss +211 -0
  121. data/vendor/assets/stylesheets/materialize/_cards.scss +185 -0
  122. data/vendor/assets/stylesheets/materialize/_carousel.scss +85 -0
  123. data/vendor/assets/stylesheets/materialize/_chips.scss +74 -0
  124. data/vendor/assets/stylesheets/materialize/_collapsible.scss +90 -0
  125. data/vendor/assets/stylesheets/materialize/_color.scss +412 -0
  126. data/vendor/assets/stylesheets/materialize/_dropdown.scss +57 -0
  127. data/vendor/assets/stylesheets/materialize/_global.scss +781 -0
  128. data/vendor/assets/stylesheets/materialize/_grid.scss +147 -0
  129. data/vendor/assets/stylesheets/materialize/_icons-material-design.scss +5 -0
  130. data/vendor/assets/stylesheets/materialize/_materialbox.scss +42 -0
  131. data/vendor/assets/stylesheets/materialize/_mixins.scss +5 -0
  132. data/vendor/assets/stylesheets/materialize/_modal.scss +90 -0
  133. data/vendor/assets/stylesheets/materialize/_navbar.scss +182 -0
  134. data/vendor/assets/stylesheets/materialize/_normalize.scss +424 -0
  135. data/vendor/assets/stylesheets/materialize/_prefixer.scss +384 -0
  136. data/vendor/assets/stylesheets/materialize/_preloader.scss +334 -0
  137. data/vendor/assets/stylesheets/materialize/_roboto.scss +49 -0
  138. data/vendor/assets/stylesheets/materialize/_sideNav.scss +219 -0
  139. data/vendor/assets/stylesheets/materialize/_slider.scss +92 -0
  140. data/vendor/assets/stylesheets/materialize/_table_of_contents.scss +33 -0
  141. data/vendor/assets/stylesheets/materialize/_tabs.scss +56 -0
  142. data/vendor/assets/stylesheets/materialize/_toast.scss +65 -0
  143. data/vendor/assets/stylesheets/materialize/_tooltip.scss +32 -0
  144. data/vendor/assets/stylesheets/materialize/_typography.scss +61 -0
  145. data/vendor/assets/stylesheets/materialize/_variables.scss +313 -0
  146. data/vendor/assets/stylesheets/materialize/_waves.scss +177 -0
  147. data/vendor/assets/stylesheets/materialize/date_picker/_default.date.scss +435 -0
  148. data/vendor/assets/stylesheets/materialize/date_picker/_default.scss +201 -0
  149. data/vendor/assets/stylesheets/materialize/date_picker/_default.time.scss +125 -0
  150. data/vendor/assets/stylesheets/materialize/forms/_checkboxes.scss +220 -0
  151. data/vendor/assets/stylesheets/materialize/forms/_file-input.scss +38 -0
  152. data/vendor/assets/stylesheets/materialize/forms/_forms.scss +22 -0
  153. data/vendor/assets/stylesheets/materialize/forms/_input-fields.scss +273 -0
  154. data/vendor/assets/stylesheets/materialize/forms/_radio-buttons.scss +119 -0
  155. data/vendor/assets/stylesheets/materialize/forms/_range.scss +159 -0
  156. data/vendor/assets/stylesheets/materialize/forms/_select.scss +116 -0
  157. data/vendor/assets/stylesheets/materialize/forms/_switches.scss +78 -0
  158. metadata +309 -0
@@ -0,0 +1,147 @@
1
+ .container {
2
+ margin: 0 auto;
3
+ max-width: 1280px;
4
+ width: 90%;
5
+ }
6
+ @media #{$medium-and-up} {
7
+ .container {
8
+ width: 85%;
9
+ }
10
+ }
11
+ @media #{$large-and-up} {
12
+ .container {
13
+ width: 70%;
14
+ }
15
+ }
16
+ .container .row {
17
+ margin-left: (-1 * $gutter-width / 2);
18
+ margin-right: (-1 * $gutter-width / 2);
19
+ }
20
+
21
+ .section {
22
+ padding-top: 1rem;
23
+ padding-bottom: 1rem;
24
+
25
+ &.no-pad {
26
+ padding: 0;
27
+ }
28
+ &.no-pad-bot {
29
+ padding-bottom: 0;
30
+ }
31
+ &.no-pad-top {
32
+ padding-top: 0;
33
+ }
34
+ }
35
+
36
+
37
+ .row {
38
+ margin-left: auto;
39
+ margin-right: auto;
40
+ margin-bottom: 20px;
41
+
42
+ // Clear floating children
43
+ &:after {
44
+ content: "";
45
+ display: table;
46
+ clear: both;
47
+ }
48
+
49
+ .col {
50
+ float: left;
51
+ box-sizing: border-box;
52
+ padding: 0 $gutter-width / 2;
53
+ min-height: 1px;
54
+
55
+ &[class*="push-"],
56
+ &[class*="pull-"] {
57
+ position: relative;
58
+ }
59
+
60
+ $i: 1;
61
+ @while $i <= $num-cols {
62
+ $perc: unquote((100 / ($num-cols / $i)) + "%");
63
+ &.s#{$i} {
64
+ width: $perc;
65
+ margin-left: auto;
66
+ left: auto;
67
+ right: auto;
68
+ }
69
+ $i: $i + 1;
70
+ }
71
+
72
+ $i: 1;
73
+ @while $i <= $num-cols {
74
+ $perc: unquote((100 / ($num-cols / $i)) + "%");
75
+ &.offset-s#{$i} {
76
+ margin-left: $perc;
77
+ }
78
+ &.pull-s#{$i} {
79
+ right: $perc;
80
+ }
81
+ &.push-s#{$i} {
82
+ left: $perc;
83
+ }
84
+ $i: $i + 1;
85
+ }
86
+
87
+ @media #{$medium-and-up} {
88
+
89
+ $i: 1;
90
+ @while $i <= $num-cols {
91
+ $perc: unquote((100 / ($num-cols / $i)) + "%");
92
+ &.m#{$i} {
93
+ width: $perc;
94
+ margin-left: auto;
95
+ left: auto;
96
+ right: auto;
97
+ }
98
+ $i: $i + 1
99
+ }
100
+
101
+ $i: 1;
102
+ @while $i <= $num-cols {
103
+ $perc: unquote((100 / ($num-cols / $i)) + "%");
104
+ &.offset-m#{$i} {
105
+ margin-left: $perc;
106
+ }
107
+ &.pull-m#{$i} {
108
+ right: $perc;
109
+ }
110
+ &.push-m#{$i} {
111
+ left: $perc;
112
+ }
113
+ $i: $i + 1;
114
+ }
115
+ }
116
+
117
+ @media #{$large-and-up} {
118
+
119
+ $i: 1;
120
+ @while $i <= $num-cols {
121
+ $perc: unquote((100 / ($num-cols / $i)) + "%");
122
+ &.l#{$i} {
123
+ width: $perc;
124
+ margin-left: auto;
125
+ left: auto;
126
+ right: auto;
127
+ }
128
+ $i: $i + 1;
129
+ }
130
+
131
+ $i: 1;
132
+ @while $i <= $num-cols {
133
+ $perc: unquote((100 / ($num-cols / $i)) + "%");
134
+ &.offset-l#{$i} {
135
+ margin-left: $perc;
136
+ }
137
+ &.pull-l#{$i} {
138
+ right: $perc;
139
+ }
140
+ &.push-l#{$i} {
141
+ left: $perc;
142
+ }
143
+ $i: $i + 1;
144
+ }
145
+ }
146
+ }
147
+ }
@@ -0,0 +1,5 @@
1
+ /* This is needed for some mobile phones to display the Google Icon font properly */
2
+ .material-icons {
3
+ text-rendering: optimizeLegibility;
4
+ font-feature-settings: 'liga';
5
+ }
@@ -0,0 +1,42 @@
1
+ .materialboxed {
2
+ display: block;
3
+ cursor: zoom-in;
4
+ position: relative;
5
+ transition: opacity .4s;
6
+
7
+ &:hover {
8
+ &:not(.active) {
9
+ opacity: .8;
10
+ }
11
+ will-change: left, top, width, height;
12
+ }
13
+ }
14
+
15
+ .materialboxed.active {
16
+ cursor: zoom-out;
17
+ }
18
+
19
+ #materialbox-overlay {
20
+ position:fixed;
21
+ top:0;
22
+ left:0;
23
+ right: 0;
24
+ bottom: 0;
25
+ background-color: #292929;
26
+ z-index: 1000;
27
+
28
+ will-change: opacity;
29
+ }
30
+ .materialbox-caption {
31
+ position: fixed;
32
+ display: none;
33
+ color: #fff;
34
+ line-height: 50px;
35
+ bottom: 0;
36
+ width: 100%;
37
+ text-align: center;
38
+ padding: 0% 15%;
39
+ height: 50px;
40
+ z-index: 1000;
41
+ -webkit-font-smoothing: antialiased;
42
+ }
@@ -0,0 +1,5 @@
1
+ // @mixin box-shadow-2($args1, $args2) {
2
+ // -webkit-box-shadow: $args1, $args2;
3
+ // -moz-box-shadow: $args1, $args2;
4
+ // box-shadow: $args1, $args2;
5
+ // }
@@ -0,0 +1,90 @@
1
+ .modal {
2
+ @extend .z-depth-4;
3
+
4
+ display: none;
5
+ position: fixed;
6
+ left: 0;
7
+ right: 0;
8
+ background-color: #fafafa;
9
+ padding: 0;
10
+ max-height: 70%;
11
+ width: 55%;
12
+ margin: auto;
13
+ overflow-y: auto;
14
+
15
+ border-radius: 2px;
16
+ will-change: top, opacity;
17
+
18
+ @media #{$medium-and-down} {
19
+ width: 80%;
20
+ }
21
+
22
+ h1,h2,h3,h4 {
23
+ margin-top: 0;
24
+ }
25
+
26
+ .modal-content {
27
+ padding: 24px;
28
+ }
29
+ .modal-close {
30
+ cursor: pointer;
31
+ }
32
+
33
+ .modal-footer {
34
+ border-radius: 0 0 2px 2px;
35
+ background-color: #fafafa;
36
+ padding: 4px 6px;
37
+ height: 56px;
38
+ width: 100%;
39
+
40
+ .btn, .btn-flat {
41
+ float: right;
42
+ margin: 6px 0;
43
+ }
44
+ }
45
+ }
46
+ .lean-overlay {
47
+ position: fixed;
48
+ z-index: 999;
49
+ top: -100px;
50
+ left: 0;
51
+ bottom: 0;
52
+ right: 0;
53
+ height: 125%;
54
+ width: 100%;
55
+ background: #000;
56
+ display: none;
57
+
58
+ will-change: opacity;
59
+ }
60
+
61
+ // Modal with fixed action footer
62
+ .modal.modal-fixed-footer {
63
+ padding: 0;
64
+ height: 70%;
65
+
66
+ .modal-content {
67
+ position: absolute;
68
+ height: calc(100% - 56px);
69
+ max-height: 100%;
70
+ width: 100%;
71
+ overflow-y: auto;
72
+ }
73
+
74
+ .modal-footer {
75
+ border-top: 1px solid rgba(0,0,0,.1);
76
+ position: absolute;
77
+ bottom: 0;
78
+ }
79
+ }
80
+
81
+ // Modal Bottom Sheet Style
82
+ .modal.bottom-sheet {
83
+ top: auto;
84
+ bottom: -100%;
85
+ margin: 0;
86
+ width: 100%;
87
+ max-height: 45%;
88
+ border-radius: 0;
89
+ will-change: bottom, opacity;
90
+ }
@@ -0,0 +1,182 @@
1
+ nav {
2
+ color: $navbar-font-color;
3
+ @extend .z-depth-1;
4
+ background-color: $primary-color;
5
+ width: 100%;
6
+ height: $navbar-height-mobile;
7
+ line-height: $navbar-height-mobile;
8
+
9
+ a { color: $navbar-font-color; }
10
+
11
+ i,
12
+ [class^="mdi-"], [class*="mdi-"],
13
+ i.material-icons {
14
+ display: block;
15
+ font-size: 2rem;
16
+ height: $navbar-height-mobile;
17
+ line-height: $navbar-height-mobile;
18
+ }
19
+
20
+ .nav-wrapper {
21
+ position: relative;
22
+ height: 100%;
23
+ }
24
+
25
+ @media #{$large-and-up} {
26
+ a.button-collapse { display: none; }
27
+ }
28
+
29
+
30
+ // Collapse button
31
+ .button-collapse {
32
+ float: left;
33
+ position: relative;
34
+ z-index: 1;
35
+ height: $navbar-height-mobile;
36
+
37
+ i {
38
+ font-size: 2.7rem;
39
+ height: $navbar-height-mobile;
40
+ line-height: $navbar-height-mobile;
41
+ }
42
+ }
43
+
44
+
45
+ // Logo
46
+ .brand-logo {
47
+ position: absolute;
48
+ color: $navbar-font-color;
49
+ display: inline-block;
50
+ font-size: $navbar-brand-font-size;
51
+ padding: 0;
52
+ white-space: nowrap;
53
+
54
+ &.center {
55
+ left: 50%;
56
+ transform: translateX(-50%);
57
+ }
58
+
59
+ @media #{$medium-and-down} {
60
+ left: 50%;
61
+ transform: translateX(-50%);
62
+
63
+ &.left, &.right {
64
+ padding: 0;
65
+ transform: none;
66
+ }
67
+
68
+ &.left { left: 0.5rem; }
69
+ &.right {
70
+ right: 0.5rem;
71
+ left: auto;
72
+ }
73
+ }
74
+
75
+ &.right {
76
+ right: 0.5rem;
77
+ padding: 0;
78
+ }
79
+
80
+ i,
81
+ [class^="mdi-"], [class*="mdi-"],
82
+ i.material-icons {
83
+ float: left;
84
+ margin-right: 15px;
85
+ }
86
+ }
87
+
88
+
89
+ // Navbar Links
90
+ ul {
91
+ margin: 0;
92
+
93
+ li {
94
+ transition: background-color .3s;
95
+ float: left;
96
+ padding: 0;
97
+
98
+ &.active {
99
+ background-color: rgba(0,0,0,.1);
100
+ }
101
+ }
102
+ a {
103
+ transition: background-color .3s;
104
+ font-size: $navbar-font-size;
105
+ color: $navbar-font-color;
106
+ display: block;
107
+ padding: 0 15px;
108
+ cursor: pointer;
109
+
110
+ &.btn, &.btn-large, &.btn-flat, &.btn-floating {
111
+ margin-top: -2px;
112
+ margin-left: 15px;
113
+ margin-right: 15px;
114
+ }
115
+
116
+ &:hover {
117
+ background-color: rgba(0,0,0,.1);
118
+ }
119
+ }
120
+
121
+ &.left {
122
+ float: left;
123
+ }
124
+ }
125
+
126
+ // Navbar Search Form
127
+ form {
128
+ height: 100%;
129
+ }
130
+
131
+ .input-field {
132
+ margin: 0;
133
+ height: 100%;
134
+
135
+ input {
136
+ height: 100%;
137
+ font-size: 1.2rem;
138
+ border: none;
139
+ padding-left: 2rem;
140
+
141
+ &:focus, &[type=text]:valid, &[type=password]:valid,
142
+ &[type=email]:valid, &[type=url]:valid, &[type=date]:valid {
143
+ border: none;
144
+ box-shadow: none;
145
+ }
146
+ }
147
+
148
+ label {
149
+ top: 0;
150
+ left: 0;
151
+
152
+ i {
153
+ color: rgba(255,255,255,.7);
154
+ transition: color .3s;
155
+ }
156
+ &.active i { color: $navbar-font-color; }
157
+ &.active {
158
+ transform: translateY(0);
159
+ }
160
+ }
161
+ }
162
+ }
163
+
164
+ // Fixed Navbar
165
+ .navbar-fixed {
166
+ position: relative;
167
+ height: $navbar-height-mobile;
168
+ z-index: 998;
169
+
170
+ nav {
171
+ position: fixed;
172
+ }
173
+ }
174
+ @media #{$medium-and-up} {
175
+ nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
176
+ height: $navbar-height;
177
+ line-height: $navbar-height;
178
+ }
179
+ .navbar-fixed {
180
+ height: $navbar-height;
181
+ }
182
+ }