fix(components,styles): post-header margins and global buttons shrink on scroll
#4767
Conversation
🦋 Changeset detectedLatest commit: 4a73c8b The changes in this PR will be included in the next version bump. This PR includes changesets to release 15 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Related Previews |
|
|
||
| @include media.min(lg) { | ||
| // targets the right links and language switch to hide them on scroll | ||
| &:nth-child(2) { | ||
| transform: scale(calc(35 / max(var(--header-scroll-top), 35))); | ||
| } | ||
| } |
There was a problem hiding this comment.
This is a good idea, but it leaves us with the issue that the controls are still focusable. Earlier, I was thinking that we should not make them focusable by hiding them with display: none, but that leaves us with the issue that we don't know what to do with these controls when they are only partially visible.
I think a better idea would be to only apply the sticky behaviour when the focus is not inside the global navigation. When the page is scrolled, header is sticky, and the user navigates to the language switch via keyboard, we should show the header in full to make sure everything is properly visible. I think that could be done through CSS alone, making it more reliable.
.global-nav:focus-within {
// Reset all sticky styles
}
// Or the opposite
.global-nav:not(:focus-within) {
// Sticky styles
}
…sign-system into header-visual-fixes
|
No description provided.