Merge pull request #661 from h-enk/details-shortcode
Adds details shortcode
This commit is contained in:
commit
baa812caeb
|
@ -20,6 +20,7 @@
|
|||
@import "components/alerts";
|
||||
@import "components/buttons";
|
||||
@import "components/code";
|
||||
@import "components/details";
|
||||
@import "components/syntax";
|
||||
@import "components/comments";
|
||||
@import "components/forms";
|
||||
|
|
|
@ -543,3 +543,19 @@ $navbar-dark-active-color: $link-color-dark;
|
|||
[data-dark-mode] .dropdown-menu-main .dropdown-item.active {
|
||||
color: $link-color-dark;
|
||||
}
|
||||
|
||||
[data-dark-mode] details {
|
||||
border: 1px solid $border-dark;
|
||||
}
|
||||
|
||||
[data-dark-mode] summary:hover {
|
||||
background: $body-overlay-dark;
|
||||
}
|
||||
|
||||
[data-dark-mode] details[open] > summary {
|
||||
border-bottom: 1px solid $border-dark;
|
||||
}
|
||||
|
||||
[data-dark-mode] details summary::before {
|
||||
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%28222, 226, 230, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
|
|
@ -0,0 +1,77 @@
|
|||
details {
|
||||
display: block;
|
||||
border: 1px solid $gray-200;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.5rem 1rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
/*
|
||||
details summary {
|
||||
&::marker {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
summary {
|
||||
list-style: none;
|
||||
display: inline;
|
||||
width: calc(100% + 2rem);
|
||||
margin: -0.5rem -1rem 0;
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
summary:hover {
|
||||
background: $gray-100;
|
||||
}
|
||||
|
||||
details summary::before {
|
||||
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");
|
||||
transition: transform 0.35s ease;
|
||||
transform-origin: center center;
|
||||
margin-right: 0.375rem;
|
||||
}
|
||||
|
||||
details[open] > summary::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/*
|
||||
details summary > * {
|
||||
display: inline-block;
|
||||
}
|
||||
*/
|
||||
|
||||
details[open] {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
details[open] > summary {
|
||||
border-bottom: 1px solid $gray-300;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
details h2,
|
||||
details h3,
|
||||
details h4 {
|
||||
margin: 1rem 0 0.5rem;
|
||||
}
|
||||
|
||||
details p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
details ul,
|
||||
details ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
details pre {
|
||||
margin: 0 0 1rem;
|
||||
}
|
|
@ -0,0 +1,4 @@
|
|||
<details{{ with .Get 1 }} {{ . | safeHTML }}{{ end -}}>
|
||||
<summary>{{ with .Get 0 -}}{{ . | safeHTML }}{{ else -}}{{ errorf "No summary provided"}}{{ end -}}</summary>
|
||||
{{ with .Inner -}}{{ . | markdownify}}{{ else -}}{{ errorf "No details provided"}}{{ end -}}
|
||||
</details>
|
Loading…
Reference in New Issue