1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/style/mdl/footer/_mega_footer.scss	Sun Jul 15 14:07:29 2018 +0200
     1.3 @@ -0,0 +1,321 @@
     1.4 +/**
     1.5 + * Copyright 2015 Google Inc. All Rights Reserved.
     1.6 + *
     1.7 + * Licensed under the Apache License, Version 2.0 (the "License");
     1.8 + * you may not use this file except in compliance with the License.
     1.9 + * You may obtain a copy of the License at
    1.10 + *
    1.11 + *      http://www.apache.org/licenses/LICENSE-2.0
    1.12 + *
    1.13 + * Unless required by applicable law or agreed to in writing, software
    1.14 + * distributed under the License is distributed on an "AS IS" BASIS,
    1.15 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    1.16 + * See the License for the specific language governing permissions and
    1.17 + * limitations under the License.
    1.18 + */
    1.19 +
    1.20 +@import "../variables";
    1.21 +@import "../mixins";
    1.22 +
    1.23 +.mdl-mega-footer {
    1.24 +  padding: $footer-min-padding $footer-padding-sides;
    1.25 +
    1.26 +  color: $footer-color;
    1.27 +  background-color: $footer-bg-color;
    1.28 +}
    1.29 +
    1.30 +
    1.31 +.mdl-mega-footer--top-section:after,
    1.32 +.mdl-mega-footer--middle-section:after,
    1.33 +.mdl-mega-footer--bottom-section:after,
    1.34 +.mdl-mega-footer__top-section:after,
    1.35 +.mdl-mega-footer__middle-section:after,
    1.36 +.mdl-mega-footer__bottom-section:after {
    1.37 +  content: '';
    1.38 +  display: block;
    1.39 +  clear: both;
    1.40 +}
    1.41 +
    1.42 +.mdl-mega-footer--left-section,
    1.43 +.mdl-mega-footer__left-section {
    1.44 +  margin-bottom: $footer-min-padding;
    1.45 +}
    1.46 +
    1.47 +.mdl-mega-footer--right-section,
    1.48 +.mdl-mega-footer__right-section {
    1.49 +  margin-bottom: $footer-min-padding;
    1.50 +}
    1.51 +
    1.52 +.mdl-mega-footer--right-section a,
    1.53 +.mdl-mega-footer__right-section a {
    1.54 +  display: block;
    1.55 +
    1.56 +  margin-bottom: $footer-min-padding;
    1.57 +
    1.58 +  color: inherit;
    1.59 +  text-decoration: none;
    1.60 +}
    1.61 +
    1.62 +@media screen and (min-width: 760px) {
    1.63 +  .mdl-mega-footer--left-section,
    1.64 +  .mdl-mega-footer__left-section {
    1.65 +    float: left;
    1.66 +  }
    1.67 +
    1.68 +  .mdl-mega-footer--right-section,
    1.69 +  .mdl-mega-footer__right-section {
    1.70 +    float: right;
    1.71 +  }
    1.72 +
    1.73 +  .mdl-mega-footer--right-section a,
    1.74 +  .mdl-mega-footer__right-section a {
    1.75 +    display: inline-block;
    1.76 +
    1.77 +    margin-left: $footer-min-padding;
    1.78 +
    1.79 +    line-height: $footer-btn-size;
    1.80 +    vertical-align: middle;
    1.81 +  }
    1.82 +}
    1.83 +
    1.84 +.mdl-mega-footer--social-btn,
    1.85 +.mdl-mega-footer__social-btn {
    1.86 +  width: $footer-btn-size;
    1.87 +  height: $footer-btn-size;
    1.88 +
    1.89 +  padding: 0;
    1.90 +  margin: 0;
    1.91 +
    1.92 +  background-color: $footer-button-fill-color;
    1.93 +
    1.94 +  border: none;
    1.95 +}
    1.96 +
    1.97 +.mdl-mega-footer--drop-down-section,
    1.98 +.mdl-mega-footer__drop-down-section {
    1.99 +  display: block;
   1.100 +
   1.101 +  position: relative;
   1.102 +}
   1.103 +
   1.104 +@media screen and (min-width: 760px) {
   1.105 +  .mdl-mega-footer--drop-down-section,
   1.106 +  .mdl-mega-footer__drop-down-section {
   1.107 +    width: 33%;
   1.108 +  }
   1.109 +
   1.110 +  .mdl-mega-footer--drop-down-section:nth-child(1),
   1.111 +  .mdl-mega-footer--drop-down-section:nth-child(2),
   1.112 +  .mdl-mega-footer__drop-down-section:nth-child(1),
   1.113 +  .mdl-mega-footer__drop-down-section:nth-child(2) {
   1.114 +    float: left;
   1.115 +  }
   1.116 +
   1.117 +  .mdl-mega-footer--drop-down-section:nth-child(3),
   1.118 +  .mdl-mega-footer__drop-down-section:nth-child(3) {
   1.119 +    float: right;
   1.120 +
   1.121 +    &:after {
   1.122 +      clear: right;
   1.123 +    }
   1.124 +  }
   1.125 +
   1.126 +  .mdl-mega-footer--drop-down-section:nth-child(4),
   1.127 +  .mdl-mega-footer__drop-down-section:nth-child(4) {
   1.128 +    clear: right;
   1.129 +    float: right;
   1.130 +  }
   1.131 +
   1.132 +  .mdl-mega-footer--middle-section:after,
   1.133 +  .mdl-mega-footer__middle-section:after {
   1.134 +    content: '';
   1.135 +
   1.136 +    display: block;
   1.137 +
   1.138 +    clear: both;
   1.139 +  }
   1.140 +
   1.141 +  .mdl-mega-footer--bottom-section,
   1.142 +  .mdl-mega-footer__bottom-section {
   1.143 +    padding-top: 0;
   1.144 +  }
   1.145 +}
   1.146 +
   1.147 +@media screen and (min-width: 1024px) {
   1.148 +  .mdl-mega-footer--drop-down-section,
   1.149 +  .mdl-mega-footer--drop-down-section:nth-child(3),
   1.150 +  .mdl-mega-footer--drop-down-section:nth-child(4),
   1.151 +  .mdl-mega-footer__drop-down-section,
   1.152 +  .mdl-mega-footer__drop-down-section:nth-child(3),
   1.153 +  .mdl-mega-footer__drop-down-section:nth-child(4) {
   1.154 +    width: 24%;
   1.155 +
   1.156 +    float: left;
   1.157 +  }
   1.158 +}
   1.159 +
   1.160 +.mdl-mega-footer--heading-checkbox,
   1.161 +.mdl-mega-footer__heading-checkbox {
   1.162 +  position: absolute;
   1.163 +  width: 100%;
   1.164 +  height: $footer-heading-line-height + ($footer-min-padding * 2);
   1.165 +
   1.166 +  padding: ($footer-min-padding * 2);
   1.167 +  margin: 0;
   1.168 +  margin-top: -$footer-min-padding;
   1.169 +
   1.170 +  cursor: pointer;
   1.171 +
   1.172 +  z-index: 1;
   1.173 +  opacity: 0;
   1.174 +
   1.175 +  & + .mdl-mega-footer--heading:after,
   1.176 +  & + .mdl-mega-footer__heading:after {
   1.177 +    font-family: 'Material Icons';
   1.178 +    content: '\E5CE'
   1.179 +  }
   1.180 +}
   1.181 +
   1.182 +.mdl-mega-footer--heading-checkbox:checked,
   1.183 +.mdl-mega-footer__heading-checkbox:checked {
   1.184 +  // WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10
   1.185 +  // break consecutive "+" operators in some cases. Therefore, we need to use
   1.186 +  // both here to cover all the bases.
   1.187 +  & ~ .mdl-mega-footer--link-list,
   1.188 +  & ~ .mdl-mega-footer__link-list,
   1.189 +  & + .mdl-mega-footer--heading + .mdl-mega-footer--link-list,
   1.190 +  & + .mdl-mega-footer__heading + .mdl-mega-footer__link-list {
   1.191 +    display: none;
   1.192 +  }
   1.193 +
   1.194 +  & + .mdl-mega-footer--heading:after,
   1.195 +  & + .mdl-mega-footer__heading:after {
   1.196 +    font-family: 'Material Icons';
   1.197 +    content: '\E5CF'
   1.198 +  }
   1.199 +}
   1.200 +
   1.201 +.mdl-mega-footer--heading,
   1.202 +.mdl-mega-footer__heading {
   1.203 +  position: relative;
   1.204 +  width: 100%;
   1.205 +
   1.206 +  padding-right: $footer-heading-line-height + $footer-min-padding;
   1.207 +  margin-bottom: $footer-min-padding;
   1.208 +
   1.209 +  box-sizing:border-box;
   1.210 +
   1.211 +  font-size: $footer-heading-font-size;
   1.212 +  line-height: $footer-heading-line-height;
   1.213 +
   1.214 +  font-weight: 500;
   1.215 +
   1.216 +  white-space: nowrap;
   1.217 +  text-overflow: ellipsis;
   1.218 +  overflow: hidden;
   1.219 +
   1.220 +  color: $footer-heading-color;
   1.221 +}
   1.222 +
   1.223 +.mdl-mega-footer--heading:after,
   1.224 +.mdl-mega-footer__heading:after {
   1.225 +  content: '';
   1.226 +
   1.227 +  position: absolute;
   1.228 +  top: 0;
   1.229 +  right: 0;
   1.230 +
   1.231 +  display: block;
   1.232 +
   1.233 +  width: $footer-heading-line-height;
   1.234 +  height: $footer-heading-line-height;
   1.235 +
   1.236 +  background-size: cover;
   1.237 +}
   1.238 +
   1.239 +.mdl-mega-footer--link-list,
   1.240 +.mdl-mega-footer__link-list {
   1.241 +  list-style: none;
   1.242 +
   1.243 +  margin: 0;
   1.244 +  padding: 0;
   1.245 +
   1.246 +  margin-bottom: $footer-min-padding * 2;
   1.247 +  &:after {
   1.248 +    clear: both;
   1.249 +    display: block;
   1.250 +    content: '';
   1.251 +  }
   1.252 +}
   1.253 +
   1.254 +.mdl-mega-footer--link-list li,
   1.255 +.mdl-mega-footer__link-list li {
   1.256 +  @include typo-body-1();
   1.257 +  line-height: 20px;
   1.258 +}
   1.259 +
   1.260 +.mdl-mega-footer--link-list a,
   1.261 +.mdl-mega-footer__link-list a {
   1.262 +  color: inherit;
   1.263 +  text-decoration: none;
   1.264 +  white-space: nowrap;
   1.265 +}
   1.266 +
   1.267 +@media screen and (min-width: 760px) {
   1.268 +  .mdl-mega-footer--heading-checkbox,
   1.269 +  .mdl-mega-footer__heading-checkbox {
   1.270 +    display: none;
   1.271 +
   1.272 +    & + .mdl-mega-footer--heading:after,
   1.273 +    & + .mdl-mega-footer__heading:after {
   1.274 +      content: '';
   1.275 +    }
   1.276 +  }
   1.277 +  .mdl-mega-footer--heading-checkbox:checked,
   1.278 +  .mdl-mega-footer__heading-checkbox:checked {
   1.279 +    // WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10
   1.280 +    // break consecutive "+" operators in some cases. Therefore, we need to use
   1.281 +    // both here to cover all the bases.
   1.282 +    & ~ .mdl-mega-footer--link-list,
   1.283 +    & ~ .mdl-mega-footer__link-list,
   1.284 +    & + .mdl-mega-footer__heading + .mdl-mega-footer__link-list,
   1.285 +    & + .mdl-mega-footer--heading + .mdl-mega-footer--link-list {
   1.286 +      display: block;
   1.287 +    }
   1.288 +
   1.289 +    & + .mdl-mega-footer--heading:after,
   1.290 +    & + .mdl-mega-footer__heading:after {
   1.291 +      content: '';
   1.292 +    }
   1.293 +  }
   1.294 +}
   1.295 +
   1.296 +.mdl-mega-footer--bottom-section,
   1.297 +.mdl-mega-footer__bottom-section {
   1.298 +  padding-top: $footer-min-padding;
   1.299 +  margin-bottom: $footer-min-padding;
   1.300 +}
   1.301 +
   1.302 +.mdl-logo {
   1.303 +  margin-bottom: $footer-min-padding;
   1.304 +  color: white;
   1.305 +}
   1.306 +
   1.307 +.mdl-mega-footer--bottom-section .mdl-mega-footer--link-list li,
   1.308 +.mdl-mega-footer__bottom-section .mdl-mega-footer__link-list li {
   1.309 +  float: left;
   1.310 +
   1.311 +  margin-bottom: 0;
   1.312 +  margin-right: $footer-min-padding;
   1.313 +}
   1.314 +
   1.315 +
   1.316 +
   1.317 +@media screen and (min-width: 760px) {
   1.318 +  .mdl-logo {
   1.319 +    float: left;
   1.320 +
   1.321 +    margin-bottom: 0;
   1.322 +    margin-right: $footer-min-padding;
   1.323 +  }
   1.324 +}