Fix summary style

Problem: the `<summary>` element had a broken bottom margin on content
warnings, and isn't obvious that it's not just text.

Solution: Fix the margin and used a dashed border to indicate that the
content can be expanded. I think this is more intuitive than no border,
and I think the dashed line draws parallels with "cut outs" that might
make expansion intuitive (?), but either way I think it's better than
the previous design.
This commit is contained in:
Christian Bundy 2020-04-14 11:52:42 -07:00
parent 1b6c559115
commit 2eb983719c
1 changed files with 2 additions and 1 deletions

View File

@ -448,11 +448,12 @@ progress {
summary {
padding: var(--milli);
margin-top: var(--whole);
margin: var(--whole) 0;
cursor: pointer;
background: var(--bg);
border-radius: var(--common-radius);
list-style-type: "+ ";
border: var(--pico) dashed var(--fg-status);
}
details[open] > summary {