[WebProfilerBundle] Prevent toolbar links color override by css #27758
Conversation
This file contains hidden or 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
ogizanagi
reviewed
Jun 29, 2018
| @@ -53,6 +53,9 @@ | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| -moz-osx-font-smoothing: auto; | |||
| } | |||
| div.sf-toolbar .sf-toolbarreset a { | |||
There was a problem hiding this comment.
Shouldn't you rather update the existing .sf-toolbar-block .sf-toolbar-info-piece a selector?
There was a problem hiding this comment.
When doing so, it adds an underline on text icons:
I think this is not the "same" link I want to target
There was a problem hiding this comment.
These changes seems to look fine in 3.4:
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig
index e3a0d8454f..5581e1303f 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig
@@ -160,11 +160,11 @@
margin-bottom: 0;
}
-.sf-toolbar-block .sf-toolbar-info-piece a {
+div.sf-toolbar .sf-toolbar-block .sf-toolbar-info-piece a {
color: #99CDD8;
text-decoration: underline;
}
-.sf-toolbar-block .sf-toolbar-info-piece a:hover {
+div.sf-toolbar .sf-toolbar-block .sf-toolbar-info-piece a:hover {
text-decoration: none;
}This rule:
.sf-toolbar-block > a (i.e the toolbar item itself, containing the icon) does not get an underline. Perhaps need to be enforced as well with div.sf-toolbar to strengthen precedence over your own css.
We must also double-check other css rules using text-decoration: none to ensure they keep precedence over the changed selectors.
There was a problem hiding this comment.
Ok I get your point, thank you.
It works on 2.8
94b0a3f to
b3dadf6
Compare
b3dadf6 to
e12e217
Compare
nicolas-grekas
approved these changes
Jul 4, 2018
ogizanagi
approved these changes
Jul 4, 2018
fabpot
approved these changes
Jul 5, 2018
|
Thank you @alcalyn. |
fabpot
added a commit
that referenced
this pull request
Jul 5, 2018
…y css (alcalyn) This PR was merged into the 2.8 branch. Discussion ---------- [WebProfilerBundle] Prevent toolbar links color override by css | Q | A | ------------- | --- | Branch? | 2.8 | Bug fix? | yes | New feature? | no | BC breaks? | no | Deprecations? | no | Tests pass? | yes | Fixed tickets | #27658 | License | MIT | Doc PR | Fixes this issue: #27658 (comment) Links color in toolbar can be easily override by application css. As this could happens sometimes, this PR set links color with a stronger CSS precedence. Commits ------- e12e217 Prevent toolbar links color override by css
This was referenced Jul 23, 2018
Merged
Merged
Merged
Merged
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.
Fixes this issue: #27658 (comment)
Links color in toolbar can be easily override by application css. As this could happens sometimes, this PR set links color with a stronger CSS precedence.