From 23850111aa431eb654f02b9f89d2dd7b76f523f6 Mon Sep 17 00:00:00 2001 From: Matt Vanderpol Date: Wed, 18 Dec 2024 15:30:29 -0800 Subject: [PATCH] Change arrow rotation on expand/collapse For better UX --- src/css/custom.css | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/css/custom.css b/src/css/custom.css index d8b58750..571721cf 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -159,10 +159,14 @@ figure figcaption { background-size: 100%; width: 8px; height: 12px; - transform: rotate(0); + transform: rotate(90deg); filter: none; } +.theme-doc-sidebar-menu .menu__list-item--collapsed .menu__caret:before { + transform: rotate(0); +} + html[data-theme=dark] .theme-doc-sidebar-menu .menu__caret:before { background-image: url("data:image/svg+xml, %3Csvg%20width=%228%22%20height=%2213%22%20viewBox=%220%200%208%2013%22%20fill=%22none%22%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d=%22M1%2012L7%206.5L1%201%22%20stroke=%22%23D9D9D9%22%20stroke-width=%221.25%22%2F%3E%0A%3C%2Fsvg%3E%0A"); } @@ -171,6 +175,11 @@ html[data-theme=dark] .theme-doc-sidebar-menu .menu__caret:before { background-image: url("data:image/svg+xml, %3Csvg%20width=%2212%22%20height=%228%22%20viewBox=%220%200%2012%208%22%20fill=%22none%22%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d=%22M0.500001%200.499999L6%206.5L11.5%200.5%22%20stroke=%22%23283AF7%22%20stroke-width=%221.25%22%2F%3E%0A%3C%2Fsvg%3E%0A"); width: 12px; height: 8px; + transform: rotate(0); +} + +.theme-doc-sidebar-menu .menu__list-item--collapsed .menu__link--active + .menu__caret:before { + transform: rotate(-90deg); } html[data-theme=dark] .theme-doc-sidebar-menu .menu__link--active + .menu__caret:before {