jumbotron h1 inherits color which overrides text-success, text-warning, etc
ShaunR opened this issue · 11 comments
.jumbotron h1 sets color to inherit, i'm not really sure why it would need to do this but the problem is that if you try and set text-success, text-warning, text-info, etc on the h1 it fails to set the color because of this. I know i could probably simply wrap the h1 in a div with a text-* class but that's extra markup that i'm thinking we can avoid?!
@ShaunR could you please provide markup you are using? So we better understand the issue.?
Update: I understood now what you mean, yes it really inherits main text color doesn't let text-* class take over may be we should add "!important" to these classes? in type.less // Contextual emphasis???
@mdo ?
As far as i can tell the color: inherit doesn't really need to be their. Only reason i could really see it needing to be their is if we had different colored jumbotrons. I've created a test fiddle and used firebug to remove and add the color: inherit style and it being present looks to change nothing but removing it does allow the text-color classes to work!
http://fiddle.jshell.net/vpH6v/2/show/light/
I would avoid using !important if we can.
But there is other side to removing "inherit" property,
lets say, for example you color your headings to be
h1,h2 etc
color: red;
what happens is because of inherit being applied to jumbotron heading, it's immune to above "red" color, as its inheriting its parent color which is jumbotron, which in turn gets inherit color of main body (text).
So we need to define whether we want above behaviour (keeping jumbotron heading to be immune of whatever color you have on headings or we want it to inherit the color of headings)?
In case of allowing jumbotron to use none jumbotron headings color (in this case above "red"), we can leave "inherit" property out of jumbotron heading and in turn we will get desired result (text-* color to be applied as desired).
or we leave everything as is and try to find a way to give text-* class precedence over inherit (one option is applying !important).
Anybody else have a say or have solution?
I'm not sure i understand what your saying, both jumbotron and jumbotron h1 set color inherit, this still seams like a bad thing since you can not override the color. For both of those elements. If i get rid of both of those styles i can then set text-color on either the jumbotron to set the color for the entire jumbotron or just the h1.
edit: ok i see what your saying about setting a color on the headings and those trickling down. If somebody is mucking with those anyway they should be more specific if they don't want the them all to change. It's not really bootstraps job to reset what they've changed, right?
yep right, that's what I am trying to say and achieve, we can only allow one scenario to be applicable and stick with it by default code, and one important thing to keep in mind is it should be cuctomizeable that's it.
The value inherit doesn't matter here—it's a specificity issue. .jumbotron h1 is more specific than .text-success. Since the colors aren't being used, and are causing a bug, I'm inclined to simply remove the variables entirely, but I wonder if that presents a backward compatibility issue.
@cvrebert Thoughts on that last part?
Gah, that said, I could see leaving this as well since if you can customize the background, you should be able to customize the text color. Setting any color there though will present problems.
As a side note to those following along, this is why we try to use unique classes on all the things:
/* No class, with leading parent class */
.jumbotron h1 { … }
/* Class, no leading parent */
.jumbotron-heading { … }In the first example, we cannot use classes on the h1 because that new rule is too specific. In the latter example, we can because they're on the same specificity level (so long as those text utility classes come after the jumbotron in our CSS.
Sounds backwards-incompatible to me 😢
Yeah, for now we'll have to leave this as-is. Use inline elements to override for the time being.
This issue still exists, however, I don't know that the above jumbotron example is the best way to show the issue. A better (and far simpler) example would be the following:
<a href="#" class="h2">Heading 2</a>
In Bootstrap 3.0.0, the behavior is correct: we have an anchor tag with the proper color and sizing, however in Bootstrap 3.0.2, .h1, h2, .h3, etc. all have "color: inherit" as a property which overrides the default color of the anchor tag. The result is that we have the correct sizing from the .h2 class, but the color of the anchor tag has been overridded by the .h2 class "color: inherit" property.
You can see respective examples in Bootstrap 3.0.0 here:
...and in Bootstrap 3.0.2 here:
Yes, you could nest the anchor tag as follows...
<span class="h2"><a href="#">Heading 2</a></span>
...but I'm pretty sure the end goal of creating these REALLY NIFTY helper classes was to alleviate the need for such DOM bloat.
Best solution I can see for now would most likely be to remove the "color: inherit" property on these classes (the way it was in BS 3.0.0).
Added to internal Bootstrap v4 planning issue for eventual consideration.