Skip to content

Commit f0e3846

Browse files
authored
👌 IMPROVE: dropdown chevrons (#14)
1 parent a20732f commit f0e3846

File tree

11 files changed

+37
-43
lines changed

11 files changed

+37
-43
lines changed

docs/_static/sd-furo.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@media (prefers-color-scheme: dark) {
2+
:root {
3+
--sd-color-dark: #f8f9fa;
4+
--sd-color-light: #212529;
5+
--sd-color-dark-highlight: #d3d4d5;
6+
--sd-color-light-highlight: #1c1f23;
7+
--sd-color-dark-text: #212529;
8+
--sd-color-light-text: #fff;
9+
--sd-color-shadow: rgba(255, 255, 255, 0.15);
10+
--sd-color-card-border: rgba(255, 255, 255, 0.125);
11+
}
12+
}

docs/conf.py

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,9 @@
4444
html_theme_options = {
4545
"sidebar_hide_name": True,
4646
}
47+
html_css_files = [
48+
"sd-furo.css",
49+
]
4750
if html_theme == "sphinx_rtd_theme":
4851
html_theme_options = {
4952
"logo_only": True,
@@ -65,5 +68,3 @@
6568
"Nam sed arcu dignissim, ultrices quam sit amet, commodo ipsum. "
6669
"Etiam quis nunc at ligula tincidunt eleifend."
6770
}
68-
69-
sd_hide_root_title = True

sphinx_design/compiled/style.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

sphinx_design/dropdown.py

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -125,19 +125,6 @@ def run(self):
125125
return [container]
126126

127127

128-
# Note the custom octicon here has thicker dots than:
129-
# get_octicon("kebab-horizontal", classes=["no-title"])
130-
KEBAB = """\
131-
<svg viewBox="0 0 36 24" width="36" height="16" xmlns="http://www.w3.org/2000/svg"
132-
class="octicon no-title" aria-hidden="true">
133-
<g xmlns="http://www.w3.org/2000/svg" class="jp-icon3">
134-
<circle cx="0" cy="12" r="6"></circle>
135-
<circle cx="18" cy="12" r="6"></circle>
136-
<circle cx="36" cy="12" r="6"></circle>
137-
</g>
138-
</svg>"""
139-
140-
141128
class DropdownHtmlTransform(SphinxPostTransform):
142129
"""Transform dropdown containers into the HTML specific AST structures::
143130
@@ -165,7 +152,7 @@ def run(self):
165152
children=[
166153
nodes.raw(
167154
"",
168-
nodes.Text(get_octicon("chevron-up", height="24px")),
155+
nodes.Text(get_octicon("chevron-up", height="1.5em")),
169156
format="html",
170157
)
171158
],
@@ -176,7 +163,7 @@ def run(self):
176163
children=[
177164
nodes.raw(
178165
"",
179-
nodes.Text(get_octicon("chevron-down", height="24px")),
166+
nodes.Text(get_octicon("chevron-down", height="1.5em")),
180167
format="html",
181168
)
182169
],
@@ -196,7 +183,7 @@ def run(self):
196183
title_children = [
197184
nodes.raw(
198185
"...",
199-
nodes.Text(KEBAB),
186+
nodes.Text(get_octicon("kebab-horizontal", height="1.5em")),
200187
format="html",
201188
)
202189
]

sphinx_design/icons.py

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ def list_octicons() -> List[str]:
5656
return list(get_octicon_data().keys())
5757

5858

59-
HEIGHT_REGEX = re.compile(r"^(?P<value>\d+)(?P<unit>px|em|rem)$")
59+
HEIGHT_REGEX = re.compile(r"^(?P<value>\d+(\.\d+)?)(?P<unit>px|em|rem)$")
6060

6161

6262
def get_octicon(
@@ -79,7 +79,7 @@ def get_octicon(
7979
raise ValueError(
8080
f"Invalid height: '{height}', must be format <integer><px|em|rem>"
8181
)
82-
height_value = int(match.group("value"))
82+
height_value = round(float(match.group("value")), 3)
8383
height_unit = match.group("unit")
8484

8585
original_height = 16
@@ -92,7 +92,7 @@ def get_octicon(
9292
elif height_value >= 1.5:
9393
original_height = 24
9494
original_width = data["heights"][str(original_height)]["width"]
95-
width_value = round(original_width * height_value / original_height, 2)
95+
width_value = round(original_width * height_value / original_height, 3)
9696
content = data["heights"][str(original_height)]["path"]
9797
options = {
9898
"version": "1.1",

style/_dropdown.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ details.sd-dropdown {
5555
summary:hover .sd-summary-up svg,
5656
summary:hover .sd-summary-down svg {
5757
opacity: 1;
58+
transform: scale(1.1);
5859
}
5960

6061
.sd-summary-up svg,
@@ -68,7 +69,7 @@ details.sd-dropdown {
6869
pointer-events: none;
6970
position: absolute;
7071
right: 1em;
71-
top: 0.75em;
72+
top: 1em;
7273
}
7374

7475
&[open] > .sd-summary-title .sd-summary-down {

tests/test_snippets/snippet_post_article-info.xml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@
1616
<container classes="sd-col sd-col-auto sd-d-flex sd-align-items-center" design_component="grid-item" is_div="True">
1717
<paragraph classes="sd-p-0 sd-m-0">
1818
<raw classes="sd-pr-2" format="html" xml:space="preserve">
19-
<svg version="1.1" width="16.0px" height="16px" class="sd-octicon sd-octicon-calendar" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.75 0a.75.75 0 01.75.75V2h5V.75a.75.75 0 011.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 16H2.75A1.75 1.75 0 011 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 014.75 0zm0 3.5h8.5a.25.25 0 01.25.25V6h-11V3.75a.25.25 0 01.25-.25h2zm-2.25 4v6.75c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V7.5h-11z"></path></svg>
19+
<svg version="1.1" width="16.0px" height="16.0px" class="sd-octicon sd-octicon-calendar" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.75 0a.75.75 0 01.75.75V2h5V.75a.75.75 0 011.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 16H2.75A1.75 1.75 0 011 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 014.75 0zm0 3.5h8.5a.25.25 0 01.25.25V6h-11V3.75a.25.25 0 01.25-.25h2zm-2.25 4v6.75c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V7.5h-11z"></path></svg>
2020
Jul 24, 2021
2121
<container classes="sd-col sd-col-auto sd-d-flex sd-align-items-center" design_component="grid-item" is_div="True">
2222
<paragraph classes="sd-p-0 sd-m-0">
2323
<raw classes="sd-pr-2" format="html" xml:space="preserve">
24-
<svg version="1.1" width="16.0px" height="16px" class="sd-octicon sd-octicon-clock" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.5 4.75a.75.75 0 00-1.5 0v3.5a.75.75 0 00.471.696l2.5 1a.75.75 0 00.557-1.392L8.5 7.742V4.75z"></path></svg>
24+
<svg version="1.1" width="16.0px" height="16.0px" class="sd-octicon sd-octicon-clock" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.5 4.75a.75.75 0 00-1.5 0v3.5a.75.75 0 00.471.696l2.5 1a.75.75 0 00.557-1.392L8.5 7.742V4.75z"></path></svg>
2525
5 min read

tests/test_snippets/snippet_post_dropdown-basic.xml

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,13 @@
55
<dropdown_main classes="sd-sphinx-override sd-dropdown sd-card sd-mb-3" opened="False">
66
<dropdown_title classes="sd-summary-title sd-card-header">
77
<raw format="html" xml:space="preserve">
8-
<svg viewBox="0 0 36 24" width="36" height="16" xmlns="http://www.w3.org/2000/svg"
9-
class="octicon no-title" aria-hidden="true">
10-
<g xmlns="http://www.w3.org/2000/svg" class="jp-icon3">
11-
<circle cx="0" cy="12" r="6"></circle>
12-
<circle cx="18" cy="12" r="6"></circle>
13-
<circle cx="36" cy="12" r="6"></circle>
14-
</g>
15-
</svg>
8+
<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>
169
<container classes="sd-summary-down" design_component="dropdown-closed-marker" is_div="True">
1710
<raw format="html" xml:space="preserve">
18-
<svg version="1.1" width="24.0px" height="24px" 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>
11+
<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>
1912
<container classes="sd-summary-up" design_component="dropdown-open-marker" is_div="True">
2013
<raw format="html" xml:space="preserve">
21-
<svg version="1.1" width="24.0px" height="24px" 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>
14+
<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>
2215
<container classes="sd-summary-content sd-card-body" design_component="dropdown-body" is_div="True">
2316
<paragraph classes="sd-card-text">
2417
Dropdown content
@@ -27,10 +20,10 @@
2720
Dropdown title
2821
<container classes="sd-summary-down" design_component="dropdown-closed-marker" is_div="True">
2922
<raw format="html" xml:space="preserve">
30-
<svg version="1.1" width="24.0px" height="24px" 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>
23+
<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>
3124
<container classes="sd-summary-up" design_component="dropdown-open-marker" is_div="True">
3225
<raw format="html" xml:space="preserve">
33-
<svg version="1.1" width="24.0px" height="24px" 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>
26+
<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>
3427
<container classes="sd-summary-content sd-card-body" design_component="dropdown-body" is_div="True">
3528
<paragraph classes="sd-card-text">
3629
Dropdown content
@@ -39,10 +32,10 @@
3932
Open dropdown
4033
<container classes="sd-summary-down" design_component="dropdown-closed-marker" is_div="True">
4134
<raw format="html" xml:space="preserve">
42-
<svg version="1.1" width="24.0px" height="24px" 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>
35+
<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>
4336
<container classes="sd-summary-up" design_component="dropdown-open-marker" is_div="True">
4437
<raw format="html" xml:space="preserve">
45-
<svg version="1.1" width="24.0px" height="24px" 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>
38+
<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>
4639
<container classes="sd-summary-content sd-card-body" design_component="dropdown-body" is_div="True">
4740
<paragraph classes="sd-card-text">
4841
Dropdown content

tests/test_snippets/snippet_post_icon-octicon.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,5 @@
55
<paragraph>
66
A coloured icon:
77
<raw format="html" xml:space="preserve">
8-
<svg version="1.1" width="1.0em" height="1em" class="sd-octicon sd-octicon-report sd-text-info" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M1.75 1.5a.25.25 0 00-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 01.75.75v2.19l2.72-2.72a.75.75 0 01.53-.22h6.5a.25.25 0 00.25-.25v-9.5a.25.25 0 00-.25-.25H1.75zM0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0114.25 13H8.06l-2.573 2.573A1.457 1.457 0 013 14.543V13H1.75A1.75 1.75 0 010 11.25v-9.5zM9 9a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"></path></svg>
8+
<svg version="1.1" width="1.0em" height="1.0em" class="sd-octicon sd-octicon-report sd-text-info" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M1.75 1.5a.25.25 0 00-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 01.75.75v2.19l2.72-2.72a.75.75 0 01.53-.22h6.5a.25.25 0 00.25-.25v-9.5a.25.25 0 00-.25-.25H1.75zM0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0114.25 13H8.06l-2.573 2.573A1.457 1.457 0 013 14.543V13H1.75A1.75 1.75 0 010 11.25v-9.5zM9 9a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"></path></svg>
99
, some more text.

tests/test_snippets/snippet_pre_article-info.xml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@
1616
<container classes="sd-col sd-col-auto sd-d-flex sd-align-items-center" design_component="grid-item" is_div="True">
1717
<paragraph classes="sd-p-0 sd-m-0">
1818
<raw classes="sd-pr-2" format="html" xml:space="preserve">
19-
<svg version="1.1" width="16.0px" height="16px" class="sd-octicon sd-octicon-calendar" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.75 0a.75.75 0 01.75.75V2h5V.75a.75.75 0 011.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 16H2.75A1.75 1.75 0 011 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 014.75 0zm0 3.5h8.5a.25.25 0 01.25.25V6h-11V3.75a.25.25 0 01.25-.25h2zm-2.25 4v6.75c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V7.5h-11z"></path></svg>
19+
<svg version="1.1" width="16.0px" height="16.0px" class="sd-octicon sd-octicon-calendar" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.75 0a.75.75 0 01.75.75V2h5V.75a.75.75 0 011.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 16H2.75A1.75 1.75 0 011 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 014.75 0zm0 3.5h8.5a.25.25 0 01.25.25V6h-11V3.75a.25.25 0 01.25-.25h2zm-2.25 4v6.75c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V7.5h-11z"></path></svg>
2020
Jul 24, 2021
2121
<container classes="sd-col sd-col-auto sd-d-flex sd-align-items-center" design_component="grid-item" is_div="True">
2222
<paragraph classes="sd-p-0 sd-m-0">
2323
<raw classes="sd-pr-2" format="html" xml:space="preserve">
24-
<svg version="1.1" width="16.0px" height="16px" class="sd-octicon sd-octicon-clock" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.5 4.75a.75.75 0 00-1.5 0v3.5a.75.75 0 00.471.696l2.5 1a.75.75 0 00.557-1.392L8.5 7.742V4.75z"></path></svg>
24+
<svg version="1.1" width="16.0px" height="16.0px" class="sd-octicon sd-octicon-clock" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.5 4.75a.75.75 0 00-1.5 0v3.5a.75.75 0 00.471.696l2.5 1a.75.75 0 00.557-1.392L8.5 7.742V4.75z"></path></svg>
2525
5 min read

0 commit comments

Comments
 (0)