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