Conversation
| <div class="z-1 position-absolute p-5 rounded-3"></div> | ||
| <div class="z-0 position-absolute p-5 rounded-3"></div> | ||
| <div class="z-n1 position-absolute p-5 rounded-3"></div> | ||
| <div class="z-3 position-absolute p-5 rounded-3"><span>z-3</span></div> |
There was a problem hiding this comment.
I like the idea to display the classes here for a better understanding. However there's an issue with the rendering on dark mode where there's not enough contrast.
There was a problem hiding this comment.
Do you think I should force black color ?
There was a problem hiding this comment.
For consistency I'd use the same set of colors as in https://getbootstrap.com/docs/5.3/layout/grid/ and https://getbootstrap.com/docs/5.3/layout/gutters/ in light/dark mode.
But let's wait for @mdo thoughts before doing any modifications.
There was a problem hiding this comment.
I think I originally had these as translucent elements, but the feedback was that it make things a little less clear. I just use the inherited body color in those grid and gutter examples. Open to doing that again though to make this work better. Could also use some .text-dark so that it never changes color in dark mode.
mdo
left a comment
mdo
left a comment
There was a problem hiding this comment.
Once z-index color gets worked out, good to go!
3 participants
Commits can be split
Description
Motivation & Context
Consistency and better understanding
Type of changes
Checklist
npm run lint)Live previews
Related issues
NA