Skip to content

Commit 9c1dd50

Browse files
agriyakhetarpalagriyakhetarpal
committed
Finally got this to work
1 parent 9f4cf22 commit 9c1dd50

File tree

2 files changed

+208
-24
lines changed

2 files changed

+208
-24
lines changed

‎assets/theme-css/sphinx-design/_dropdown.scss

Lines changed: 60 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,31 @@ details.sd-dropdown {
55
font-weight: 700;
66
// don't overlap the chevron
77
padding-right: 3em !important;
8-
-moz-user-select: none;
9-
-ms-user-select: none;
10-
-webkit-user-select: none;
118
user-select: none;
9+
display: inline-flex;
10+
justify-content: space-between;
11+
align-items: center;
12+
width: 100%;
13+
14+
.sd-summary-text {
15+
flex-grow: 1;
16+
line-height: 1.5;
17+
padding-right: 0.5rem;
18+
}
19+
20+
.sd-summary-state-marker {
21+
position: absolute;
22+
right: 1em;
23+
top: 50%;
24+
transform: translateY(-50%);
25+
pointer-events: none;
26+
display: inline-flex;
27+
align-items: center;
28+
}
29+
30+
&:hover .sd-summary-state-marker svg {
31+
opacity: 1;
32+
}
1233
}
1334

1435
&:hover {
@@ -54,7 +75,6 @@ details.sd-dropdown {
5475
summary:hover .sd-summary-up svg,
5576
summary:hover .sd-summary-down svg {
5677
opacity: 1;
57-
transform: scale(1.1);
5878
}
5979

6080
.sd-summary-up svg,
@@ -79,6 +99,42 @@ details.sd-dropdown {
7999
visibility: hidden;
80100
}
81101

102+
// Chevron transitions
103+
.sd-summary-chevron-right i,
104+
.sd-summary-chevron-down i {
105+
display: inline-block;
106+
transform-origin: center;
107+
transition:
108+
transform 0.25s ease-in-out,
109+
opacity 0.25s ease-in-out;
110+
opacity: 0.6;
111+
}
112+
113+
// The chevron rotation animations are applied to
114+
// the icon inside the dropdown title div
115+
&[open] > .sd-summary-title .sd-summary-chevron-right i {
116+
transform: rotate(90deg);
117+
}
118+
119+
&[open] > .sd-summary-title .sd-summary-chevron-down i {
120+
transform: rotate(180deg);
121+
}
122+
123+
&:hover .sd-summary-chevron-right i,
124+
&:hover .sd-summary-chevron-down i {
125+
opacity: 1;
126+
transform: scale(1.1);
127+
}
128+
129+
// Combined transform for open state with hover
130+
&[open]:hover > .sd-summary-title .sd-summary-chevron-right i {
131+
transform: rotate(90deg) scale(1.1);
132+
}
133+
134+
&[open]:hover > .sd-summary-title .sd-summary-chevron-down i {
135+
transform: rotate(180deg) scale(1.1);
136+
}
137+
82138
// Hide the card body border when not open
83139
&:not([open]).sd-card {
84140
border: none;

‎layouts/shortcodes/dropdown.html

Lines changed: 148 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -31,27 +31,155 @@
3131
body = 'And some content and an icon!'
3232
{{< /dropdown >}}
3333

34+
{{< dropdown >}}
35+
title = 'Open dropdown by default'
36+
icon = 'fa-solid fa-eye'
37+
color = 'info'
38+
open = true
39+
body = 'This dropdown is open by default!'
40+
{{< /dropdown >}}
41+
42+
{{< dropdown >}}
43+
title = 'Fade in animation'
44+
icon = 'fa-solid fa-magic'
45+
animate = 'fade-in'
46+
body = 'This dropdown fades in when opened!'
47+
{{< /dropdown >}}
48+
49+
{{< dropdown >}}
50+
title = 'Fade in and slide down animation'
51+
icon = 'fa-solid fa-chart-line'
52+
animate = 'fade-in-slide-down'
53+
body = 'This dropdown fades in and slides down when opened!'
54+
{{< /dropdown >}}
55+
56+
{{< dropdown >}}
57+
title = 'Using chevron: down-up'
58+
icon = 'fa-solid fa-cog'
59+
chevron = 'down-up'
60+
body = 'Notice the different chevron direction!'
61+
{{< /dropdown >}}
62+
63+
{{< dropdown >}}
64+
title = 'Custom chevron with animation'
65+
icon = 'fa-solid fa-star'
66+
chevron = 'down-up'
67+
animate = 'fade-in'
68+
color = 'warning'
69+
body = 'Combining different features!'
70+
{{< /dropdown >}}
71+
72+
{{< dropdown >}}
73+
title = 'Multi-line content'
74+
icon = 'fa-solid fa-align-left'
75+
body = '''
76+
This is multi-line content.
77+
78+
It can include **markdown** and multiple paragraphs.
79+
And even lists:
80+
81+
- Item 1
82+
- Item 2
83+
- Item 3
84+
'''
85+
{{< /dropdown >}}
86+
87+
{{< dropdown >}}
88+
title = 'Dropdown with code'
89+
icon = 'fa-solid fa-code'
90+
color = 'success'
91+
body = '''
92+
Here's some code inside a dropdown:
93+
94+
```python
95+
def hello_world():
96+
print("Hello from a dropdown!")
97+
return 42
98+
```
99+
100+
And more content after the code.
101+
'''
102+
{{< /dropdown >}}
103+
104+
{{< dropdown >}}
105+
title = 'Nested dropdown'
106+
icon = 'fa-solid fa-folder'
107+
body = '''
108+
This is a dropdown with a nested dropdown inside it.
109+
110+
{{< dropdown >}}
111+
title = 'Nested dropdown'
112+
icon = 'fa-solid fa-code'
113+
body = '''
114+
Inside a dropdown in a dropdown!
115+
'''
116+
{{< /dropdown >}}
117+
118+
And more content after the inner dropdown.
119+
'''
120+
{{< /dropdown >}}
121+
34122
*/}}
35123

36124
{{- $data := .Inner | transform.Unmarshal -}}
37-
<details class="sd-card sd-dropdown sd-mb-3">
38-
{{- with $data.color }}
39-
<summary class="sd-summary-title sd-card-header sd-bg-{{ . }} sd-bg-text-{{ . }}">
40-
{{- else }}
41-
<summary class="sd-summary-title sd-card-header">
42-
{{- end }}
43-
{{- with $data.icon }}
44-
<span class="sd-summary-icon"><i class="fa {{ . }}"></i></span>
45-
{{- end }}
46-
{{- with $data.title }}
47-
{{- . }}
48-
{{- else }}
49-
<i class="fas fa-ellipsis-h"></i>&nbsp;
50-
{{- end }}
51-
</summary>
52-
<div class="sd-summary-content sd-card-body">
53-
{{- with (trim $data.body "\n") }}
54-
{{- . | markdownify }}
125+
126+
{{- $chevronClass := "sd-summary-chevron-right" -}}
127+
{{- $chevronIcon := "fa-chevron-right" -}}
128+
{{- if eq $data.chevron "down-up" -}}
129+
{{- $chevronClass = "sd-summary-chevron-down" -}}
130+
{{- $chevronIcon = "fa-chevron-down" -}}
131+
{{- end -}}
132+
133+
{{- $detailsClasses := slice "sd-sphinx-override" "sd-dropdown" "sd-card" "sd-mb-3" -}}
134+
{{- with $data.animate -}}
135+
{{- $detailsClasses = $detailsClasses | append (printf "sd-%s" .) -}}
136+
{{- end -}}
137+
138+
<details class="{{ delimit $detailsClasses " " }}"{{ if $data.open }} open="open"{{ end }}>
139+
{{- $summaryClasses := slice "sd-summary-title" "sd-card-header" -}}
140+
{{- with $data.color -}}
141+
{{- $summaryClasses = $summaryClasses | append (printf "sd-bg-%s" .) -}}
142+
{{- $summaryClasses = $summaryClasses | append (printf "sd-bg-text-%s" .) -}}
143+
{{- end -}}
144+
145+
<summary class="{{ delimit $summaryClasses " " }}">
146+
{{- with $data.icon }}
147+
<span class="sd-summary-icon"><i class="fa {{ . }}"></i></span>
55148
{{- end }}
56-
</div>
57-
</details>
149+
<span class="sd-summary-text">
150+
{{- with $data.title }}
151+
{{- . }}
152+
{{- else }}
153+
<i class="fas fa-ellipsis-h no-title sd-octicon"></i>
154+
{{- end }}
155+
</span>
156+
<span class="sd-summary-state-marker {{ $chevronClass }}">
157+
<i class="fas {{ $chevronIcon }}"></i>
158+
</span>
159+
</summary>
160+
<div class="sd-summary-content sd-card-body docutils">
161+
{{- with (trim $data.body "\n") -}}
162+
{{- . | markdownify -}}
163+
{{- end -}}
164+
165+
<summary class="{{ delimit $summaryClasses " " }}">
166+
{{- with $data.icon }}
167+
<span class="sd-summary-icon"><i class="fa {{ . }}"></i></span>
168+
{{- end }}
169+
<span class="sd-summary-text">
170+
{{- with $data.title }}
171+
{{- . }}
172+
{{- else }}
173+
<i class="fas fa-ellipsis-h no-title sd-octicon"></i>
174+
{{- end }}
175+
</span>
176+
<span class="sd-summary-state-marker {{ $chevronClass }}">
177+
<i class="fas {{ $chevronIcon }}"></i>
178+
</span>
179+
</summary>
180+
<div class="sd-summary-content sd-card-body docutils">
181+
{{- with (trim $data.body "\n") -}}
182+
{{- . | markdownify -}}
183+
{{- end -}}
184+
</div>
185+
</details>

0 commit comments

Comments
 (0)