liquid_feedback_frontend

annotate style/mdl/footer/_mega_footer.scss @ 1717:f41f5c5f8fa2

find changesets by author, revision, files, or words in the commit message
User cannot be not entitled to vote in root level
author bsw
date Mon Sep 27 12:44:07 2021 +0200 (2021-09-27)
parents 32cc544d5a5b
children
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 }

Impressum / About Us