1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/style/mdl/layout/_layout.scss	Sun Jul 15 14:07:29 2018 +0200
     1.3 @@ -0,0 +1,662 @@
     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 +// Navigation classes. Only used here for now, but we may at some point move
    1.24 +// this to its own component.
    1.25 +.mdl-navigation {
    1.26 +  display: flex;
    1.27 +  flex-wrap: nowrap;
    1.28 +  box-sizing: border-box;
    1.29 +}
    1.30 +
    1.31 +.mdl-navigation__link {
    1.32 +  color: $layout-text-color;
    1.33 +  text-decoration: none;
    1.34 +  margin: 0;
    1.35 +  @include typo-body-1(true);
    1.36 +
    1.37 +  // Align icons inside link with text
    1.38 +  & .material-icons {
    1.39 +    vertical-align: middle;
    1.40 +  }
    1.41 +}
    1.42 +
    1.43 +// Main layout class.
    1.44 +.mdl-layout {
    1.45 +  width: 100%;
    1.46 +  height: 100%;
    1.47 +  display: flex;
    1.48 +  flex-direction: column;
    1.49 +  overflow-y: auto;
    1.50 +  overflow-x: hidden;
    1.51 +  position: relative;
    1.52 +  -webkit-overflow-scrolling: touch;
    1.53 +}
    1.54 +
    1.55 +// Utility classes for screen sizes.
    1.56 +.mdl-layout.is-small-screen .mdl-layout--large-screen-only {
    1.57 +  display: none;
    1.58 +}
    1.59 +
    1.60 +.mdl-layout:not(.is-small-screen) .mdl-layout--small-screen-only {
    1.61 +  display: none;
    1.62 +}
    1.63 +
    1.64 +.mdl-layout__container {
    1.65 +  position: absolute;
    1.66 +  width: 100%;
    1.67 +  height: 100%;
    1.68 +}
    1.69 +
    1.70 +
    1.71 +  // Optional utility classes for formatting special blocks in this component.
    1.72 +  .mdl-layout__title,
    1.73 +  .mdl-layout-title {
    1.74 +    display: block;
    1.75 +    position: relative;
    1.76 +
    1.77 +    @include typo-title();
    1.78 +    font-weight: 400;
    1.79 +    box-sizing: border-box;
    1.80 +  }
    1.81 +
    1.82 +  .mdl-layout-spacer {
    1.83 +    flex-grow: 1;
    1.84 +  }
    1.85 +
    1.86 +
    1.87 +  // Drawer.
    1.88 +  .mdl-layout__drawer {
    1.89 +    display: flex;
    1.90 +    flex-direction: column;
    1.91 +    flex-wrap: nowrap;
    1.92 +
    1.93 +    width: $layout-drawer-width;
    1.94 +    height: 100%;
    1.95 +    max-height: 100%;
    1.96 +
    1.97 +    position: absolute;
    1.98 +    top: 0;
    1.99 +    left: 0;
   1.100 +
   1.101 +    @include shadow-2dp();
   1.102 +
   1.103 +    box-sizing: border-box;
   1.104 +    border-right: 1px solid $layout-drawer-border-color;
   1.105 +    background: $layout-drawer-bg-color;
   1.106 +
   1.107 +    // Transform offscreen.
   1.108 +    transform: translateX(-$layout-drawer-width - 10px);
   1.109 +    transform-style: preserve-3d;
   1.110 +    will-change: transform;
   1.111 +
   1.112 +    @include material-animation-default();
   1.113 +    transition-property: transform;
   1.114 +
   1.115 +    color: $layout-text-color;
   1.116 +
   1.117 +    overflow: visible;
   1.118 +    overflow-y: auto;
   1.119 +
   1.120 +    z-index: 5;
   1.121 +
   1.122 +    &.is-visible {
   1.123 +      transform: translateX(0);
   1.124 +      & ~ .mdl-layout__content.mdl-layout__content {
   1.125 +        overflow: hidden;
   1.126 +      }
   1.127 +    }
   1.128 +
   1.129 +    & > * {
   1.130 +      flex-shrink: 0;
   1.131 +    }
   1.132 +
   1.133 +    & > .mdl-layout__title,
   1.134 +    & > .mdl-layout-title {
   1.135 +      line-height: $layout-desktop-header-height;
   1.136 +      padding-left: $layout-header-desktop-indent;
   1.137 +
   1.138 +      @media screen and (max-width: $layout-screen-size-threshold) {
   1.139 +        line-height: $layout-mobile-header-height;
   1.140 +        padding-left: $layout-header-mobile-indent;
   1.141 +      }
   1.142 +    }
   1.143 +
   1.144 +    & .mdl-navigation {
   1.145 +      flex-direction: column;
   1.146 +      align-items: stretch;
   1.147 +      padding-top: 16px;
   1.148 +
   1.149 +      & .mdl-navigation__link {
   1.150 +      display: block;
   1.151 +      flex-shrink: 0;
   1.152 +      padding: 16px $layout-header-desktop-indent;
   1.153 +      margin: 0;
   1.154 +      color: $layout-drawer-navigation-color;
   1.155 +
   1.156 +        @media screen and (max-width: $layout-screen-size-threshold) {
   1.157 +          padding: 16px $layout-header-mobile-indent;
   1.158 +        }
   1.159 +
   1.160 +        &:hover {
   1.161 +          background-color: $layout-nav-color;
   1.162 +        }
   1.163 +
   1.164 +        &--current {
   1.165 +            background-color: $layout-drawer-navigation-link-active-background;
   1.166 +            color: $layout-drawer-navigation-link-active-color;
   1.167 +        }
   1.168 +      }
   1.169 +    }
   1.170 +
   1.171 +    @media screen and (min-width: $layout-screen-size-threshold + 1px) {
   1.172 +      .mdl-layout--fixed-drawer > & {
   1.173 +        transform: translateX(0);
   1.174 +      }
   1.175 +    }
   1.176 +  }
   1.177 +
   1.178 +
   1.179 +  // Drawer button.
   1.180 +  // TODO(sgomes): Replace with an icon button when we have that component.
   1.181 +  .mdl-layout__drawer-button {
   1.182 +    display: block;
   1.183 +
   1.184 +    position: absolute;
   1.185 +    height: $layout-drawer-button-desktop-size;
   1.186 +    width: $layout-drawer-button-desktop-size;
   1.187 +    border: 0;
   1.188 +
   1.189 +    flex-shrink: 0;
   1.190 +
   1.191 +    overflow: hidden;
   1.192 +    text-align: center;
   1.193 +    cursor: pointer;
   1.194 +    font-size: 26px;
   1.195 +    line-height: $layout-mobile-header-height;
   1.196 +    font-family: Helvetica, Arial, sans-serif;
   1.197 +    margin: ($layout-mobile-header-height - $layout-drawer-button-desktop-size) 12px;
   1.198 +    top: 0;
   1.199 +    left: 0;
   1.200 +    color: $layout-header-text-color;
   1.201 +
   1.202 +    z-index: 4;
   1.203 +
   1.204 +    .mdl-layout__header & {
   1.205 +      position: absolute;
   1.206 +      color: $layout-header-text-color;
   1.207 +      background-color: inherit;
   1.208 +
   1.209 +      @media screen and (max-width: $layout-screen-size-threshold) {
   1.210 +        margin: 4px;
   1.211 +      }
   1.212 +    }
   1.213 +
   1.214 +    @media screen and (max-width: $layout-screen-size-threshold) {
   1.215 +      margin: 4px;
   1.216 +      color: rgba(0, 0, 0, 0.5);
   1.217 +    }
   1.218 +
   1.219 +    @media screen and (min-width: $layout-screen-size-threshold + 1px) {
   1.220 +      line-height: 54px;
   1.221 +
   1.222 +      .mdl-layout--no-desktop-drawer-button &,
   1.223 +      .mdl-layout--fixed-drawer > &,
   1.224 +      .mdl-layout--no-drawer-button & {
   1.225 +        display: none;
   1.226 +      }
   1.227 +    }
   1.228 +  }
   1.229 +
   1.230 +  .mdl-layout__header {
   1.231 +    display: flex;
   1.232 +    flex-direction: column;
   1.233 +    flex-wrap: nowrap;
   1.234 +    justify-content: flex-start;
   1.235 +    box-sizing: border-box;
   1.236 +    flex-shrink: 0;
   1.237 +
   1.238 +    width: 100%;
   1.239 +    margin: 0;
   1.240 +    padding: 0;
   1.241 +    border: none;
   1.242 +    min-height: $layout-desktop-header-height;
   1.243 +    max-height: 1000px;
   1.244 +    z-index: 3;
   1.245 +
   1.246 +    background-color: $layout-header-bg-color;
   1.247 +    color: $layout-header-text-color;
   1.248 +
   1.249 +    @include shadow-2dp();
   1.250 +    @include material-animation-default();
   1.251 +    transition-property: max-height, box-shadow;
   1.252 +
   1.253 +    @media screen and (max-width: $layout-screen-size-threshold) {
   1.254 +      min-height: $layout-mobile-header-height;
   1.255 +    }
   1.256 +
   1.257 +    .mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen) > & {
   1.258 +      margin-left: $layout-drawer-width;
   1.259 +      width: calc(100% - #{$layout-drawer-width});
   1.260 +    }
   1.261 +
   1.262 +    @media screen and (min-width: $layout-screen-size-threshold + 1px) {
   1.263 +      .mdl-layout--fixed-drawer > & {
   1.264 +        .mdl-layout__header-row {
   1.265 +          padding-left: 40px;
   1.266 +        }
   1.267 +      }
   1.268 +    }
   1.269 +
   1.270 +    & > .mdl-layout-icon {
   1.271 +      position: absolute;
   1.272 +      left: $layout-header-desktop-indent;
   1.273 +      top: ($layout-desktop-header-height - $layout-header-icon-size) / 2;
   1.274 +      height: $layout-header-icon-size;
   1.275 +      width: $layout-header-icon-size;
   1.276 +      overflow: hidden;
   1.277 +      z-index: 3;
   1.278 +      display: block;
   1.279 +
   1.280 +      @media screen and (max-width: $layout-screen-size-threshold) {
   1.281 +        left: $layout-header-mobile-indent;
   1.282 +        top: ($layout-mobile-header-height - $layout-header-icon-size) / 2;
   1.283 +      }
   1.284 +    }
   1.285 +
   1.286 +    .mdl-layout.has-drawer & > .mdl-layout-icon {
   1.287 +      display: none;
   1.288 +    }
   1.289 +
   1.290 +    &.is-compact {
   1.291 +      max-height: $layout-desktop-header-height;
   1.292 +
   1.293 +      @media screen and (max-width: $layout-screen-size-threshold) {
   1.294 +        max-height: $layout-mobile-header-height;
   1.295 +      }
   1.296 +    }
   1.297 +
   1.298 +    &.is-compact.has-tabs {
   1.299 +      height: $layout-desktop-header-height + $layout-tab-bar-height;
   1.300 +
   1.301 +      @media screen and (max-width: $layout-screen-size-threshold) {
   1.302 +        min-height: $layout-mobile-header-height + $layout-tab-bar-height;
   1.303 +      }
   1.304 +    }
   1.305 +
   1.306 +    @media screen and (max-width: $layout-screen-size-threshold) {
   1.307 +      & {
   1.308 +        display: none;
   1.309 +      }
   1.310 +
   1.311 +      .mdl-layout--fixed-header > & {
   1.312 +        display: flex;
   1.313 +      }
   1.314 +    }
   1.315 +  }
   1.316 +
   1.317 +    .mdl-layout__header--transparent.mdl-layout__header--transparent {
   1.318 +      background-color: transparent;
   1.319 +      box-shadow: none;
   1.320 +    }
   1.321 +
   1.322 +    .mdl-layout__header--seamed {
   1.323 +      box-shadow: none;
   1.324 +    }
   1.325 +
   1.326 +    .mdl-layout__header--scroll {
   1.327 +      box-shadow: none;
   1.328 +    }
   1.329 +
   1.330 +    .mdl-layout__header--waterfall {
   1.331 +      box-shadow: none;
   1.332 +      overflow: hidden;
   1.333 +
   1.334 +      &.is-casting-shadow {
   1.335 +        @include shadow-2dp();
   1.336 +      }
   1.337 +
   1.338 +      &.mdl-layout__header--waterfall-hide-top {
   1.339 +        justify-content: flex-end;
   1.340 +      }
   1.341 +    }
   1.342 +
   1.343 +    .mdl-layout__header-row {
   1.344 +      display: flex;
   1.345 +      flex-direction: row;
   1.346 +      flex-wrap: nowrap;
   1.347 +      flex-shrink: 0;
   1.348 +      box-sizing: border-box;
   1.349 +      align-self: stretch;
   1.350 +      align-items: center;
   1.351 +      height: $layout-header-desktop-row-height;
   1.352 +      margin: 0;
   1.353 +      padding: 0 $layout-header-desktop-indent 0 $layout-header-desktop-baseline;
   1.354 +
   1.355 +      .mdl-layout--no-drawer-button & {
   1.356 +        padding-left: $layout-header-desktop-indent;
   1.357 +      }
   1.358 +
   1.359 +      @media screen and (min-width: $layout-screen-size-threshold + 1px) {
   1.360 +        .mdl-layout--no-desktop-drawer-button & {
   1.361 +          padding-left: $layout-header-desktop-indent;
   1.362 +        }
   1.363 +      }
   1.364 +
   1.365 +      @media screen and (max-width: $layout-screen-size-threshold) {
   1.366 +        height: $layout-header-mobile-row-height;
   1.367 +        padding: 0 $layout-header-mobile-indent 0 $layout-header-mobile-baseline;
   1.368 +
   1.369 +        .mdl-layout--no-drawer-button & {
   1.370 +          padding-left: $layout-header-mobile-indent;
   1.371 +        }
   1.372 +      }
   1.373 +
   1.374 +      & > * {
   1.375 +        flex-shrink: 0;
   1.376 +      }
   1.377 +
   1.378 +      .mdl-layout__header--scroll & {
   1.379 +        width: 100%;
   1.380 +      }
   1.381 +
   1.382 +      & .mdl-navigation {
   1.383 +        margin: 0;
   1.384 +        padding: 0;
   1.385 +        height: $layout-header-desktop-row-height;
   1.386 +        flex-direction: row;
   1.387 +        align-items: center;
   1.388 +
   1.389 +        @media screen and (max-width: $layout-screen-size-threshold) {
   1.390 +          height: $layout-header-mobile-row-height;
   1.391 +        }
   1.392 +      }
   1.393 +
   1.394 +      & .mdl-navigation__link {
   1.395 +        display: block;
   1.396 +        color: $layout-header-text-color;
   1.397 +        line-height: $layout-header-desktop-row-height;
   1.398 +        padding: 0 24px;
   1.399 +
   1.400 +        @media screen and (max-width: $layout-screen-size-threshold) {
   1.401 +          line-height: $layout-header-mobile-row-height;
   1.402 +          padding: 0 $layout-header-mobile-indent;
   1.403 +        }
   1.404 +      }
   1.405 +    }
   1.406 +
   1.407 +  // Obfuscator.
   1.408 +  .mdl-layout__obfuscator {
   1.409 +    background-color: transparent;
   1.410 +    position: absolute;
   1.411 +    top: 0;
   1.412 +    left: 0;
   1.413 +    height: 100%;
   1.414 +    width: 100%;
   1.415 +    z-index: 4;
   1.416 +    visibility: hidden;
   1.417 +    transition-property: background-color;
   1.418 +    @include material-animation-default();
   1.419 +
   1.420 +    &.is-visible {
   1.421 +      background-color: rgba(0, 0, 0, 0.5);
   1.422 +      visibility: visible;
   1.423 +    }
   1.424 +
   1.425 +    @supports (pointer-events: auto) {
   1.426 +      background-color: rgba(0, 0, 0, 0.5);
   1.427 +      opacity: 0;
   1.428 +      transition-property: opacity;
   1.429 +      visibility: visible;
   1.430 +      pointer-events: none;
   1.431 +      &.is-visible {
   1.432 +        pointer-events: auto;
   1.433 +        opacity: 1;
   1.434 +      }
   1.435 +    }
   1.436 +  }
   1.437 +
   1.438 +
   1.439 +  // Content.
   1.440 +  .mdl-layout__content {
   1.441 +    // Fix IE10 bug.
   1.442 +    -ms-flex: 0 1 auto;
   1.443 +
   1.444 +    position: relative;
   1.445 +    display: inline-block;
   1.446 +    overflow-y: auto;
   1.447 +    overflow-x: hidden;
   1.448 +    flex-grow: 1;
   1.449 +    z-index: 1;
   1.450 +    -webkit-overflow-scrolling: touch;
   1.451 +
   1.452 +    .mdl-layout--fixed-drawer > & {
   1.453 +      margin-left: $layout-drawer-width;
   1.454 +    }
   1.455 +
   1.456 +    .mdl-layout__container.has-scrolling-header & {
   1.457 +      overflow: visible;
   1.458 +    }
   1.459 +
   1.460 +    @media screen and (max-width: $layout-screen-size-threshold) {
   1.461 +      .mdl-layout--fixed-drawer > & {
   1.462 +        margin-left: 0;
   1.463 +      }
   1.464 +
   1.465 +      .mdl-layout__container.has-scrolling-header & {
   1.466 +        overflow-y: auto;
   1.467 +        overflow-x: hidden;
   1.468 +      }
   1.469 +    }
   1.470 +  }
   1.471 +
   1.472 +  // Tabs.
   1.473 +  .mdl-layout__tab-bar {
   1.474 +    height: $layout-tab-bar-height * 2;
   1.475 +    margin: 0;
   1.476 +    width: calc(100% -
   1.477 +        #{(($layout-header-desktop-baseline - $layout-tab-desktop-padding) * 2)});
   1.478 +    padding: 0 0 0
   1.479 +        ($layout-header-desktop-baseline - $layout-tab-desktop-padding);
   1.480 +    display: flex;
   1.481 +    background-color: $layout-header-bg-color;
   1.482 +    overflow-y: hidden;
   1.483 +    overflow-x: scroll;
   1.484 +
   1.485 +    &::-webkit-scrollbar {
   1.486 +      display: none;
   1.487 +    }
   1.488 +
   1.489 +    .mdl-layout--no-drawer-button & {
   1.490 +      padding-left: $layout-header-desktop-indent - $layout-tab-desktop-padding;
   1.491 +      width: calc(100% -
   1.492 +          #{(($layout-header-desktop-indent - $layout-tab-desktop-padding) * 2)});
   1.493 +    }
   1.494 +
   1.495 +    @media screen and (min-width: $layout-screen-size-threshold + 1px) {
   1.496 +      .mdl-layout--no-desktop-drawer-button & {
   1.497 +        padding-left: $layout-header-desktop-indent - $layout-tab-desktop-padding;
   1.498 +        width: calc(100% -
   1.499 +            #{(($layout-header-desktop-indent - $layout-tab-desktop-padding) * 2)});
   1.500 +      }
   1.501 +    }
   1.502 +
   1.503 +    @media screen and (max-width: $layout-screen-size-threshold) {
   1.504 +      width: calc(100% -
   1.505 +          #{($layout-header-mobile-baseline - $layout-tab-mobile-padding)});
   1.506 +      padding: 0 0 0
   1.507 +          ($layout-header-mobile-baseline - $layout-tab-mobile-padding);
   1.508 +
   1.509 +      .mdl-layout--no-drawer-button & {
   1.510 +        width: calc(100% -
   1.511 +            #{(($layout-header-mobile-indent - $layout-tab-mobile-padding) * 2)});
   1.512 +        padding-left: $layout-header-mobile-indent - $layout-tab-mobile-padding;
   1.513 +      }
   1.514 +    }
   1.515 +
   1.516 +    .mdl-layout--fixed-tabs & {
   1.517 +      padding: 0;
   1.518 +      overflow: hidden;
   1.519 +      width: 100%;
   1.520 +    }
   1.521 +  }
   1.522 +
   1.523 +  .mdl-layout__tab-bar-container {
   1.524 +    position: relative;
   1.525 +    height: $layout-tab-bar-height;
   1.526 +    width: 100%;
   1.527 +    border: none;
   1.528 +    margin: 0;
   1.529 +    z-index: 2;
   1.530 +    flex-grow: 0;
   1.531 +    flex-shrink: 0;
   1.532 +    overflow: hidden;
   1.533 +
   1.534 +    .mdl-layout__container > & {
   1.535 +      position: absolute;
   1.536 +      top: 0;
   1.537 +      left: 0;
   1.538 +    }
   1.539 +  }
   1.540 +
   1.541 +  .mdl-layout__tab-bar-button {
   1.542 +    display: inline-block;
   1.543 +    position: absolute;
   1.544 +    top: 0;
   1.545 +    height: $layout-tab-bar-height;
   1.546 +    width: $layout-header-desktop-baseline - $layout-tab-desktop-padding;
   1.547 +    z-index: 4;
   1.548 +    text-align: center;
   1.549 +    background-color: $layout-header-bg-color;
   1.550 +    color: transparent;
   1.551 +    cursor: pointer;
   1.552 +    user-select: none;
   1.553 +
   1.554 +    .mdl-layout--no-desktop-drawer-button &,
   1.555 +    .mdl-layout--no-drawer-button & {
   1.556 +      width: $layout-header-desktop-indent - $layout-tab-desktop-padding;
   1.557 +
   1.558 +      & .material-icons {
   1.559 +        position: relative;
   1.560 +        left: ($layout-header-desktop-indent - $layout-tab-desktop-padding - 24px) / 2;
   1.561 +      }
   1.562 +    }
   1.563 +
   1.564 +    @media screen and (max-width: $layout-screen-size-threshold) {
   1.565 +      width: $layout-header-mobile-baseline - $layout-tab-mobile-padding;
   1.566 +    }
   1.567 +
   1.568 +    .mdl-layout--fixed-tabs & {
   1.569 +      display: none;
   1.570 +    }
   1.571 +
   1.572 +    & .material-icons {
   1.573 +      line-height: $layout-tab-bar-height;
   1.574 +    }
   1.575 +
   1.576 +    &.is-active {
   1.577 +      color: $layout-header-text-color;
   1.578 +    }
   1.579 +  }
   1.580 +
   1.581 +  .mdl-layout__tab-bar-left-button {
   1.582 +    left: 0;
   1.583 +  }
   1.584 +
   1.585 +  .mdl-layout__tab-bar-right-button {
   1.586 +    right: 0;
   1.587 +  }
   1.588 +
   1.589 +  .mdl-layout__tab {
   1.590 +    margin: 0;
   1.591 +    border: none;
   1.592 +    padding: 0 $layout-tab-desktop-padding 0 $layout-tab-desktop-padding;
   1.593 +
   1.594 +    float: left;
   1.595 +    position: relative;
   1.596 +    display: block;
   1.597 +    flex-grow: 0;
   1.598 +    flex-shrink: 0;
   1.599 +
   1.600 +    text-decoration: none;
   1.601 +    height: $layout-tab-bar-height;
   1.602 +    line-height: $layout-tab-bar-height;
   1.603 +
   1.604 +    text-align: center;
   1.605 +    font-weight: 500;
   1.606 +    font-size: $layout-tab-font-size;
   1.607 +    text-transform: uppercase;
   1.608 +
   1.609 +    color: $layout-header-tab-text-color;
   1.610 +    overflow: hidden;
   1.611 +
   1.612 +    @media screen and (max-width: $layout-screen-size-threshold) {
   1.613 +      padding: 0 $layout-tab-mobile-padding 0 $layout-tab-mobile-padding;
   1.614 +    }
   1.615 +
   1.616 +    .mdl-layout--fixed-tabs & {
   1.617 +      float: none;
   1.618 +      flex-grow: 1;
   1.619 +      padding: 0;
   1.620 +    }
   1.621 +
   1.622 +    .mdl-layout.is-upgraded &.is-active {
   1.623 +      color: $layout-header-text-color;
   1.624 +    }
   1.625 +
   1.626 +    .mdl-layout.is-upgraded &.is-active::after {
   1.627 +      height: $layout-tab-highlight-thickness;
   1.628 +      width: 100%;
   1.629 +      display: block;
   1.630 +      content: " ";
   1.631 +      bottom: 0;
   1.632 +      left: 0;
   1.633 +      position: absolute;
   1.634 +      background: $layout-header-tab-highlight;
   1.635 +      animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards;
   1.636 +      transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
   1.637 +    }
   1.638 +
   1.639 +    & .mdl-layout__tab-ripple-container {
   1.640 +      display: block;
   1.641 +      position: absolute;
   1.642 +      height: 100%;
   1.643 +      width: 100%;
   1.644 +      left: 0;
   1.645 +      top: 0;
   1.646 +      z-index: 1;
   1.647 +      overflow: hidden;
   1.648 +
   1.649 +      & .mdl-ripple {
   1.650 +        background-color: $layout-header-text-color;
   1.651 +      }
   1.652 +    }
   1.653 +  }
   1.654 +
   1.655 +  .mdl-layout__tab-panel {
   1.656 +    display: block;
   1.657 +
   1.658 +    .mdl-layout.is-upgraded & {
   1.659 +      display: none;
   1.660 +    }
   1.661 +
   1.662 +    .mdl-layout.is-upgraded &.is-active {
   1.663 +      display: block;
   1.664 +    }
   1.665 +  }