From e47b76d9d0c0d63e8adaa9ac9ae3cf669126d2c9 Mon Sep 17 00:00:00 2001 From: Chris Holdgraf Date: Wed, 23 Mar 2022 11:28:07 -0700 Subject: [PATCH 1/2] ENH: Vertical flip for toggle icon --- sphinx_togglebutton/_static/togglebutton.css | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/sphinx_togglebutton/_static/togglebutton.css b/sphinx_togglebutton/_static/togglebutton.css index 81bd3c2..dc0a115 100644 --- a/sphinx_togglebutton/_static/togglebutton.css +++ b/sphinx_togglebutton/_static/togglebutton.css @@ -64,15 +64,24 @@ button.toggle-button { stroke: currentColor; /* So that we inherit the color of other text */ } +/* Rotate icon with admonitions so that it points down */ +.admonition.toggle .tb-icon { + transform: rotate(-90deg); +} + +/* When the admonition is hidden, icon should flip upwards but retain rotation */ +/* We scaleX, in order to flip along Y, because it is rotated */ +.admonition.toggle .toggle-button-hidden .tb-icon { + transform: rotate(-90deg) scaleX(-1); +} + +/* With details toggles, we don't rotate the icon so it point sright */ details.toggle-details .tb-icon { height: 1.4em; width: 1.4em; margin-top: 0.1em; /* To center the button vertically */ } -.toggle-button-hidden .tb-icon { - transform: rotate(90deg); -} /** * Details-based toggles. From 83be08ae4943a07a5f748bcade4172459a1885ba Mon Sep 17 00:00:00 2001 From: Chris Holdgraf Date: Wed, 23 Mar 2022 11:31:46 -0700 Subject: [PATCH 2/2] Update sphinx_togglebutton/_static/togglebutton.css --- sphinx_togglebutton/_static/togglebutton.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sphinx_togglebutton/_static/togglebutton.css b/sphinx_togglebutton/_static/togglebutton.css index dc0a115..b751c3d 100644 --- a/sphinx_togglebutton/_static/togglebutton.css +++ b/sphinx_togglebutton/_static/togglebutton.css @@ -75,7 +75,7 @@ button.toggle-button { transform: rotate(-90deg) scaleX(-1); } -/* With details toggles, we don't rotate the icon so it point sright */ +/* With details toggles, we don't rotate the icon so it points right */ details.toggle-details .tb-icon { height: 1.4em; width: 1.4em;