Mirrors/pebble
1
0
Fork 0
mirror of https://github.com/google/pebble.git synced 2025-05-28 05:53:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Import the pebble dev site into devsite/

Browse source
This commit is contained in:
Katharine Berry 2025-02-17 17:02:33 -08:00
parent 3b92768480
commit 527858cf4c
1359 changed files with 265431 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

242
devsite/source/_sass/elements/sectionmenu.scss Normal file
View file

@ -0,0 +1,242 @@
/**
* 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;
}
}