liquid_feedback_frontend

view style/mdl/footer/_mega_footer.scss @ 1404:f99e7df399e6

find changesets by author, revision, files, or words in the commit message
Text case change
author bsw
date Mon Aug 13 19:52:00 2018 +0200 (2018-08-13)
parents 32cc544d5a5b
children
line source
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 // WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10
182 // break consecutive "+" operators in some cases. Therefore, we need to use
183 // both here to cover all the bases.
184 & ~ .mdl-mega-footer--link-list,
185 & ~ .mdl-mega-footer__link-list,
186 & + .mdl-mega-footer--heading + .mdl-mega-footer--link-list,
187 & + .mdl-mega-footer__heading + .mdl-mega-footer__link-list {
188 display: none;
189 }
190
191 & + .mdl-mega-footer--heading:after,
192 & + .mdl-mega-footer__heading:after {
193 font-family: 'Material Icons';
194 content: '\E5CF'
195 }
196 }
197
198 .mdl-mega-footer--heading,
199 .mdl-mega-footer__heading {
200 position: relative;
201 width: 100%;
202
203 padding-right: $footer-heading-line-height + $footer-min-padding;
204 margin-bottom: $footer-min-padding;
205
206 box-sizing:border-box;
207
208 font-size: $footer-heading-font-size;
209 line-height: $footer-heading-line-height;
210
211 font-weight: 500;
212
213 white-space: nowrap;
214 text-overflow: ellipsis;
215 overflow: hidden;
216
217 color: $footer-heading-color;
218 }
219
220 .mdl-mega-footer--heading:after,
221 .mdl-mega-footer__heading:after {
222 content: '';
223
224 position: absolute;
225 top: 0;
226 right: 0;
227
228 display: block;
229
230 width: $footer-heading-line-height;
231 height: $footer-heading-line-height;
232
233 background-size: cover;
234 }
235
236 .mdl-mega-footer--link-list,
237 .mdl-mega-footer__link-list {
238 list-style: none;
239
240 margin: 0;
241 padding: 0;
242
243 margin-bottom: $footer-min-padding * 2;
244 &:after {
245 clear: both;
246 display: block;
247 content: '';
248 }
249 }
250
251 .mdl-mega-footer--link-list li,
252 .mdl-mega-footer__link-list li {
253 @include typo-body-1();
254 line-height: 20px;
255 }
256
257 .mdl-mega-footer--link-list a,
258 .mdl-mega-footer__link-list a {
259 color: inherit;
260 text-decoration: none;
261 white-space: nowrap;
262 }
263
264 @media screen and (min-width: 760px) {
265 .mdl-mega-footer--heading-checkbox,
266 .mdl-mega-footer__heading-checkbox {
267 display: none;
268
269 & + .mdl-mega-footer--heading:after,
270 & + .mdl-mega-footer__heading:after {
271 content: '';
272 }
273 }
274 .mdl-mega-footer--heading-checkbox:checked,
275 .mdl-mega-footer__heading-checkbox:checked {
276 // WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10
277 // break consecutive "+" operators in some cases. Therefore, we need to use
278 // both here to cover all the bases.
279 & ~ .mdl-mega-footer--link-list,
280 & ~ .mdl-mega-footer__link-list,
281 & + .mdl-mega-footer__heading + .mdl-mega-footer__link-list,
282 & + .mdl-mega-footer--heading + .mdl-mega-footer--link-list {
283 display: block;
284 }
285
286 & + .mdl-mega-footer--heading:after,
287 & + .mdl-mega-footer__heading:after {
288 content: '';
289 }
290 }
291 }
292
293 .mdl-mega-footer--bottom-section,
294 .mdl-mega-footer__bottom-section {
295 padding-top: $footer-min-padding;
296 margin-bottom: $footer-min-padding;
297 }
298
299 .mdl-logo {
300 margin-bottom: $footer-min-padding;
301 color: white;
302 }
303
304 .mdl-mega-footer--bottom-section .mdl-mega-footer--link-list li,
305 .mdl-mega-footer__bottom-section .mdl-mega-footer__link-list li {
306 float: left;
307
308 margin-bottom: 0;
309 margin-right: $footer-min-padding;
310 }
311
312
313
314 @media screen and (min-width: 760px) {
315 .mdl-logo {
316 float: left;
317
318 margin-bottom: 0;
319 margin-right: $footer-min-padding;
320 }
321 }

Impressum / About Us