/** * Copyright 2025 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ $hamburger-width: $header-height; .mobile-nav { background-color: $gray-03; bottom: 0; left: 0; overflow-y: auto; position: fixed; top: $header-height; width: 90%; z-index: 200; .open { display: inherit; } .mainmenu__item a { color: #fff; display: block; font-size: 13px; font-weight: bold; height: 4.4em; margin: 0.5em 0; padding: 1.5em; position: relative; text-transform: uppercase; &:hover { background-color: lighten($gray-03, 10); } } .mainmenu__item.active a { background-color: $gray-06; color: $gray-03; } } .mobile-nav__hamburger { display: none; @include bp-max (xs) { border-bottom: 1px solid $gray-10; display: block; position: fixed; background-color: $white; left: 0; width: $hamburger-width; top: 0; height: $header-height; padding: $base-font-size / 1.5 0; font-size: $base-font-size * 2; text-align: center; color: $gray-03; &:hover, &:active { color: $gray-03; } } } .mobile-nav--home { border-left: 5px solid transparent; } .mobile-nav--tutorials { border-left: 5px solid $color-getting-started; } .mobile-nav--sdk { border-left: 5px solid $color-sdk; } .mobile-nav--guides { border-left: 5px solid $color-guides; } .mobile-nav--docs { border-left: 5px solid $color-docs; } .mobile-nav--examples { border-left: 5px solid $color-examples; } .mobile-nav--community { border-left: 5px solid $color-community; } .mobile-nav--blog { border-left: 5px solid $color-blog; } .mobile-nav--more { border-left: 5px solid $color-more; }