twitter bootstrap - custom btn-group class on td with less -
i want able use td btn-group, custom class cant 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 { > { .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 couple things such &.actions:extend(:btn-group)
but toggle not show ul
, not create button group (eg: buttons have rounded corners way round)
adding btn-group
class td , works fine.
assembling answer comments above. in case extend all
should used since .btn-group
not single "flat" style set of selectors/rulesets quite complex nesting hierarchy, so:
td { &.actions:extend(.btn-group all) { // ... } }
although because of #2206 bug might more safe write as:
td { &.actions { &:extend(.btn-group all); // ... } }
Comments
Post a Comment