Bootstrap Mixins - Can't use .panel-heading

Question

I am trying to use .panel-heading as a mixing within some custom LESS I am writing using the Bootstrap frame work.

However not all of the CSS is being pulled in using the mixin.

In the bootstrap files there are the following definitions for .panel-heading:

.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) {
  border-color: @border;
  & > .panel-heading {
    color: @heading-text-color;
    background-color: @heading-bg-color;
    border-color: @heading-border;
    + .panel-collapse .panel-body {
      border-top-color: @border;
    }
  }
  & > .panel-footer {
    + .panel-collapse .panel-body {
      border-bottom-color: @border;
    }
  }
}

.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  .border-top-radius(@panel-border-radius - 1);
}

When I do the following:

.panel {
    .panel-default;

    header {
        .panel-heading;
    }
}

Only the color, background-color and border-color are pulled through. Any ideas what is going on?

HTML here:

<div class="panel">
    <header><h4><a>Header</a></h4></header>
    <div class="collapse in">
        <div>

        </div>
    </div>
</div>

I can't reproduce this - given the code you have above, the mixin should be applied properly. Is there any other code you're not showing? — Adrift, Dec 26 '13 at 20:29
Yeah loads but nothing I would think that is significant to this, what version of bootstrap were you testing with, I am on 3.0.0 which might be the issue? — Mike Jenkins, Dec 26 '13 at 20:32
Just updated, still doing the same. Will try creating a JSFiddle to see if I can replicate it. — Mike Jenkins, Dec 26 '13 at 20:35
Odd, if I move `header` out of `.panel` it works. However the `header` tag is within a `div` with a class panel so I don't see why it wouldn't work. — Mike Jenkins, Dec 26 '13 at 20:51

score 6 · Accepted Answer · edited May 23 '17 at 12:31

6

.panel {
     &:extend(.panel-default all);

    header {
        &:extend(.panel-heading all);
    }
}

Bootstrap Mixins - Can't use .panel-heading

1 Answers1