Reboot for details
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 78/100
Research direction
Start with Bootstrap’s reboot-layer styles and locate where native details and summary elements are handled. Implement the proposed Sass styles in the appropriate reboot stylesheet and verify open, closed, hover, focus, and reduced-motion states in project examples or browser tests. Done means these elements receive consistent styling and animation without affecting summary.accordion-header.
Written by the indexing model from the issue text.
Description
Prerequisites
- I have searched for duplicate or closed feature requests
- I have read the contributing guidelines
Proposal
Add styles to the reboot layer for the native <details> and <summary> elements.
@layer reboot {
details {
--bs-details-transition-property: color, background-color, border-radius;
--bs-details-transition-duration: 0.15s;
--bs-details-transition-timing: ease-in-out;
--bs-details-border-color: var(--bs-border-color);
--bs-details-border-width: var(--bs-border-width);
--bs-details-btn-color: var(--bs-fg-2);
--bs-details-btn-bg: var(--bs-bg-body);
--bs-details-btn-icon-width: 1rem;
--bs-details-btn-icon-transform: rotate(-180deg);
--bs-details-btn-icon-transition: transform 0.2s ease-in-out;
--bs-details-active-color: var(--bs-fg-body);
--bs-details-active-bg: transparent;
--bs-details-margin-bottom: var(--bs-spacer-2);
summary:not(.accordion-header) {
display: flex;
align-items: center;
width: 100%;
padding: 0;
margin-bottom: var(--bs-details-margin-bottom);
border-bottom: var(--bs-details-border-width) solid var(--bs-details-border-color);
line-height: inherit;
list-style: none;
cursor: pointer;
@media (prefers-reduced-motion: no-preference) {
transition-timing-function: var(--bs-details-transition-timing);
transition-duration: var(--bs-details-transition-duration);
transition-property: var(--bs-details-transition-property);
}
&::-webkit-details-marker {
display: none;
}
.accordion-icon {
flex-shrink: 0;
width: var(--bs-details-btn-icon-width);
height: var(--bs-details-btn-icon-width);
margin-inline-start: auto;
color: currentcolor;
@media (prefers-reduced-motion: no-preference) {
transition: var(--bs-details-btn-icon-transition);
}
}
&:hover {
z-index: 2;
}
&:focus-visible {
position: relative;
z-index: 3;
outline: var(--bs-focus-ring);
outline-offset: var(--bs-focus-ring-offset);
outline-offset: -1px;
}
}
&[open] {
z-index: 2;
border-color: var(--bs-theme-border, var(--bs-details-border-color));
&::details-content {
block-size: auto;
}
& > summary:not(.accordion-header) {
color: var(--bs-theme-fg, var(--bs-details-active-color));
background-color: var(--bs-theme-bg-subtle, var(--bs-details-active-bg));
.accordion-icon {
transform: var(--bs-details-btn-icon-transform);
}
}
}
}
}
Motivation and context
This restyles the native <details> and <summary> elements to have better styling and open/closed animation that is more consistently styled across browsers. It also makes details visually fit better with the rest of Bootstrap's styling.
- Dominant language
- MDX
- Stars
- 175k
- Forks
- 78.5k
- Avg merge
- 14h 39m
- Merged PRs (30d)
- 88
Getting set up
- No Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from twbs/bootstrap
-
bug confirmed css has-pr v6
Difficulty 2/5 1-3 hours Newbie friendliness 73/100
Maintainers usually reply within 1 day
-
Theme variations like theme-contrast do not work as expected in a table.Possibly taken @bercedev claimed this today. Openbug confirmed css has-pr v6
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
Maintainers usually reply within 1 day
-
docs: datepicker data attributes & form submissionPossibly taken A pull request linked to this issue is open or already merged. Opendocs feature has-pr html needs-decision v6
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
Maintainers usually reply within 1 day
-
bug docs v5
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
twbs/bootstrap#43080 · 2 comments ·
Maintainers usually reply within 1 day
-
accessibility bug confirmed css design needs-decision v6
Difficulty 2/5 1-3 hours Newbie friendliness 69/100
twbs/bootstrap#43066 · 1 comment ·
Maintainers usually reply within 1 day
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 66/100
db-ux-design-system/core-web#8613 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
tanujnotes/Olauncher#770 ·
-
ai-priority/P3 bug db/mysql user-priority/P0
Difficulty 2/5 1-3 hours Newbie friendliness 66/100
Maintainers usually reply within 1 day
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
cloudscape-design/components#5184 ·
Maintainers usually reply within 2 days
-
Difficulty 2/5 1-3 hours Newbie friendliness 62/100