blob: 0fc7e18c148430ea600963711ea741ce7af38fdd [file] [log] [blame]
/*!
* Copyright 2021 The Go Authors. All rights reserved.
* Use of this source code is governed by a BSD-style
* license that can be found in the LICENSE file.
*/
@import url('./_header.css');
.go-Main {
background-color: var(--color-background);
color: var(--color-text);
display: grid;
flex-grow: 1;
grid-template-areas:
'banner'
'header'
'aside'
'nav'
'article'
'footer';
grid-template-columns: 100%;
grid-template-rows: repeat(6, min-content);
min-height: 32rem;
}
.go-Main-banner {
grid-area: banner;
}
.go-Main-header {
background-color: var(--color-background);
border-bottom: var(--border);
font-size: 0.875rem;
grid-area: header;
min-height: var(--js-unit-header-height);
padding: 0 var(--gutter);
position: sticky;
top: var(--js-unit-header-top, 0);
transition: box-shadow 0.25s linear;
z-index: 10;
}
.go-Main-header[data-fixed] {
border-bottom: none;
}
.go-Main-header[data-raised] {
border-bottom: var(--border);
}
.go-Main-nav {
background-color: var(--color-background);
border-bottom: var(--border);
font-size: 0.875rem;
grid-area: nav;
padding: 0 var(--gutter);
}
.go-Main-article {
background-color: var(--color-background);
grid-area: article;
margin: var(--gap) 0 5rem 0;
min-height: 32rem;
padding: 0 var(--gutter);
}
.go-Main-aside {
background-color: var(--color-background-accented);
border-bottom: var(--border);
font-size: 0.875rem;
grid-area: aside;
padding: 1rem var(--gutter);
}
.go-Main-aside--empty {
border-bottom: none;
padding: 0;
}
.go-Main-footer {
background-color: var(--color-background);
grid-area: footer;
padding: 0 var(--gutter);
}
.go-Main > *:empty {
border: none;
margin: 0;
padding: 0;
}
.go-Main-headerBreadcrumb {
margin-top: 1rem;
}
.go-Main-headerContent {
margin-bottom: 1rem;
position: sticky;
top: 0;
}
.go-Main-headerContent[data-fixed] {
align-items: center;
display: flex;
margin-bottom: 0;
min-height: 0;
}
@media screen and (min-width: 80rem) {
.go-Main-headerContent[data-fixed] {
justify-content: space-between;
}
}
.go-Main-headerTitle {
align-items: center;
display: flex;
gap: 0.5rem;
height: 3.5rem;
max-width: 100%;
padding-right: 1.5rem;
}
@media screen and (min-width: 80rem) {
.go-Main-headerTitle[data-fixed] {
max-width: 40%;
}
}
.go-Main-headerTitle .go-Clipboard {
display: none;
}
.go-Main-headerTitle[data-fixed] .go-Clipboard {
display: initial;
}
.go-Main-headerLogo {
--logo-height: 1.75rem;
--logo-width: calc(var(--logo-height) / 0.3768);
align-items: center;
display: flex;
margin-right: -0.5rem;
opacity: 0;
transition: opacity 0.25s ease-in-out, width 0.25s ease-out;
visibility: hidden;
width: 0;
}
.go-Main-headerLogo img {
height: var(--logo-height);
margin: -1rem 0;
width: var(--logo-width);
}
.go-Main-headerLogo[data-fixed] {
margin-right: 0;
opacity: 1;
visibility: visible;
width: var(--logo-width);
}
.go-Main-headerDetails {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0 1rem;
white-space: nowrap;
}
.go-Main-headerDetails[data-fixed] {
display: none;
}
@media screen and (min-width: 80rem) {
:root:not([data-layout='compact']) .go-Main-headerDetails[data-fixed] {
display: flex;
}
}
.go-Main-headerDetailItem {
color: var(--color-text-subtle);
display: inline;
font-size: 0.875rem;
height: 1.75rem;
line-height: 1.75rem;
}
.go-Main-headerDetailItem:not(:last-of-type)::after {
content: '|';
padding-left: 1rem;
}
.go-Main-nav--sticky {
position: sticky;
top: var(--js-sticky-header-height, 3.5rem);
transition: box-shadow 0.25s linear;
z-index: 1;
}
.go-Main-nav--fixed {
border-top: initial;
box-shadow: var(--box-shadow);
}
.go-Main-navDesktop {
display: none;
margin-top: var(--gap);
overflow-y: auto;
padding: 0.25rem;
position: sticky;
top: calc(var(--js-sticky-header-height, 3.5rem) + 1rem);
}
.go-Main-navMobile {
display: flex;
margin: 0.5rem 0;
}
.go-Main-navMobile .go-Label {
flex-grow: 1;
position: relative;
}
.go-Main-navMobile .go-Select {
padding-left: 1.75rem;
width: 100%;
}
.go-Main-navMobile .go-Label::before {
background: url(/static/shared/icon/list_gm_grey_24dp.svg);
background-repeat: no-repeat;
background-size: contain;
content: ' ';
height: 1.25rem;
left: 0.5rem;
padding-left: 1rem;
position: absolute;
top: 0.375rem;
width: 1.25rem;
}
/* Safari only */
@media not all and (min-resolution: 0.001dpcm) {
@supports (-webkit-appearance: none) {
.go-Main-navMobile .go-Select {
-webkit-appearance: none;
appearance: none;
}
}
}
@media screen and (min-width: 80rem) {
:root[data-layout='responsive'] .go-Main {
grid-template-areas:
'banner banner'
'header header'
'aside aside'
'nav article'
'footer footer';
grid-template-columns: 21.5% minmax(0, auto);
grid-template-rows: repeat(5, min-content);
}
:root[data-layout='responsive'] .go-Main-nav {
border-bottom: none;
border-top: none;
padding: 0 0 0 var(--gutter);
}
:root:not([data-layout='stacked']) .go-Main-header[data-raised] {
box-shadow: var(--box-shadow);
}
:root[data-layout='responsive'] .go-Main-article {
border-bottom: none;
border-top: none;
margin: var(--gap) 0 5rem var(--gap);
padding: 0 var(--gutter) 0 0;
}
:root[data-layout='responsive'] .go-Main-aside {
border-bottom: var(--border);
}
:root[data-layout='responsive'] .go-Main-nav--sticky {
position: initial;
}
:root[data-layout='responsive'] .go-Main-nav--fixed {
box-shadow: none;
}
:root[data-layout='responsive'] .go-Main-navDesktop {
display: block;
}
:root[data-layout='responsive'] .go-Main-navMobile {
display: none;
}
}
@media screen and (min-width: 112rem) {
:root[data-layout='responsive'] .go-Main {
grid-template-areas:
'banner banner banner'
'header header header'
'nav article aside'
'footer footer footer';
grid-template-columns: minmax(17.5%, 1fr) minmax(0, 4fr) minmax(17.5%, 1fr);
grid-template-rows: repeat(4, min-content);
}
:root[data-layout='responsive'] .go-Main-article {
margin: var(--gap) var(--gap) 5rem;
padding: 0;
}
:root[data-layout='responsive'] .go-Main-aside {
background-color: var(--color-background);
border-bottom: none;
margin: var(--gap) 0 0 0;
padding: 0 var(--gutter) 0 0;
}
}
@media screen and (min-width: 80rem) {
:root[data-layout='compact'] .go-Main {
grid-template-areas:
'banner banner'
'header .'
'header nav'
'aside aside'
'article article'
'footer footer';
grid-template-columns: 1fr auto;
grid-template-rows: repeat(6, min-content);
}
:root[data-layout='compact'] .go-Main-nav {
align-items: center;
border-bottom: var(--border);
display: flex;
top: calc((var(--js-main-header-height, 0) - var(--js-sticky-header-height, 3.5rem)) * -1);
}
:root[data-layout='compact'] .go-Main-header[data-fixed] {
box-shadow: none;
}
:root[data-layout='compact'] .go-Main-nav--sticky {
height: var(--js-sticky-header-height, 3.5rem);
position: sticky;
top: 0;
}
:root[data-layout='compact'] .go-Main-nav--fixed {
box-shadow: none;
}
:root[data-layout='compact'] .go-Main-navDesktop {
display: none;
}
:root[data-layout='compact'] .go-Main-navMobile {
display: flex;
}
}
@media print {
.go-Main-header--sticky,
.go-Main-header--sticky > :last-child,
.go-Main-nav--sticky,
.go-Main-navDesktop {
position: initial;
}
}