Reduce z-indexes in button-group, input-group, list-group, and pagination to the minimum necessary #24315
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
These were using `z-index: 2` to "Place active items above their siblings for proper border styling". However, using `z-index: 1` is sufficient for accomplishing that goal. In input-group, there were also three `z-index: 3` rules for the hover/focus/active states. I reduced these to `z-index: 2` since they just needed to be "one more than normal" (i.e. one more than what is now `z-index: 1` after my changes). These changes can be verified by viewing the documentation pages for Button group, Input group, List group, and Pagination before and after this commit and observing that the active elements are still "above" their siblings, so their borders look correct.
to include the z-index settings for button-group, input-group, list-group, and pagination
There was a problem hiding this comment.
@rmacklin Thanks for the PR, you are right there is no need to use 2 and 3 z-indexes.
I don't know if @mdo did it intentionally to leave space for a possible z-index: 1 element in the future.
I also don't think there is a need to document this. I don't see the relationship between the z-index of these elements and layouts.
mdo
approved these changes
Oct 19, 2017
mdo
approved these changes
Oct 20, 2017
Closed
|
Thanks!! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
These were using
z-index: 2to "Place active items above their siblings for proper border styling". However, usingz-index: 1is sufficient for accomplishing that goal.In input-group, there were also three
z-index: 3rules for the hover/focus/active states. I reduced these toz-index: 2since they just needed to be "one more than normal" (i.e. one more than what is nowz-index: 1after my changes).These changes can be verified by viewing the documentation pages for Button group, Input group, List group, and Pagination before and after this commit and observing that the active elements are still "above" their siblings, so their borders look correct. (In fact, the easiest way may just be to change these z-indexes in the dev tools style editor - that's what I did before opening this PR.)
I also added a brief paragraph in the documentation about these z-indexes.