In one of projects I needed to decrease the size of buttons radius, which is too huge by default (~5px).
Thanks to .border-radius() mixin you can change button radius.
Here's the code I put in my own .less file.
You can put this in bootstrap.less (where necessary imports are included) file and recompile.
The file below changes radius to 1px.
@new_radius: 2px; .dropdown-menu { .border-radius(0px); } .btn { .border-radius(@new_radius); } .btn-group > .btn { .border-radius(@new_radius); } .btn-group > .btn:first-child { .border-radius(@new_radius 0 0 @new_radius); } .btn-group > .btn:last-child, .btn-group > .dropdown-toggle { .border-radius(0 @new_radius @new_radius 0); } .btn-group > .btn.large:first-child { .border-radius(@new_radius 0 0 @new_radius); } .btn-group > .btn.large:last-child, .btn-group > .large.dropdown-toggle { .border-radius(0 @new_radius @new_radius 0); } .btn-group > .dropdown-toggle:first-child { .border-radius(@new_radius); } .btn-group > .btn-large:only-child, .btn-group > .btn:only-child { .border-radius(@new_radius); }
Hope you find it useful!
No comments:
Post a Comment