All `.icon` in `accordion-header` are rotated when accordion is open
codebling opened this issue · comments
An accordion with an icon in the title looks ok when collapsed.
When it's open, the icons in the title are rotated.
Is there a way around this?
The following code sample should produce the example above.
<div class="accordion">
<input type="checkbox" id="accordion-1" name="accordion-checkbox" hidden />
<label class="accordion-header" for="accordion-1">
<i class="icon icon-arrow-right mr-1"></i>
This is an accordion.
<i class="icon icon-emoji"></i>
</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item">hello</li>
</ul>
</div>
</div>
I used the following code.
.accordion input:checked~.accordion-header .icon+.icon, .accordion[open] .accordion-header .icon+.icon { transform: rotate(0); }
I believe that in the future, something like this should be used instead.
.accordion input:checked~.accordion-header .icon:first-child, .accordion[open] .accordion-header .icon:first-child { transform: rotate(90deg); }
Thanks for looking. Looks very similar to what I did in the PR, although it seems like there are some spaces in there that shouldn't be
Fix merged in v0.5.9. Thank you.