Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Switcher): change width and border-bottom #372

Merged
merged 2 commits into from
Aug 28, 2019
Merged

fix(Switcher): change width and border-bottom #372

merged 2 commits into from
Aug 28, 2019

Conversation

abbeyhrt
Copy link
Contributor

Closes #357

  • updates the width of the nav from 48px to 47px tp remove the 1px overhang
  • changes the border from transparent to $inverse-02 so the border matches the rest of the bar.

Testing: check that the Switcher is no longer 1 px off and that the border matches the rest of the nav bar

@vercel
Copy link

vercel bot commented Aug 26, 2019

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://gatsby-theme-carbon-git-fork-abbeyhrt-357-fix-switcher-px-off.carbon-design-system.now.sh

@@ -3,14 +3,14 @@
z-index: 10000;
position: fixed;
right: 0;
top: 48px;
top: 47px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Usually if we get into pixel nudging like this, there's a better solution somewhere. Doing this approach means we don't get the border-top like we want.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah that makes sense! Made the change!

height: 100%;
width: 16rem;
background-color: $ui-05;
border-left: 1px solid $inverse-02;
transform: translateX(16rem);
overflow-y: hidden;
border-bottom: 1px solid transparent;
border-bottom: 1px solid $inverse-02;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Try leaving the top rule at 48px and just removing this border-bottom rule all together. That way the border will just appear instantly once the open class gets applied.

Copy link
Member

@alisonjoseph alisonjoseph left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Thanks!

@abbeyhrt abbeyhrt merged commit 252f441 into carbon-design-system:master Aug 28, 2019
@abbeyhrt abbeyhrt deleted the 357-fix-switcher-px-off branch August 28, 2019 15:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Switcher is 1px off (see screen shot)
3 participants