vault/ui/app/styles/docs.scss
claire bontempo e61bd967e3
Add docfy for addon components (#27188)
* move script to scripts folder

* add docfy to router and scripts

* add docfy to router and scripts

* fix jsdoc syntax

* add component markdown files to gitignore

* improve error handling for scripts

* tidy up remaining jsdoc syntax

* add sample jsdoc components

* add known issue info

* make not using multi-line components clearer

* make generating docs clearer

* update copy

* final how to docfy cleanup

* fix ts file @module syntax

* fix read more syntax

* make docfy typescript compatible
2024-05-29 14:06:38 -07:00

122 lines
2.2 KiB
SCSS

/**
* 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 $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: $spacing-16;
padding-bottom: $spacing-16;
}
pre,
code {
background-color: $ui-gray-100;
}
blockquote {
margin-left: 1rem;
padding: 0.5rem;
background: $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 $grey-light;
}
}
.docfy-demo {
border: 1px solid $grey-lightest;
border-radius: 6px;
padding: 1rem;
overflow: scroll;
.docfy-demo__example {
& pre,
code {
background: none;
margin: 0;
padding: 0;
}
}
}
}