1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-31 00:59:51 +02:00

Holy fucking shit fix that input group with buttons rounded corner noise

This commit is contained in:
Mark Otto
2013-02-28 21:19:02 -08:00
parent b19eb88b5a
commit bfc4aaf6e8
5 changed files with 91 additions and 79 deletions

View File

@@ -16,7 +16,17 @@
display: inline-block;
vertical-align: middle; // match .btn alignment given font-size hack above
> .btn {
position: relative;
float: left;
// Prevent double borders when buttons are next to each other
+ btn {
margin-left: -1px;
}
// Bring the "active" button to the front
&:hover,
&:active {
z-index: 2;
}
}
}
@@ -116,13 +126,14 @@
.btn-group-vertical > .btn {
display: block;
float: none;
border-radius: 0;
max-width: 100%;
}
.btn-group-vertical .btn:first-child {
border-radius: 0; // Needs to be here for specificity since we're not zeroing them out again
.border-top-radius(@border-radius-base);
}
.btn-group-vertical .btn:last-child {
border-radius: 0; // Needs to be here for specificity since we're not zeroing them out again
.border-bottom-radius(@border-radius-base);
}
.btn-group-vertical .btn-large:first-child {

View File

@@ -19,6 +19,7 @@
cursor: pointer;
border: 1px solid @btn-border;
border-radius: @border-radius-base;
white-space: nowrap;
&:focus {
.tab-focus();

View File

@@ -503,52 +503,43 @@ select:focus:invalid {
// Button input groups
// -------------------------
.input-group-btn,
.input-group-btn .btn {
.input-group-btn {
position: relative;
white-space: nowrap;
}
.input-group-btn > .btn {
position: relative;
float: left; // Collapse white-space
border-radius: 0;
+ .btn {
border-left: 0;
margin-left: -1px;
}
// Bring the "active" button to the front
&:hover,
&:active {
z-index: 2;
}
}
.input-group-btn.btn-group {
display: table-cell;
}
// Prepend
.input-group-btn {
&:first-child > .btn,
&.btn-group:first-child > .btn {
border-right: 0;
}
&:first-child > .btn,
&.btn-group:first-child > .btn {
border-radius: @border-radius-base 0 0 @border-radius-base;
&.btn-large {
border-radius:@border-radius-large 0 0 @border-radius-large;
}
&.btn-small {
border-radius:@border-radius-small 0 0 @border-radius-small;
}
// Prepended buttons
.input-group-btn:first-child {
// Round the left corners only
> .btn:first-child,
> .dropdown-toggle:first-child {
.border-left-radius(@border-radius-base);
&.btn-large { .border-left-radius(@border-radius-large); }
&.btn-small { .border-left-radius(@border-radius-small); }
}
}
// Append
.input-group-btn {
&:last-child > .btn,
&.btn-group:last-child > .btn:first-child {
border-left: 0;
}
&:last-child > .btn,
&.btn-group:last-child > .btn {
border-radius: 0 @border-radius-base @border-radius-base 0;
&.btn-large {
border-radius: 0 @border-radius-large @border-radius-large 0;
}
&.btn-small {
border-radius: 0 @border-radius-small @border-radius-small 0;
}
// Appended buttons
.input-group-btn:last-child {
// Round the right corners only
> .btn:last-child,
> .dropdown-toggle {
.border-right-radius(@border-radius-base);
&.btn-large { .border-right-radius(@border-radius-large); }
&.btn-small { .border-right-radius(@border-radius-small); }
}
}
@@ -557,7 +548,6 @@ select:focus:invalid {
// Horizontal forms
// --------------------------------------------------
@media screen and (min-width: 768px) {
.form-horizontal {