Skip to content

Show open API nodes as nested boxes instead of guide lines #4493

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
akira28 wants to merge 8 commits into
base: main
Choose a base branch
from
Draft

Show open API nodes as nested boxes instead of guide lines #4493

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
687fed6
Show open API nodes as nested boxes instead of guide lines
akira28 Oct 16, 2026
a35fc58
Keep the show/hide properties toggle still when a box opens
akira28 Oct 16, 2026
f8884b1
Put the show/hide properties toggle on the box's top edge
akira28 Oct 16, 2026
26be250
Balance the padding inside open API boxes
akira28 Oct 16, 2026
c9242e7
Drop the guide line from API reference links
akira28 Oct 16, 2026
5698013
Match the gap under a box's top edge to the gap above its bottom edge
akira28 Oct 16, 2026
d7f416d
Give open API boxes a little more room inside
akira28 Oct 16, 2026
c347419
Align a lone reference link with the description
akira28 Oct 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 86 additions & 0 deletions src/Elastic.Documentation.Site/Assets/api-docs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4292,3 +4292,89 @@ html:has(.api-page-shell) {
}
}
}

/* Open nodes sit in nested boxes instead of guide lines. The toggle sits on the box's top edge and cuts the line behind
its text, like a fieldset legend; the innermost open box gets the darker border, so the open path reads from the
outlines alone. The row keeps one height folded or open, so the toggle does not move. */
.property-item::before,
.property-item::after,
.nested-properties::before,
.expand-toggle-row::after,
.union-expand-toggle::after {
display: none;
}

.property-item.depth-1,
.property-item.depth-2,
.property-item.depth-3,
.property-item.depth-4 {
padding-left: 0.25rem;
}

/* The reference link has no branch to hang from; it lines up with the toggle label below it. */
.property-list .reference-link-row {
padding-left: calc(0.875rem + 1px);

&::before,
&::after {
display: none;
}

/* With no toggle below it, the link reads as part of the description. */
&:not(:has(+ .expand-toggle-row)) {
padding-left: 0;
}
}

.property-item > .expand-toggle-row,
.union-variant-item > .union-expand-toggle {
margin: 0.5rem 0 0;
padding: 0.25rem calc(0.875rem + 1px);

&::before {
content: '';
position: absolute;
inset: 50% 0 0;
height: auto;
width: auto;
border: 1px solid transparent;
border-bottom: 0;
border-radius: 6px 6px 0 0;
opacity: 1;
}

> .expand-toggle {
position: relative;
z-index: 1;
margin-left: -0.375rem;
padding: 0 0.375rem;
background: var(--color-white, #fff);
}
}

.property-item.expanded > .expand-toggle-row::before,
.union-variant-item.expanded > .union-expand-toggle::before {
border-color: var(--color-grey-20);
}

.property-item.expanded > .nested-properties,
.union-variant-item.expanded > .nested-properties {
margin: 0 0 0.25rem;
padding: 0 0.5rem 1rem;
border: 1px solid var(--color-grey-20);
border-top: 0;
border-radius: 0 0 6px 6px;

/* The first row's usual top padding would leave twice the gap under the edge that the bottom edge has. */
> .property-list > .property-item:first-child > dt {
--property-row-pad: 6px;
}
}

.property-item.expanded:not(:has(.expanded)) > .expand-toggle-row::before,
.property-item.expanded:not(:has(.expanded)) > .nested-properties,
.union-variant-item.expanded:not(:has(.expanded))
> .union-expand-toggle::before,
.union-variant-item.expanded:not(:has(.expanded)) > .nested-properties {
border-color: var(--color-grey-60);
}
Loading