blob: ed12687a29b7dbba850010cb98ba2564a532e606 [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('../unit/main/_meta.css');
.StyleGuide {
background-color: var(--color-background);
}
.StyleGuide > section {
align-items: center;
display: grid;
gap: 1rem 2rem;
grid-template-columns: 100%;
margin-bottom: 1rem;
}
.StyleGuide > section > header {
border-bottom: var(--border);
grid-column: 1/-1;
margin-bottom: 1rem;
padding-bottom: 1rem;
}
.StyleGuide > section > h2 {
grid-column: 1/-1;
width: max-content;
}
.StyleGuide > section > hr {
grid-column: 1/-1;
}
.StyleGuide > section > h3 {
grid-column: 1/-1;
margin: 1rem 0;
}
.StyleGuide > section > p {
grid-column: 1/-1;
}
.StyleGuide .Color,
.StyleGuide .ColorIntent {
grid-template-columns: repeat(auto-fit, 5rem [col-start] minmax(12rem, auto) [col-end]);
}
.StyleGuide .Outline {
align-items: flex-start;
}
.StyleGuide .Outline > span {
margin-top: 0.5rem;
}
@media (min-width: 80rem) {
.StyleGuide .Icon {
grid-template-columns: 10rem 8rem auto;
}
.StyleGuide .Typography,
.StyleGuide .Button,
.StyleGuide .Form,
.StyleGuide .Modal,
.StyleGuide .Message,
.StyleGuide .Breadcrumb,
.StyleGuide .Chip,
.StyleGuide .Tooltip,
.StyleGuide .Outline,
.StyleGuide .Clipboard {
grid-template-columns: 20rem auto;
}
}
@media (min-width: 112rem) {
.StyleGuide .Icon {
grid-template-columns: 10rem auto 50%;
}
.StyleGuide .Typography,
.StyleGuide .Button,
.StyleGuide .Form,
.StyleGuide .Modal,
.StyleGuide .Message,
.StyleGuide .Breadcrumb,
.StyleGuide .Chip,
.StyleGuide .Tooltip,
.StyleGuide .Outline,
.StyleGuide .Clipboard {
grid-template-columns: auto 50%;
}
}
.StringifyElement {
align-items: baseline;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 0.25rem;
}
.ElementMarkup > pre,
.StringifyElement-markup {
color: var(--color-text-subtle);
font-size: 0.875rem;
margin-top: 0.5rem;
max-width: 100%;
padding-left: 2rem;
position: relative;
}
.ElementMarkup > pre::before,
.StringifyElement-markup::before {
background: url(/static/shared/icon/content_copy_gm_grey_24dp.svg);
background-repeat: no-repeat;
background-size: contain;
content: ' ';
left: 0.5rem;
padding-left: 1rem;
position: absolute;
width: 1rem;
}
.StringifyElement-markup:active {
filter: contrast(0.9);
}
.StringifyElement-details {
color: var(--color-text-subtle);
font-size: 0.8125rem;
overflow-x: auto;
}
.GoColor-circle {
background-color: var(--color);
border: var(--border);
border-radius: 2rem;
height: 3rem;
margin: auto;
margin-bottom: 0.5rem;
width: 3rem;
}
.GoIcon-title,
.GoColor-title {
text-transform: capitalize;
}
.go-Main-navDesktop a + ul {
text-transform: capitalize;
}
.MainHeader-toggle {
display: flex;
}