search

infotexture / dita-bootstrap

DITA Open Toolkit plug-in for HTML5 output with extensible Bootstrap style
https://infotexture.github.io/dita-bootstrap
Apache License 2.0
16 stars 10 forks source link

Collapsible TOC button alignment #104

Closed lakokkonen closed 1 year ago

lakokkonen commented 1 year ago

Some Bootswatch themes define a larger padding for button elements. This causes the collapsible TOC to be somewhat messy, because items are not aligned witch each other:

img1

The messiness is even more evident when more than one level of collapsible items is open.

This CSS would align the collapsible items with the non-collapsible ones:

.bs-sidebar .btn { padding-left: 12px; }

img2

I don't think it would break anything, since it only affects buttons inside the sidebar, and there shouldn't be any others? Of course, there could be a custom class for the TOC buttons, and then use that class in the CSS selector.

lakokkonen commented 1 year ago

Another thing I noticed: With some themes there's also a noticeable vertical displacement of the button:

img3

.bd-links .btn { padding-bottom: 0.25rem; }

fixes this, since the padding is then the same for top and bottom.

(My previous suggestion about the left padding could also go in .bd-links .btn, so there wouldn't be a need for a new selector. And since almost everything else is defined in rems, it could be 0.75rem instead of 12px)