Skip to content

Commit 35025cc

Browse files
tabatkinstabatkins
committed
[css-anchor-position-1] Add wip example
1 parent 034f50a commit 35025cc

1 file changed

Lines changed: 169 additions & 0 deletions

File tree

‎css-anchor-position-1/examples/calc-anchor.html‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
<!doctype html>
2+
<meta charset=utf-8>
3+
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
4+
<title>Anchor + calc() example</title>
5+
6+
<div class="chart">
7+
<div class="chart__bar" id="bar-1"></div>
8+
<div class="chart__bar" id="bar-2"></div>
9+
<div class="chart__bar" id="bar-3"></div>
10+
</div>
11+
<div popover=manual class="chart__tooltip chart__tooltip--max">👈 Max!</div>
12+
<div popover=manual class="chart__tooltip chart__tooltip--min">Min! 👉</div>
13+
<div class="actions">
14+
<input data-bar-id="bar-1" type="range" min="0" max="100" value="90" />
15+
<input data-bar-id="bar-2" type="range" min="0" max="100" value="25" />
16+
<input data-bar-id="bar-3" type="range" min="0" max="100" value="75" />
17+
</div>
18+
19+
<style>
20+
@layer demo {
21+
.chart__bar:nth-of-type(1) {
22+
anchor-name: --anchor-1;
23+
}
24+
25+
.chart__bar:nth-of-type(2) {
26+
anchor-name: --anchor-2;
27+
}
28+
29+
.chart__bar:nth-of-type(3) {
30+
anchor-name: --anchor-3;
31+
}
32+
33+
.chart {
34+
anchor-name: --chart;
35+
}
36+
37+
[popover] { inset: unset; }
38+
39+
.chart__tooltip {
40+
position: absolute;
41+
height: 2em;
42+
translate: 0 50%;
43+
overflow: visible;
44+
background: black;
45+
color: white;
46+
border: none;
47+
place-content: center;
48+
}
49+
50+
.chart__tooltip--max {
51+
left: anchor(--chart right);
52+
bottom: max(
53+
anchor(--anchor-1 top),
54+
anchor(--anchor-2 top),
55+
anchor(--anchor-3 top)
56+
);
57+
&::after {
58+
content: "";
59+
position: absolute;
60+
right: 100%;
61+
top: 0;
62+
bottom: 0;
63+
border: solid transparent 2px;
64+
border-right-color: black;
65+
border-width: 1em 1em 1em 0;
66+
}
67+
}
68+
.chart__tooltip--min {
69+
position: absolute;
70+
right: calc(anchor(--chart left) + 1rem);
71+
bottom: min(
72+
anchor(--anchor-1 top),
73+
anchor(--anchor-2 top),
74+
anchor(--anchor-3 top)
75+
);
76+
translate: 0 50%;
77+
}
78+
}
79+
@layer base {
80+
:root {
81+
--anchor-size: 50px;
82+
--anchored-size: 250px;
83+
}
84+
85+
*,
86+
*:after,
87+
*:before {
88+
box-sizing: border-box;
89+
}
90+
91+
body {
92+
display: grid;
93+
place-items: center;
94+
align-content: center;
95+
gap: 1rem;
96+
min-height: 100vh;
97+
font-family: "Google Sans", sans-serif, system-ui;
98+
background: var(--gray-1);
99+
position: relative;
100+
overflow: hidden;
101+
}
102+
103+
.actions {
104+
width: 60vmin;
105+
display: grid;
106+
grid-template-columns: repeat(3, 1fr);
107+
grid-gap: 1rem;
108+
padding: 1rem;
109+
}
110+
111+
input {
112+
min-width: 0;
113+
}
114+
115+
.chart {
116+
width: 60vmin;
117+
aspect-ratio: 4 / 3;
118+
display: grid;
119+
grid-template-columns: repeat(3, 1fr);
120+
gap: 1rem;
121+
padding: 1rem;
122+
align-items: end;
123+
border-left: 4px solid var(--gray-9);
124+
border-bottom: 4px solid var(--gray-9);
125+
}
126+
127+
.chart__bar {
128+
background: var(--bg, var(--indigo-4));
129+
height: calc(var(--height, 100) * 1%);
130+
}
131+
132+
.chart__bar:nth-of-type(1) {
133+
anchor-name: --anchor-1;
134+
--bg: #4dabf7;
135+
height: 90%;
136+
}
137+
138+
.chart__bar:nth-of-type(2) {
139+
anchor-name: --anchor-2;
140+
--bg: #69db7c;
141+
height: 25%;
142+
}
143+
144+
.chart__bar:nth-of-type(3) {
145+
anchor-name: --anchor-3;
146+
--bg: #ff8787;
147+
height: 75%;
148+
}
149+
}
150+
</style>
151+
152+
<script>
153+
// Just a little script to hook up the bar heights to the range inputs.
154+
const INPUTS = document.querySelectorAll("input");
155+
const POPS = document.querySelectorAll("[popover]")
156+
157+
POPS.forEach(pop => pop.showPopover())
158+
159+
const update = (e) => {
160+
document.querySelector(
161+
`#${e.target.getAttribute("data-bar-id")}`
162+
).style.height = `${e.target.value}%`;
163+
};
164+
165+
INPUTS.forEach((input) => {
166+
console.info(input);
167+
input.addEventListener("input", update);
168+
});
169+
</script>

0 commit comments

Comments
 (0)