feat: Better styling for the <details> element #65
Conversation
| display: inline-block; | ||
| vertical-align: middle; | ||
| } | ||
|
|
|
|
||
| :root[data-theme="light"], | ||
| [data-theme="light"] ::backdrop { | ||
| :root[data-theme='light'], |
There was a problem hiding this comment.
prettier formatter changes
|
I'd prefer to not have hover-based color changes or use something more prominent than gray. We really want the detail element to stand out from the surrounding text and gray code blocks. I think having the greenish left color even when not being hovered over achieves that. Plus, without the green color, the dark mode version doesn't stand out much. |
src/styles/ilf-docs.css
Outdated
| border-left: 4px solid var(--sl-color-gray-5); | ||
| border-radius: 6px; | ||
| background: transparent; | ||
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
There was a problem hiding this comment.
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
src/styles/ilf-docs.css
Outdated
| .sl-markdown-content details { | ||
| border: 1px solid var(--sl-color-gray-5); | ||
| border-left: 4px solid var(--sl-color-gray-5); | ||
| border-radius: 6px; |
There was a problem hiding this comment.
| border-radius: 6px; | |
| border-radius: var(--border-radius); |
src/styles/ilf-docs.css
Outdated
| border-radius: 6px; | ||
| background: transparent; | ||
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); | ||
| transition: border-color 0.2s ease, box-shadow 0.2s ease; |
There was a problem hiding this comment.
| transition: border-color 0.2s ease, box-shadow 0.2s ease; | |
| transition: border-color 0.2s ease; |
src/styles/ilf-docs.css
Outdated
|
|
||
| .sl-markdown-content details:hover { | ||
| border-left-color: var(--sl-color-text-accent); | ||
| box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); |
There was a problem hiding this comment.
| box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); |
src/styles/ilf-docs.css
Outdated
| .sl-markdown-content details summary { | ||
| cursor: pointer; | ||
| position: relative; | ||
| padding: 1rem 2.5rem 1rem 0; |
There was a problem hiding this comment.
| padding: 1rem 2.5rem 1rem 0; | |
| padding: 1rem 0 1rem 2.5rem; |
src/styles/ilf-docs.css
Outdated
| .sl-markdown-content details summary::before { | ||
| content: ''; | ||
| position: absolute; | ||
| right: 1rem; |
There was a problem hiding this comment.
| right: 1rem; | |
| left: 1rem; |
|
I also saw the focus outline needs more padding And if we're moving to left alignment of the chevron icon we need to ensure it is vertically centered with the text when it is expanded |
|
The decision is to use the colors that Radu defined for the hover state as the only state for the element. No hover effect. On click the chevron arrow will rotate as it does now. Keep the border, lose the box shadow |
Screen.Recording.2026-01-15.at.7.24.35.PM.mov
|
This PR enhances the
<details>element styling to improve visibility.Key Changes
Fixes #52: Resolved misalignment when the summary is followed by block elements (images/code).
Interactive States: Added hover-based transitions. The left border now accents on hover, and the indicator highlights to the text color.
Improved UI: Replaced the default marker with a fluid SVG chevron and set a transparent background for better harmony with nested components.
Versioning: Bumped package to
0.11.0details.demo.mov
TODO: