fix: remove whitespace shortcode

This commit is contained in:
Henk Verlinde 2022-02-10 10:14:36 +01:00
parent cd42b954ff
commit 151aaef5a6
4 changed files with 24 additions and 22 deletions

View File

@ -2,51 +2,54 @@ details {
display: block; display: block;
border: 1px solid $gray-300; border: 1px solid $gray-300;
border-radius: 4px; border-radius: 4px;
padding: 0.5rem 0.5rem 0; padding: 0.5rem 1rem 0;
margin: 0.5rem 0; margin: 0.5rem 0;
} }
summary { /*
details summary {
&::marker { &::marker {
content: ""; content: "";
} }
} }
*/
details summary { summary {
display: inline-block; list-style: none;
width: calc(100% + 1rem); display: inline;
margin: -0.5rem -0.5rem 0; width: calc(100% + 2rem);
padding: 0.5rem; margin: -0.5rem -1rem 0;
padding: 0.5rem 0.75rem;
} }
details summary:hover { summary::-webkit-details-marker {
display: none;
}
summary:hover {
background: $gray-100; background: $gray-100;
} }
/*
details > summary:first-of-type {
display: inline-block;
}
*/
details summary::before { details summary::before {
display: inline-block; display: inline-block;
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%2829, 45, 53, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%2829, 45, 53, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
transition: transform 0.35s ease; transition: transform 0.35s ease;
transform-origin: center center; transform-origin: center center;
margin-right: 0.125rem; margin-right: 0.375rem;
} }
details[open] > summary::before { details[open] > summary::before {
transform: rotate(90deg); transform: rotate(90deg);
} }
/*
details summary > * { details summary > * {
display: inline; display: inline-block;
} }
*/
details[open] { details[open] {
padding: 0.5rem; padding: 0.5rem 1rem;
} }
details[open] > summary { details[open] > summary {
@ -57,7 +60,7 @@ details[open] > summary {
details h2, details h2,
details h3, details h3,
details h4 { details h4 {
margin: 0 0 1rem; margin: 1rem 0 0.5rem;
} }
details p:last-child { details p:last-child {

View File

@ -26,7 +26,6 @@ module.exports = {
'./assets/scss/components/_alerts.scss', './assets/scss/components/_alerts.scss',
'./assets/scss/components/_buttons.scss', './assets/scss/components/_buttons.scss',
'./assets/scss/components/_code.scss', './assets/scss/components/_code.scss',
'./assets/scss/components/_details.scss',
'./assets/scss/components/_diagrams.scss', './assets/scss/components/_diagrams.scss',
'./assets/scss/components/_syntax.scss', './assets/scss/components/_syntax.scss',
'./assets/scss/components/_search.scss', './assets/scss/components/_search.scss',

View File

@ -50,6 +50,8 @@ Doks is a Hugo theme for building secure, fast, and SEO-ready documentation webs
{{< details "Headings" >}} {{< details "Headings" >}}
Paragraph before heading.
## Heading 2 ## Heading 2
Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize. Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize.

View File

@ -1,6 +1,4 @@
<details{{ with .Get 1 }} {{ . | safeHTML }}{{ end -}}> <details{{ with .Get 1 }} {{ . | safeHTML }}{{ end -}}>
<summary> <summary>{{ with .Get 0 -}}{{ . | safeHTML }}{{ else -}}{{ errorf "No summary provided"}}{{ end -}}</summary>
{{ with .Get 0 }}{{ . | safeHTML }}{{ else }}{{ errorf "No summary provided"}}{{ end }}
</summary>
{{ with .Inner -}}{{ . | markdownify}}{{ else -}}{{ errorf "No details provided"}}{{ end -}} {{ with .Inner -}}{{ . | markdownify}}{{ else -}}{{ errorf "No details provided"}}{{ end -}}
</details> </details>