fix: wiggling nav items #123
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
huyenltnguyen
force-pushed
the
fix/nav-items
branch
from
9ba93a1
to
e24784a
Compare
huyenltnguyen
force-pushed
the
fix/nav-items
branch
from
e24784a
to
27120fa
Compare
huyenltnguyen
commented
Apr 19, 2024
| &:active, | ||
| &:hover, | ||
| &:focus { | ||
| background-color: $--gray75 $i; |
There was a problem hiding this comment.
Without the !important flag, this rule has no effect.
| border: 0px; | ||
| } | ||
| box-sizing: border-box; | ||
| border: 0px $i; |
There was a problem hiding this comment.
Took me longer than I wanted to figure this out.
The issue is:
- The element has
box-sizingbeingcontent-box, meaning its width and height don't account for padding or border. - We do have
heightbeing34px(instead of38px) to account for the top and bottom padding (2px each). - However, Discourse adds a border to the element when it is hovered, causing the total width and height to change.
- The
border: 0pxrule here doesn't have any effect because its specificity is still lower than the selector Discourse uses.
The fix is:
- Changing the box model to
border-box, so that padding and border are accounted into the width and height (meaning we or Discourse can adjust the padding and border, but the total width and height won't change). - Adding the
!importantflag toborder: 0pxto remove the border. - Updating the width and height values to account for the padding.
- new value = original value + 2px * 2
raisedadead
approved these changes
Apr 19, 2024
|
Please merge and deploy when ready. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Checklist:
Update index.md)This PR changes the box model from
content-boxtoborder-boxto prevent the nav items from wiggling on hover.Screenshots (containing animated images)