mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-02 16:04:07 +03:00
Code Activity

adding button groups and toolbars like a boss

Browse Source
This commit is contained in:
Mark Otto
2011-09-29 02:21:02 -07:00
parent f54568fa31
commit 0a6d8c30db
5 changed files with 210 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/mixins.less
+17
View File
@@ -102,6 +102,23 @@
-moz-border-radius: @radius;
border-radius: @radius;
}
.border-radius-custom(@topLeft, @topRight, @bottomRight, @bottomLeft) {
-webkit-border-top-left-radius: @topLeft;
-moz-border-radius-topleft: @topLeft;
border-top-left-radius: @topLeft;
-webkit-border-top-right-radius: @topRight;
-moz-border-radius-topright: @topRight;
border-top-right-radius: @topRight;
-webkit-border-bottom-right-radius: @bottomRight;
-moz-border-radius-bottomright: @bottomRight;
border-bottom-right-radius: @bottomRight;
-webkit-border-bottom-left-radius: @bottomLeft;
-moz-border-radius-bottomleft: @bottomLeft;
border-bottom-left-radius: @bottomLeft;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
// Drop shadows
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
lib/patterns.less
+48
View File
@@ -565,6 +565,54 @@ input[type=submit].btn {
}
}
// Button groups
// -------------
// Group multiple button groups together for a toolbar
.btn-toolbar {
.clearfix();
.btn-group {
float: left;
margin-right: 10px;
}
}
// Clear the float
.btn-group {
.clearfix();
}
// Float them, remove border radius, then re-add to first and last elements
.btn-group .btn {
position: relative;
float: left;
margin-left: -1px;
.border-radius(0);
&:first-child {
margin-left: 0;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
}
&:last-child {
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-right-radius: 4px;
}
}
// On hover/focus/active, bring the proper btn to front
.btn-group .btn:hover,
.btn-group .btn:focus,
.btn-group .btn:active {
z-index: 2;
}
// CLOSE ICONS
// -----------