/** * 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. */ $section-menu-width: 240px; .sidebar__wrapper--sectionmenu { width: $sidebar-width + $section-menu-width; } .section-menu { border-right: 1px solid $gray-08; bottom: 0; left: $sidebar-width; margin-top: $header-height; position: absolute; top: 0; width: $section-menu-width; overflow-y: auto; > ul { padding: 1em; } @include bp-max ($sidebar-hide-at) { display: none; } } .content--section-menu { margin-left: $sidebar-width + $section-menu-width; @include bp-max ($sidebar-hide-at) { margin-left: 0; } } .section-menu__header { height: $header-height; padding: 0 1em; position: fixed; top: 0; width: $section-menu-width; h3 { border-bottom: 1px solid rgba(68,68,68,0.2); font-size: $base-font-size * 1.2; font-weight: 400; margin-top: 3px; padding: $base-line-height / 1.2 0; text-transform: uppercase; width: 100%; } } .documentation-menu { background-color: $color-docs; border-bottom: 1px solid rgba(68, 68, 68, 0.3); border-right: 1px solid darken($color-docs, 10); box-shadow: rgba(68, 68, 68, 0.3) 0 5px 5px -5px; display: none; margin: -1em; a { display: block; padding: 0.5em 1em; &:hover { background-color: darken($color-docs, 5); } } } .documentation-menu__arrow { float: right; } .documentation-menu--visible { display: block; } .section-menu__item { > a { color: $gray-02; display: inline-block; font-size: 13px; font-weight: bold; margin: $base-line-height / 4 0; padding: 0.5em; } > ul { display: none; } &.open > ul { display: block; } } .section-menu__subitem { > a { color: $gray-02; display: block; font-size: 13px; font-weight: 600; margin: 0 0 0.25em 1em; text-transform: none; span { display: inline-block; padding: 0.5em; } } ul { display: none; } &.open ul { display: block; } } .section-menu__subsubitem { > a { color: $gray-02; display: block; font-size: 12px; font-weight: normal; margin: 0 0 0.25em 2em; text-transform: none; span { display: inline-block; padding: 0.5em; } } } .section-menu--dark { &, a, .section-menu__header a { color: $white; } .section-menu__item.active > a, .section-menu__subitem.active > a, .section-menu__subsubitem.active > a span { background-color: $white; border-radius: $base-border-radius; color: $gray-02; } } .section-menu--light { &, a, .section-menu__header a { color: $gray-02; } .section-menu__item.active > a, .section-menu__subitem.active > a, .section-menu__subsubitem.active > a span { background-color: $gray-02; border-radius: $base-border-radius; color: $white; } } .section-menu--guides { background-color: $color-guides; border-right-color: darken($color-guides, 10); .section-menu__header { background-color: $color-guides; } } .section-menu--docs { background-color: $color-docs; border-right-color: darken($color-docs, 10); .section-menu__header { background-color: $color-docs; } } .section-menu--community { background-color: $color-community; border-right-color: darken($color-community, 10); .section-menu__header { background-color: $color-community; } } .section-menu--sdk { background-color: $color-sdk; border-right-color: darken($color-sdk, 10); .section-menu__header { background-color: $color-sdk; } } .section-menu--more { background-color: $color-more; border-right-color: darken($color-more, 10); .section-menu__header { background-color: $color-more; } } .section-menu--getting-started { background-color: $color-getting-started; border-right-color: darken($color-getting-started, 10); .section-menu__header { background-color: $color-getting-started; } }