Unset font weight and text decoration inheritance in nav block #30011
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
jasmussen
added
[Type] Bug
|
Size Change: +50 B (0%) Total Size: 1.4 MB
ℹ️ View Unchanged
|
talldan
reviewed
Mar 23, 2021
| // If an ancestor has a text-decoration property applied, it is inherited regardless of | ||
| // the specificity of a child element. Only pulling the child out of the flow fixes it. | ||
| // See also https://www.w3.org/TR/CSS21/text.html#propdef-text-decoration. | ||
| float: left; |
There was a problem hiding this comment.
Thanks for investigating! TIL.
It looks like display: inline-block; also works, but I don't really have an opinion on whether that's any better or worse than a float.
talldan
approved these changes
Mar 23, 2021
|
(fixed #30008) |
7 tasks
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.
Description
If you insert an empty navigation block and set the font weight and text decoration, those bleed into the setup state:
This PR fixes that by unsetting the font weight on the button component, and writing some special CSS for the text decoration:
The thing about text decoration is that apparently text-decoration rules are inherited by all children, and cannot be overridden, even by a
text-decoration: none !important— see https://stackoverflow.com/questions/1823341/how-do-i-get-this-css-text-decoration-override-to-workThe solution was to pull that container out of the flow using a float. Sigh.
How has this been tested?
Please test that the empty navigation block does not inherit text decoration or font weight, and that the special rule we had to add for the placeholde state, the float, doesn't have any adverse effects on adjacent blocks.
Checklist: