From 9c1dd5066543f224e394dce5fd5fc7a3918df7fe 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/13] 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 9759db809ca66d9dabef05fe101b835484f9a0bd 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/13] 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 a237e4303dbf1bccbdde89fec425600e75b0ddda 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/13] 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 8da816ae6ee423e72e958adff0ee58ef8207e085 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/13] 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 b171a91875f2036909fdb266d6ba2bac7bd562f6 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/13] 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 be4ff2f10fb768403effe1e376a19acfeee2b3ec 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/13] 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 f15829bb1b418941f0465824ec27668b092874ae 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/13] 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 c0dd37d9e1597dd20146952ec8d3f4a0ef942a21 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/13] 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 2c6b32ff203396ef3e0d9f9ff2592919183be6d6 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/13] 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 0bb0bd816893db3e942c5bac9e73748f473a44f8 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/13] 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 8959d577faa700d845caa9b48bf3dd88db2874f5 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/13] 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 2a39a078eceaa31c60a4b2f42f2f0bd182ef853a 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/13] 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 e462173284d199c28d86e84e5aa49c11d86433ee 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/13] 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);