Skip to content

Commit 05729fd

Browse files
jarrodmillmanjarrodmillman
authored
Add PST dropdowns (#471)
1 parent c1a9f2c commit 05729fd

6 files changed

Lines changed: 249 additions & 1 deletion

File tree

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

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
details.sd-dropdown {
2+
position: relative;
3+
4+
.sd-summary-title {
5+
font-weight: 700;
6+
// don't overlap the chevron
7+
padding-right: 3em !important;
8+
-moz-user-select: none;
9+
-ms-user-select: none;
10+
-webkit-user-select: none;
11+
user-select: none;
12+
}
13+
14+
&:hover {
15+
cursor: pointer;
16+
}
17+
18+
.sd-summary-content {
19+
cursor: default;
20+
}
21+
22+
summary {
23+
// hide the default triangle marker
24+
list-style: none;
25+
padding: 1em;
26+
27+
// Ellipsis added when no title
28+
.sd-octicon.no-title {
29+
vertical-align: middle;
30+
}
31+
}
32+
33+
&[open] summary .sd-octicon.no-title {
34+
visibility: hidden;
35+
}
36+
37+
// chrome doesn't yet support list-style
38+
summary::-webkit-details-marker {
39+
display: none;
40+
}
41+
42+
summary:focus {
43+
outline: none;
44+
}
45+
46+
.sd-summary-icon {
47+
margin-right: 0.5em;
48+
}
49+
50+
.sd-summary-icon svg {
51+
opacity: 0.8;
52+
}
53+
54+
summary:hover .sd-summary-up svg,
55+
summary:hover .sd-summary-down svg {
56+
opacity: 1;
57+
transform: scale(1.1);
58+
}
59+
60+
.sd-summary-up svg,
61+
.sd-summary-down svg {
62+
display: block;
63+
opacity: 0.6;
64+
}
65+
66+
.sd-summary-up,
67+
.sd-summary-down {
68+
pointer-events: none;
69+
position: absolute;
70+
right: 1em;
71+
top: 1em;
72+
}
73+
74+
&[open] > .sd-summary-title .sd-summary-down {
75+
visibility: hidden;
76+
}
77+
78+
&:not([open]) > .sd-summary-title .sd-summary-up {
79+
visibility: hidden;
80+
}
81+
82+
// Hide the card body border when not open
83+
&:not([open]).sd-card {
84+
border: none;
85+
}
86+
&:not([open]) > .sd-card-header {
87+
border: 1px solid var(--sd-color-card-border);
88+
border-radius: 0.25rem;
89+
}
90+
91+
// Transition animation
92+
&.sd-fade-in[open] summary ~ * {
93+
-moz-animation: sd-fade-in 0.5s ease-in-out;
94+
-webkit-animation: sd-fade-in 0.5s ease-in-out;
95+
animation: sd-fade-in 0.5s ease-in-out;
96+
}
97+
98+
&.sd-fade-in-slide-down[open] summary ~ * {
99+
-moz-animation:
100+
sd-fade-in 0.5s ease-in-out,
101+
sd-slide-down 0.5s ease-in-out;
102+
-webkit-animation:
103+
sd-fade-in 0.5s ease-in-out,
104+
sd-slide-down 0.5s ease-in-out;
105+
animation:
106+
sd-fade-in 0.5s ease-in-out,
107+
sd-slide-down 0.5s ease-in-out;
108+
}
109+
}
110+
111+
.sd-col > .sd-dropdown {
112+
width: 100%;
113+
}
114+
115+
.sd-summary-content > .sd-tab-set:first-child {
116+
margin-top: 0;
117+
}
118+
119+
@keyframes sd-fade-in {
120+
0% {
121+
opacity: 0;
122+
}
123+
124+
100% {
125+
opacity: 1;
126+
}
127+
}
128+
129+
@keyframes sd-slide-down {
130+
0% {
131+
transform: translate(0, -10px);
132+
}
133+
134+
100% {
135+
transform: translate(0, 0);
136+
}
137+
}

‎assets/theme-css/pst-deps/sphinx-design/_icons.scss‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.sd-octicon,
2+
.sd-material-icon {
3+
display: inline-block;
4+
fill: currentColor;
5+
vertical-align: middle;
6+
}
7+
8+
$avatar-sizes: (
9+
xs: 1rem,
10+
sm: 3rem,
11+
md: 5rem,
12+
lg: 7rem,
13+
xl: 10rem,
14+
inherit: inherit,
15+
initial: initial,
16+
);
17+
18+
@each $size, $value in $avatar-sizes {
19+
.sd-avatar-#{$size} {
20+
border-radius: 50%;
21+
object-fit: cover; /* Keep the image aspect ratio */
22+
object-position: center; /* Center the image within the element */
23+
width: $value;
24+
height: $value;
25+
}
26+
}

‎assets/theme-css/pst/extensions/_togglebutton.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* Sphinx togglebutton
3+
*/
4+
5+
.bd-content {
6+
// Admonition toggles
7+
.admonition {
8+
button.toggle-button {
9+
color: inherit;
10+
}
11+
}
12+
13+
// Details buttons
14+
details.toggle-details {
15+
// Over-ride border color to re-use our primary color
16+
summary {
17+
border-left: 3px solid var(--pst-color-primary);
18+
}
19+
}
20+
}

‎assets/theme-css/pst/pydata-sphinx-theme.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
//@import "./extensions/execution";
7171
//@import "./extensions/pydata";
7272
@import "./extensions/sphinx_design";
73-
//@import "./extensions/togglebutton";
73+
@import "./extensions/togglebutton";
7474
//@import "./extensions/notebooks";
7575
//@import "./extensions/leaflet";
7676
//

‎assets/theme-css/scientific-python-hugo-theme.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@import "./pst-deps/sphinx-design/badges";
22
@import "./pst-deps/sphinx-design/card";
33
@import "./pst-deps/sphinx-design/grid";
4+
@import "./pst-deps/sphinx-design/icons";
5+
@import "./pst-deps/sphinx-design/dropdown";
46
@import "./pst/pydata-sphinx-theme";
57
@import "./spht/code";

‎layouts/shortcodes/dropdown.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
{{/*
2+
3+
doc: Dropdowns
4+
5+
{{< dropdown >}}
6+
body = 'And with no title and some content!'
7+
{{< /dropdown >}}
8+
9+
{{< dropdown >}}
10+
title = 'With a title'
11+
body = 'And some content!'
12+
{{< /dropdown >}}
13+
14+
{{< dropdown >}}
15+
title = 'With a title and icon'
16+
icon = 'unlock'
17+
body = 'And some content and an icon!'
18+
{{< /dropdown >}}
19+
20+
{{< dropdown >}}
21+
title = 'A primary color dropdown'
22+
icon = 'unlock'
23+
color = 'primary'
24+
body = 'And some content and an icon!'
25+
{{< /dropdown >}}
26+
27+
{{< dropdown >}}
28+
title = 'A secondary color dropdown'
29+
icon = 'unlock'
30+
color = 'secondary'
31+
body = 'And some content and an icon!'
32+
{{< /dropdown >}}
33+
34+
*/}}
35+
36+
{{- $data := .Inner | transform.Unmarshal -}}
37+
38+
<details class="sd-card sd-dropdown sd-mb-3">
39+
{{ with $data.color }}
40+
<summary class="sd-summary-title sd-card-header sd-bg-{{ . }} sd-bg-text-{{ . }}">
41+
{{ else }}
42+
<summary class="sd-summary-title sd-card-header">
43+
{{ end }}
44+
{{ with $data.icon }}
45+
<span class="sd-summary-icon"><svg version="1.1" width="1.0em" height="1.0em" class="sd-octicon sd-octicon-{{ . }}" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M5.5 4a2.5 2.5 0 014.607-1.346.75.75 0 101.264-.808A4 4 0 004 4v2h-.501A1.5 1.5 0 002 7.5v6A1.5 1.5 0 003.5 15h9a1.5 1.5 0 001.5-1.5v-6A1.5 1.5 0 0012.5 6h-7V4zm-.75 3.5H3.5v6h9v-6H4.75z"></path></svg></span>
46+
{{ end }}
47+
{{ with $data.title }}
48+
{{ . }}
49+
{{ else }}
50+
<svg version="1.1" width="1.5em" height="1.5em" class="sd-octicon sd-octicon-kebab-horizontal" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M6 12a2 2 0 11-4 0 2 2 0 014 0zm8 0a2 2 0 11-4 0 2 2 0 014 0zm6 2a2 2 0 100-4 2 2 0 000 4z"></path></svg>
51+
{{ end }}
52+
<div class="sd-summary-down">
53+
<svg version="1.1" width="1.5em" height="1.5em" class="sd-octicon sd-octicon-chevron-down" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M5.22 8.72a.75.75 0 000 1.06l6.25 6.25a.75.75 0 001.06 0l6.25-6.25a.75.75 0 00-1.06-1.06L12 14.44 6.28 8.72a.75.75 0 00-1.06 0z"></path></svg></div>
54+
<div class="sd-summary-up">
55+
<svg version="1.1" width="1.5em" height="1.5em" class="sd-octicon sd-octicon-chevron-up" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M18.78 15.28a.75.75 0 000-1.06l-6.25-6.25a.75.75 0 00-1.06 0l-6.25 6.25a.75.75 0 101.06 1.06L12 9.56l5.72 5.72a.75.75 0 001.06 0z"></path></svg></div>
56+
</summary>
57+
58+
<div class="sd-summary-content sd-card-body">
59+
{{ with (trim $data.body "\n") }}
60+
{{ . | markdownify }}
61+
{{ end }}
62+
</div>
63+
</details>

0 commit comments

Comments
 (0)