vault/ui/app/styles/docs.scss

125 lines
2.4 KiB
SCSS

@use 'utils/color_variables';
@use 'utils/size_variables';
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
.docs-collapse-toggle {
.hds-button {
color: var(--token-side-nav-color-foreground-primary);
background: var(--token-side-nav-color-surface-primary);
border-color: transparent;
border-radius: var(--token-side-nav-body-list-item-border-radius);
&:hover {
background: var(--token-side-nav-color-surface-interactive-hover);
border-color: transparent;
}
}
}
#docfy-content {
font-size: 16px;
font-family: var(--token-typography-display-300-font-family);
margin-left: 1.5rem;
margin-right: 2rem;
margin-top: 1.5rem;
max-width: 90%;
h1,
h2,
h3 {
border-bottom: 1px solid color_variables.$grey-light;
padding-bottom: 0.5rem;
}
h1 {
margin-bottom: 1.15rem;
font-size: var(--token-typography-display-500-font-size);
line-height: var(--token-typography-display-500-line-height);
}
h2 {
padding-top: 1rem;
font-size: var(--token-typography-display-400-font-size);
line-height: var(--token-typography-display-400-line-height);
}
ul {
list-style: disc;
li {
margin-top: 1rem;
}
}
ul,
ol {
padding-left: size_variables.$spacing-16;
padding-bottom: size_variables.$spacing-16;
}
pre,
code {
background-color: color_variables.$ui-gray-100;
}
blockquote {
margin-left: 1rem;
padding: 0.5rem;
background: color_variables.$ui-gray-010;
border-radius: 6px;
}
code {
font-size: var(--token-typography-body-300-font-size);
font-family: var(--token-typography-font-stack-code);
}
pre code {
overflow-x: scroll;
max-width: 700px;
white-space: pre-line;
}
pre,
table {
margin-top: 1rem;
margin-bottom: 1rem;
padding: 1rem;
text-align: left;
border-radius: 6px;
}
table {
border: none;
border-collapse: collapse;
td {
padding-left: 0.5rem;
padding-right: 0.5rem;
code {
background: none;
}
}
tr {
border-bottom: 1px solid color_variables.$grey-light;
}
}
.docfy-demo {
border: 1px solid color_variables.$grey-lightest;
border-radius: 6px;
padding: 1rem;
overflow: scroll;
.docfy-demo__example {
& pre,
code {
background: none;
margin: 0;
padding: 0;
}
}
}
}