Skip to content

Commit 95308ff

Browse files
estelleestelle
committed
prettier
1 parent 773cea4 commit 95308ff

File tree

1 file changed

+153
-138
lines changed

1 file changed

+153
-138
lines changed

‎modules/overflow.html

Lines changed: 153 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -5,112 +5,128 @@
55
<meta name="viewport" content="width=device-width" />
66
<title>Overflow</title>
77
<style>
8-
article {
9-
display: flex;
10-
gap: 1em;
11-
}
12-
13-
label {
14-
display: block;
15-
white-space: nowrap;
16-
}
17-
18-
pre {
19-
border: 2px dashed crimson;
20-
height: 100px;
21-
width: 20em;
22-
margin-bottom: 3em;
23-
overflow-clip-margin: 1em;
24-
text-align: center;
25-
}
26-
27-
.wide {
28-
width: 40em;
29-
}
30-
31-
::before {
32-
font-weight: bold;
33-
color: white;
34-
background: crimson;
35-
display: inline-block;
36-
min-width: 50%;
37-
padding: 3px 5px;
38-
box-sizing: border-box;
39-
}
40-
41-
.hidden {
42-
overflow: hidden;
43-
}
44-
.hidden::before {
45-
content: "hidden: ";
46-
}
47-
48-
.clip {
49-
overflow: clip;
50-
}
51-
.clip::before {
52-
content: "clip: ";
53-
}
54-
55-
.scroll {
56-
overflow: scroll;
57-
}
58-
.scroll::before {
59-
content: "scroll: ";
60-
}
61-
62-
.auto {
63-
overflow: auto;
64-
}
65-
.auto::before {
66-
content: "auto: ";
67-
}
68-
69-
.overlay {
70-
overflow: clip;
71-
overflow: overlay;
72-
}
73-
.overlay::before {
74-
content: "overlay (or clip if not supported): ";
75-
}
76-
77-
.visible {
78-
overflow: visible;
79-
}
80-
.visible::before {
81-
content: "visible: ";
82-
}
83-
84-
article:not(:has(pre.clip)) > fieldset > label:nth-of-type(2),
85-
article:not(:has(pre.hidden, pre.scroll, pre.auto, pre.overlay)) fieldset fieldset {
86-
opacity: 20%;
87-
pointer-events: none;
88-
}
8+
article {
9+
display: flex;
10+
gap: 1em;
11+
}
12+
13+
label {
14+
display: block;
15+
white-space: nowrap;
16+
}
17+
18+
pre {
19+
border: 2px dashed crimson;
20+
height: 100px;
21+
width: 20em;
22+
margin-bottom: 3em;
23+
overflow-clip-margin: 1em;
24+
text-align: center;
25+
}
26+
27+
.wide {
28+
width: 40em;
29+
}
30+
31+
::before {
32+
font-weight: bold;
33+
color: white;
34+
background: crimson;
35+
display: inline-block;
36+
min-width: 50%;
37+
padding: 3px 5px;
38+
box-sizing: border-box;
39+
}
40+
41+
.hidden {
42+
overflow: hidden;
43+
}
44+
.hidden::before {
45+
content: "hidden: ";
46+
}
47+
48+
.clip {
49+
overflow: clip;
50+
}
51+
.clip::before {
52+
content: "clip: ";
53+
}
54+
55+
.scroll {
56+
overflow: scroll;
57+
}
58+
.scroll::before {
59+
content: "scroll: ";
60+
}
61+
62+
.auto {
63+
overflow: auto;
64+
}
65+
.auto::before {
66+
content: "auto: ";
67+
}
68+
69+
.overlay {
70+
overflow: clip;
71+
overflow: overlay;
72+
}
73+
.overlay::before {
74+
content: "overlay (or clip if not supported): ";
75+
}
76+
77+
.visible {
78+
overflow: visible;
79+
}
80+
.visible::before {
81+
content: "visible: ";
82+
}
83+
84+
article:not(:has(pre.clip)) > fieldset > label:nth-of-type(2),
85+
article:not(:has(pre.hidden, pre.scroll, pre.auto, pre.overlay))
86+
fieldset
87+
fieldset {
88+
opacity: 20%;
89+
pointer-events: none;
90+
}
8991
</style>
9092
</head>
9193
<body>
9294
<article>
93-
<fieldset><legend>Select options:</legend>
94-
<label><code>overflow</code>:
95-
<select id="overflowValue">
96-
<option>hidden</option>
97-
<option>clip</option>
98-
<option>scroll</option>
99-
<option>auto</option>
100-
<option selected>visible</option>
101-
<option>overlay</option>
102-
</select>
95+
<fieldset>
96+
<legend>Select options:</legend>
97+
<label
98+
><code>overflow</code>:
99+
<select id="overflowValue">
100+
<option>hidden</option>
101+
<option>clip</option>
102+
<option>scroll</option>
103+
<option>auto</option>
104+
<option selected>visible</option>
105+
<option>overlay</option>
106+
</select>
103107
</label>
104-
<label><code>overflow-clip-margin</code>: <input type="number" id="ocm" value="1" min="0" max="10" size="2"><code>em<code></label>
105-
</label>
106-
<label><input type="checkbox" id="wide"> <code>width</code>: <code>20em</code> or <code>40em</code></label>
107-
<fieldset><legend>Scroll programatically:</legend>
108-
<label>ScrollLeft: <input type="range" min="0" max="100" value="0" id="scrollL"></label>
109-
<label>ScrollTop: <input type="range" min="0" max="100" value="0" id="scrollT"></label>
110-
111-
</fieldset>
108+
<label>
109+
<code>overflow-clip-margin</code>:
110+
<input type="number" id="ocm" value="1" min="0" max="10" size="2" />
111+
<code>em</code>
112+
</label>
113+
<label
114+
><input type="checkbox" id="wide" /> <code>width</code>:
115+
<code>20em</code> or <code>40em</code></label
116+
>
117+
<fieldset>
118+
<legend>Scroll programatically:</legend>
119+
<label
120+
>ScrollLeft:
121+
<input type="range" min="0" max="100" value="0" id="scrollL"
122+
/></label>
123+
<label
124+
>ScrollTop:
125+
<input type="range" min="0" max="100" value="0" id="scrollT"
126+
/></label>
127+
</fieldset>
112128
</fieldset>
113-
<pre class="visible">&nbsp;
129+
<pre class="visible">&nbsp;
114130
Oh, Rubber Duckie, you're the one
115131
You make bath time lots of fun
116132
Rubber Duckie, I'm awfully fond of you
@@ -129,44 +145,43 @@
129145
</pre>
130146
</article>
131147
<script>
132-
const pre = document.querySelector('pre');
133-
const val = document.getElementById("overflowValue");
134-
const check = document.getElementById("wide");
135-
const ocm = document.getElementById("ocm");
136-
const scrollL = document.getElementById("scrollL");
137-
const scrollT = document.getElementById("scrollT");
138-
139-
val.addEventListener("change", () => {
140-
if (pre.classList.contains("wide")) {
141-
pre.className = `wide ${val.value}`;
142-
} else {
143-
pre.className = `${val.value}`;
144-
}
145-
});
146-
147-
wide.addEventListener("change", () => {
148-
pre.classList.toggle("wide");
149-
});
150-
151-
ocm.addEventListener("change", () => {
152-
pre.style.overflowClipMargin = `${ocm.value}em`;
153-
});
154-
155-
scrollL.addEventListener("change", () => {
156-
scrollExample();
157-
});
158-
scrollT.addEventListener("change", () => {
159-
scrollExample();
160-
});
161-
162-
function scrollExample() {
163-
pre.scrollTo({
164-
top: scrollT.value * 26,
165-
left: scrollL.value * 2,
166-
behavior: "smooth",
167-
});
168-
}
169-
148+
const pre = document.querySelector("pre");
149+
const val = document.getElementById("overflowValue");
150+
const check = document.getElementById("wide");
151+
const ocm = document.getElementById("ocm");
152+
const scrollL = document.getElementById("scrollL");
153+
const scrollT = document.getElementById("scrollT");
154+
155+
val.addEventListener("change", () => {
156+
if (pre.classList.contains("wide")) {
157+
pre.className = `wide ${val.value}`;
158+
} else {
159+
pre.className = `${val.value}`;
160+
}
161+
});
162+
163+
wide.addEventListener("change", () => {
164+
pre.classList.toggle("wide");
165+
});
166+
167+
ocm.addEventListener("change", () => {
168+
pre.style.overflowClipMargin = `${ocm.value}em`;
169+
});
170+
171+
scrollL.addEventListener("change", () => {
172+
scrollExample();
173+
});
174+
scrollT.addEventListener("change", () => {
175+
scrollExample();
176+
});
177+
178+
function scrollExample() {
179+
pre.scrollTo({
180+
top: scrollT.value * 26,
181+
left: scrollL.value * 2,
182+
behavior: "smooth",
183+
});
184+
}
170185
</script>
171186
</body>
172187
</html>

0 commit comments

Comments
 (0)