rev |
line source |
bsw/jbe@1309
|
1 /**
|
bsw/jbe@1309
|
2 * Copyright 2015 Google Inc. All Rights Reserved.
|
bsw/jbe@1309
|
3 *
|
bsw/jbe@1309
|
4 * Licensed under the Apache License, Version 2.0 (the "License");
|
bsw/jbe@1309
|
5 * you may not use this file except in compliance with the License.
|
bsw/jbe@1309
|
6 * You may obtain a copy of the License at
|
bsw/jbe@1309
|
7 *
|
bsw/jbe@1309
|
8 * http://www.apache.org/licenses/LICENSE-2.0
|
bsw/jbe@1309
|
9 *
|
bsw/jbe@1309
|
10 * Unless required by applicable law or agreed to in writing, software
|
bsw/jbe@1309
|
11 * distributed under the License is distributed on an "AS IS" BASIS,
|
bsw/jbe@1309
|
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
bsw/jbe@1309
|
13 * See the License for the specific language governing permissions and
|
bsw/jbe@1309
|
14 * limitations under the License.
|
bsw/jbe@1309
|
15 */
|
bsw/jbe@1309
|
16
|
bsw/jbe@1309
|
17 @import "../variables";
|
bsw/jbe@1309
|
18 @import "../mixins";
|
bsw/jbe@1309
|
19
|
bsw/jbe@1309
|
20 .mdl-mega-footer {
|
bsw/jbe@1309
|
21 padding: $footer-min-padding $footer-padding-sides;
|
bsw/jbe@1309
|
22
|
bsw/jbe@1309
|
23 color: $footer-color;
|
bsw/jbe@1309
|
24 background-color: $footer-bg-color;
|
bsw/jbe@1309
|
25 }
|
bsw/jbe@1309
|
26
|
bsw/jbe@1309
|
27
|
bsw/jbe@1309
|
28 .mdl-mega-footer--top-section:after,
|
bsw/jbe@1309
|
29 .mdl-mega-footer--middle-section:after,
|
bsw/jbe@1309
|
30 .mdl-mega-footer--bottom-section:after,
|
bsw/jbe@1309
|
31 .mdl-mega-footer__top-section:after,
|
bsw/jbe@1309
|
32 .mdl-mega-footer__middle-section:after,
|
bsw/jbe@1309
|
33 .mdl-mega-footer__bottom-section:after {
|
bsw/jbe@1309
|
34 content: '';
|
bsw/jbe@1309
|
35 display: block;
|
bsw/jbe@1309
|
36 clear: both;
|
bsw/jbe@1309
|
37 }
|
bsw/jbe@1309
|
38
|
bsw/jbe@1309
|
39 .mdl-mega-footer--left-section,
|
bsw/jbe@1309
|
40 .mdl-mega-footer__left-section {
|
bsw/jbe@1309
|
41 margin-bottom: $footer-min-padding;
|
bsw/jbe@1309
|
42 }
|
bsw/jbe@1309
|
43
|
bsw/jbe@1309
|
44 .mdl-mega-footer--right-section,
|
bsw/jbe@1309
|
45 .mdl-mega-footer__right-section {
|
bsw/jbe@1309
|
46 margin-bottom: $footer-min-padding;
|
bsw/jbe@1309
|
47 }
|
bsw/jbe@1309
|
48
|
bsw/jbe@1309
|
49 .mdl-mega-footer--right-section a,
|
bsw/jbe@1309
|
50 .mdl-mega-footer__right-section a {
|
bsw/jbe@1309
|
51 display: block;
|
bsw/jbe@1309
|
52
|
bsw/jbe@1309
|
53 margin-bottom: $footer-min-padding;
|
bsw/jbe@1309
|
54
|
bsw/jbe@1309
|
55 color: inherit;
|
bsw/jbe@1309
|
56 text-decoration: none;
|
bsw/jbe@1309
|
57 }
|
bsw/jbe@1309
|
58
|
bsw/jbe@1309
|
59 @media screen and (min-width: 760px) {
|
bsw/jbe@1309
|
60 .mdl-mega-footer--left-section,
|
bsw/jbe@1309
|
61 .mdl-mega-footer__left-section {
|
bsw/jbe@1309
|
62 float: left;
|
bsw/jbe@1309
|
63 }
|
bsw/jbe@1309
|
64
|
bsw/jbe@1309
|
65 .mdl-mega-footer--right-section,
|
bsw/jbe@1309
|
66 .mdl-mega-footer__right-section {
|
bsw/jbe@1309
|
67 float: right;
|
bsw/jbe@1309
|
68 }
|
bsw/jbe@1309
|
69
|
bsw/jbe@1309
|
70 .mdl-mega-footer--right-section a,
|
bsw/jbe@1309
|
71 .mdl-mega-footer__right-section a {
|
bsw/jbe@1309
|
72 display: inline-block;
|
bsw/jbe@1309
|
73
|
bsw/jbe@1309
|
74 margin-left: $footer-min-padding;
|
bsw/jbe@1309
|
75
|
bsw/jbe@1309
|
76 line-height: $footer-btn-size;
|
bsw/jbe@1309
|
77 vertical-align: middle;
|
bsw/jbe@1309
|
78 }
|
bsw/jbe@1309
|
79 }
|
bsw/jbe@1309
|
80
|
bsw/jbe@1309
|
81 .mdl-mega-footer--social-btn,
|
bsw/jbe@1309
|
82 .mdl-mega-footer__social-btn {
|
bsw/jbe@1309
|
83 width: $footer-btn-size;
|
bsw/jbe@1309
|
84 height: $footer-btn-size;
|
bsw/jbe@1309
|
85
|
bsw/jbe@1309
|
86 padding: 0;
|
bsw/jbe@1309
|
87 margin: 0;
|
bsw/jbe@1309
|
88
|
bsw/jbe@1309
|
89 background-color: $footer-button-fill-color;
|
bsw/jbe@1309
|
90
|
bsw/jbe@1309
|
91 border: none;
|
bsw/jbe@1309
|
92 }
|
bsw/jbe@1309
|
93
|
bsw/jbe@1309
|
94 .mdl-mega-footer--drop-down-section,
|
bsw/jbe@1309
|
95 .mdl-mega-footer__drop-down-section {
|
bsw/jbe@1309
|
96 display: block;
|
bsw/jbe@1309
|
97
|
bsw/jbe@1309
|
98 position: relative;
|
bsw/jbe@1309
|
99 }
|
bsw/jbe@1309
|
100
|
bsw/jbe@1309
|
101 @media screen and (min-width: 760px) {
|
bsw/jbe@1309
|
102 .mdl-mega-footer--drop-down-section,
|
bsw/jbe@1309
|
103 .mdl-mega-footer__drop-down-section {
|
bsw/jbe@1309
|
104 width: 33%;
|
bsw/jbe@1309
|
105 }
|
bsw/jbe@1309
|
106
|
bsw/jbe@1309
|
107 .mdl-mega-footer--drop-down-section:nth-child(1),
|
bsw/jbe@1309
|
108 .mdl-mega-footer--drop-down-section:nth-child(2),
|
bsw/jbe@1309
|
109 .mdl-mega-footer__drop-down-section:nth-child(1),
|
bsw/jbe@1309
|
110 .mdl-mega-footer__drop-down-section:nth-child(2) {
|
bsw/jbe@1309
|
111 float: left;
|
bsw/jbe@1309
|
112 }
|
bsw/jbe@1309
|
113
|
bsw/jbe@1309
|
114 .mdl-mega-footer--drop-down-section:nth-child(3),
|
bsw/jbe@1309
|
115 .mdl-mega-footer__drop-down-section:nth-child(3) {
|
bsw/jbe@1309
|
116 float: right;
|
bsw/jbe@1309
|
117
|
bsw/jbe@1309
|
118 &:after {
|
bsw/jbe@1309
|
119 clear: right;
|
bsw/jbe@1309
|
120 }
|
bsw/jbe@1309
|
121 }
|
bsw/jbe@1309
|
122
|
bsw/jbe@1309
|
123 .mdl-mega-footer--drop-down-section:nth-child(4),
|
bsw/jbe@1309
|
124 .mdl-mega-footer__drop-down-section:nth-child(4) {
|
bsw/jbe@1309
|
125 clear: right;
|
bsw/jbe@1309
|
126 float: right;
|
bsw/jbe@1309
|
127 }
|
bsw/jbe@1309
|
128
|
bsw/jbe@1309
|
129 .mdl-mega-footer--middle-section:after,
|
bsw/jbe@1309
|
130 .mdl-mega-footer__middle-section:after {
|
bsw/jbe@1309
|
131 content: '';
|
bsw/jbe@1309
|
132
|
bsw/jbe@1309
|
133 display: block;
|
bsw/jbe@1309
|
134
|
bsw/jbe@1309
|
135 clear: both;
|
bsw/jbe@1309
|
136 }
|
bsw/jbe@1309
|
137
|
bsw/jbe@1309
|
138 .mdl-mega-footer--bottom-section,
|
bsw/jbe@1309
|
139 .mdl-mega-footer__bottom-section {
|
bsw/jbe@1309
|
140 padding-top: 0;
|
bsw/jbe@1309
|
141 }
|
bsw/jbe@1309
|
142 }
|
bsw/jbe@1309
|
143
|
bsw/jbe@1309
|
144 @media screen and (min-width: 1024px) {
|
bsw/jbe@1309
|
145 .mdl-mega-footer--drop-down-section,
|
bsw/jbe@1309
|
146 .mdl-mega-footer--drop-down-section:nth-child(3),
|
bsw/jbe@1309
|
147 .mdl-mega-footer--drop-down-section:nth-child(4),
|
bsw/jbe@1309
|
148 .mdl-mega-footer__drop-down-section,
|
bsw/jbe@1309
|
149 .mdl-mega-footer__drop-down-section:nth-child(3),
|
bsw/jbe@1309
|
150 .mdl-mega-footer__drop-down-section:nth-child(4) {
|
bsw/jbe@1309
|
151 width: 24%;
|
bsw/jbe@1309
|
152
|
bsw/jbe@1309
|
153 float: left;
|
bsw/jbe@1309
|
154 }
|
bsw/jbe@1309
|
155 }
|
bsw/jbe@1309
|
156
|
bsw/jbe@1309
|
157 .mdl-mega-footer--heading-checkbox,
|
bsw/jbe@1309
|
158 .mdl-mega-footer__heading-checkbox {
|
bsw/jbe@1309
|
159 position: absolute;
|
bsw/jbe@1309
|
160 width: 100%;
|
bsw/jbe@1309
|
161 height: $footer-heading-line-height + ($footer-min-padding * 2);
|
bsw/jbe@1309
|
162
|
bsw/jbe@1309
|
163 padding: ($footer-min-padding * 2);
|
bsw/jbe@1309
|
164 margin: 0;
|
bsw/jbe@1309
|
165 margin-top: -$footer-min-padding;
|
bsw/jbe@1309
|
166
|
bsw/jbe@1309
|
167 cursor: pointer;
|
bsw/jbe@1309
|
168
|
bsw/jbe@1309
|
169 z-index: 1;
|
bsw/jbe@1309
|
170 opacity: 0;
|
bsw/jbe@1309
|
171
|
bsw/jbe@1309
|
172 & + .mdl-mega-footer--heading:after,
|
bsw/jbe@1309
|
173 & + .mdl-mega-footer__heading:after {
|
bsw/jbe@1309
|
174 font-family: 'Material Icons';
|
bsw/jbe@1309
|
175 content: '\E5CE'
|
bsw/jbe@1309
|
176 }
|
bsw/jbe@1309
|
177 }
|
bsw/jbe@1309
|
178
|
bsw/jbe@1309
|
179 .mdl-mega-footer--heading-checkbox:checked,
|
bsw/jbe@1309
|
180 .mdl-mega-footer__heading-checkbox:checked {
|
bsw/jbe@1309
|
181 // WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10
|
bsw/jbe@1309
|
182 // break consecutive "+" operators in some cases. Therefore, we need to use
|
bsw/jbe@1309
|
183 // both here to cover all the bases.
|
bsw/jbe@1309
|
184 & ~ .mdl-mega-footer--link-list,
|
bsw/jbe@1309
|
185 & ~ .mdl-mega-footer__link-list,
|
bsw/jbe@1309
|
186 & + .mdl-mega-footer--heading + .mdl-mega-footer--link-list,
|
bsw/jbe@1309
|
187 & + .mdl-mega-footer__heading + .mdl-mega-footer__link-list {
|
bsw/jbe@1309
|
188 display: none;
|
bsw/jbe@1309
|
189 }
|
bsw/jbe@1309
|
190
|
bsw/jbe@1309
|
191 & + .mdl-mega-footer--heading:after,
|
bsw/jbe@1309
|
192 & + .mdl-mega-footer__heading:after {
|
bsw/jbe@1309
|
193 font-family: 'Material Icons';
|
bsw/jbe@1309
|
194 content: '\E5CF'
|
bsw/jbe@1309
|
195 }
|
bsw/jbe@1309
|
196 }
|
bsw/jbe@1309
|
197
|
bsw/jbe@1309
|
198 .mdl-mega-footer--heading,
|
bsw/jbe@1309
|
199 .mdl-mega-footer__heading {
|
bsw/jbe@1309
|
200 position: relative;
|
bsw/jbe@1309
|
201 width: 100%;
|
bsw/jbe@1309
|
202
|
bsw/jbe@1309
|
203 padding-right: $footer-heading-line-height + $footer-min-padding;
|
bsw/jbe@1309
|
204 margin-bottom: $footer-min-padding;
|
bsw/jbe@1309
|
205
|
bsw/jbe@1309
|
206 box-sizing:border-box;
|
bsw/jbe@1309
|
207
|
bsw/jbe@1309
|
208 font-size: $footer-heading-font-size;
|
bsw/jbe@1309
|
209 line-height: $footer-heading-line-height;
|
bsw/jbe@1309
|
210
|
bsw/jbe@1309
|
211 font-weight: 500;
|
bsw/jbe@1309
|
212
|
bsw/jbe@1309
|
213 white-space: nowrap;
|
bsw/jbe@1309
|
214 text-overflow: ellipsis;
|
bsw/jbe@1309
|
215 overflow: hidden;
|
bsw/jbe@1309
|
216
|
bsw/jbe@1309
|
217 color: $footer-heading-color;
|
bsw/jbe@1309
|
218 }
|
bsw/jbe@1309
|
219
|
bsw/jbe@1309
|
220 .mdl-mega-footer--heading:after,
|
bsw/jbe@1309
|
221 .mdl-mega-footer__heading:after {
|
bsw/jbe@1309
|
222 content: '';
|
bsw/jbe@1309
|
223
|
bsw/jbe@1309
|
224 position: absolute;
|
bsw/jbe@1309
|
225 top: 0;
|
bsw/jbe@1309
|
226 right: 0;
|
bsw/jbe@1309
|
227
|
bsw/jbe@1309
|
228 display: block;
|
bsw/jbe@1309
|
229
|
bsw/jbe@1309
|
230 width: $footer-heading-line-height;
|
bsw/jbe@1309
|
231 height: $footer-heading-line-height;
|
bsw/jbe@1309
|
232
|
bsw/jbe@1309
|
233 background-size: cover;
|
bsw/jbe@1309
|
234 }
|
bsw/jbe@1309
|
235
|
bsw/jbe@1309
|
236 .mdl-mega-footer--link-list,
|
bsw/jbe@1309
|
237 .mdl-mega-footer__link-list {
|
bsw/jbe@1309
|
238 list-style: none;
|
bsw/jbe@1309
|
239
|
bsw/jbe@1309
|
240 margin: 0;
|
bsw/jbe@1309
|
241 padding: 0;
|
bsw/jbe@1309
|
242
|
bsw/jbe@1309
|
243 margin-bottom: $footer-min-padding * 2;
|
bsw/jbe@1309
|
244 &:after {
|
bsw/jbe@1309
|
245 clear: both;
|
bsw/jbe@1309
|
246 display: block;
|
bsw/jbe@1309
|
247 content: '';
|
bsw/jbe@1309
|
248 }
|
bsw/jbe@1309
|
249 }
|
bsw/jbe@1309
|
250
|
bsw/jbe@1309
|
251 .mdl-mega-footer--link-list li,
|
bsw/jbe@1309
|
252 .mdl-mega-footer__link-list li {
|
bsw/jbe@1309
|
253 @include typo-body-1();
|
bsw/jbe@1309
|
254 line-height: 20px;
|
bsw/jbe@1309
|
255 }
|
bsw/jbe@1309
|
256
|
bsw/jbe@1309
|
257 .mdl-mega-footer--link-list a,
|
bsw/jbe@1309
|
258 .mdl-mega-footer__link-list a {
|
bsw/jbe@1309
|
259 color: inherit;
|
bsw/jbe@1309
|
260 text-decoration: none;
|
bsw/jbe@1309
|
261 white-space: nowrap;
|
bsw/jbe@1309
|
262 }
|
bsw/jbe@1309
|
263
|
bsw/jbe@1309
|
264 @media screen and (min-width: 760px) {
|
bsw/jbe@1309
|
265 .mdl-mega-footer--heading-checkbox,
|
bsw/jbe@1309
|
266 .mdl-mega-footer__heading-checkbox {
|
bsw/jbe@1309
|
267 display: none;
|
bsw/jbe@1309
|
268
|
bsw/jbe@1309
|
269 & + .mdl-mega-footer--heading:after,
|
bsw/jbe@1309
|
270 & + .mdl-mega-footer__heading:after {
|
bsw/jbe@1309
|
271 content: '';
|
bsw/jbe@1309
|
272 }
|
bsw/jbe@1309
|
273 }
|
bsw/jbe@1309
|
274 .mdl-mega-footer--heading-checkbox:checked,
|
bsw/jbe@1309
|
275 .mdl-mega-footer__heading-checkbox:checked {
|
bsw/jbe@1309
|
276 // WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10
|
bsw/jbe@1309
|
277 // break consecutive "+" operators in some cases. Therefore, we need to use
|
bsw/jbe@1309
|
278 // both here to cover all the bases.
|
bsw/jbe@1309
|
279 & ~ .mdl-mega-footer--link-list,
|
bsw/jbe@1309
|
280 & ~ .mdl-mega-footer__link-list,
|
bsw/jbe@1309
|
281 & + .mdl-mega-footer__heading + .mdl-mega-footer__link-list,
|
bsw/jbe@1309
|
282 & + .mdl-mega-footer--heading + .mdl-mega-footer--link-list {
|
bsw/jbe@1309
|
283 display: block;
|
bsw/jbe@1309
|
284 }
|
bsw/jbe@1309
|
285
|
bsw/jbe@1309
|
286 & + .mdl-mega-footer--heading:after,
|
bsw/jbe@1309
|
287 & + .mdl-mega-footer__heading:after {
|
bsw/jbe@1309
|
288 content: '';
|
bsw/jbe@1309
|
289 }
|
bsw/jbe@1309
|
290 }
|
bsw/jbe@1309
|
291 }
|
bsw/jbe@1309
|
292
|
bsw/jbe@1309
|
293 .mdl-mega-footer--bottom-section,
|
bsw/jbe@1309
|
294 .mdl-mega-footer__bottom-section {
|
bsw/jbe@1309
|
295 padding-top: $footer-min-padding;
|
bsw/jbe@1309
|
296 margin-bottom: $footer-min-padding;
|
bsw/jbe@1309
|
297 }
|
bsw/jbe@1309
|
298
|
bsw/jbe@1309
|
299 .mdl-logo {
|
bsw/jbe@1309
|
300 margin-bottom: $footer-min-padding;
|
bsw/jbe@1309
|
301 color: white;
|
bsw/jbe@1309
|
302 }
|
bsw/jbe@1309
|
303
|
bsw/jbe@1309
|
304 .mdl-mega-footer--bottom-section .mdl-mega-footer--link-list li,
|
bsw/jbe@1309
|
305 .mdl-mega-footer__bottom-section .mdl-mega-footer__link-list li {
|
bsw/jbe@1309
|
306 float: left;
|
bsw/jbe@1309
|
307
|
bsw/jbe@1309
|
308 margin-bottom: 0;
|
bsw/jbe@1309
|
309 margin-right: $footer-min-padding;
|
bsw/jbe@1309
|
310 }
|
bsw/jbe@1309
|
311
|
bsw/jbe@1309
|
312
|
bsw/jbe@1309
|
313
|
bsw/jbe@1309
|
314 @media screen and (min-width: 760px) {
|
bsw/jbe@1309
|
315 .mdl-logo {
|
bsw/jbe@1309
|
316 float: left;
|
bsw/jbe@1309
|
317
|
bsw/jbe@1309
|
318 margin-bottom: 0;
|
bsw/jbe@1309
|
319 margin-right: $footer-min-padding;
|
bsw/jbe@1309
|
320 }
|
bsw/jbe@1309
|
321 }
|