CSS name twice, wrong or does it do something?

[Willem-Siebe]

Hi,

In bootstrap 2.3.2 less files I find in mixins.less this mixin:

// Button backgrounds
// ------------------
.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
  .gradientBar(@startColor, @endColor, @textColor, @textShadow);
  *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  .reset-filter();

  // in these cases the gradient won't cover the background, so we override
  &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
    color: @textColor;
    background-color: @endColor;
    *background-color: darken(@endColor, 5%);
  }

  // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
  &:active,
  &.active {
    background-color: darken(@endColor, 10%) e("\9");
  }
}

As you can see this mixin is using a grandient, which I want to override so that there is no gradient.

This .buttonBackground is used for .btn and for .btn-primary (and several others) like this:

.btn {
    .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75)); }

.btn-primary {
    .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight); }

The last one, I assume, overwriting the previous one.

My base stylesheet is style.less, where I import all the less files from bootstrap and my own less files where I overwrite bootstrap styles (right after the import of the original bootstrap import). One of my own files is custom-mixins.less where I included the following:

.deleteButtonGradient {
background-image: none; // -moz-linear-gradient(top,#2ab6d6,#2a7dd6);
background-image: none; // -webkit-gradient(linear,0 0,0 100%,from(#2ab6d6),to(#2a7dd6));
background-image: none; // -webkit-linear-gradient(top,#2ab6d6,#2a7dd6);
background-image: none; // -o-linear-gradient(top,#2ab6d6,#2a7dd6);
background-image: none; // linear-gradient(to bottom,#2ab6d6,#2a7dd6);
filter: none; // progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2ab6d6', endColorstr='#ff297cd6', GradientType=0);}

In my custom-buttons.less I did:

.btn {
  .deleteButtonGradient; 
}

.btn-primary { 
  .deleteButtonGradient; 
}

In my stylesheet I did on an ‘a-element’ the following:

.button { 
  .btn; 
  .btn-primary; 
}

PROBLEM: it’s not working. When I only use .btn, or only use .btn-primary, its working fine, but using them both I still see the gradient with the colors of btn-primary variables.

Hope anybody sees why it’s not working.

Kind regards,

Willem

[Author]

Posts