material_design_lite-sass 1.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (66) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +11 -0
  3. data/.rspec +2 -0
  4. data/.travis.yml +11 -0
  5. data/CHANGELOG.md +5 -0
  6. data/Gemfile +4 -0
  7. data/LICENSE.txt +21 -0
  8. data/README.md +108 -0
  9. data/Rakefile +4 -0
  10. data/bin/console +14 -0
  11. data/bin/setup +7 -0
  12. data/lib/material_design_lite-sass.rb +46 -0
  13. data/lib/material_design_lite/sass/engine.rb +13 -0
  14. data/lib/material_design_lite/sass/version.rb +5 -0
  15. data/material_design_lite-sass.gemspec +28 -0
  16. data/vendor/assets/javascripts/material.js +3919 -0
  17. data/vendor/assets/javascripts/material/button.js +132 -0
  18. data/vendor/assets/javascripts/material/checkbox.js +265 -0
  19. data/vendor/assets/javascripts/material/data-table.js +149 -0
  20. data/vendor/assets/javascripts/material/icon-toggle.js +248 -0
  21. data/vendor/assets/javascripts/material/layout.js +434 -0
  22. data/vendor/assets/javascripts/material/mdlComponentHandler.js +346 -0
  23. data/vendor/assets/javascripts/material/menu.js +468 -0
  24. data/vendor/assets/javascripts/material/progress.js +116 -0
  25. data/vendor/assets/javascripts/material/rAF.js +38 -0
  26. data/vendor/assets/javascripts/material/radio.js +257 -0
  27. data/vendor/assets/javascripts/material/ripple.js +244 -0
  28. data/vendor/assets/javascripts/material/slider.js +252 -0
  29. data/vendor/assets/javascripts/material/spinner.js +140 -0
  30. data/vendor/assets/javascripts/material/switch.js +269 -0
  31. data/vendor/assets/javascripts/material/tabs.js +152 -0
  32. data/vendor/assets/javascripts/material/textfield.js +247 -0
  33. data/vendor/assets/javascripts/material/tooltip.js +146 -0
  34. data/vendor/assets/stylesheets/_material.scss +50 -0
  35. data/vendor/assets/stylesheets/material/_animation.scss +34 -0
  36. data/vendor/assets/stylesheets/material/_badge.scss +66 -0
  37. data/vendor/assets/stylesheets/material/_button.scss +298 -0
  38. data/vendor/assets/stylesheets/material/_card.scss +111 -0
  39. data/vendor/assets/stylesheets/material/_checkbox.scss +175 -0
  40. data/vendor/assets/stylesheets/material/_color-definitions.scss +599 -0
  41. data/vendor/assets/stylesheets/material/_data-table.scss +105 -0
  42. data/vendor/assets/stylesheets/material/_functions.scss +3 -0
  43. data/vendor/assets/stylesheets/material/_grid.scss +180 -0
  44. data/vendor/assets/stylesheets/material/_icon-toggle.scss +121 -0
  45. data/vendor/assets/stylesheets/material/_layout.scss +580 -0
  46. data/vendor/assets/stylesheets/material/_mega_footer.scss +309 -0
  47. data/vendor/assets/stylesheets/material/_menu.scss +193 -0
  48. data/vendor/assets/stylesheets/material/_mini_footer.scss +88 -0
  49. data/vendor/assets/stylesheets/material/_mixins.scss +268 -0
  50. data/vendor/assets/stylesheets/material/_palette.scss +2303 -0
  51. data/vendor/assets/stylesheets/material/_progress.scss +115 -0
  52. data/vendor/assets/stylesheets/material/_radio.scss +155 -0
  53. data/vendor/assets/stylesheets/material/_resets.scss +55 -0
  54. data/vendor/assets/stylesheets/material/_ripple.scss +42 -0
  55. data/vendor/assets/stylesheets/material/_shadow.scss +42 -0
  56. data/vendor/assets/stylesheets/material/_slider.scss +396 -0
  57. data/vendor/assets/stylesheets/material/_spinner.scss +248 -0
  58. data/vendor/assets/stylesheets/material/_switch.scss +199 -0
  59. data/vendor/assets/stylesheets/material/_tabs.scss +115 -0
  60. data/vendor/assets/stylesheets/material/_textfield.scss +190 -0
  61. data/vendor/assets/stylesheets/material/_tooltip.scss +66 -0
  62. data/vendor/assets/stylesheets/material/_typography.scss +297 -0
  63. data/vendor/assets/stylesheets/material/_variables.scss +572 -0
  64. data/vendor/assets/stylesheets/material/resets/_h5bp.scss +284 -0
  65. data/vendor/assets/stylesheets/material/resets/_mobile.scss +25 -0
  66. metadata +151 -0
@@ -0,0 +1,309 @@
1
+ /**
2
+ * Copyright 2015 Google Inc. All Rights Reserved.
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License");
5
+ * you may not use this file except in compliance with the License.
6
+ * You may obtain a copy of the License at
7
+ *
8
+ * http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS,
12
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ * See the License for the specific language governing permissions and
14
+ * limitations under the License.
15
+ */
16
+
17
+ @import "variables";
18
+ @import "mixins";
19
+
20
+ .mdl-mega-footer {
21
+ padding: $footer-min-padding $footer-padding-sides;
22
+
23
+ color: $footer-color;
24
+ background-color: $footer-bg-color;
25
+ }
26
+
27
+
28
+ .mdl-mega-footer--top-section:after,
29
+ .mdl-mega-footer--middle-section:after,
30
+ .mdl-mega-footer--bottom-section:after,
31
+ .mdl-mega-footer__top-section:after,
32
+ .mdl-mega-footer__middle-section:after,
33
+ .mdl-mega-footer__bottom-section:after {
34
+ content: '';
35
+ display: block;
36
+ clear: both;
37
+ }
38
+
39
+ .mdl-mega-footer--left-section,
40
+ .mdl-mega-footer__left-section {
41
+ margin-bottom: $footer-min-padding;
42
+ }
43
+
44
+ .mdl-mega-footer--right-section,
45
+ .mdl-mega-footer__right-section {
46
+ margin-bottom: $footer-min-padding;
47
+ }
48
+
49
+ .mdl-mega-footer--right-section a,
50
+ .mdl-mega-footer__right-section a {
51
+ display: block;
52
+
53
+ margin-bottom: $footer-min-padding;
54
+
55
+ color: inherit;
56
+ text-decoration: none;
57
+ }
58
+
59
+ @media screen and (min-width: 760px) {
60
+ .mdl-mega-footer--left-section,
61
+ .mdl-mega-footer__left-section {
62
+ float: left;
63
+ }
64
+
65
+ .mdl-mega-footer--right-section,
66
+ .mdl-mega-footer__right-section {
67
+ float: right;
68
+ }
69
+
70
+ .mdl-mega-footer--right-section a,
71
+ .mdl-mega-footer__right-section a {
72
+ display: inline-block;
73
+
74
+ margin-left: $footer-min-padding;
75
+
76
+ line-height: $footer-btn-size;
77
+ vertical-align: middle;
78
+ }
79
+ }
80
+
81
+ .mdl-mega-footer--social-btn,
82
+ .mdl-mega-footer__social-btn {
83
+ width: $footer-btn-size;
84
+ height: $footer-btn-size;
85
+
86
+ padding: 0;
87
+ margin: 0;
88
+
89
+ background-color: $footer-button-fill-color;
90
+
91
+ border: none;
92
+ }
93
+
94
+ .mdl-mega-footer--drop-down-section,
95
+ .mdl-mega-footer__drop-down-section {
96
+ display: block;
97
+
98
+ position: relative;
99
+ }
100
+
101
+ @media screen and (min-width: 760px) {
102
+ .mdl-mega-footer--drop-down-section,
103
+ .mdl-mega-footer__drop-down-section {
104
+ width: 33%;
105
+ }
106
+
107
+ .mdl-mega-footer--drop-down-section:nth-child(1),
108
+ .mdl-mega-footer--drop-down-section:nth-child(2),
109
+ .mdl-mega-footer__drop-down-section:nth-child(1),
110
+ .mdl-mega-footer__drop-down-section:nth-child(2) {
111
+ float: left;
112
+ }
113
+
114
+ .mdl-mega-footer--drop-down-section:nth-child(3),
115
+ .mdl-mega-footer__drop-down-section:nth-child(3) {
116
+ float: right;
117
+
118
+ &:after {
119
+ clear: right;
120
+ }
121
+ }
122
+
123
+ .mdl-mega-footer--drop-down-section:nth-child(4),
124
+ .mdl-mega-footer__drop-down-section:nth-child(4) {
125
+ clear: right;
126
+ float: right;
127
+ }
128
+
129
+ .mdl-mega-footer--middle-section:after,
130
+ .mdl-mega-footer__middle-section:after {
131
+ content: '';
132
+
133
+ display: block;
134
+
135
+ clear: both;
136
+ }
137
+
138
+ .mdl-mega-footer--bottom-section,
139
+ .mdl-mega-footer__bottom-section {
140
+ padding-top: 0;
141
+ }
142
+ }
143
+
144
+ @media screen and (min-width: 1024px) {
145
+ .mdl-mega-footer--drop-down-section,
146
+ .mdl-mega-footer--drop-down-section:nth-child(3),
147
+ .mdl-mega-footer--drop-down-section:nth-child(4),
148
+ .mdl-mega-footer__drop-down-section,
149
+ .mdl-mega-footer__drop-down-section:nth-child(3),
150
+ .mdl-mega-footer__drop-down-section:nth-child(4) {
151
+ width: 24%;
152
+
153
+ float: left;
154
+ }
155
+ }
156
+
157
+ .mdl-mega-footer--heading-checkbox,
158
+ .mdl-mega-footer__heading-checkbox {
159
+ position: absolute;
160
+ width: 100%;
161
+ height: $footer-heading-line-height + ($footer-min-padding * 2);
162
+
163
+ padding: ($footer-min-padding * 2);
164
+ margin: 0;
165
+ margin-top: -$footer-min-padding;
166
+
167
+ cursor: pointer;
168
+
169
+ z-index: 1;
170
+ opacity: 0;
171
+
172
+ &~.mdl-mega-footer--heading:after,
173
+ &~.mdl-mega-footer__heading:after {
174
+ font-family: 'Material Icons';
175
+ content: '\E5CE'
176
+ }
177
+ }
178
+
179
+ .mdl-mega-footer--heading-checkbox:checked,
180
+ .mdl-mega-footer__heading-checkbox:checked {
181
+ &~ul {
182
+ display:none;
183
+ }
184
+
185
+ &~.mdl-mega-footer--heading:after,
186
+ &~.mdl-mega-footer__heading:after {
187
+ font-family: 'Material Icons';
188
+ content: '\E5CF'
189
+ }
190
+ }
191
+
192
+ .mdl-mega-footer--heading,
193
+ .mdl-mega-footer__heading {
194
+ position: relative;
195
+ width: 100%;
196
+
197
+ padding-right: $footer-heading-line-height + $footer-min-padding;
198
+ margin-bottom: $footer-min-padding;
199
+
200
+ box-sizing:border-box;
201
+
202
+ font-size: $footer-heading-font-size;
203
+ line-height: $footer-heading-line-height;
204
+
205
+ font-weight: 500;
206
+
207
+ white-space: nowrap;
208
+ text-overflow: ellipsis;
209
+ overflow: hidden;
210
+
211
+ color: $footer-heading-color;
212
+ }
213
+
214
+ .mdl-mega-footer--heading:after,
215
+ .mdl-mega-footer__heading:after {
216
+ content: '';
217
+
218
+ position: absolute;
219
+ top: 0;
220
+ right: 0;
221
+
222
+ display: block;
223
+
224
+ width: $footer-heading-line-height;
225
+ height: $footer-heading-line-height;
226
+
227
+ background-size: cover;
228
+ }
229
+
230
+ .mdl-mega-footer--link-list,
231
+ .mdl-mega-footer__link-list {
232
+ list-style: none;
233
+
234
+ margin: 0;
235
+ padding: 0;
236
+
237
+ margin-bottom: $footer-min-padding * 2;
238
+ &:after {
239
+ clear: both;
240
+ display: block;
241
+ content: '';
242
+ }
243
+ }
244
+
245
+ .mdl-mega-footer--link-list li,
246
+ .mdl-mega-footer__link-list li {
247
+ @include typo-body-1();
248
+ line-height: 20px;
249
+ }
250
+
251
+ .mdl-mega-footer--link-list a,
252
+ .mdl-mega-footer__link-list a {
253
+ color: inherit;
254
+ text-decoration: none;
255
+ white-space: nowrap;
256
+ }
257
+
258
+ @media screen and (min-width: 760px) {
259
+ .mdl-mega-footer--heading-checkbox,
260
+ .mdl-mega-footer__heading-checkbox {
261
+ display: none;
262
+
263
+ &~.mdl-mega-footer--heading:after,
264
+ &~.mdl-mega-footer__heading:after {
265
+ background-image: none;
266
+ }
267
+ }
268
+ .mdl-mega-footer--heading-checkbox:checked,
269
+ .mdl-mega-footer__heading-checkbox:checked {
270
+ &~ul {
271
+ display: block;
272
+ }
273
+
274
+ &~.mdl-mega-footer--heading:after,
275
+ &~.mdl-mega-footer__heading:after {
276
+ content: '';
277
+ }
278
+ }
279
+ }
280
+
281
+ .mdl-mega-footer--bottom-section,
282
+ .mdl-mega-footer__bottom-section {
283
+ padding-top: $footer-min-padding;
284
+ margin-bottom: $footer-min-padding;
285
+ }
286
+
287
+ .mdl-logo {
288
+ margin-bottom: $footer-min-padding;
289
+ color: white;
290
+ }
291
+
292
+ .mdl-mega-footer--bottom-section .mdl-mega-footer--link-list li,
293
+ .mdl-mega-footer__bottom-section .mdl-mega-footer__link-list li {
294
+ float: left;
295
+
296
+ margin-bottom: 0;
297
+ margin-right: $footer-min-padding;
298
+ }
299
+
300
+
301
+
302
+ @media screen and (min-width: 760px) {
303
+ .mdl-logo {
304
+ float: left;
305
+
306
+ margin-bottom: 0;
307
+ margin-right: $footer-min-padding;
308
+ }
309
+ }
@@ -0,0 +1,193 @@
1
+ /**
2
+ * Copyright 2015 Google Inc. All Rights Reserved.
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License");
5
+ * you may not use this file except in compliance with the License.
6
+ * You may obtain a copy of the License at
7
+ *
8
+ * http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS,
12
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ * See the License for the specific language governing permissions and
14
+ * limitations under the License.
15
+ */
16
+
17
+ @import "variables";
18
+ @import "mixins";
19
+
20
+ .mdl-menu__container {
21
+ display: block;
22
+ margin: 0;
23
+ padding: 0;
24
+ border: none;
25
+ position: absolute;
26
+ overflow: visible;
27
+ height: 0;
28
+ width: 0;
29
+ z-index: -1;
30
+
31
+ &.is-visible {
32
+ z-index: 999;
33
+ }
34
+ }
35
+
36
+ .mdl-menu__outline {
37
+ display: block;
38
+ background: $default-dropdown-bg-color;
39
+ margin: 0;
40
+ padding: 0;
41
+ border: none;
42
+ border-radius: 2px;
43
+ position: absolute;
44
+ top: 0;
45
+ left: 0;
46
+ overflow: hidden;
47
+ opacity: 0;
48
+ transform: scale(0);
49
+ transform-origin: 0 0;
50
+ @include shadow-2dp();
51
+ will-change: transform;
52
+ transition: transform $menu-expand-duration $animation-curve-default,
53
+ opacity $menu-fade-duration $animation-curve-default;
54
+ z-index: -1;
55
+
56
+ .mdl-menu__container.is-visible & {
57
+ opacity: 1;
58
+ transform: scale(1);
59
+ z-index: 999;
60
+ }
61
+
62
+ &.mdl-menu--bottom-right {
63
+ transform-origin: 100% 0;
64
+ }
65
+
66
+ &.mdl-menu--top-left {
67
+ transform-origin: 0 100%;
68
+ }
69
+
70
+ &.mdl-menu--top-right {
71
+ transform-origin: 100% 100%;
72
+ }
73
+ }
74
+
75
+ .mdl-menu {
76
+ position: absolute;
77
+ list-style: none;
78
+ top: 0;
79
+ left: 0;
80
+ height: auto;
81
+ width: auto;
82
+ min-width: 124px;
83
+ padding: 8px 0;
84
+ margin: 0;
85
+ opacity: 0;
86
+ clip: rect(0 0 0 0);
87
+ z-index: -1;
88
+
89
+ .mdl-menu__container.is-visible & {
90
+ opacity: 1;
91
+ z-index: 999;
92
+ }
93
+
94
+ &.is-animating {
95
+ transition: opacity $menu-fade-duration $animation-curve-default,
96
+ clip $menu-expand-duration $animation-curve-default;
97
+ }
98
+
99
+ &.mdl-menu--bottom-right {
100
+ left: auto;
101
+ right: 0;
102
+ }
103
+
104
+ &.mdl-menu--top-left {
105
+ top: auto;
106
+ bottom: 0;
107
+ }
108
+
109
+ &.mdl-menu--top-right {
110
+ top: auto;
111
+ left: auto;
112
+ bottom: 0;
113
+ right: 0;
114
+ }
115
+
116
+ &.mdl-menu--unaligned {
117
+ top: auto;
118
+ left: auto;
119
+ }
120
+ }
121
+
122
+ .mdl-menu__item {
123
+ display: block;
124
+ border: none;
125
+ color: $default-item-text-color;
126
+ background-color: transparent;
127
+ text-align: left;
128
+ margin: 0;
129
+ padding: 0 16px;
130
+ outline-color: $default-item-outline-color;
131
+ position: relative;
132
+ overflow: hidden;
133
+ @include typo-body-1();
134
+ text-decoration: none;
135
+ cursor: pointer;
136
+ height: 48px;
137
+ line-height: 48px;
138
+ white-space: nowrap;
139
+ opacity: 0;
140
+ transition: opacity $menu-fade-duration $animation-curve-default;
141
+ user-select: none;
142
+
143
+ .mdl-menu__container.is-visible & {
144
+ opacity: 1;
145
+ }
146
+
147
+ &::-moz-focus-inner {
148
+ border: 0;
149
+ }
150
+
151
+ &[disabled] {
152
+ color: $disabled-item-text-color;
153
+ background-color: transparent;
154
+ cursor: auto;
155
+
156
+ &:hover {
157
+ background-color: transparent;
158
+ }
159
+
160
+ &:focus {
161
+ background-color: transparent;
162
+ }
163
+
164
+ & .mdl-ripple {
165
+ background: transparent;
166
+ }
167
+ }
168
+
169
+ &:hover {
170
+ background-color: $default-item-hover-bg-color;
171
+ }
172
+
173
+ &:focus {
174
+ outline: none;
175
+ background-color: $default-item-focus-bg-color;
176
+ }
177
+
178
+ &:active {
179
+ background-color: $default-item-active-bg-color;
180
+ }
181
+ }
182
+
183
+
184
+ .mdl-menu__item--ripple-container {
185
+ display: block;
186
+ height: 100%;
187
+ left: 0px;
188
+ position: absolute;
189
+ top: 0px;
190
+ width: 100%;
191
+ z-index: 0;
192
+ overflow: hidden;
193
+ }