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.

Sign up for GitHub

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

Jump to bottom

Improve Tab component styling and support nesting #138

Closed
julieg18 opened this issue Oct 28, 2021 · 4 comments · Fixed by #143
Closed

Improve Tab component styling and support nesting #138

julieg18 opened this issue Oct 28, 2021 · 4 comments · Fixed by #143
Assignees
@rogermparent
Labels
A: website Website development

Comments

@julieg18
Copy link
Contributor

(minor) maybe a thin left border rather than shading - similar to but more subtle than quotes - would be better

comment by @casperdcl

Agreed on border over over shading, or maybe even both- border having high contrast to serve as an obvious indicator and subtle shading to make it a little easier to track across the whole box without making every tab box an eye-catching callout.

comment by @rogermparent
@julieg18 julieg18 added the A: website Website development label Oct 28, 2021
@jorgeorpinel
Copy link

Please remember to port the changes from iterative/cml.dev#136 and from here to dvc.org 🙂

This was referenced Dec 6, 2021
Closed
Merged
@casperdcl
Copy link
Contributor

casperdcl commented Dec 9, 2021 •
edited
Loading

Some ideas:

image

  • background-color: rgba(27,31,35,.05) -> rgba(27,31,35,.03)
  • border-left-color: lightblue
  • border-left-width: thick
  • border-left-style: groove

@casperdcl casperdcl transferred this issue from iterative/cml.dev Nov 26, 2022
@casperdcl casperdcl mentioned this issue Nov 26, 2022
Merged
5 tasks
@rogermparent rogermparent self-assigned this Nov 28, 2022
@rogermparent rogermparent changed the title Make md tab styling more subtle Improve Tab component styling and support nesting Nov 28, 2022
@rogermparent
Copy link
Contributor

rogermparent commented Nov 28, 2022 •
edited
Loading

Linking iterative/dvc.org#4123 (review) and reviving this as a more general issue

@rogermparent
Copy link
Contributor

rogermparent commented Dec 1, 2022 •
edited
Loading

Funny enough, iterative/dvc.org#4118 which was merged today happened to fix the example case of nested tabs!

image

I do think keeping the code blocks from going on that long is ideal when possible, even if the alternative isn't broken.

@rogermparent rogermparent mentioned this issue Dec 1, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@rogermparent rogermparent

Labels
A: website Website development
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add subtler tab styling iterative/gatsby-theme-iterative
4 participants
@jorgeorpinel @rogermparent @casperdcl @julieg18