fix(nav): change breakpoint to fix bug #1918
Conversation
|
Deploy preview for pf-next ready! Built with commit acbeecc |
There was a problem hiding this comment.
I think its happening because the grid in the header nav changes at a minimum breakpoint of lg, and these assignments are happening at a maximum breakpoint of lg, although I can't fully pinpoint the issue. @mcoker wondering if you have any insight into this?
That's exactly the problem. Anytime we use max-width we should be using $breakpoint - 1. Otherwise we'll start running into these breakpoint collisions. It's probably wise to create a new set of variables for this.
$pf-global--max-width--breakpoint--sm: $pf-global--breakpoint--sm - 1;
$pf-global--max-width--breakpoint--md: $pf-global--breakpoint--md - 1;
$pf-global--max-width--breakpoint--lg: $pf-global--breakpoint--lg - 1;
$pf-global--max-width--breakpoint--xl: $pf-global--breakpoint--xl - 1;
$pf-global--max-width--breakpoint--2xl: $pf-global--breakpoint--2xl - 1;
But for bug fix, the inline calc makes sense.
@mcoker thoughts?
| @@ -240,7 +240,7 @@ | |||
| min-width: 0; | |||
|
|
|||
| .pf-c-nav__scroll-button { | |||
| @media screen and (max-width: $pf-global--breakpoint--lg) { | |||
| @media screen and (max-width: 991px) { | |||
There was a problem hiding this comment.
Can you use a subtraction operator here #{$pf-global--breakpoint--lg - 1}?
|
🎉 This PR is included in version 2.12.8 🎉 The release is available on: Your semantic-release bot 📦🚀 |
fix #1917
When I remove 1px from the breakpoint it fixes the issue of
top: var(--pf-c-page__header-nav--c-nav__scroll-button--lg--Top);andbackground-color: var(--pf-c-page__header-nav--c-nav__scroll-button--lg--BackgroundColor);being assigned too early and causing a bug.This also fixes the nav background-color changing to transparent before it is used for the background color of the scroll buttons.
I think its happening because the grid in the header nav changes at a minimum breakpoint of lg, and these assignments are happening at a maximum breakpoint of lg, although I can't fully pinpoint the issue. @mcoker wondering if you have any insight into this?