rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-20 17:54:23 +01:00
Code Issues Actions Packages Releases Activity

Remove margin between buttons in button groups; use border-radius mixins to avoid reseting border-radii that don't need resetting

Browse Source
This commit is contained in:
Mark Otto 2013-02-28 19:34:02 -08:00
parent 877d64dd77
commit 9d763e805b
2 changed files with 17 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
docs/assets/css/bootstrap.css vendored
View File

@ -3494,10 +3494,6 @@ button.close {
border-radius: 0; border-radius: 0;
} }
.btn-group > .btn + .btn {
margin-left: 1px;
}
.btn-group > .btn:first-child { .btn-group > .btn:first-child {
margin-left: 0; margin-left: 0;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
@ -3567,25 +3563,24 @@ button.close {
border-radius: 0; border-radius: 0;
} }
.btn-group-vertical > .btn + .btn {
margin-top: 1px;
margin-left: 0;
}
.btn-group-vertical .btn:first-child { .btn-group-vertical .btn:first-child {
border-radius: 4px 4px 0 0; border-top-right-radius: 4px;
border-top-left-radius: 4px;
} }
.btn-group-vertical .btn:last-child { .btn-group-vertical .btn:last-child {
border-radius: 0 0 4px 4px; border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
} }
.btn-group-vertical .btn-large:first-child { .btn-group-vertical .btn-large:first-child {
border-radius: 6px 6px 0 0; border-top-right-radius: 6px;
border-top-left-radius: 6px;
} }
.btn-group-vertical .btn-large:last-child { .btn-group-vertical .btn-large:last-child {
border-radius: 0 0 6px 6px; border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
} }
.btn-group-justified { .btn-group-justified {

30
less/button-groups.less
View File

@ -41,32 +41,26 @@
position: relative; position: relative;
border-radius: 0; border-radius: 0;
} }
.btn-group > .btn + .btn {
margin-left: 1px;
}
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child { .btn-group > .btn:first-child {
margin-left: 0; margin-left: 0;
border-top-left-radius: @border-radius-base; .border-left-radius(@border-radius-base);
border-bottom-left-radius: @border-radius-base;
} }
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child, .btn-group > .btn:last-child,
.btn-group > .dropdown-toggle { .btn-group > .dropdown-toggle {
border-top-right-radius: @border-radius-base; .border-right-radius(@border-radius-base);
border-bottom-right-radius: @border-radius-base;
} }
// Reset corners for large buttons // Reset corners for large buttons
.btn-group > .btn.large:first-child { .btn-group > .btn.large:first-child {
margin-left: 0; margin-left: 0;
border-top-left-radius: @border-radius-large; .border-left-radius(@border-radius-large);
border-bottom-left-radius: @border-radius-large;
} }
.btn-group > .btn.large:last-child, .btn-group > .btn.large:last-child,
.btn-group > .large.dropdown-toggle { .btn-group > .large.dropdown-toggle {
border-top-right-radius: @border-radius-large; .border-right-radius(@border-radius-large);
border-bottom-right-radius: @border-radius-large;
} }
// On active and open, don't show outline // On active and open, don't show outline
@ -119,29 +113,23 @@
// Vertical button groups // Vertical button groups
// ---------------------- // ----------------------
.btn-group-vertical {
}
.btn-group-vertical > .btn { .btn-group-vertical > .btn {
display: block; display: block;
float: none; float: none;
border-radius: 0; border-radius: 0;
max-width: 100%; max-width: 100%;
} }
.btn-group-vertical > .btn + .btn {
margin-left: 0;
margin-top: 1px;
}
.btn-group-vertical .btn:first-child { .btn-group-vertical .btn:first-child {
border-radius: @border-radius-base @border-radius-base 0 0; .border-top-radius(@border-radius-base);
} }
.btn-group-vertical .btn:last-child { .btn-group-vertical .btn:last-child {
border-radius: 0 0 @border-radius-base @border-radius-base; .border-bottom-radius(@border-radius-base);
} }
.btn-group-vertical .btn-large:first-child { .btn-group-vertical .btn-large:first-child {
border-radius: @border-radius-large @border-radius-large 0 0; .border-top-radius(@border-radius-large);
} }
.btn-group-vertical .btn-large:last-child { .btn-group-vertical .btn-large:last-child {
border-radius: 0 0 @border-radius-large @border-radius-large; .border-bottom-radius(@border-radius-large);
} }