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,334 @@
1
+ /*
2
+ @license
3
+ Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
4
+ This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5
+ The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6
+ The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7
+ Code distributed by Google as part of the polymer project is also
8
+ subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9
+ */
10
+
11
+ /**************************/
12
+ /* STYLES FOR THE SPINNER */
13
+ /**************************/
14
+
15
+ /*
16
+ * Constants:
17
+ * STROKEWIDTH = 3px
18
+ * ARCSIZE = 270 degrees (amount of circle the arc takes up)
19
+ * ARCTIME = 1333ms (time it takes to expand and contract arc)
20
+ * ARCSTARTROT = 216 degrees (how much the start location of the arc
21
+ * should rotate each time, 216 gives us a
22
+ * 5 pointed star shape (it's 360/5 * 3).
23
+ * For a 7 pointed star, we might do
24
+ * 360/7 * 3 = 154.286)
25
+ * CONTAINERWIDTH = 28px
26
+ * SHRINK_TIME = 400ms
27
+ */
28
+
29
+
30
+ .preloader-wrapper {
31
+ display: inline-block;
32
+ position: relative;
33
+ width: 48px;
34
+ height: 48px;
35
+
36
+ &.small {
37
+ width: 36px;
38
+ height: 36px;
39
+ }
40
+
41
+ &.big {
42
+ width: 64px;
43
+ height: 64px;
44
+ }
45
+
46
+ &.active {
47
+ /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
48
+ -webkit-animation: container-rotate 1568ms linear infinite;
49
+ animation: container-rotate 1568ms linear infinite;
50
+ }
51
+ }
52
+
53
+ @-webkit-keyframes container-rotate {
54
+ to { -webkit-transform: rotate(360deg) }
55
+ }
56
+
57
+ @keyframes container-rotate {
58
+ to { transform: rotate(360deg) }
59
+ }
60
+
61
+ .spinner-layer {
62
+ position: absolute;
63
+ width: 100%;
64
+ height: 100%;
65
+ opacity: 0;
66
+ border-color: $spinner-default-color;
67
+ }
68
+
69
+ .spinner-blue,
70
+ .spinner-blue-only {
71
+ border-color: #4285f4;
72
+ }
73
+
74
+ .spinner-red,
75
+ .spinner-red-only {
76
+ border-color: #db4437;
77
+ }
78
+
79
+ .spinner-yellow,
80
+ .spinner-yellow-only {
81
+ border-color: #f4b400;
82
+ }
83
+
84
+ .spinner-green,
85
+ .spinner-green-only {
86
+ border-color: #0f9d58;
87
+ }
88
+
89
+ /**
90
+ * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
91
+ *
92
+ * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
93
+ * guarantee that the animation will start _exactly_ after that value. So we avoid using
94
+ * animation-delay and instead set custom keyframes for each color (as redundant as it
95
+ * seems).
96
+ *
97
+ * We write out each animation in full (instead of separating animation-name,
98
+ * animation-duration, etc.) because under the polyfill, Safari does not recognize those
99
+ * specific properties properly, treats them as -webkit-animation, and overrides the
100
+ * other animation rules. See https://github.com/Polymer/platform/issues/53.
101
+ */
102
+ .active .spinner-layer.spinner-blue {
103
+ /* durations: 4 * ARCTIME */
104
+ -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
105
+ animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
106
+ }
107
+
108
+ .active .spinner-layer.spinner-red {
109
+ /* durations: 4 * ARCTIME */
110
+ -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
111
+ animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
112
+ }
113
+
114
+ .active .spinner-layer.spinner-yellow {
115
+ /* durations: 4 * ARCTIME */
116
+ -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
117
+ animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
118
+ }
119
+
120
+ .active .spinner-layer.spinner-green {
121
+ /* durations: 4 * ARCTIME */
122
+ -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
123
+ animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
124
+ }
125
+
126
+ .active .spinner-layer,
127
+ .active .spinner-layer.spinner-blue-only,
128
+ .active .spinner-layer.spinner-red-only,
129
+ .active .spinner-layer.spinner-yellow-only,
130
+ .active .spinner-layer.spinner-green-only {
131
+ /* durations: 4 * ARCTIME */
132
+ opacity: 1;
133
+ -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
134
+ animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
135
+ }
136
+
137
+ @-webkit-keyframes fill-unfill-rotate {
138
+ 12.5% { -webkit-transform: rotate(135deg); } /* 0.5 * ARCSIZE */
139
+ 25% { -webkit-transform: rotate(270deg); } /* 1 * ARCSIZE */
140
+ 37.5% { -webkit-transform: rotate(405deg); } /* 1.5 * ARCSIZE */
141
+ 50% { -webkit-transform: rotate(540deg); } /* 2 * ARCSIZE */
142
+ 62.5% { -webkit-transform: rotate(675deg); } /* 2.5 * ARCSIZE */
143
+ 75% { -webkit-transform: rotate(810deg); } /* 3 * ARCSIZE */
144
+ 87.5% { -webkit-transform: rotate(945deg); } /* 3.5 * ARCSIZE */
145
+ to { -webkit-transform: rotate(1080deg); } /* 4 * ARCSIZE */
146
+ }
147
+
148
+ @keyframes fill-unfill-rotate {
149
+ 12.5% { transform: rotate(135deg); } /* 0.5 * ARCSIZE */
150
+ 25% { transform: rotate(270deg); } /* 1 * ARCSIZE */
151
+ 37.5% { transform: rotate(405deg); } /* 1.5 * ARCSIZE */
152
+ 50% { transform: rotate(540deg); } /* 2 * ARCSIZE */
153
+ 62.5% { transform: rotate(675deg); } /* 2.5 * ARCSIZE */
154
+ 75% { transform: rotate(810deg); } /* 3 * ARCSIZE */
155
+ 87.5% { transform: rotate(945deg); } /* 3.5 * ARCSIZE */
156
+ to { transform: rotate(1080deg); } /* 4 * ARCSIZE */
157
+ }
158
+
159
+ @-webkit-keyframes blue-fade-in-out {
160
+ from { opacity: 1; }
161
+ 25% { opacity: 1; }
162
+ 26% { opacity: 0; }
163
+ 89% { opacity: 0; }
164
+ 90% { opacity: 1; }
165
+ 100% { opacity: 1; }
166
+ }
167
+
168
+ @keyframes blue-fade-in-out {
169
+ from { opacity: 1; }
170
+ 25% { opacity: 1; }
171
+ 26% { opacity: 0; }
172
+ 89% { opacity: 0; }
173
+ 90% { opacity: 1; }
174
+ 100% { opacity: 1; }
175
+ }
176
+
177
+ @-webkit-keyframes red-fade-in-out {
178
+ from { opacity: 0; }
179
+ 15% { opacity: 0; }
180
+ 25% { opacity: 1; }
181
+ 50% { opacity: 1; }
182
+ 51% { opacity: 0; }
183
+ }
184
+
185
+ @keyframes red-fade-in-out {
186
+ from { opacity: 0; }
187
+ 15% { opacity: 0; }
188
+ 25% { opacity: 1; }
189
+ 50% { opacity: 1; }
190
+ 51% { opacity: 0; }
191
+ }
192
+
193
+ @-webkit-keyframes yellow-fade-in-out {
194
+ from { opacity: 0; }
195
+ 40% { opacity: 0; }
196
+ 50% { opacity: 1; }
197
+ 75% { opacity: 1; }
198
+ 76% { opacity: 0; }
199
+ }
200
+
201
+ @keyframes yellow-fade-in-out {
202
+ from { opacity: 0; }
203
+ 40% { opacity: 0; }
204
+ 50% { opacity: 1; }
205
+ 75% { opacity: 1; }
206
+ 76% { opacity: 0; }
207
+ }
208
+
209
+ @-webkit-keyframes green-fade-in-out {
210
+ from { opacity: 0; }
211
+ 65% { opacity: 0; }
212
+ 75% { opacity: 1; }
213
+ 90% { opacity: 1; }
214
+ 100% { opacity: 0; }
215
+ }
216
+
217
+ @keyframes green-fade-in-out {
218
+ from { opacity: 0; }
219
+ 65% { opacity: 0; }
220
+ 75% { opacity: 1; }
221
+ 90% { opacity: 1; }
222
+ 100% { opacity: 0; }
223
+ }
224
+
225
+ /**
226
+ * Patch the gap that appear between the two adjacent div.circle-clipper while the
227
+ * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
228
+ */
229
+ .gap-patch {
230
+ position: absolute;
231
+ top: 0;
232
+ left: 45%;
233
+ width: 10%;
234
+ height: 100%;
235
+ overflow: hidden;
236
+ border-color: inherit;
237
+ }
238
+
239
+ .gap-patch .circle {
240
+ width: 1000%;
241
+ left: -450%;
242
+ }
243
+
244
+ .circle-clipper {
245
+ display: inline-block;
246
+ position: relative;
247
+ width: 50%;
248
+ height: 100%;
249
+ overflow: hidden;
250
+ border-color: inherit;
251
+
252
+ .circle {
253
+ width: 200%;
254
+ height: 100%;
255
+ border-width: 3px; /* STROKEWIDTH */
256
+ border-style: solid;
257
+ border-color: inherit;
258
+ border-bottom-color: transparent !important;
259
+ border-radius: 50%;
260
+ -webkit-animation: none;
261
+ animation: none;
262
+ position: absolute;
263
+ top: 0;
264
+ right: 0;
265
+ bottom: 0;
266
+ }
267
+
268
+ &.left .circle {
269
+ left: 0;
270
+ border-right-color: transparent !important;
271
+ -webkit-transform: rotate(129deg);
272
+ transform: rotate(129deg);
273
+ }
274
+ &.right .circle {
275
+ left: -100%;
276
+ border-left-color: transparent !important;
277
+ -webkit-transform: rotate(-129deg);
278
+ transform: rotate(-129deg);
279
+ }
280
+ }
281
+
282
+
283
+
284
+ .active .circle-clipper.left .circle {
285
+ /* duration: ARCTIME */
286
+ -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
287
+ animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
288
+ }
289
+
290
+ .active .circle-clipper.right .circle {
291
+ /* duration: ARCTIME */
292
+ -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
293
+ animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
294
+ }
295
+
296
+ @-webkit-keyframes left-spin {
297
+ from { -webkit-transform: rotate(130deg); }
298
+ 50% { -webkit-transform: rotate(-5deg); }
299
+ to { -webkit-transform: rotate(130deg); }
300
+ }
301
+
302
+ @keyframes left-spin {
303
+ from { transform: rotate(130deg); }
304
+ 50% { transform: rotate(-5deg); }
305
+ to { transform: rotate(130deg); }
306
+ }
307
+
308
+ @-webkit-keyframes right-spin {
309
+ from { -webkit-transform: rotate(-130deg); }
310
+ 50% { -webkit-transform: rotate(5deg); }
311
+ to { -webkit-transform: rotate(-130deg); }
312
+ }
313
+
314
+ @keyframes right-spin {
315
+ from { transform: rotate(-130deg); }
316
+ 50% { transform: rotate(5deg); }
317
+ to { transform: rotate(-130deg); }
318
+ }
319
+
320
+ #spinnerContainer.cooldown {
321
+ /* duration: SHRINK_TIME */
322
+ -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
323
+ animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
324
+ }
325
+
326
+ @-webkit-keyframes fade-out {
327
+ from { opacity: 1; }
328
+ to { opacity: 0; }
329
+ }
330
+
331
+ @keyframes fade-out {
332
+ from { opacity: 1; }
333
+ to { opacity: 0; }
334
+ }
@@ -0,0 +1,49 @@
1
+ @font-face {
2
+ font-family: "Roboto";
3
+ src: local(Roboto Thin), url('#{$roboto-font-path}Roboto-Thin.eot');
4
+ src: url("#{$roboto-font-path}Roboto-Thin.eot?#iefix") format('embedded-opentype'),
5
+ url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"),
6
+ url("#{$roboto-font-path}Roboto-Thin.woff") format("woff"),
7
+ url("#{$roboto-font-path}Roboto-Thin.ttf") format("truetype");
8
+
9
+ font-weight: 200;
10
+ }
11
+ @font-face {
12
+ font-family: "Roboto";
13
+ src: local(Roboto Light), url('#{$roboto-font-path}Roboto-Light.eot');
14
+ src: url("#{$roboto-font-path}Roboto-Light.eot?#iefix") format('embedded-opentype'),
15
+ url("#{$roboto-font-path}Roboto-Light.woff2") format("woff2"),
16
+ url("#{$roboto-font-path}Roboto-Light.woff") format("woff"),
17
+ url("#{$roboto-font-path}Roboto-Light.ttf") format("truetype");
18
+ font-weight: 300;
19
+ }
20
+
21
+ @font-face {
22
+ font-family: "Roboto";
23
+ src: local(Roboto Regular), url('#{$roboto-font-path}Roboto-Regular.eot');
24
+ src: url("#{$roboto-font-path}Roboto-Regular.eot?#iefix") format('embedded-opentype'),
25
+ url("#{$roboto-font-path}Roboto-Regular.woff2") format("woff2"),
26
+ url("#{$roboto-font-path}Roboto-Regular.woff") format("woff"),
27
+ url("#{$roboto-font-path}Roboto-Regular.ttf") format("truetype");
28
+ font-weight: 400;
29
+ }
30
+
31
+ @font-face {
32
+ font-family: "Roboto";
33
+ src: url('#{$roboto-font-path}Roboto-Medium.eot');
34
+ src: url("#{$roboto-font-path}Roboto-Medium.eot?#iefix") format('embedded-opentype'),
35
+ url("#{$roboto-font-path}Roboto-Medium.woff2") format("woff2"),
36
+ url("#{$roboto-font-path}Roboto-Medium.woff") format("woff"),
37
+ url("#{$roboto-font-path}Roboto-Medium.ttf") format("truetype");
38
+ font-weight: 500;
39
+ }
40
+
41
+ @font-face {
42
+ font-family: "Roboto";
43
+ src: url('#{$roboto-font-path}Roboto-Bold.eot');
44
+ src: url("#{$roboto-font-path}Roboto-Bold.eot?#iefix") format('embedded-opentype'),
45
+ url("#{$roboto-font-path}Roboto-Bold.woff2") format("woff2"),
46
+ url("#{$roboto-font-path}Roboto-Bold.woff") format("woff"),
47
+ url("#{$roboto-font-path}Roboto-Bold.ttf") format("truetype");
48
+ font-weight: 700;
49
+ }
@@ -0,0 +1,219 @@
1
+ .side-nav {
2
+ position: fixed;
3
+ width: 300px;
4
+ left: 0;
5
+ top: 0;
6
+ margin: 0;
7
+ transform: translateX(-100%);
8
+ height: 100%;
9
+ height: calc(100% + 60px);
10
+ height: -moz-calc(100%); //Temporary Firefox Fix
11
+ padding-bottom: 60px;
12
+ background-color: $sidenav-bg-color;
13
+ z-index: 999;
14
+ backface-visibility: hidden;
15
+ overflow-y: auto;
16
+ will-change: transform;
17
+ backface-visibility: hidden;
18
+ transform: translateX(-105%);
19
+
20
+ @extend .z-depth-1;
21
+
22
+ // Right Align
23
+ &.right-aligned {
24
+ right: 0;
25
+ transform: translateX(105%);
26
+ left: auto;
27
+ transform: translateX(100%);
28
+ }
29
+
30
+ .collapsible {
31
+ margin: 0;
32
+ }
33
+
34
+
35
+ li {
36
+ float: none;
37
+ line-height: $sidenav-item-height;
38
+
39
+ &.active { background-color: rgba(0,0,0,.05); }
40
+ }
41
+
42
+ a {
43
+ color: $sidenav-font-color;
44
+ display: block;
45
+ font-size: $sidenav-font-size;
46
+ font-weight: 500;
47
+ height: $sidenav-item-height;
48
+ line-height: $sidenav-item-height;
49
+ padding: 0 ($sidenav-padding * 2);
50
+
51
+ &:hover { background-color: rgba(0,0,0,.05);}
52
+
53
+ &.btn, &.btn-large, &.btn-flat, &.btn-floating {
54
+ margin: 10px 15px;
55
+ }
56
+
57
+ &.btn,
58
+ &.btn-large,
59
+ &.btn-floating { color: $button-raised-color; }
60
+ &.btn-flat { color: $button-flat-color; }
61
+
62
+ &.btn:hover,
63
+ &.btn-large:hover { background-color: lighten($button-raised-background, 5%); }
64
+ &.btn-floating:hover { background-color: $button-raised-background; }
65
+ }
66
+
67
+ li > a > i,
68
+ li > a > [class^="mdi-"], li > a > [class*="mdi-"],
69
+ li > a > i.material-icons {
70
+ float: left;
71
+ height: $sidenav-item-height;
72
+ line-height: $sidenav-item-height;
73
+ margin: 0 ($sidenav-padding * 2) 0 0;
74
+ width: $sidenav-item-height / 2;
75
+ color: rgba(0,0,0,.54);
76
+ }
77
+
78
+ .divider {
79
+ margin: ($sidenav-padding / 2) 0 0 0;
80
+ }
81
+
82
+ .subheader {
83
+ &:hover {
84
+ background-color: transparent;
85
+ }
86
+
87
+ cursor: initial;
88
+ pointer-events: none;
89
+ color: rgba(0,0,0,.54);
90
+ font-size: $sidenav-font-size;
91
+ font-weight: 500;
92
+ line-height: $sidenav-item-height;
93
+ }
94
+
95
+ .userView {
96
+ overflow: hidden;
97
+ position: relative;
98
+ padding: ($sidenav-padding * 2) ($sidenav-padding * 2) 0;
99
+ margin-bottom: $sidenav-padding / 2;
100
+
101
+ a {
102
+ &:hover { background-color: transparent; }
103
+ height: auto;
104
+ padding: 0;
105
+ }
106
+
107
+ .background {
108
+ position: absolute;
109
+ top: 0;
110
+ right: 0;
111
+ bottom: 0;
112
+ left: 0;
113
+ z-index: -1;
114
+ }
115
+
116
+ .circle, .name, .email {
117
+ display: block;
118
+ }
119
+
120
+ .circle {
121
+ height: 64px;
122
+ width: 64px;
123
+ }
124
+
125
+ .name,
126
+ .email {
127
+ font-weight: $sidenav-font-size;
128
+ line-height: 24px;
129
+ }
130
+
131
+ .name {
132
+ margin-top: 16px;
133
+ font-weight: 500;
134
+ }
135
+
136
+ .email {
137
+ padding-bottom: 16px;
138
+ font-weight: 400;
139
+ }
140
+ }
141
+ }
142
+
143
+
144
+ // Touch interaction
145
+ .drag-target {
146
+ height: 100%;
147
+ width: 10px;
148
+ position: fixed;
149
+ top: 0;
150
+ z-index: 998;
151
+ }
152
+
153
+
154
+ // Hidden side-nav for all sizes
155
+ .side-nav.fixed {
156
+ a {
157
+ display: block;
158
+ padding: 0 $sidenav-padding;
159
+ color: $sidenav-font-color;
160
+ }
161
+ }
162
+
163
+
164
+ // Fixed side-nav shown
165
+ .side-nav.fixed {
166
+ left: 0;
167
+ transform: translateX(0);
168
+ position: fixed;
169
+
170
+ // Right Align
171
+ &.right-aligned {
172
+ right: 0;
173
+ left: auto;
174
+ }
175
+ }
176
+
177
+ // Fixed sideNav hide on smaller
178
+ @media #{$medium-and-down} {
179
+ .side-nav {
180
+ &.fixed {
181
+ transform: translateX(-105%);
182
+
183
+ &.right-aligned {
184
+ transform: translateX(105%);
185
+ }
186
+ }
187
+
188
+ a {
189
+ padding: 0 $sidenav-padding;
190
+ }
191
+
192
+ .userView {
193
+ padding: $sidenav-padding $sidenav-padding 0;
194
+ }
195
+ }
196
+ }
197
+
198
+
199
+ .side-nav .collapsible-body li.active,
200
+ .side-nav.fixed .collapsible-body li.active {
201
+ background-color: $primary-color;
202
+ a {
203
+ color: $sidenav-bg-color;
204
+ }
205
+ }
206
+
207
+
208
+ #sidenav-overlay {
209
+ position: fixed;
210
+ top: 0;
211
+ left: 0;
212
+ right: 0;
213
+
214
+ height: 120vh;
215
+ background-color: rgba(0,0,0,.5);
216
+ z-index: 998;
217
+
218
+ will-change: opacity;
219
+ }
@@ -0,0 +1,92 @@
1
+ .slider {
2
+ position: relative;
3
+ height: 400px;
4
+ width: 100%;
5
+
6
+ // Fullscreen slider
7
+ &.fullscreen {
8
+ height: 100%;
9
+ width: 100%;
10
+ position: absolute;
11
+ top: 0;
12
+ left: 0;
13
+ right: 0;
14
+ bottom: 0;
15
+
16
+ ul.slides {
17
+ height: 100%;
18
+ }
19
+
20
+ ul.indicators {
21
+ z-index: 2;
22
+ bottom: 30px;
23
+ }
24
+ }
25
+
26
+ .slides {
27
+ background-color: $slider-bg-color;
28
+ margin: 0;
29
+ height: 400px;
30
+
31
+ li {
32
+ opacity: 0;
33
+ position: absolute;
34
+ top: 0;
35
+ left: 0;
36
+ z-index: 1;
37
+ width: 100%;
38
+ height: inherit;
39
+ overflow: hidden;
40
+
41
+ img {
42
+ height: 100%;
43
+ width: 100%;
44
+ background-size: cover;
45
+ background-position: center;
46
+ }
47
+
48
+ .caption {
49
+ color: #fff;
50
+ position: absolute;
51
+ top: 15%;
52
+ left: 15%;
53
+ width: 70%;
54
+ opacity: 0;
55
+
56
+ p { color: $slider-bg-color-light; }
57
+ }
58
+
59
+ &.active {
60
+ z-index: 2;
61
+ }
62
+ }
63
+ }
64
+
65
+
66
+ .indicators {
67
+ position: absolute;
68
+ text-align: center;
69
+ left: 0;
70
+ right: 0;
71
+ bottom: 0;
72
+ margin: 0;
73
+
74
+ .indicator-item {
75
+ display: inline-block;
76
+ position: relative;
77
+ cursor: pointer;
78
+ height: 16px;
79
+ width: 16px;
80
+ margin: 0 12px;
81
+ background-color: $slider-bg-color-light;
82
+
83
+ transition: background-color .3s;
84
+ border-radius: 50%;
85
+
86
+ &.active {
87
+ background-color: $slider-indicator-color;
88
+ }
89
+ }
90
+ }
91
+
92
+ }