Skip to content

Ensure :focus shadow on sidenav is above :hover fill#738

Merged
maya merged 1 commit into
uswds:18f-pages-stagingfrom
andrewliebchen:sidenav-focus-stacking
Oct 2, 2015
Merged

Ensure :focus shadow on sidenav is above :hover fill#738
maya merged 1 commit into
uswds:18f-pages-stagingfrom
andrewliebchen:sidenav-focus-stacking

Conversation

@andrewliebchen

Copy link
Copy Markdown
Contributor

Its a really minor thing, but it bothers me that the hover background-color in the sidebar overlaps the box-shadow of the previous :focus-ed element:

screenshot 2015-09-28 16 13 20

This little change ensures that the box-shadow is always above the hovered elements:

screenshot 2015-09-28 16 15 01

Great work! So excited to see this. Looking forward to dive in when I have more time.

@cademarkegard

Copy link
Copy Markdown

👍

1 similar comment
@hanibash

Copy link
Copy Markdown

👍

@maya

maya commented Sep 30, 2015

Copy link
Copy Markdown
Contributor

@andrewhughey thanks for this! I just want to look into if there's a better way to manage z-index with Sass rather than just use z-index: 1

See: https://css-tricks.com/handling-z-index/

@andrewliebchen

Copy link
Copy Markdown
Contributor Author

Thanks @maya. At OpenGov, we use a combination method of a map variable to store the z-index key value pairs for each type of component, and a mixin to call that value in your components.

I reserve z-index >= 10 for local components...since z-index is relative to it's nearest relative parent, I don't stress about it too much within components. I'm plenty fussy about the components themselves.

@maya

maya commented Sep 30, 2015

Copy link
Copy Markdown
Contributor

@andrewliebchen good point! I think ultimately our active state will end up as a bold and blue link style so not sure if that focus state will stay.

See:

screen shot 2015-09-30 at 2 08 38 pm

@vgvg implemented this originally.

@maya

maya commented Oct 2, 2015

Copy link
Copy Markdown
Contributor

Realizing we still need this for tabbing, even with the new future style.

maya pushed a commit that referenced this pull request Oct 2, 2015
Ensure :focus shadow on sidenav is above :hover fill
@maya maya merged commit e13088a into uswds:18f-pages-staging Oct 2, 2015
@maya

maya commented Oct 2, 2015

Copy link
Copy Markdown
Contributor

Thanks @andrewliebchen!

@andrewliebchen

Copy link
Copy Markdown
Contributor Author

Yay! Glad to help...looking forward to seeing what else I can do.

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.

5 participants