Thursday, June 14, 2012

Twitter Bootstrap button radius (rounded corners) size

Twitter Bootstrap is a great tool from Twitter. It's a CSS framework (using lesscss) that lets you create your own CSS stylesheets easily.

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: