- This topic is empty.
-
AuthorPosts
-
December 12, 2013 at 4:47 am #158223
Willem-Siebe
ParticipantHi,
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
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.