content/static/css/sidenav.css

/*
 * Copyright 2020 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.
 */

/*
 * Styling for when the “sidenav” experiment is active.
 */

.Documentation {
  column-gap: 2.8125rem;
  display: grid;
  grid-template-columns: 1fr minmax(0, 3fr);
}
.Documentation-nav {
  max-height: calc(100vh - 6.511rem); /* 6.511rem is the site header height */
  overflow-x: hidden;
  overflow-y: scroll;
  padding-top: 1rem;
  padding-left: 0.25rem;
  position: sticky;
  top: 6.511rem;
}
.Documentation-toc {
  margin-top: 0;
}
.Documentation-tocItem {
  display: block;
  position: relative;
}
.Documentation-tocItem + .Documentation-tocItem {
  margin-top: 0.5rem;
}
.is-withSideNav .Documentation-tocItem--index,
.is-withSideNav .Documentation-index {
  display: none;
}
.Documentation-tocItem--constants,
.Documentation-tocItem--variables,
.Documentation-tocItem--functions,
.Documentation-tocItem--types,
.Documentation-tocItem--notes {
  display: block;
}
.Documentation-build {
  grid-column: span 2;
}
/* Needed for higher specificity since ul elements rendered within documentation
   don’t have classes. */
.DocNav .DocNav-node ul {
  padding-left: 0;
}
.DocNav-node {
  padding-left: 1.25rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  position: relative;
  user-select: none;
}
.DocNav-node--selected {
  color: var(--gray-1);
  font-weight: 500;
}
.DocNav-node--selected .DocNav-node:not(.DocNav-node--selected) {
  color: var(--gray-2);
  font-weight: 400;
}
.DocNav-node--selected::before {
  border-radius: 50%;
  background-color: var(--turq-dark);
  content: '';
  display: block;
  height: 0.3125rem;
  left: 0.4688rem;
  position: absolute;
  top: 0.6875rem;
  width: 0.3125rem;
}
.DocNav-node .DocNav-node--selected::before {
  left: 0.3125rem;
  top: 0.75rem;
}
.DocNav-node--expandable.DocNav-node--selected::before {
  display: none;
}
.DocNav-node .DocNav-node {
  font-size: 0.875rem;
}
.DocNav-node .DocNav-node .DocNav-node {
  border-left: 2px solid var(--gray-9);
  padding-left: 0.5rem;
}
.DocNav-node .DocNav-node .DocNav-node--selected::before {
  display: none;
}
.DocNav-node .DocNav-node .DocNav-node--selected {
  border-left: 2px solid var(--turq-dark);
}
.DocNav a,
.DocNav a:link,
.DocNav a:visited {
  color: var(--gray-2);
  display: block;
  opacity: 1;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.DocNav a:hover {
  color: var(--gray-1);
}
.DocNav summary {
  cursor: pointer;
  list-style-type: none;
  outline: none;
  position: relative;
}
.DocNav summary::marker {
  display: none;
}
.DocNav summary::-webkit-details-marker {
  display: none;
}
.DocNav summary::before {
  border-bottom: 0.25rem solid transparent;
  border-left: 0.25rem solid #606368;
  border-right: 0;
  border-top: 0.25rem solid transparent;
  content: '';
  display: block;
  height: 0;
  left: -0.75rem;
  position: absolute;
  top: 0.5rem;
  transition: transform 0.1s linear;
  width: 0;
}
/* Expandable nodes at this level have smaller text, so adjust for that. */
.DocNav details details summary::before {
  left: -0.875rem;
  top: 0.5625rem;
}
.DocNav details[open] > summary {
  margin-bottom: 0.375em;
}
.DocNav details[open] > summary::before {
  transform: rotate(90deg);
}
/* Added to increase hit target on triangle above. */
.DocNav summary::after {
  content: '';
  display: block;
  height: 100%;
  left: -1.875rem;
  position: absolute;
  top: 0;
  width: 2rem;
}