liquid_feedback_frontend

annotate style/mdl/layout/_layout.scss @ 1602:a3a7120a67be

find changesets by author, revision, files, or words in the commit message
Show unit and area head in sidebar
author bsw
date Mon Feb 01 14:32:47 2021 +0100 (2021-02-01)
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 // Navigation classes. Only used here for now, but we may at some point move
bsw/jbe@1309 21 // this to its own component.
bsw/jbe@1309 22 .mdl-navigation {
bsw/jbe@1309 23 display: flex;
bsw/jbe@1309 24 flex-wrap: nowrap;
bsw/jbe@1309 25 box-sizing: border-box;
bsw/jbe@1309 26 }
bsw/jbe@1309 27
bsw/jbe@1309 28 .mdl-navigation__link {
bsw/jbe@1309 29 color: $layout-text-color;
bsw/jbe@1309 30 text-decoration: none;
bsw/jbe@1309 31 margin: 0;
bsw/jbe@1309 32 @include typo-body-1(true);
bsw/jbe@1309 33
bsw/jbe@1309 34 // Align icons inside link with text
bsw/jbe@1309 35 & .material-icons {
bsw/jbe@1309 36 vertical-align: middle;
bsw/jbe@1309 37 }
bsw/jbe@1309 38 }
bsw/jbe@1309 39
bsw/jbe@1309 40 // Main layout class.
bsw/jbe@1309 41 .mdl-layout {
bsw/jbe@1309 42 width: 100%;
bsw/jbe@1309 43 height: 100%;
bsw/jbe@1309 44 display: flex;
bsw/jbe@1309 45 flex-direction: column;
bsw/jbe@1309 46 overflow-y: auto;
bsw/jbe@1309 47 overflow-x: hidden;
bsw/jbe@1309 48 position: relative;
bsw/jbe@1309 49 -webkit-overflow-scrolling: touch;
bsw/jbe@1309 50 }
bsw/jbe@1309 51
bsw/jbe@1309 52 // Utility classes for screen sizes.
bsw/jbe@1309 53 .mdl-layout.is-small-screen .mdl-layout--large-screen-only {
bsw/jbe@1309 54 display: none;
bsw/jbe@1309 55 }
bsw/jbe@1309 56
bsw/jbe@1309 57 .mdl-layout:not(.is-small-screen) .mdl-layout--small-screen-only {
bsw/jbe@1309 58 display: none;
bsw/jbe@1309 59 }
bsw/jbe@1309 60
bsw/jbe@1309 61 .mdl-layout__container {
bsw/jbe@1309 62 position: absolute;
bsw/jbe@1309 63 width: 100%;
bsw/jbe@1309 64 height: 100%;
bsw/jbe@1309 65 }
bsw/jbe@1309 66
bsw/jbe@1309 67
bsw/jbe@1309 68 // Optional utility classes for formatting special blocks in this component.
bsw/jbe@1309 69 .mdl-layout__title,
bsw/jbe@1309 70 .mdl-layout-title {
bsw/jbe@1309 71 display: block;
bsw/jbe@1309 72 position: relative;
bsw/jbe@1309 73
bsw/jbe@1309 74 @include typo-title();
bsw/jbe@1309 75 font-weight: 400;
bsw/jbe@1309 76 box-sizing: border-box;
bsw/jbe@1309 77 }
bsw/jbe@1309 78
bsw/jbe@1309 79 .mdl-layout-spacer {
bsw/jbe@1309 80 flex-grow: 1;
bsw/jbe@1309 81 }
bsw/jbe@1309 82
bsw/jbe@1309 83
bsw/jbe@1309 84 // Drawer.
bsw/jbe@1309 85 .mdl-layout__drawer {
bsw/jbe@1309 86 display: flex;
bsw/jbe@1309 87 flex-direction: column;
bsw/jbe@1309 88 flex-wrap: nowrap;
bsw/jbe@1309 89
bsw/jbe@1309 90 width: $layout-drawer-width;
bsw/jbe@1309 91 height: 100%;
bsw/jbe@1309 92 max-height: 100%;
bsw/jbe@1309 93
bsw/jbe@1309 94 position: absolute;
bsw/jbe@1309 95 top: 0;
bsw/jbe@1309 96 left: 0;
bsw/jbe@1309 97
bsw/jbe@1309 98 @include shadow-2dp();
bsw/jbe@1309 99
bsw/jbe@1309 100 box-sizing: border-box;
bsw/jbe@1309 101 border-right: 1px solid $layout-drawer-border-color;
bsw/jbe@1309 102 background: $layout-drawer-bg-color;
bsw/jbe@1309 103
bsw/jbe@1309 104 // Transform offscreen.
bsw/jbe@1309 105 transform: translateX(-$layout-drawer-width - 10px);
bsw/jbe@1309 106 transform-style: preserve-3d;
bsw/jbe@1309 107 will-change: transform;
bsw/jbe@1309 108
bsw/jbe@1309 109 @include material-animation-default();
bsw/jbe@1309 110 transition-property: transform;
bsw/jbe@1309 111
bsw/jbe@1309 112 color: $layout-text-color;
bsw/jbe@1309 113
bsw/jbe@1309 114 overflow: visible;
bsw/jbe@1309 115 overflow-y: auto;
bsw/jbe@1309 116
bsw/jbe@1309 117 z-index: 5;
bsw/jbe@1309 118
bsw/jbe@1309 119 &.is-visible {
bsw/jbe@1309 120 transform: translateX(0);
bsw/jbe@1309 121 & ~ .mdl-layout__content.mdl-layout__content {
bsw/jbe@1309 122 overflow: hidden;
bsw/jbe@1309 123 }
bsw/jbe@1309 124 }
bsw/jbe@1309 125
bsw/jbe@1309 126 & > * {
bsw/jbe@1309 127 flex-shrink: 0;
bsw/jbe@1309 128 }
bsw/jbe@1309 129
bsw/jbe@1309 130 & > .mdl-layout__title,
bsw/jbe@1309 131 & > .mdl-layout-title {
bsw/jbe@1309 132 line-height: $layout-desktop-header-height;
bsw/jbe@1309 133 padding-left: $layout-header-desktop-indent;
bsw/jbe@1309 134
bsw/jbe@1309 135 @media screen and (max-width: $layout-screen-size-threshold) {
bsw/jbe@1309 136 line-height: $layout-mobile-header-height;
bsw/jbe@1309 137 padding-left: $layout-header-mobile-indent;
bsw/jbe@1309 138 }
bsw/jbe@1309 139 }
bsw/jbe@1309 140
bsw/jbe@1309 141 & .mdl-navigation {
bsw/jbe@1309 142 flex-direction: column;
bsw/jbe@1309 143 align-items: stretch;
bsw/jbe@1309 144 padding-top: 16px;
bsw/jbe@1309 145
bsw/jbe@1309 146 & .mdl-navigation__link {
bsw/jbe@1309 147 display: block;
bsw/jbe@1309 148 flex-shrink: 0;
bsw/jbe@1309 149 padding: 16px $layout-header-desktop-indent;
bsw/jbe@1309 150 margin: 0;
bsw/jbe@1309 151 color: $layout-drawer-navigation-color;
bsw/jbe@1309 152
bsw/jbe@1309 153 @media screen and (max-width: $layout-screen-size-threshold) {
bsw/jbe@1309 154 padding: 16px $layout-header-mobile-indent;
bsw/jbe@1309 155 }
bsw/jbe@1309 156
bsw/jbe@1309 157 &:hover {
bsw/jbe@1309 158 background-color: $layout-nav-color;
bsw/jbe@1309 159 }
bsw/jbe@1309 160
bsw/jbe@1309 161 &--current {
bsw/jbe@1309 162 background-color: $layout-drawer-navigation-link-active-background;
bsw/jbe@1309 163 color: $layout-drawer-navigation-link-active-color;
bsw/jbe@1309 164 }
bsw/jbe@1309 165 }
bsw/jbe@1309 166 }
bsw/jbe@1309 167
bsw/jbe@1309 168 @media screen and (min-width: $layout-screen-size-threshold + 1px) {
bsw/jbe@1309 169 .mdl-layout--fixed-drawer > & {
bsw/jbe@1309 170 transform: translateX(0);
bsw/jbe@1309 171 }
bsw/jbe@1309 172 }
bsw/jbe@1309 173 }
bsw/jbe@1309 174
bsw/jbe@1309 175
bsw/jbe@1309 176 // Drawer button.
bsw/jbe@1309 177 // TODO(sgomes): Replace with an icon button when we have that component.
bsw/jbe@1309 178 .mdl-layout__drawer-button {
bsw/jbe@1309 179 display: block;
bsw/jbe@1309 180
bsw/jbe@1309 181 position: absolute;
bsw/jbe@1309 182 height: $layout-drawer-button-desktop-size;
bsw/jbe@1309 183 width: $layout-drawer-button-desktop-size;
bsw/jbe@1309 184 border: 0;
bsw/jbe@1309 185
bsw/jbe@1309 186 flex-shrink: 0;
bsw/jbe@1309 187
bsw/jbe@1309 188 overflow: hidden;
bsw/jbe@1309 189 text-align: center;
bsw/jbe@1309 190 cursor: pointer;
bsw/jbe@1309 191 font-size: 26px;
bsw/jbe@1309 192 line-height: $layout-mobile-header-height;
bsw/jbe@1309 193 font-family: Helvetica, Arial, sans-serif;
bsw/jbe@1309 194 margin: ($layout-mobile-header-height - $layout-drawer-button-desktop-size) 12px;
bsw/jbe@1309 195 top: 0;
bsw/jbe@1309 196 left: 0;
bsw/jbe@1309 197 color: $layout-header-text-color;
bsw/jbe@1309 198
bsw/jbe@1309 199 z-index: 4;
bsw/jbe@1309 200
bsw/jbe@1309 201 .mdl-layout__header & {
bsw/jbe@1309 202 position: absolute;
bsw/jbe@1309 203 color: $layout-header-text-color;
bsw/jbe@1309 204 background-color: inherit;
bsw/jbe@1309 205
bsw/jbe@1309 206 @media screen and (max-width: $layout-screen-size-threshold) {
bsw/jbe@1309 207 margin: 4px;
bsw/jbe@1309 208 }
bsw/jbe@1309 209 }
bsw/jbe@1309 210
bsw/jbe@1309 211 @media screen and (max-width: $layout-screen-size-threshold) {
bsw/jbe@1309 212 margin: 4px;
bsw/jbe@1309 213 color: rgba(0, 0, 0, 0.5);
bsw/jbe@1309 214 }
bsw/jbe@1309 215
bsw/jbe@1309 216 @media screen and (min-width: $layout-screen-size-threshold + 1px) {
bsw/jbe@1309 217 line-height: 54px;
bsw/jbe@1309 218
bsw/jbe@1309 219 .mdl-layout--no-desktop-drawer-button &,
bsw/jbe@1309 220 .mdl-layout--fixed-drawer > &,
bsw/jbe@1309 221 .mdl-layout--no-drawer-button & {
bsw/jbe@1309 222 display: none;
bsw/jbe@1309 223 }
bsw/jbe@1309 224 }
bsw/jbe@1309 225 }
bsw/jbe@1309 226
bsw/jbe@1309 227 .mdl-layout__header {
bsw/jbe@1309 228 display: flex;
bsw/jbe@1309 229 flex-direction: column;
bsw/jbe@1309 230 flex-wrap: nowrap;
bsw/jbe@1309 231 justify-content: flex-start;
bsw/jbe@1309 232 box-sizing: border-box;
bsw/jbe@1309 233 flex-shrink: 0;
bsw/jbe@1309 234
bsw/jbe@1309 235 width: 100%;
bsw/jbe@1309 236 margin: 0;
bsw/jbe@1309 237 padding: 0;
bsw/jbe@1309 238 border: none;
bsw/jbe@1309 239 min-height: $layout-desktop-header-height;
bsw/jbe@1309 240 max-height: 1000px;
bsw/jbe@1309 241 z-index: 3;
bsw/jbe@1309 242
bsw/jbe@1309 243 background-color: $layout-header-bg-color;
bsw/jbe@1309 244 color: $layout-header-text-color;
bsw/jbe@1309 245
bsw/jbe@1309 246 @include shadow-2dp();
bsw/jbe@1309 247 @include material-animation-default();
bsw/jbe@1309 248 transition-property: max-height, box-shadow;
bsw/jbe@1309 249
bsw/jbe@1309 250 @media screen and (max-width: $layout-screen-size-threshold) {
bsw/jbe@1309 251 min-height: $layout-mobile-header-height;
bsw/jbe@1309 252 }
bsw/jbe@1309 253
bsw/jbe@1309 254 .mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen) > & {
bsw/jbe@1309 255 margin-left: $layout-drawer-width;
bsw/jbe@1309 256 width: calc(100% - #{$layout-drawer-width});
bsw/jbe@1309 257 }
bsw/jbe@1309 258
bsw/jbe@1309 259 @media screen and (min-width: $layout-screen-size-threshold + 1px) {
bsw/jbe@1309 260 .mdl-layout--fixed-drawer > & {
bsw/jbe@1309 261 .mdl-layout__header-row {
bsw/jbe@1309 262 padding-left: 40px;
bsw/jbe@1309 263 }
bsw/jbe@1309 264 }
bsw/jbe@1309 265 }
bsw/jbe@1309 266
bsw/jbe@1309 267 & > .mdl-layout-icon {
bsw/jbe@1309 268 position: absolute;
bsw/jbe@1309 269 left: $layout-header-desktop-indent;
bsw/jbe@1309 270 top: ($layout-desktop-header-height - $layout-header-icon-size) / 2;
bsw/jbe@1309 271 height: $layout-header-icon-size;
bsw/jbe@1309 272 width: $layout-header-icon-size;
bsw/jbe@1309 273 overflow: hidden;
bsw/jbe@1309 274 z-index: 3;
bsw/jbe@1309 275 display: block;
bsw/jbe@1309 276
bsw/jbe@1309 277 @media screen and (max-width: $layout-screen-size-threshold) {
bsw/jbe@1309 278 left: $layout-header-mobile-indent;
bsw/jbe@1309 279 top: ($layout-mobile-header-height - $layout-header-icon-size) / 2;
bsw/jbe@1309 280 }
bsw/jbe@1309 281 }
bsw/jbe@1309 282
bsw/jbe@1309 283 .mdl-layout.has-drawer & > .mdl-layout-icon {
bsw/jbe@1309 284 display: none;
bsw/jbe@1309 285 }
bsw/jbe@1309 286
bsw/jbe@1309 287 &.is-compact {
bsw/jbe@1309 288 max-height: $layout-desktop-header-height;
bsw/jbe@1309 289
bsw/jbe@1309 290 @media screen and (max-width: $layout-screen-size-threshold) {
bsw/jbe@1309 291 max-height: $layout-mobile-header-height;
bsw/jbe@1309 292 }
bsw/jbe@1309 293 }
bsw/jbe@1309 294
bsw/jbe@1309 295 &.is-compact.has-tabs {
bsw/jbe@1309 296 height: $layout-desktop-header-height + $layout-tab-bar-height;
bsw/jbe@1309 297
bsw/jbe@1309 298 @media screen and (max-width: $layout-screen-size-threshold) {
bsw/jbe@1309 299 min-height: $layout-mobile-header-height + $layout-tab-bar-height;
bsw/jbe@1309 300 }
bsw/jbe@1309 301 }
bsw/jbe@1309 302
bsw/jbe@1309 303 @media screen and (max-width: $layout-screen-size-threshold) {
bsw/jbe@1309 304 & {
bsw/jbe@1309 305 display: none;
bsw/jbe@1309 306 }
bsw/jbe@1309 307
bsw/jbe@1309 308 .mdl-layout--fixed-header > & {
bsw/jbe@1309 309 display: flex;
bsw/jbe@1309 310 }
bsw/jbe@1309 311 }
bsw/jbe@1309 312 }
bsw/jbe@1309 313
bsw/jbe@1309 314 .mdl-layout__header--transparent.mdl-layout__header--transparent {
bsw/jbe@1309 315 background-color: transparent;
bsw/jbe@1309 316 box-shadow: none;
bsw/jbe@1309 317 }
bsw/jbe@1309 318
bsw/jbe@1309 319 .mdl-layout__header--seamed {
bsw/jbe@1309 320 box-shadow: none;
bsw/jbe@1309 321 }
bsw/jbe@1309 322
bsw/jbe@1309 323 .mdl-layout__header--scroll {
bsw/jbe@1309 324 box-shadow: none;
bsw/jbe@1309 325 }
bsw/jbe@1309 326
bsw/jbe@1309 327 .mdl-layout__header--waterfall {
bsw/jbe@1309 328 box-shadow: none;
bsw/jbe@1309 329 overflow: hidden;
bsw/jbe@1309 330
bsw/jbe@1309 331 &.is-casting-shadow {
bsw/jbe@1309 332 @include shadow-2dp();
bsw/jbe@1309 333 }
bsw/jbe@1309 334
bsw/jbe@1309 335 &.mdl-layout__header--waterfall-hide-top {
bsw/jbe@1309 336 justify-content: flex-end;
bsw/jbe@1309 337 }
bsw/jbe@1309 338 }
bsw/jbe@1309 339
bsw/jbe@1309 340 .mdl-layout__header-row {
bsw/jbe@1309 341 display: flex;
bsw/jbe@1309 342 flex-direction: row;
bsw/jbe@1309 343 flex-wrap: nowrap;
bsw/jbe@1309 344 flex-shrink: 0;
bsw/jbe@1309 345 box-sizing: border-box;
bsw/jbe@1309 346 align-self: stretch;
bsw/jbe@1309 347 align-items: center;
bsw/jbe@1309 348 height: $layout-header-desktop-row-height;
bsw/jbe@1309 349 margin: 0;
bsw/jbe@1309 350 padding: 0 $layout-header-desktop-indent 0 $layout-header-desktop-baseline;
bsw/jbe@1309 351
bsw/jbe@1309 352 .mdl-layout--no-drawer-button & {
bsw/jbe@1309 353 padding-left: $layout-header-desktop-indent;
bsw/jbe@1309 354 }
bsw/jbe@1309 355
bsw/jbe@1309 356 @media screen and (min-width: $layout-screen-size-threshold + 1px) {
bsw/jbe@1309 357 .mdl-layout--no-desktop-drawer-button & {
bsw/jbe@1309 358 padding-left: $layout-header-desktop-indent;
bsw/jbe@1309 359 }
bsw/jbe@1309 360 }
bsw/jbe@1309 361
bsw/jbe@1309 362 @media screen and (max-width: $layout-screen-size-threshold) {
bsw/jbe@1309 363 height: $layout-header-mobile-row-height;
bsw/jbe@1309 364 padding: 0 $layout-header-mobile-indent 0 $layout-header-mobile-baseline;
bsw/jbe@1309 365
bsw/jbe@1309 366 .mdl-layout--no-drawer-button & {
bsw/jbe@1309 367 padding-left: $layout-header-mobile-indent;
bsw/jbe@1309 368 }
bsw/jbe@1309 369 }
bsw/jbe@1309 370
bsw/jbe@1309 371 & > * {
bsw/jbe@1309 372 flex-shrink: 0;
bsw/jbe@1309 373 }
bsw/jbe@1309 374
bsw/jbe@1309 375 .mdl-layout__header--scroll & {
bsw/jbe@1309 376 width: 100%;
bsw/jbe@1309 377 }
bsw/jbe@1309 378
bsw/jbe@1309 379 & .mdl-navigation {
bsw/jbe@1309 380 margin: 0;
bsw/jbe@1309 381 padding: 0;
bsw/jbe@1309 382 height: $layout-header-desktop-row-height;
bsw/jbe@1309 383 flex-direction: row;
bsw/jbe@1309 384 align-items: center;
bsw/jbe@1309 385
bsw/jbe@1309 386 @media screen and (max-width: $layout-screen-size-threshold) {
bsw/jbe@1309 387 height: $layout-header-mobile-row-height;
bsw/jbe@1309 388 }
bsw/jbe@1309 389 }
bsw/jbe@1309 390
bsw/jbe@1309 391 & .mdl-navigation__link {
bsw/jbe@1309 392 display: block;
bsw/jbe@1309 393 color: $layout-header-text-color;
bsw/jbe@1309 394 line-height: $layout-header-desktop-row-height;
bsw/jbe@1309 395 padding: 0 24px;
bsw/jbe@1309 396
bsw/jbe@1309 397 @media screen and (max-width: $layout-screen-size-threshold) {
bsw/jbe@1309 398 line-height: $layout-header-mobile-row-height;
bsw/jbe@1309 399 padding: 0 $layout-header-mobile-indent;
bsw/jbe@1309 400 }
bsw/jbe@1309 401 }
bsw/jbe@1309 402 }
bsw/jbe@1309 403
bsw/jbe@1309 404 // Obfuscator.
bsw/jbe@1309 405 .mdl-layout__obfuscator {
bsw/jbe@1309 406 background-color: transparent;
bsw/jbe@1309 407 position: absolute;
bsw/jbe@1309 408 top: 0;
bsw/jbe@1309 409 left: 0;
bsw/jbe@1309 410 height: 100%;
bsw/jbe@1309 411 width: 100%;
bsw/jbe@1309 412 z-index: 4;
bsw/jbe@1309 413 visibility: hidden;
bsw/jbe@1309 414 transition-property: background-color;
bsw/jbe@1309 415 @include material-animation-default();
bsw/jbe@1309 416
bsw/jbe@1309 417 &.is-visible {
bsw/jbe@1309 418 background-color: rgba(0, 0, 0, 0.5);
bsw/jbe@1309 419 visibility: visible;
bsw/jbe@1309 420 }
bsw/jbe@1309 421
bsw/jbe@1309 422 @supports (pointer-events: auto) {
bsw/jbe@1309 423 background-color: rgba(0, 0, 0, 0.5);
bsw/jbe@1309 424 opacity: 0;
bsw/jbe@1309 425 transition-property: opacity;
bsw/jbe@1309 426 visibility: visible;
bsw/jbe@1309 427 pointer-events: none;
bsw/jbe@1309 428 &.is-visible {
bsw/jbe@1309 429 pointer-events: auto;
bsw/jbe@1309 430 opacity: 1;
bsw/jbe@1309 431 }
bsw/jbe@1309 432 }
bsw/jbe@1309 433 }
bsw/jbe@1309 434
bsw/jbe@1309 435
bsw/jbe@1309 436 // Content.
bsw/jbe@1309 437 .mdl-layout__content {
bsw/jbe@1309 438 // Fix IE10 bug.
bsw/jbe@1309 439 -ms-flex: 0 1 auto;
bsw/jbe@1309 440
bsw/jbe@1309 441 position: relative;
bsw/jbe@1309 442 display: inline-block;
bsw/jbe@1309 443 overflow-y: auto;
bsw/jbe@1309 444 overflow-x: hidden;
bsw/jbe@1309 445 flex-grow: 1;
bsw/jbe@1309 446 z-index: 1;
bsw/jbe@1309 447 -webkit-overflow-scrolling: touch;
bsw/jbe@1309 448
bsw/jbe@1309 449 .mdl-layout--fixed-drawer > & {
bsw/jbe@1309 450 margin-left: $layout-drawer-width;
bsw/jbe@1309 451 }
bsw/jbe@1309 452
bsw/jbe@1309 453 .mdl-layout__container.has-scrolling-header & {
bsw/jbe@1309 454 overflow: visible;
bsw/jbe@1309 455 }
bsw/jbe@1309 456
bsw/jbe@1309 457 @media screen and (max-width: $layout-screen-size-threshold) {
bsw/jbe@1309 458 .mdl-layout--fixed-drawer > & {
bsw/jbe@1309 459 margin-left: 0;
bsw/jbe@1309 460 }
bsw/jbe@1309 461
bsw/jbe@1309 462 .mdl-layout__container.has-scrolling-header & {
bsw/jbe@1309 463 overflow-y: auto;
bsw/jbe@1309 464 overflow-x: hidden;
bsw/jbe@1309 465 }
bsw/jbe@1309 466 }
bsw/jbe@1309 467 }
bsw/jbe@1309 468
bsw/jbe@1309 469 // Tabs.
bsw/jbe@1309 470 .mdl-layout__tab-bar {
bsw/jbe@1309 471 height: $layout-tab-bar-height * 2;
bsw/jbe@1309 472 margin: 0;
bsw/jbe@1309 473 width: calc(100% -
bsw/jbe@1309 474 #{(($layout-header-desktop-baseline - $layout-tab-desktop-padding) * 2)});
bsw/jbe@1309 475 padding: 0 0 0
bsw/jbe@1309 476 ($layout-header-desktop-baseline - $layout-tab-desktop-padding);
bsw/jbe@1309 477 display: flex;
bsw/jbe@1309 478 background-color: $layout-header-bg-color;
bsw/jbe@1309 479 overflow-y: hidden;
bsw/jbe@1309 480 overflow-x: scroll;
bsw/jbe@1309 481
bsw/jbe@1309 482 &::-webkit-scrollbar {
bsw/jbe@1309 483 display: none;
bsw/jbe@1309 484 }
bsw/jbe@1309 485
bsw/jbe@1309 486 .mdl-layout--no-drawer-button & {
bsw/jbe@1309 487 padding-left: $layout-header-desktop-indent - $layout-tab-desktop-padding;
bsw/jbe@1309 488 width: calc(100% -
bsw/jbe@1309 489 #{(($layout-header-desktop-indent - $layout-tab-desktop-padding) * 2)});
bsw/jbe@1309 490 }
bsw/jbe@1309 491
bsw/jbe@1309 492 @media screen and (min-width: $layout-screen-size-threshold + 1px) {
bsw/jbe@1309 493 .mdl-layout--no-desktop-drawer-button & {
bsw/jbe@1309 494 padding-left: $layout-header-desktop-indent - $layout-tab-desktop-padding;
bsw/jbe@1309 495 width: calc(100% -
bsw/jbe@1309 496 #{(($layout-header-desktop-indent - $layout-tab-desktop-padding) * 2)});
bsw/jbe@1309 497 }
bsw/jbe@1309 498 }
bsw/jbe@1309 499
bsw/jbe@1309 500 @media screen and (max-width: $layout-screen-size-threshold) {
bsw/jbe@1309 501 width: calc(100% -
bsw/jbe@1309 502 #{($layout-header-mobile-baseline - $layout-tab-mobile-padding)});
bsw/jbe@1309 503 padding: 0 0 0
bsw/jbe@1309 504 ($layout-header-mobile-baseline - $layout-tab-mobile-padding);
bsw/jbe@1309 505
bsw/jbe@1309 506 .mdl-layout--no-drawer-button & {
bsw/jbe@1309 507 width: calc(100% -
bsw/jbe@1309 508 #{(($layout-header-mobile-indent - $layout-tab-mobile-padding) * 2)});
bsw/jbe@1309 509 padding-left: $layout-header-mobile-indent - $layout-tab-mobile-padding;
bsw/jbe@1309 510 }
bsw/jbe@1309 511 }
bsw/jbe@1309 512
bsw/jbe@1309 513 .mdl-layout--fixed-tabs & {
bsw/jbe@1309 514 padding: 0;
bsw/jbe@1309 515 overflow: hidden;
bsw/jbe@1309 516 width: 100%;
bsw/jbe@1309 517 }
bsw/jbe@1309 518 }
bsw/jbe@1309 519
bsw/jbe@1309 520 .mdl-layout__tab-bar-container {
bsw/jbe@1309 521 position: relative;
bsw/jbe@1309 522 height: $layout-tab-bar-height;
bsw/jbe@1309 523 width: 100%;
bsw/jbe@1309 524 border: none;
bsw/jbe@1309 525 margin: 0;
bsw/jbe@1309 526 z-index: 2;
bsw/jbe@1309 527 flex-grow: 0;
bsw/jbe@1309 528 flex-shrink: 0;
bsw/jbe@1309 529 overflow: hidden;
bsw/jbe@1309 530
bsw/jbe@1309 531 .mdl-layout__container > & {
bsw/jbe@1309 532 position: absolute;
bsw/jbe@1309 533 top: 0;
bsw/jbe@1309 534 left: 0;
bsw/jbe@1309 535 }
bsw/jbe@1309 536 }
bsw/jbe@1309 537
bsw/jbe@1309 538 .mdl-layout__tab-bar-button {
bsw/jbe@1309 539 display: inline-block;
bsw/jbe@1309 540 position: absolute;
bsw/jbe@1309 541 top: 0;
bsw/jbe@1309 542 height: $layout-tab-bar-height;
bsw/jbe@1309 543 width: $layout-header-desktop-baseline - $layout-tab-desktop-padding;
bsw/jbe@1309 544 z-index: 4;
bsw/jbe@1309 545 text-align: center;
bsw/jbe@1309 546 background-color: $layout-header-bg-color;
bsw/jbe@1309 547 color: transparent;
bsw/jbe@1309 548 cursor: pointer;
bsw/jbe@1309 549 user-select: none;
bsw/jbe@1309 550
bsw/jbe@1309 551 .mdl-layout--no-desktop-drawer-button &,
bsw/jbe@1309 552 .mdl-layout--no-drawer-button & {
bsw/jbe@1309 553 width: $layout-header-desktop-indent - $layout-tab-desktop-padding;
bsw/jbe@1309 554
bsw/jbe@1309 555 & .material-icons {
bsw/jbe@1309 556 position: relative;
bsw/jbe@1309 557 left: ($layout-header-desktop-indent - $layout-tab-desktop-padding - 24px) / 2;
bsw/jbe@1309 558 }
bsw/jbe@1309 559 }
bsw/jbe@1309 560
bsw/jbe@1309 561 @media screen and (max-width: $layout-screen-size-threshold) {
bsw/jbe@1309 562 width: $layout-header-mobile-baseline - $layout-tab-mobile-padding;
bsw/jbe@1309 563 }
bsw/jbe@1309 564
bsw/jbe@1309 565 .mdl-layout--fixed-tabs & {
bsw/jbe@1309 566 display: none;
bsw/jbe@1309 567 }
bsw/jbe@1309 568
bsw/jbe@1309 569 & .material-icons {
bsw/jbe@1309 570 line-height: $layout-tab-bar-height;
bsw/jbe@1309 571 }
bsw/jbe@1309 572
bsw/jbe@1309 573 &.is-active {
bsw/jbe@1309 574 color: $layout-header-text-color;
bsw/jbe@1309 575 }
bsw/jbe@1309 576 }
bsw/jbe@1309 577
bsw/jbe@1309 578 .mdl-layout__tab-bar-left-button {
bsw/jbe@1309 579 left: 0;
bsw/jbe@1309 580 }
bsw/jbe@1309 581
bsw/jbe@1309 582 .mdl-layout__tab-bar-right-button {
bsw/jbe@1309 583 right: 0;
bsw/jbe@1309 584 }
bsw/jbe@1309 585
bsw/jbe@1309 586 .mdl-layout__tab {
bsw/jbe@1309 587 margin: 0;
bsw/jbe@1309 588 border: none;
bsw/jbe@1309 589 padding: 0 $layout-tab-desktop-padding 0 $layout-tab-desktop-padding;
bsw/jbe@1309 590
bsw/jbe@1309 591 float: left;
bsw/jbe@1309 592 position: relative;
bsw/jbe@1309 593 display: block;
bsw/jbe@1309 594 flex-grow: 0;
bsw/jbe@1309 595 flex-shrink: 0;
bsw/jbe@1309 596
bsw/jbe@1309 597 text-decoration: none;
bsw/jbe@1309 598 height: $layout-tab-bar-height;
bsw/jbe@1309 599 line-height: $layout-tab-bar-height;
bsw/jbe@1309 600
bsw/jbe@1309 601 text-align: center;
bsw/jbe@1309 602 font-weight: 500;
bsw/jbe@1309 603 font-size: $layout-tab-font-size;
bsw/jbe@1309 604 text-transform: uppercase;
bsw/jbe@1309 605
bsw/jbe@1309 606 color: $layout-header-tab-text-color;
bsw/jbe@1309 607 overflow: hidden;
bsw/jbe@1309 608
bsw/jbe@1309 609 @media screen and (max-width: $layout-screen-size-threshold) {
bsw/jbe@1309 610 padding: 0 $layout-tab-mobile-padding 0 $layout-tab-mobile-padding;
bsw/jbe@1309 611 }
bsw/jbe@1309 612
bsw/jbe@1309 613 .mdl-layout--fixed-tabs & {
bsw/jbe@1309 614 float: none;
bsw/jbe@1309 615 flex-grow: 1;
bsw/jbe@1309 616 padding: 0;
bsw/jbe@1309 617 }
bsw/jbe@1309 618
bsw/jbe@1309 619 .mdl-layout.is-upgraded &.is-active {
bsw/jbe@1309 620 color: $layout-header-text-color;
bsw/jbe@1309 621 }
bsw/jbe@1309 622
bsw/jbe@1309 623 .mdl-layout.is-upgraded &.is-active::after {
bsw/jbe@1309 624 height: $layout-tab-highlight-thickness;
bsw/jbe@1309 625 width: 100%;
bsw/jbe@1309 626 display: block;
bsw/jbe@1309 627 content: " ";
bsw/jbe@1309 628 bottom: 0;
bsw/jbe@1309 629 left: 0;
bsw/jbe@1309 630 position: absolute;
bsw/jbe@1309 631 background: $layout-header-tab-highlight;
bsw/jbe@1309 632 animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards;
bsw/jbe@1309 633 transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
bsw/jbe@1309 634 }
bsw/jbe@1309 635
bsw/jbe@1309 636 & .mdl-layout__tab-ripple-container {
bsw/jbe@1309 637 display: block;
bsw/jbe@1309 638 position: absolute;
bsw/jbe@1309 639 height: 100%;
bsw/jbe@1309 640 width: 100%;
bsw/jbe@1309 641 left: 0;
bsw/jbe@1309 642 top: 0;
bsw/jbe@1309 643 z-index: 1;
bsw/jbe@1309 644 overflow: hidden;
bsw/jbe@1309 645
bsw/jbe@1309 646 & .mdl-ripple {
bsw/jbe@1309 647 background-color: $layout-header-text-color;
bsw/jbe@1309 648 }
bsw/jbe@1309 649 }
bsw/jbe@1309 650 }
bsw/jbe@1309 651
bsw/jbe@1309 652 .mdl-layout__tab-panel {
bsw/jbe@1309 653 display: block;
bsw/jbe@1309 654
bsw/jbe@1309 655 .mdl-layout.is-upgraded & {
bsw/jbe@1309 656 display: none;
bsw/jbe@1309 657 }
bsw/jbe@1309 658
bsw/jbe@1309 659 .mdl-layout.is-upgraded &.is-active {
bsw/jbe@1309 660 display: block;
bsw/jbe@1309 661 }
bsw/jbe@1309 662 }

Impressum / About Us