Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS name twice, wrong or does it do something?

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #158223
    Willem-Siebe
    Participant

    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

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.