custom btn-group class on td with less

0
votes

I want to be able to use a td as a btn-group, with a custom class but cant get it to work correctly

Markup

<td class="actions">
    <a href="/foo/bar" class="btn"><span class="fa fa-edit fa-lg "></span> Edit</a>
    <a href="#" data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="fa fa-caret-down fa-lg "></span></a>
    <ul class="dropdown-menu">
        <li><a href="/foo/bar"><span class="fa fa-times fa-lg "></span> Delete</a></li>
        <li><a href="/foo/bar"><span class="fa fa-times fa-lg "></span> Delete</a></li>
        <li><a href="/foo/bar"><span class="fa fa-times fa-lg "></span> Delete</a></li>
    </ul>
</td>

Less

td {
    &.actions {
        > a {
            .pull-left;
            .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);
            &:first-child {
                .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
            }
        }
    }
}

I have tried a couple things such as &.actions:extend(:btn-group)

but the toggle does not show the UL and it does not create a button group (eg: the buttons have rounded corners all the way round)

Adding the btn-group class to the td and everything works fine.

1
twitter-bootstrapless
I guess it should be extend(.btn-group all) (note that this will generate quite bloating CSS though). See also related stuff: 1, 2, 3, 4. - seven-phases-max
Have tried extend(.btn-group all) with no change vs extend(.btn-group) - dogmatic69
I can't imagine why it would not work. Well, extend(.btn-group all) is the correct method in this case, see extend docs and .btn-group definitions. Check the compiled CSS - if you did everything correctly td.actions should appear there everywhere .btn-group is (and if it's not double check the syntax you used). Also there's a #2206 bug (it will apply if you have your td nested wthin another ruleset) so instead of &.actions:extend(.btn-group all) it's more safe to put &:extend(.btn-group all); into the .actions ruleset. - seven-phases-max
Looks like it was the bug you mentioned, converted to use &:extend(.btn-group all) and it seems to work fine. Make it an answer and I will accept it. - dogmatic69

1 Answers

2
votes

Assembling an answer from comments above. In this case extend all should be used since .btn-group is not just some single "flat" style but a set of selectors/rulesets with quite complex nesting hierarchy, so:

td {
    &.actions:extend(.btn-group all) {
        // ...
    }
}

Although because of the #2206 bug it might be more safe to write it as:

td {
    &.actions {
        &:extend(.btn-group all);
        // ...
    }
}