third_party/ot-br-posix/repo/third_party/mdl/repo/src/footer/_mega_footer.scss

   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 }