Remove color: inherit from headings

[dzwillia]

Heading classes (.h1, .h2, etc.) override default color styling for anchor tags as well as other well-defined classes for color styling (.text-success, .text-danger, etc.).

The following code snippet when rendered would appear with @text-color (instead of @link-color) until hovered over at which point it would appear with @link-hover-color color.

<a href="#" class="h1">Heading 1</a>

It should be noted that this styling was correct shortly ago in BS 3.0.0. I have included two examples to document the issue:

Bootstrap 3.0.0 (styled correctly): http://jsfiddle.net/MYrV4/3/
Bootstrap 3.0.2 (styled incorrectly): http://jsfiddle.net/5g7WH/2/

Heading classes (which are simply meant to emulate their respective heading sizes) should not affect the color of anchor elements nor elements with the .text-* classes.

While related to Issue #10202, I view this to be a far more grievous issue than it as it is more far-reaching (affecting styling all the way down to basic anchor tag styling).

[cvrebert]

Removing a variable breaks backwards compatibility, and we can't do that until Bootstrap v4.

[cvrebert]

Was intended to fix #11515.

[dzwillia]

Ah... yup... my bad.

Any chance we can still consider this fix if I simply add back the @headings-color variable so that we're not breaking backward compatibility?

I can submit another pull request with only that one line change in type.less if you'd like...

[cvrebert]

@dzwillia That one line is the only place that that variable is used! Removing all usages of a variable obviously breaks backward compatibility.

[dzwillia]

Removing the usage of a variable in one spot (whether it is the only spot
it is used or not) and removing the variable itself are two VERY
different things.

At this point, there is no clear case to why color: inherit was even added
to these heading classes and I would submit to you that the sort of styling
that it introduces is far more grievous a problem. In addition, there is
NO clear/good way to override this style as the only way to do so would
be to specify a static color, which certainly would not do anyone any good.

On Mon, Nov 18, 2013 at 2:41 PM, Chris Rebert [email protected]:

@dzwillia https://github.com/dzwillia That one line is the only place
that that variable is used! Removing all usages of a variable obviously
breaks backward compatibility.

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/11518#issuecomment-28730247
.

[cvrebert]

It ultimately comes down to backwards compatibility. We do want to eventually fix this, it's just that backwards compatibility restricts us from fixing this in any backwards-incompatible way until v4.

[carasmo]

".h1-.h6 classes should be used to maintain the semantically appropriate heading levels - NOT for use on non-headings...."

The .h1-.h6 are from the Object-Oriented CSS project and you're not supposed to use them on links and p tags, just other headings. I read something here, on this forum, from @modo I think about 1 or two months ago.

So keep the color inherit, they are supposed to match. I use them as intended all the time.

[carasmo]

Besides stick the Emphasis & misc after the .h1-.h6 in type.less and it will work correctly, pretty much, just add a.h1-a.h6 and you can get what you want, I think.

http://jsfiddle.net/5g7WH/6/

// 23 October 2013
// Typography
// --------------------------------------------------


// Body text
// -------------------------

p {
  margin: 0 0 (@line-height-computed / 2);
}
.lead {
  margin-bottom: @line-height-computed;
  font-size: floor(@font-size-base * 1.15);
  font-weight: 200;
  line-height: 1.4;

  @media (min-width: @screen-sm-min) {
    font-size: (@font-size-base * 1.5);
  }
}



// Headings
// -------------------------

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: @headings-font-family;
  font-weight: @headings-font-weight;
  line-height: @headings-line-height;
  color: @headings-color;

  small,
  .small {
    font-weight: normal;
    line-height: 1;
    color: @headings-small-color;
  }
}

h1,
h2,
h3 {
  margin-top: @line-height-computed;
  margin-bottom: (@line-height-computed / 2);

  small,
  .small {
    font-size: 65%;
  }
}
h4,
h5,
h6 {
  margin-top: (@line-height-computed / 2);
  margin-bottom: (@line-height-computed / 2);

  small,
  .small {
    font-size: 75%;
  }
}

h1, .h1 { font-size: @font-size-h1; }
h2, .h2 { font-size: @font-size-h2; }
h3, .h3 { font-size: @font-size-h3; }
h4, .h4 { font-size: @font-size-h4; }
h5, .h5 { font-size: @font-size-h5; }
h6, .h6 { font-size: @font-size-h6; }



// Emphasis & misc
// -------------------------

// Ex: 14px base font * 85% = about 12px
small,
.small  { font-size: 85%; }

// Undo browser default styling
cite    { font-style: normal; }

// Contextual emphasis
.text-muted {
  color: @text-muted;
}
.text-primary {
  color: @brand-primary;
  &:hover {
    color: darken(@brand-primary, 10%);
  }
}
.text-warning {
  color: @state-warning-text;
  &:hover {
    color: darken(@state-warning-text, 10%);
  }
}
.text-danger {
  color: @state-danger-text;
  &:hover {
    color: darken(@state-danger-text, 10%);
  }
}
.text-success {
  color: @state-success-text;
  &:hover {
    color: darken(@state-success-text, 10%);
  }
}
.text-info {
  color: @state-info-text;
  &:hover {
    color: darken(@state-info-text, 10%);
  }
}

// Alignment
.text-left           { text-align: left; }
.text-right          { text-align: right; }
.text-center         { text-align: center; }




// Page header
// -------------------------

.page-header {
  padding-bottom: ((@line-height-computed / 2) - 1);
  margin: (@line-height-computed * 2) 0 @line-height-computed;
  border-bottom: 1px solid @page-header-border-color;
}



// Lists
// --------------------------------------------------

// Unordered and Ordered lists
ul,
ol {
  margin-top: 0;
  margin-bottom: (@line-height-computed / 2);
  ul,
  ol {
    margin-bottom: 0;
  }
}

// List options

// Unstyled keeps list items block level, just removes default browser padding and list-style
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
// Inline turns list items into inline-block
.list-inline {
  .list-unstyled();
  > li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
  }
}

// Description Lists
dl {
  margin-bottom: @line-height-computed;
}
dt,
dd {
  line-height: @line-height-base;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 0; // Undo browser default
}

// Horizontal description lists
//
// Defaults to being stacked without any of the below styles applied, until the
// grid breakpoint is reached (default of ~768px).

@media (min-width: @grid-float-breakpoint) {
  .dl-horizontal {
    dt {
      float: left;
      width: (@component-offset-horizontal - 20);
      clear: left;
      text-align: right;
      .text-overflow();
    }
    dd {
      margin-left: @component-offset-horizontal;
      .clear-fix; // +++++++++++++++++++++++++++++++++++++++++++ CHANGED the mixin, not the class // Clear the floated `dt` if an empty `dd` is present
    }
  }
}

// MISC
// ----

// Abbreviations and acronyms
abbr[title],
// Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
abbr[data-original-title] {
  cursor: help;
  border-bottom: 1px dotted @abbr-border-color;
}
abbr.initialism {
  font-size: 90%;
  text-transform: uppercase;
}

// Blockquotes
blockquote {
  padding: (@line-height-computed / 2) @line-height-computed;
  margin: 0 0 @line-height-computed;
  border-left: 5px solid @blockquote-border-color;
  p {
    font-size: (@font-size-base * 1.25);
    font-weight: 300;
    line-height: 1.25;
  }
  p:last-child {
    margin-bottom: 0;
  }
  small {
    display: block;
    line-height: @line-height-base;
    color: @blockquote-small-color;
    &:before {
      content: '\2014 \00A0';// EM DASH, NBSP
    }
  }

  // Float right with text-align: right
  &.pull-right {
    padding-right: 15px;
    padding-left: 0;
    border-right: 5px solid @blockquote-border-color;
    border-left: 0;
    p,
    small,
    .small {
      text-align: right;
    }
    small,
    .small {
      &:before {
        content: '';
      }
      &:after {
        content: '\00A0 \2014';// NBSP, EM DASH
      }
    }
  }
}

// Quotes
blockquote:before,
blockquote:after {
  content: "";
}

// Addresses
address {
  margin-bottom: @line-height-computed;
  font-style: normal;
  line-height: @line-height-base;
}