Provide a standalone accordion component#30042
Conversation
|
|
gijsroge
force-pushed
the
standalone-accordion
branch
from
7f14580 to
47ae0b2
Compare
There was a problem hiding this comment.
Any reason why these !importants where added? Seems to work fine without?
There was a problem hiding this comment.
Aha, probably because of the zebra stripes? Maybe then just use the :not() construction there too? This way, people will still be able to override the behaviour with utilities.
There was a problem hiding this comment.
Yes this was one of the things I was planning on refactoring, will look at it hopefully this weekend :D
There was a problem hiding this comment.
Maybe make the whole transform value variable, so that flips can also be used?
|
Assigning myself here to review the design after we get our first v5 alpha out, then this is in for alpha 2. Thanks! |
…ixes twbs#28873 Also fixes twbs#28134 as we move the border from the header to the body and no longer have a overlapping issue of the header bottom.
…e and more predictable.
* Added expanded/collapsed icon * Added active state * Added focus state
gijsroge
force-pushed
the
standalone-accordion
branch
from
3d6542d to
cb601aa
Compare
* Striped / Flushed variations now have a separate bg/text color active states that are configurable. * Used breaks to give list of accordion variables more readability * Added inline explanations where needed.
|
@gijsroge Would you be willing to resolve conflicts here and help bring this back? |
- Simplified the CSS and reduced number of variables - Fixed flashing background animation
|
Picking this up in #32013. |
|
@mdo thanks for picking this up, I did not have the time due to personal stuff. I hope my PR was still somewhat useful :D |
|
It most assuredly was! |
4 participants
This adds a standalone accordion component with its own settings and markup.
Preview: https://deploy-preview-30042--twbs-bootstrap.netlify.com/docs/4.3/components/accordion/
Also added a flush and striped variation.
Fixes #30015
Fixes #28134 by moving the border bottom from the header to a border top on the body we fix the overlapping issue where the border would be invisible if the body had a background color. This also allowed me to also remove the
overflow: hidden;on the.accordion-itemwhich fixes #28873Also fixes #25811
Currently this is still a work in progress.