resolves #178 adjust styles for details element

- indent content of details element
- fix top margin of content
- use custom marker to get consistent appearance and behavior
- fully style details element with result role
- change cursor for summary element to pointer
- prevent WebKit from highlighting text of summary element when activated

diff --git a/preview-src/index.adoc b/preview-src/index.adoc
index 38fc5e9..b91d1ad 100644 (file)
--- a/preview-src/index.adoc
+++ b/preview-src/index.adoc
@@ -50,6 +50,25 @@ This is an example paragraph.
 [example]
 This is an example paragraph.
 
+++++
+<details>
+<summary class="title">Summary</summary>
+<div class="content">
+<div class="paragraph">
+<p>Details</p>
+</div>
+<details class="result">
+<summary class="title">Summary</summary>
+<div class="content">
+<div class="paragraph">
+<p>Details</p>
+</div>
+</div>
+</details>
+</div>
+</details>
+++++
+
 === Some Code
 
 How about some code?

diff --git a/src/css/base.css b/src/css/base.css
index d0fdaae..d67a167 100644 (file)
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -71,6 +71,11 @@ button::-moz-focus-inner {
   padding: 0;
 }
 
+summary {
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
 table {
   border-collapse: collapse;
   word-wrap: normal; /* table widths aren't computed as expected when word-wrap is enabled */

diff --git a/src/css/doc.css b/src/css/doc.css
index 444d546..1aadb59 100644 (file)
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -537,14 +537,75 @@ h1.page + aside.toc.embedded {
   padding-bottom: 0;
 }
 
-.doc .exampleblock > .content {
+.doc details {
+  margin-left: 1rem;
+}
+
+.doc details > summary {
+  display: block;
+  position: relative;
+  line-height: var(--doc-line-height);
+  margin-bottom: 0.5rem;
+}
+
+.doc details > summary::before {
+  content: "";
+  border: solid transparent;
+  border-left-color: currentColor;
+  border-width: 0.3em 0 0.3em 0.5em;
+  position: absolute;
+  top: calc((var(--doc-line-height) * 0.5 - 0.3) * 1em);
+  left: -1rem;
+  transform: translateX(15%);
+}
+
+.doc details[open] > summary::before {
+  border: solid transparent;
+  border-top-color: currentColor;
+  border-width: 0.5rem 0.3rem 0;
+  transform: translateY(15%);
+}
+
+.doc details > summary::after {
+  content: "";
+  width: 1rem;
+  height: 1em;
+  position: absolute;
+  top: calc((var(--doc-line-height) * 0.5 - 0.5) * 1em);
+  left: -1rem;
+}
+
+.doc details.result {
+  margin-top: 0.25rem;
+}
+
+.doc details.result > summary {
+  color: var(--caption-font-color);
+  font-style: italic;
+  margin-bottom: 0;
+}
+
+.doc details.result > .content {
+  margin-left: -1rem;
+}
+
+.doc .exampleblock > .content,
+.doc details.result > .content {
   background: var(--example-background);
   border: 0.25rem solid var(--example-border-color);
   border-radius: 0.5rem;
   padding: 0.75rem;
 }
 
-.doc .exampleblock > .content > :first-child {
+.doc .exampleblock > .content::after,
+.doc details.result > .content::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.doc .exampleblock > .content > :first-child,
+.doc details > .content > :first-child {
   margin-top: 0;
 }