Skip to content

Commit 3474830

Browse files
fanixus96fanixus96
committed
add style for code snippet show-hide button
1 parent a019b61 commit 3474830

File tree

13 files changed

+210
-91
lines changed

13 files changed

+210
-91
lines changed

‎docs/_assets/css/color-brewer.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ Ported by Fabrício Tavares de Oliveira
66
77
*/
88

9-
.hljs {
9+
/* .hljs {
1010
background: transparent;
1111
}
1212
1313
.hljs,
1414
.hljs-subst {
1515
color: #000;
16-
}
16+
} */
1717

1818
/*.hljs-string,
1919
.hljs-meta,
@@ -24,7 +24,7 @@ Ported by Fabrício Tavares de Oliveira
2424
color: #756bb1;
2525
}*/
2626

27-
.hljs-comment,
27+
/* .hljs-comment,
2828
.hljs-quote {
2929
color: #636363;
3030
}
@@ -40,7 +40,7 @@ Ported by Fabrício Tavares de Oliveira
4040
.hljs-deletion,
4141
.hljs-variable {
4242
color: #88f;
43-
}
43+
} */
4444

4545
/*.hljs-keyword,
4646
.hljs-selector-tag,
@@ -57,10 +57,10 @@ Ported by Fabrício Tavares de Oliveira
5757
color: #3182bd;
5858
}*/
5959

60-
.hljs-emphasis {
60+
/* .hljs-emphasis {
6161
font-style: italic;
6262
}
6363
6464
.hljs-attribute {
6565
color: #e6550d;
66-
}
66+
} */

‎docs/_layouts/main.html‎

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,4 @@
66
- css/content-contributors.css
77
---
88

9-
<div id="content-wrapper">
10-
{{ content }}
11-
<div id="footer" class="body-small mobile-footer">
12-
<div class="left-container">"Generated with"</div>
13-
<div class="right-container">
14-
<a href="https://github.com/lampepfl/dotty">
15-
<button class="icon-button gh"></button>
16-
</a>
17-
<a href="https://twitter.com/scala_lang">
18-
<button class="icon-button twitter"></button>
19-
</a>
20-
<a href="https://discord.com/invite/scala">
21-
<button class="icon-button discord"></button>
22-
</a>
23-
<a href="https://gitter.im/scala/scala">
24-
<button class="icon-button gitter"></button>
25-
</a>
26-
<div class="text">"© 2002-2021 · LAMP/EPFL"</div>
27-
</div>
28-
<div cls="text-mobile"></div>
29-
"© 2002-2021 · LAMP/EPFL"
30-
</div>
31-
</div>
9+
<div id="content-wrapper">{{ content }}</div>

‎scaladoc-js/common/css/code-snippets.css‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
/* Snippets */
22

3-
.snippet {
3+
/* .snippet {
44
position: relative;
55
background: var(--code-bg);
66
margin: 1em 0px;
77
border-radius: 2px;
88
box-shadow: 0 0 2px #888;
99
cursor: default;
10-
}
11-
.snippet-error {
10+
} */
11+
/* .snippet-error {
1212
border-bottom: 2px dotted red;
1313
}
1414
.snippet-warn {
@@ -19,17 +19,17 @@
1919
}
2020
.snippet-debug {
2121
border-bottom: 2px dotted pink;
22-
}
22+
} */
2323

24-
.snippet .snippet-meta {
24+
/* .snippet .snippet-meta {
2525
border-top: 2px solid var(--inactive-bg);
2626
color: var(--inactive-fg);
2727
margin-top: 10px;
2828
padding-top: 10px;
2929
font-size: 0.75em;
30-
}
30+
} */
3131

32-
.snippet-meta .snippet-label {
32+
/* .snippet-meta .snippet-label {
3333
font-weight: bold;
3434
}
3535
@@ -319,4 +319,4 @@ input:checked + .slider:before {
319319
--slider-width: 24px;
320320
--slider-height: 10px;
321321
}
322-
}
322+
} */

‎scaladoc-js/common/src/code-snippets/CodeSnippets.scala‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,9 @@ class CodeSnippets:
4040
def createShowHideButton(toggleRoot: html.Element) = {
4141
div(cls := "snippet-showhide")(
4242
label(cls := "snippet-showhide-button")(
43-
input("type" := "checkbox").tap(_.addEventListener("change", _ => toggleHide(toggleRoot))),
44-
span(cls := "slider")
43+
input("type" := "checkbox", id := "snippet-showhide").tap(_.addEventListener("change", _ => toggleHide(toggleRoot))),
44+
label(id := "snippet-showhide-label", "for" := "snippet-showhide")
4545
),
46-
p("Show collapsed lines")
4746
)
4847
}
4948

‎scaladoc/resources/dotty_res/scripts/ux.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ window.addEventListener("DOMContentLoaded", () => {
121121
const sideMenuToggler = document.getElementById("mobile-sidebar-toggle");
122122
sideMenuToggler.addEventListener('click', _e => {
123123
document.getElementById("leftColumn").classList.toggle("show")
124-
document.getElementById("content-wrapper").classList.toggle("sidebar-shown")
124+
document.getElementById("content").classList.toggle("sidebar-shown")
125125
document.getElementById("toc").classList.toggle("sidebar-shown")
126126
sideMenuToggler.classList.toggle("menu-shown")
127127
})

‎scaladoc/resources/dotty_res/styles/nord-light.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* Theme inspired by nordtheme. The colors have been darkened to work on light backgrounds. */
2-
:root {
2+
/* :root {
33
--hljs-bg: var(--code-bg);
44
--hljs-fg: var(--code-fg);
55
--hljs-comment: #90A1C1;
@@ -75,4 +75,4 @@ pre, .hljs {
7575
}
7676
.hljs-attribute {
7777
color: var(--hljs-type);
78-
}
78+
} */

‎scaladoc/resources/dotty_res/styles/theme/components/code-snippet.css‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
.snippet {
2+
position: relative;
3+
flex-direction: row;
4+
gap: calc(2 * var(--base-spacing));
5+
padding: calc(3 * var(--base-spacing)) calc(3 * var(--base-spacing))
6+
calc(3 * var(--base-spacing)) calc(1 * var(--base-spacing));
7+
background-color: var(--action-primary-background-default-solid);
8+
border: 1px solid transparent;
9+
color: var(--text-primary);
10+
}
11+
12+
.snippet pre {
13+
margin: 0;
14+
}
15+
16+
.snippet:hover {
17+
background-color: var(--action-primary-background-hover);
18+
border: 1px solid var(--border-default);
19+
}
20+
21+
.snippet .copy-button {
22+
display: none;
23+
position: absolute;
24+
top: calc(3 * var(--base-spacing));
25+
right: calc(3 * var(--base-spacing));
26+
}
27+
28+
#snippet-showhide {
29+
display: none;
30+
}
31+
32+
.snippet-showhide {
33+
margin-top: calc(2 * var(--base-spacing));
34+
}
35+
36+
#snippet-showhide-label::before {
37+
content: "Show all";
38+
color: var(--action-primary-content-default);
39+
text-decoration: none;
40+
cursor: pointer;
41+
}
42+
43+
#snippet-showhide-label:hover::before {
44+
color: var(--action-primary-content-hover);
45+
}
46+
47+
#snippet-showhide-label:active::before {
48+
color: var(--action-primary-content-active);
49+
}
50+
51+
#snippet-showhide:checked + #snippet-showhide-label::before {
52+
content: "Hide";
53+
}
54+
55+
.snippet:hover {
56+
background-color: var(--action-primary-background-hover);
57+
border: 1px solid var(--border-default);
58+
}
59+
60+
.snippet:hover .copy-button {
61+
display: block;
62+
}
63+
64+
.hljs-keyword {
65+
color: var(--code-method-highlighting-keyword);
66+
}
67+
68+
.hljs-comment {
69+
color: var(--code-syntax-highlighting-comment);
70+
}
71+
72+
.hljs-quote {
73+
color: var(--code-syntax-highlighting-quote);
74+
}
75+
76+
.hljs-line-number {
77+
color: var(--code-syntax-highlighting-line-number);
78+
}
79+
80+
.hljs-title {
81+
color: var(--code-syntax-highlighting-title);
82+
}
83+
84+
.hljs-keyword {
85+
color: var(--code-syntax-highlighting-keyword);
86+
}
87+
88+
.hljs-code-fg {
89+
color: var(--code-syntax-highlighting-code-fg);
90+
}
91+
92+
.hljs-literal {
93+
color: var(--code-syntax-highlighting-literal);
94+
}
95+
96+
.hljs-type {
97+
color: var(--code-syntax-highlighting-type);
98+
}
99+
100+
.hljs-subst {
101+
color: var(--code-syntax-highlighting-subst);
102+
}
103+
104+
.hljs-meta {
105+
color: var(--code-syntax-highlighting-meta);
106+
}
107+
108+
.hljs-string {
109+
color: var(--code-syntax-highlighting-string);
110+
}
111+
112+
.hljs-deletion {
113+
color: var(--code-syntax-highlighting-deletion);
114+
}
115+
116+
.hljs-variable {
117+
color: var(--code-syntax-highlighting-variable);
118+
}

‎scaladoc/resources/dotty_res/styles/theme/components/table-of-content.css‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
#toc {
22
position: absolute;
3-
right:0;
3+
right: 0;
44
display: flex;
55
flex-direction: column;
6-
margin-top: calc(18.75 * var(--base-spacing));
76
padding: 0 calc(1 * var(--base-spacing));
87
}
98

@@ -16,25 +15,25 @@
1615
margin-bottom: calc(2.5 * var(--base-spacing));
1716
}
1817

19-
@media(min-width: 1920px) {
18+
@media (min-width: 1920px) {
2019
#toc {
2120
margin-right: calc(36.75 * var(--base-spacing));
2221
}
2322
}
2423

25-
@media(max-width: 1920px) {
24+
@media (max-width: 1920px) {
2625
#toc {
2726
margin-right: calc(6 * var(--base-spacing));
2827
}
2928
}
3029

31-
@media(max-width: 1024px) {
30+
@media (max-width: 1024px) {
3231
#toc.sidebar-shown {
3332
display: none;
3433
}
3534
}
3635

37-
@media(max-width: 768px) {
36+
@media (max-width: 768px) {
3837
#toc {
3938
display: none;
4039
}
@@ -60,4 +59,4 @@
6059

6160
#toc li:focus-visible {
6261
box-shadow: 0px 0px 0px 2px var(--focus-default);
63-
}
62+
}

0 commit comments

Comments
 (0)