I want to write a class 'selected' for my app's buttons. When a button hasClass 'selected' its look and feel should be the same as Bootstrap's 'btn-primary'.
Bootstrap css defines (for example):
.btn-primary { background-color:#00F; color:#FFF; }
I wrote my class as follows:
button.selected:extend(.btn-primary) {};
1) Is it supposed to work like that?
2) If 1) is yes, then my css is not working. The selected class does not inherit color and background-color from btn-primary.
UPDATE
Some of my markup:
<div class="filters">
<div class="btn-group btn-group-lg type">
<button type="button" class="btn selected" data-filter="all">
<span class="glyphicon glyphicon-list-alt"></span>
All
</button>
<button type="button" class="btn btn-default" data-filter="positive">
<span class="glyphicon glyphicon-thumbs-up"></span>
In
</button>
<button type="button" class="btn btn-default" data-filter="negative">
<span class="glyphicon glyphicon-thumbs-down"></span>
Out
</button>
</div>
</div>
And my LESS:
.filters {
.type {
button.selected:extend(.btn-primary) {};
}
}
My main less file:
@import '../bower_components/bootstrap/dist/css/bootstrap.min.css';
@import "utils.less";
@import "flex.less";
@import "index.less";
@import "transactions.less";
Obviously, if I give the button the class .btn-primary in markup... it simply works.