Make the admonition icon flip vertically instead of rotate

[choldgraf]

Describe the problem/need and solution

In this Twitter thread we got some feedback that the semantics of the arrow for the admonition toggle button were a bit confusing. The general consensus from folks seemed to be:

• If the arrow is to the right of the element, it should point down when closed, and point up when open.
• If the arrow is to the left of the element, it should point right when closed, and point down when open.

We could apply that to our toggle behavior with admonitions. Instead of making it rotate horizontally, we could make it flip vertically.

Guide for implementation

This would be pretty easy to do with the following CSS rules:

    transform: scaleY(-1);
    transition: transform .2s ease-out;

This would make an animation like this when the label box is checked:

Tasks and updates

No response