From 7f66ad1122994f6bd3d9385b1729d4ee4c70f048 Mon Sep 17 00:00:00 2001 From: Agriya Khetarpal <74401230+agriyakhetarpal@users.noreply.github.com> Date: Wed, 14 May 2025 08:01:40 +0530 Subject: [PATCH 01/14] Finally got this to work --- assets/theme-css/sphinx-design/_dropdown.scss | 64 ++++++- layouts/shortcodes/dropdown.html | 168 +++++++++++++++--- 2 files changed, 208 insertions(+), 24 deletions(-) diff --git a/assets/theme-css/sphinx-design/_dropdown.scss b/assets/theme-css/sphinx-design/_dropdown.scss index 9b850649..290f6656 100644 --- a/assets/theme-css/sphinx-design/_dropdown.scss +++ b/assets/theme-css/sphinx-design/_dropdown.scss @@ -5,10 +5,31 @@ details.sd-dropdown { font-weight: 700; // don't overlap the chevron padding-right: 3em !important; - -moz-user-select: none; - -ms-user-select: none; - -webkit-user-select: none; user-select: none; + display: inline-flex; + justify-content: space-between; + align-items: center; + width: 100%; + + .sd-summary-text { + flex-grow: 1; + line-height: 1.5; + padding-right: 0.5rem; + } + + .sd-summary-state-marker { + position: absolute; + right: 1em; + top: 50%; + transform: translateY(-50%); + pointer-events: none; + display: inline-flex; + align-items: center; + } + + &:hover .sd-summary-state-marker svg { + opacity: 1; + } } &:hover { @@ -54,7 +75,6 @@ details.sd-dropdown { summary:hover .sd-summary-up svg, summary:hover .sd-summary-down svg { opacity: 1; - transform: scale(1.1); } .sd-summary-up svg, @@ -79,6 +99,42 @@ details.sd-dropdown { visibility: hidden; } + // Chevron transitions + .sd-summary-chevron-right i, + .sd-summary-chevron-down i { + display: inline-block; + transform-origin: center; + transition: + transform 0.25s ease-in-out, + opacity 0.25s ease-in-out; + opacity: 0.6; + } + + // The chevron rotation animations are applied to + // the icon inside the dropdown title div + &[open] > .sd-summary-title .sd-summary-chevron-right i { + transform: rotate(90deg); + } + + &[open] > .sd-summary-title .sd-summary-chevron-down i { + transform: rotate(180deg); + } + + &:hover .sd-summary-chevron-right i, + &:hover .sd-summary-chevron-down i { + opacity: 1; + transform: scale(1.1); + } + + // Combined transform for open state with hover + &[open]:hover > .sd-summary-title .sd-summary-chevron-right i { + transform: rotate(90deg) scale(1.1); + } + + &[open]:hover > .sd-summary-title .sd-summary-chevron-down i { + transform: rotate(180deg) scale(1.1); + } + // Hide the card body border when not open &:not([open]).sd-card { border: none; diff --git a/layouts/shortcodes/dropdown.html b/layouts/shortcodes/dropdown.html index 645aab89..15c136e3 100644 --- a/layouts/shortcodes/dropdown.html +++ b/layouts/shortcodes/dropdown.html @@ -31,27 +31,155 @@ body = 'And some content and an icon!' {{< /dropdown >}} +{{< dropdown >}} +title = 'Open dropdown by default' +icon = 'fa-solid fa-eye' +color = 'info' +open = true +body = 'This dropdown is open by default!' +{{< /dropdown >}} + +{{< dropdown >}} +title = 'Fade in animation' +icon = 'fa-solid fa-magic' +animate = 'fade-in' +body = 'This dropdown fades in when opened!' +{{< /dropdown >}} + +{{< dropdown >}} +title = 'Fade in and slide down animation' +icon = 'fa-solid fa-chart-line' +animate = 'fade-in-slide-down' +body = 'This dropdown fades in and slides down when opened!' +{{< /dropdown >}} + +{{< dropdown >}} +title = 'Using chevron: down-up' +icon = 'fa-solid fa-cog' +chevron = 'down-up' +body = 'Notice the different chevron direction!' +{{< /dropdown >}} + +{{< dropdown >}} +title = 'Custom chevron with animation' +icon = 'fa-solid fa-star' +chevron = 'down-up' +animate = 'fade-in' +color = 'warning' +body = 'Combining different features!' +{{< /dropdown >}} + +{{< dropdown >}} +title = 'Multi-line content' +icon = 'fa-solid fa-align-left' +body = ''' +This is multi-line content. + +It can include **markdown** and multiple paragraphs. +And even lists: + +- Item 1 +- Item 2 +- Item 3 +''' +{{< /dropdown >}} + +{{< dropdown >}} +title = 'Dropdown with code' +icon = 'fa-solid fa-code' +color = 'success' +body = ''' +Here's some code inside a dropdown: + +```python +def hello_world(): + print("Hello from a dropdown!") + return 42 +``` + +And more content after the code. +''' +{{< /dropdown >}} + +{{< dropdown >}} +title = 'Nested dropdown' +icon = 'fa-solid fa-folder' +body = ''' +This is a dropdown with a nested dropdown inside it. + +{{< dropdown >}} +title = 'Nested dropdown' +icon = 'fa-solid fa-code' +body = ''' +Inside a dropdown in a dropdown! +''' +{{< /dropdown >}} + +And more content after the inner dropdown. +''' +{{< /dropdown >}} + */}} {{- $data := .Inner | transform.Unmarshal -}} -
- {{- with $data.color }} - - {{- else }} - - {{- end }} - {{- with $data.icon }} - - {{- end }} - {{- with $data.title }} - {{- . }} - {{- else }} -   - {{- end }} - -
- {{- with (trim $data.body "\n") }} - {{- . | markdownify }} + +{{- $chevronClass := "sd-summary-chevron-right" -}} +{{- $chevronIcon := "fa-chevron-right" -}} +{{- if eq $data.chevron "down-up" -}} + {{- $chevronClass = "sd-summary-chevron-down" -}} + {{- $chevronIcon = "fa-chevron-down" -}} +{{- end -}} + +{{- $detailsClasses := slice "sd-sphinx-override" "sd-dropdown" "sd-card" "sd-mb-3" -}} +{{- with $data.animate -}} + {{- $detailsClasses = $detailsClasses | append (printf "sd-%s" .) -}} +{{- end -}} + +
+ {{- $summaryClasses := slice "sd-summary-title" "sd-card-header" -}} + {{- with $data.color -}} + {{- $summaryClasses = $summaryClasses | append (printf "sd-bg-%s" .) -}} + {{- $summaryClasses = $summaryClasses | append (printf "sd-bg-text-%s" .) -}} + {{- end -}} + + + {{- with $data.icon }} + {{- end }} -
-
+ + {{- with $data.title }} + {{- . }} + {{- else }} + + {{- end }} + + + + + +
+ {{- with (trim $data.body "\n") -}} + {{- . | markdownify -}} + {{- end -}} + + + {{- with $data.icon }} + + {{- end }} + + {{- with $data.title }} + {{- . }} + {{- else }} + + {{- end }} + + + + + +
+ {{- with (trim $data.body "\n") -}} + {{- . | markdownify -}} + {{- end -}} +
+ From b0675c8cccf9855bb0a06ae13dd62f096c7625d4 Mon Sep 17 00:00:00 2001 From: Agriya Khetarpal <74401230+agriyakhetarpal@users.noreply.github.com> Date: Wed, 14 May 2025 08:10:23 +0530 Subject: [PATCH 02/14] Remove some outdated transforms --- assets/theme-css/sphinx-design/_dropdown.scss | 9 --------- 1 file changed, 9 deletions(-) diff --git a/assets/theme-css/sphinx-design/_dropdown.scss b/assets/theme-css/sphinx-design/_dropdown.scss index 290f6656..1942ca6f 100644 --- a/assets/theme-css/sphinx-design/_dropdown.scss +++ b/assets/theme-css/sphinx-design/_dropdown.scss @@ -126,15 +126,6 @@ details.sd-dropdown { transform: scale(1.1); } - // Combined transform for open state with hover - &[open]:hover > .sd-summary-title .sd-summary-chevron-right i { - transform: rotate(90deg) scale(1.1); - } - - &[open]:hover > .sd-summary-title .sd-summary-chevron-down i { - transform: rotate(180deg) scale(1.1); - } - // Hide the card body border when not open &:not([open]).sd-card { border: none; From e85b4435d743ee9514e527f182bec4d519329092 Mon Sep 17 00:00:00 2001 From: Agriya Khetarpal <74401230+agriyakhetarpal@users.noreply.github.com> Date: Wed, 14 May 2025 08:42:48 +0530 Subject: [PATCH 03/14] Add a success dropdown --- layouts/shortcodes/dropdown.html | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/layouts/shortcodes/dropdown.html b/layouts/shortcodes/dropdown.html index 15c136e3..dfab0654 100644 --- a/layouts/shortcodes/dropdown.html +++ b/layouts/shortcodes/dropdown.html @@ -31,6 +31,13 @@ body = 'And some content and an icon!' {{< /dropdown >}} +{{< dropdown >}} +title = "A success color dropdown" +icon = "fa-solid fa-check" +color = "success" +body = "And some content and an icon!" +{{< /dropdown >}} + {{< dropdown >}} title = 'Open dropdown by default' icon = 'fa-solid fa-eye' From e0ccd2ff778beb61835d65904b29d70535282941 Mon Sep 17 00:00:00 2001 From: Agriya Khetarpal <74401230+agriyakhetarpal@users.noreply.github.com> Date: Wed, 14 May 2025 08:43:00 +0530 Subject: [PATCH 04/14] Try out multiline and nested dropdowns --- layouts/shortcodes/dropdown.html | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/layouts/shortcodes/dropdown.html b/layouts/shortcodes/dropdown.html index dfab0654..0befc9e2 100644 --- a/layouts/shortcodes/dropdown.html +++ b/layouts/shortcodes/dropdown.html @@ -39,12 +39,25 @@ {{< /dropdown >}} {{< dropdown >}} -title = 'Open dropdown by default' -icon = 'fa-solid fa-eye' -color = 'info' -open = true -body = 'This dropdown is open by default!' +title = "A dropdown inside a dropdown" +icon = "fa-solid fa-exclamation-triangle" +body=''' + Here is a dropdown again! +{{< dropdown >}} + title="A nested dropdown" + icon="fa-solid fa-bell" + body="And some content!" {{< /dropdown >}} +''' +{{< /dropdown >}} + +{{< dropdown + title="Open dropdown by default" + icon="fa-solid fa-eye" + color="info" + open="true" + body="This dropdown is open by default!" +>}} {{< dropdown >}} title = 'Fade in animation' From a323010565f8b569a94612a1cde30fc1efbd7366 Mon Sep 17 00:00:00 2001 From: Agriya Khetarpal <74401230+agriyakhetarpal@users.noreply.github.com> Date: Wed, 14 May 2025 10:41:17 +0530 Subject: [PATCH 05/14] More fixes for recursion --- layouts/shortcodes/dropdown.html | 59 +++++++------------------------- 1 file changed, 13 insertions(+), 46 deletions(-) diff --git a/layouts/shortcodes/dropdown.html b/layouts/shortcodes/dropdown.html index 0befc9e2..958049a7 100644 --- a/layouts/shortcodes/dropdown.html +++ b/layouts/shortcodes/dropdown.html @@ -31,34 +31,21 @@ body = 'And some content and an icon!' {{< /dropdown >}} -{{< dropdown >}} -title = "A success color dropdown" -icon = "fa-solid fa-check" -color = "success" -body = "And some content and an icon!" +{{< dropdown >}} +title = 'A success color dropdown' +icon = 'fa-solid fa-check' +color = 'success' +body = 'And some content and an icon!' {{< /dropdown >}} {{< dropdown >}} -title = "A dropdown inside a dropdown" -icon = "fa-solid fa-exclamation-triangle" -body=''' - Here is a dropdown again! -{{< dropdown >}} - title="A nested dropdown" - icon="fa-solid fa-bell" - body="And some content!" -{{< /dropdown >}} -''' +title = 'Open dropdown by default' +icon = 'fa-solid fa-eye' +color = 'info' +open = true +body = 'This dropdown is open by default!' {{< /dropdown >}} -{{< dropdown - title="Open dropdown by default" - icon="fa-solid fa-eye" - color="info" - open="true" - body="This dropdown is open by default!" ->}} - {{< dropdown >}} title = 'Fade in animation' icon = 'fa-solid fa-magic' @@ -161,7 +148,7 @@ {{- $summaryClasses = $summaryClasses | append (printf "sd-bg-%s" .) -}} {{- $summaryClasses = $summaryClasses | append (printf "sd-bg-text-%s" .) -}} {{- end -}} - + {{- with $data.icon }} @@ -181,25 +168,5 @@ {{- with (trim $data.body "\n") -}} {{- . | markdownify -}} {{- end -}} - - - {{- with $data.icon }} - - {{- end }} - - {{- with $data.title }} - {{- . }} - {{- else }} - - {{- end }} - - - - - -
- {{- with (trim $data.body "\n") -}} - {{- . | markdownify -}} - {{- end -}} -
- +
+ From f1e31bd1b14d41b520c715f4683d6084087c3f2b Mon Sep 17 00:00:00 2001 From: Agriya Khetarpal <74401230+agriyakhetarpal@users.noreply.github.com> Date: Wed, 14 May 2025 10:52:20 +0530 Subject: [PATCH 06/14] Add examples of warning and danger dropdowns --- layouts/shortcodes/dropdown.html | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/layouts/shortcodes/dropdown.html b/layouts/shortcodes/dropdown.html index 958049a7..32c6be39 100644 --- a/layouts/shortcodes/dropdown.html +++ b/layouts/shortcodes/dropdown.html @@ -38,6 +38,20 @@ body = 'And some content and an icon!' {{< /dropdown >}} +{{< dropdown >}} +title = 'A warning color dropdown' +icon = 'fa-solid fa-exclamation' +color = 'warning' +body = 'And some content and an icon!' +{{< /dropdown >}} + +{{< dropdown >}} +title = 'A danger color dropdown' +icon = 'fa-solid fa-exclamation-triangle' +color = 'danger' +body = 'And some content and an icon!' +{{< /dropdown >}} + {{< dropdown >}} title = 'Open dropdown by default' icon = 'fa-solid fa-eye' From afe9a81d76075ccb45a17f71624e91840b05a31d Mon Sep 17 00:00:00 2001 From: Agriya Khetarpal <74401230+agriyakhetarpal@users.noreply.github.com> Date: Wed, 14 May 2025 10:52:32 +0530 Subject: [PATCH 07/14] Update content for nested dropdowns --- layouts/shortcodes/dropdown.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/layouts/shortcodes/dropdown.html b/layouts/shortcodes/dropdown.html index 32c6be39..94d00045 100644 --- a/layouts/shortcodes/dropdown.html +++ b/layouts/shortcodes/dropdown.html @@ -123,20 +123,20 @@ {{< /dropdown >}} {{< dropdown >}} -title = 'Nested dropdown' +title = 'Nested dropdowns' icon = 'fa-solid fa-folder' body = ''' -This is a dropdown with a nested dropdown inside it. +This is a dropdown with a dropdown inside it. {{< dropdown >}} -title = 'Nested dropdown' +title = 'Inner dropdown' icon = 'fa-solid fa-code' body = ''' -Inside a dropdown in a dropdown! +I'm inside a dropdown in a dropdown! ''' {{< /dropdown >}} -And more content after the inner dropdown. +And here is some more content after the inner dropdown. ''' {{< /dropdown >}} From 35ccc524268fd8b24de93242946216709b53d87e Mon Sep 17 00:00:00 2001 From: Agriya Khetarpal <74401230+agriyakhetarpal@users.noreply.github.com> Date: Wed, 14 May 2025 11:03:27 +0530 Subject: [PATCH 08/14] Drop extra docutils in class --- layouts/shortcodes/dropdown.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/layouts/shortcodes/dropdown.html b/layouts/shortcodes/dropdown.html index 94d00045..74b37816 100644 --- a/layouts/shortcodes/dropdown.html +++ b/layouts/shortcodes/dropdown.html @@ -178,9 +178,9 @@ -
- {{- with (trim $data.body "\n") -}} - {{- . | markdownify -}} - {{- end -}} +
+ {{- with (trim $data.body "\n") }} + {{- . | markdownify }} + {{- end }}
From e83992a0810cbd4c3d8c89fd1d7b46da6f98c8d4 Mon Sep 17 00:00:00 2001 From: Agriya Khetarpal <74401230+agriyakhetarpal@users.noreply.github.com> Date: Thu, 15 May 2025 03:04:24 +0530 Subject: [PATCH 09/14] More hovering + zoom cases for rotated chevrons --- assets/theme-css/sphinx-design/_dropdown.scss | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/assets/theme-css/sphinx-design/_dropdown.scss b/assets/theme-css/sphinx-design/_dropdown.scss index 1942ca6f..f9cf44e6 100644 --- a/assets/theme-css/sphinx-design/_dropdown.scss +++ b/assets/theme-css/sphinx-design/_dropdown.scss @@ -27,6 +27,8 @@ details.sd-dropdown { align-items: center; } + // The hover effect should only change opacity, not transform. + // We are transforming the chevron elements instead, see below. &:hover .sd-summary-state-marker svg { opacity: 1; } @@ -123,9 +125,36 @@ details.sd-dropdown { &:hover .sd-summary-chevron-right i, &:hover .sd-summary-chevron-down i { opacity: 1; + } + + // Combined transforms for each state with hover. These cover + // the cases where the chevron is rotated, say, when the dropdown + // is open or if the chevron starts rotated (e.g. in the down-up + // state). + &:not([open]):hover .sd-summary-chevron-right i { transform: scale(1.1); } + &:not([open]):hover .sd-summary-chevron-down i { + transform: scale(1.1); + } + + &[open]:hover .sd-summary-chevron-right i { + transform: rotate(90deg) scale(1.1); + } + + &[open]:hover .sd-summary-chevron-down i { + transform: rotate(180deg) scale(1.1); + } + + &[open]:hover > .sd-summary-title .sd-summary-chevron-right i { + transform: rotate(90deg) scale(1.1); + } + + &[open]:hover > .sd-summary-title .sd-summary-chevron-down i { + transform: rotate(180deg) scale(1.1); + } + // Hide the card body border when not open &:not([open]).sd-card { border: none; From a6fb31046e9d7f4d78c5781989eeb1c2d55ab2e1 Mon Sep 17 00:00:00 2001 From: Agriya Khetarpal <74401230+agriyakhetarpal@users.noreply.github.com> Date: Thu, 15 May 2025 07:04:15 +0530 Subject: [PATCH 10/14] Fix an edge case with opening nested dropdowns --- assets/theme-css/sphinx-design/_dropdown.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/assets/theme-css/sphinx-design/_dropdown.scss b/assets/theme-css/sphinx-design/_dropdown.scss index f9cf44e6..65228044 100644 --- a/assets/theme-css/sphinx-design/_dropdown.scss +++ b/assets/theme-css/sphinx-design/_dropdown.scss @@ -139,14 +139,6 @@ details.sd-dropdown { transform: scale(1.1); } - &[open]:hover .sd-summary-chevron-right i { - transform: rotate(90deg) scale(1.1); - } - - &[open]:hover .sd-summary-chevron-down i { - transform: rotate(180deg) scale(1.1); - } - &[open]:hover > .sd-summary-title .sd-summary-chevron-right i { transform: rotate(90deg) scale(1.1); } From 05d6515e6f6dd336dd30f1b2a5bb9ae0ecb221b7 Mon Sep 17 00:00:00 2001 From: Agriya Khetarpal <74401230+agriyakhetarpal@users.noreply.github.com> Date: Thu, 15 May 2025 07:09:30 +0530 Subject: [PATCH 11/14] Fix alignment for right and down chevrons --- assets/theme-css/sphinx-design/_dropdown.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/assets/theme-css/sphinx-design/_dropdown.scss b/assets/theme-css/sphinx-design/_dropdown.scss index 65228044..a0eb2d91 100644 --- a/assets/theme-css/sphinx-design/_dropdown.scss +++ b/assets/theme-css/sphinx-design/_dropdown.scss @@ -25,6 +25,8 @@ details.sd-dropdown { pointer-events: none; display: inline-flex; align-items: center; + justify-content: center; + width: 0.75em; } // The hover effect should only change opacity, not transform. From 1e9b7954a5bc80cebe488d61972e2cab6b12cbd4 Mon Sep 17 00:00:00 2001 From: Agriya Khetarpal <74401230+agriyakhetarpal@users.noreply.github.com> Date: Tue, 3 Jun 2025 10:48:56 +0530 Subject: [PATCH 12/14] Don't animate on scaling + add more keyframes --- assets/theme-css/sphinx-design/_dropdown.scss | 71 ++++++++++++++----- 1 file changed, 54 insertions(+), 17 deletions(-) diff --git a/assets/theme-css/sphinx-design/_dropdown.scss b/assets/theme-css/sphinx-design/_dropdown.scss index a0eb2d91..4a68ae1b 100644 --- a/assets/theme-css/sphinx-design/_dropdown.scss +++ b/assets/theme-css/sphinx-design/_dropdown.scss @@ -108,9 +108,6 @@ details.sd-dropdown { .sd-summary-chevron-down i { display: inline-block; transform-origin: center; - transition: - transform 0.25s ease-in-out, - opacity 0.25s ease-in-out; opacity: 0.6; } @@ -118,14 +115,26 @@ details.sd-dropdown { // the icon inside the dropdown title div &[open] > .sd-summary-title .sd-summary-chevron-right i { transform: rotate(90deg); + animation: rotate-to-90 0.25s ease-in-out; } &[open] > .sd-summary-title .sd-summary-chevron-down i { transform: rotate(180deg); + animation: rotate-to-180 0.25s ease-in-out; } - &:hover .sd-summary-chevron-right i, - &:hover .sd-summary-chevron-down i { + &:not([open]) > .sd-summary-title .sd-summary-chevron-right i { + transform: rotate(0deg); + animation: rotate-to-0-from-90 0.25s ease-in-out; + } + + &:not([open]) > .sd-summary-title .sd-summary-chevron-down i { + transform: rotate(0deg); + animation: rotate-to-0-from-180 0.25s ease-in-out; + } + + > .sd-summary-title:hover .sd-summary-chevron-right i, + > .sd-summary-title:hover .sd-summary-chevron-down i { opacity: 1; } @@ -133,19 +142,19 @@ details.sd-dropdown { // the cases where the chevron is rotated, say, when the dropdown // is open or if the chevron starts rotated (e.g. in the down-up // state). - &:not([open]):hover .sd-summary-chevron-right i { + &:not([open]) > .sd-summary-title:hover .sd-summary-chevron-right i { transform: scale(1.1); } - &:not([open]):hover .sd-summary-chevron-down i { + &:not([open]) > .sd-summary-title:hover .sd-summary-chevron-down i { transform: scale(1.1); } - &[open]:hover > .sd-summary-title .sd-summary-chevron-right i { + &[open] > .sd-summary-title:hover .sd-summary-chevron-right i { transform: rotate(90deg) scale(1.1); } - &[open]:hover > .sd-summary-title .sd-summary-chevron-down i { + &[open] > .sd-summary-title:hover .sd-summary-chevron-down i { transform: rotate(180deg) scale(1.1); } @@ -160,18 +169,10 @@ details.sd-dropdown { // Transition animation &.sd-fade-in[open] summary ~ * { - -moz-animation: sd-fade-in 0.5s ease-in-out; - -webkit-animation: sd-fade-in 0.5s ease-in-out; animation: sd-fade-in 0.5s ease-in-out; } &.sd-fade-in-slide-down[open] summary ~ * { - -moz-animation: - sd-fade-in 0.5s ease-in-out, - sd-slide-down 0.5s ease-in-out; - -webkit-animation: - sd-fade-in 0.5s ease-in-out, - sd-slide-down 0.5s ease-in-out; animation: sd-fade-in 0.5s ease-in-out, sd-slide-down 0.5s ease-in-out; @@ -205,3 +206,39 @@ details.sd-dropdown { transform: translate(0, 0); } } + +@keyframes rotate-to-90 { + from { + transform: rotate(0deg) scale(1.1); + } + to { + transform: rotate(90deg) scale(1.1); + } +} + +@keyframes rotate-to-180 { + from { + transform: rotate(0deg) scale(1.1); + } + to { + transform: rotate(180deg) scale(1.1); + } +} + +@keyframes rotate-to-0-from-90 { + from { + transform: rotate(90deg) scale(1.1); + } + to { + transform: rotate(0deg) scale(1.1); + } +} + +@keyframes rotate-to-0-from-180 { + from { + transform: rotate(180deg) scale(1.1); + } + to { + transform: rotate(0deg) scale(1.1); + } +} From 6d003723432d07afbc45fde0b197f8e87bc02d26 Mon Sep 17 00:00:00 2001 From: Agriya Khetarpal <74401230+agriyakhetarpal@users.noreply.github.com> Date: Tue, 3 Jun 2025 17:33:35 +0530 Subject: [PATCH 13/14] Tweak animations for down-up chevron case --- assets/theme-css/sphinx-design/_dropdown.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/assets/theme-css/sphinx-design/_dropdown.scss b/assets/theme-css/sphinx-design/_dropdown.scss index 4a68ae1b..9be9a358 100644 --- a/assets/theme-css/sphinx-design/_dropdown.scss +++ b/assets/theme-css/sphinx-design/_dropdown.scss @@ -119,8 +119,8 @@ details.sd-dropdown { } &[open] > .sd-summary-title .sd-summary-chevron-down i { - transform: rotate(180deg); - animation: rotate-to-180 0.25s ease-in-out; + transform: rotate(-180deg); + animation: rotate-to-negative-180 0.25s ease-in-out; } &:not([open]) > .sd-summary-title .sd-summary-chevron-right i { @@ -130,7 +130,7 @@ details.sd-dropdown { &:not([open]) > .sd-summary-title .sd-summary-chevron-down i { transform: rotate(0deg); - animation: rotate-to-0-from-180 0.25s ease-in-out; + animation: rotate-to-0-from-negative-180 0.25s ease-in-out; } > .sd-summary-title:hover .sd-summary-chevron-right i, @@ -155,7 +155,7 @@ details.sd-dropdown { } &[open] > .sd-summary-title:hover .sd-summary-chevron-down i { - transform: rotate(180deg) scale(1.1); + transform: rotate(-180deg) scale(1.1); } // Hide the card body border when not open @@ -216,12 +216,12 @@ details.sd-dropdown { } } -@keyframes rotate-to-180 { +@keyframes rotate-to-negative-180 { from { transform: rotate(0deg) scale(1.1); } to { - transform: rotate(180deg) scale(1.1); + transform: rotate(-180deg) scale(1.1); } } @@ -234,9 +234,9 @@ details.sd-dropdown { } } -@keyframes rotate-to-0-from-180 { +@keyframes rotate-to-0-from-negative-180 { from { - transform: rotate(180deg) scale(1.1); + transform: rotate(-180deg) scale(1.1); } to { transform: rotate(0deg) scale(1.1); From 8f7c544c82f90e44bfe087707c46ee3c521a20d5 Mon Sep 17 00:00:00 2001 From: Agriya Khetarpal <74401230+agriyakhetarpal@users.noreply.github.com> Date: Wed, 3 Dec 2025 16:15:41 +0530 Subject: [PATCH 14/14] Rename `sd-summary-state-marker` to `dropdown-summary-state-marker` --- assets/theme-css/sphinx-design/_dropdown.scss | 4 ++-- layouts/shortcodes/dropdown.html | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/theme-css/sphinx-design/_dropdown.scss b/assets/theme-css/sphinx-design/_dropdown.scss index 9be9a358..f2a95c15 100644 --- a/assets/theme-css/sphinx-design/_dropdown.scss +++ b/assets/theme-css/sphinx-design/_dropdown.scss @@ -17,7 +17,7 @@ details.sd-dropdown { padding-right: 0.5rem; } - .sd-summary-state-marker { + .dropdown-summary-state-marker { position: absolute; right: 1em; top: 50%; @@ -31,7 +31,7 @@ details.sd-dropdown { // The hover effect should only change opacity, not transform. // We are transforming the chevron elements instead, see below. - &:hover .sd-summary-state-marker svg { + &:hover .dropdown-summary-state-marker svg { opacity: 1; } } diff --git a/layouts/shortcodes/dropdown.html b/layouts/shortcodes/dropdown.html index 74b37816..36730612 100644 --- a/layouts/shortcodes/dropdown.html +++ b/layouts/shortcodes/dropdown.html @@ -174,7 +174,7 @@ {{- end }} - +