Skip to content

Enhancements for dropdowns: animations, open at initial state, and chevron indicators #675

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
stefanv merged 17 commits into from
Dec 4, 2025
+266 −26
Merged

Enhancements for dropdowns: animations, open at initial state, and chevron indicators #675

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
9c1dd50
Finally got this to work
agriyakhetarpal May 14, 2025
9759db8
Remove some outdated transforms
agriyakhetarpal May 14, 2025
a237e43
Add a success dropdown
agriyakhetarpal May 14, 2025
8da816a
Try out multiline and nested dropdowns
agriyakhetarpal May 14, 2025
b171a91
More fixes for recursion
agriyakhetarpal May 14, 2025
be4ff2f
Add examples of warning and danger dropdowns
agriyakhetarpal May 14, 2025
f15829b
Update content for nested dropdowns
agriyakhetarpal May 14, 2025
c0dd37d
Drop extra docutils in class
agriyakhetarpal May 14, 2025
2c6b32f
More hovering + zoom cases for rotated chevrons
agriyakhetarpal May 14, 2025
0bb0bd8
Fix an edge case with opening nested dropdowns
agriyakhetarpal May 15, 2025
8959d57
Fix alignment for right and down chevrons
agriyakhetarpal May 15, 2025
2a39a07
Don't animate on scaling + add more keyframes
agriyakhetarpal Jun 3, 2025
1af6855
Merge branch 'main' into dropdown-enhancements
agriyakhetarpal Jun 3, 2025
e462173
Tweak animations for down-up chevron case
agriyakhetarpal Jun 3, 2025
d9e6b90
Disable down-up animations
agriyakhetarpal Dec 4, 2025
e4bb756
Revise down-up and custom chevron dropdown examples
agriyakhetarpal Dec 4, 2025
a2112c7
Merge branch 'main' into dropdown-enhancements
agriyakhetarpal Dec 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Finally got this to work
  • Loading branch information
@agriyakhetarpal
agriyakhetarpal committed May 14, 2025
commit 9c1dd5066543f224e394dce5fd5fc7a3918df7fe
64 changes: 60 additions & 4 deletions assets/theme-css/sphinx-design/_dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Comment on lines -8 to -10
Copy link
Member Author

@agriyakhetarpal agriyakhetarpal Jun 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My text editor warns that these attributes are non-standard and should be avoided, and user-select is baseline already. The same warnings occur in a few other places below, and I removed the browser-engine-specific styling there as well.

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 {
Expand Down Expand Up @@ -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,
Expand All @@ -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;
Expand Down
168 changes: 148 additions & 20 deletions layouts/shortcodes/dropdown.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -}}
<details class="sd-card sd-dropdown sd-mb-3">
{{- with $data.color }}
<summary class="sd-summary-title sd-card-header sd-bg-{{ . }} sd-bg-text-{{ . }}">
{{- else }}
<summary class="sd-summary-title sd-card-header">
{{- end }}
{{- with $data.icon }}
<span class="sd-summary-icon"><i class="fa {{ . }}"></i></span>
{{- end }}
{{- with $data.title }}
{{- . }}
{{- else }}
<i class="fas fa-ellipsis-h"></i>&nbsp;
{{- end }}
</summary>
<div class="sd-summary-content sd-card-body">
{{- 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 -}}

<details class="{{ delimit $detailsClasses " " }}"{{ if $data.open }} open="open"{{ 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 -}}

<summary class="{{ delimit $summaryClasses " " }}">
{{- with $data.icon }}
<span class="sd-summary-icon"><i class="fa {{ . }}"></i></span>
{{- end }}
</div>
</details>
<span class="sd-summary-text">
{{- with $data.title }}
{{- . }}
{{- else }}
<i class="fas fa-ellipsis-h no-title sd-octicon"></i>
{{- end }}
</span>
<span class="sd-summary-state-marker {{ $chevronClass }}">
<i class="fas {{ $chevronIcon }}"></i>
</span>
Comment on lines +177 to +179
Copy link
Member Author

@agriyakhetarpal agriyakhetarpal Jun 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.sd-summary-state-marker is a separate element that makes it easier for us to style where the chevrons are placed (at the end of the dropdown bars).

Copy link
Member

@stefanv stefanv Dec 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sd- belongs to Sphinx Design, so is this prefix intentional?

Copy link
Member Author

@agriyakhetarpal agriyakhetarpal Dec 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, it isn't – good catch. I can just rename it to dropdown-summary-state-marker.

Copy link
Member Author

@agriyakhetarpal agriyakhetarpal Dec 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed, I think my reason for prefixing it with sd- back then was consistency, but since it's not coming from Sphinx Design, hopefully this rename makes it clearer.

</summary>
<div class="sd-summary-content sd-card-body docutils">
{{- with (trim $data.body "\n") -}}
{{- . | markdownify -}}
{{- end -}}

<summary class="{{ delimit $summaryClasses " " }}">
{{- with $data.icon }}
<span class="sd-summary-icon"><i class="fa {{ . }}"></i></span>
{{- end }}
<span class="sd-summary-text">
{{- with $data.title }}
{{- . }}
{{- else }}
<i class="fas fa-ellipsis-h no-title sd-octicon"></i>
{{- end }}
</span>
<span class="sd-summary-state-marker {{ $chevronClass }}">
<i class="fas {{ $chevronIcon }}"></i>
</span>
</summary>
<div class="sd-summary-content sd-card-body docutils">
{{- with (trim $data.body "\n") -}}
{{- . | markdownify -}}
{{- end -}}
</div>
</details>