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

Subnav white background adjustment #18976

Merged
merged 2 commits into from Dec 11, 2019
Merged

Subnav white background adjustment #18976

merged 2 commits into from Dec 11, 2019

Conversation

@karmatosed
Copy link
Member

karmatosed commented Dec 6, 2019

Brings in off-white color to make it work on white backgrounds, for example Twenty Twenty. Fixes #18969

image

@shaunandrews

This comment has been minimized.

Copy link

shaunandrews commented Dec 6, 2019

I don't mind the off-white — I don't love it either. Perhaps adding a border instead would help, and likely be a better solution than a background color.

@MichaelArestad

This comment has been minimized.

Copy link

MichaelArestad commented Dec 6, 2019

I don't mind the off-white — I don't love it either. Perhaps adding a border instead would help, and likely be a better solution than a background color.

I agree. I'd lean toward a border myself.

@melchoyce

This comment has been minimized.

Copy link
Contributor

melchoyce commented Dec 6, 2019

Agreed — could we style it like our existing dropdown menus, like the block library or settings dropdown?

@karmatosed

This comment has been minimized.

Copy link
Member Author

karmatosed commented Dec 9, 2019

For now, I have styled as per the editor but I do think there's a fair point that it should have different styling as it is a different element. Also of note, the concept of having colour as the focus was good to explore over an explicit border. I have also to be consistent brought a border into the dark version.

@karmatosed

This comment has been minimized.

Copy link
Member Author

karmatosed commented Dec 9, 2019

New screenshots:

image

image

@shaunandrews

This comment has been minimized.

Copy link

shaunandrews commented Dec 9, 2019

For the dark version, it might make sense to use a lighter border. So for the light version, there's a dark border (and I'd even suggest a little darker than what you have) and for the dark version, there's a light border. This helps ensure that the menu is noticeable across various color schemes.

-moz-box-shadow: -2px 4px 4px -1px rgba(97, 97, 97, 0.153);
border-radius: 4px;
box-shadow: -2px 4px 4px -1px rgba(97, 97, 97, 0.153);
-webkit-box-shadow: 0 3px 30px rgba(25, 30, 35, 0.1);

This comment has been minimized.

Copy link
@shaunandrews

shaunandrews Dec 9, 2019

Is there a reason you're not using straight black (rgba( 0, 0, 0, x)) or white ( rgba( 255, 255, 255, x ) )?

This comment has been minimized.

Copy link
@karmatosed

karmatosed Dec 9, 2019

Author Member

This is directly from existing shadows in Gutenberg so pulling from those.

@karmatosed

This comment has been minimized.

Copy link
Member Author

karmatosed commented Dec 9, 2019

@shaunandrews that darkness on the light is directly from the existing menu in the editor so I think keeping it as that makes sense for now. Same with the darker, I think to keep it dark works, rather than reversing the colourways.

@karmatosed karmatosed added this to the Gutenberg 7.1 milestone Dec 9, 2019
@karmatosed karmatosed added this to Waiting review in Tightening Up Dec 9, 2019
@karmatosed

This comment has been minimized.

Copy link
Member Author

karmatosed commented Dec 9, 2019

Added an iteration on dark mode for @shaunandrews 🙌

karmatosed added 2 commits Dec 6, 2019
Brings in off-white color to make it work on white backgrounds, for example Twenty Twenty. Fixes #18863
@jasmussen jasmussen force-pushed the try/subnav-white branch from 03d8eb5 to 4bcdbd3 Dec 11, 2019
@karmatosed karmatosed merged commit 5c1fca9 into master Dec 11, 2019
2 checks passed
2 checks passed
pull-request-automation
Details
Travis CI - Pull Request Build Passed
Details
@karmatosed karmatosed deleted the try/subnav-white branch Dec 11, 2019
@karmatosed karmatosed moved this from Waiting review to Done in Tightening Up Dec 11, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Tightening Up
  
Done
5 participants
You can’t perform that action at this time.