- From: Jhey Tompkins via GitHub <sysbot+gh@w3.org>
- Date: Mon, 05 Dec 2022 14:25:55 +0000
- To: public-css-archive@w3.org
Yep – Transitioning the inset properties or being able to use those values in calc to generate `transform` values would be super useful. The demo in question is this one 👇
https://user-images.githubusercontent.com/842246/205658978-489b6590-bbbf-44ee-a1d2-cd369c32db88.mp4
It shows a use case where you might want an element to follow user interaction. Not one I'd throw into production anytime soon 😅
But it works using `:has()` to update and `--active-anchor` custom property (this did work in ~108).
```css
:root {
--active-anchor: --email;
--active-left: anchor(var(--active-anchor) right);
--active-top: anchor(var(--active-anchor) center);
}
:root:has(.form-group:focus-within) {
--anchor-scale: 1;
--anchor-transition: top 0.2s, left 0.2s, transform 0.2s;
}
#password {
anchor-name: --password;
}
:root:has(#password) {
--active-anchor: --password;
}
```
A combination of implicit anchor and transition could also be useful in a variety of tooltip/overlay scenarios too. Even those type trigger UI where like on here when you type `#` to get the dropdown (What is the technical name for that pattern? 😅 )
--
GitHub Notification of comment by jh3y
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8181#issuecomment-1337460047 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 5 December 2022 14:25:57 UTC