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

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1546,62 +1546,60 @@ select:focus:invalid:focus {
border-left: 0;
}
.input-group-btn,
.input-group-btn .btn {
.input-group-btn {
position: relative;
white-space: nowrap;
}
.input-group-btn > .btn {
position: relative;
float: left;
border-radius: 0;
}
.input-group-btn > .btn + .btn {
border-left: 0;
margin-left: -1px;
}
.input-group-btn.btn-group {
display: table-cell;
.input-group-btn > .btn:hover,
.input-group-btn > .btn:active {
z-index: 2;
}
.input-group-btn:first-child > .btn,
.input-group-btn.btn-group:first-child > .btn {
border-right: 0;
.input-group-btn:first-child > .btn:first-child,
.input-group-btn:first-child > .dropdown-toggle:first-child {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.input-group-btn:first-child > .btn,
.input-group-btn.btn-group:first-child > .btn {
border-radius: 4px 0 0 4px;
.input-group-btn:first-child > .btn:first-child.btn-large,
.input-group-btn:first-child > .dropdown-toggle:first-child.btn-large {
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
}
.input-group-btn:first-child > .btn.btn-large,
.input-group-btn.btn-group:first-child > .btn.btn-large {
border-radius: 6px 0 0 6px;
.input-group-btn:first-child > .btn:first-child.btn-small,
.input-group-btn:first-child > .dropdown-toggle:first-child.btn-small {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
.input-group-btn:first-child > .btn.btn-small,
.input-group-btn.btn-group:first-child > .btn.btn-small {
border-radius: 3px 0 0 3px;
.input-group-btn:last-child > .btn:last-child,
.input-group-btn:last-child > .dropdown-toggle {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.input-group-btn:last-child > .btn,
.input-group-btn.btn-group:last-child > .btn:first-child {
border-left: 0;
.input-group-btn:last-child > .btn:last-child.btn-large,
.input-group-btn:last-child > .dropdown-toggle.btn-large {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.input-group-btn:last-child > .btn,
.input-group-btn.btn-group:last-child > .btn {
border-radius: 0 4px 4px 0;
}
.input-group-btn:last-child > .btn.btn-large,
.input-group-btn.btn-group:last-child > .btn.btn-large {
border-radius: 0 6px 6px 0;
}
.input-group-btn:last-child > .btn.btn-small,
.input-group-btn.btn-group:last-child > .btn.btn-small {
border-radius: 0 3px 3px 0;
.input-group-btn:last-child > .btn:last-child.btn-small,
.input-group-btn:last-child > .dropdown-toggle.btn-small {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
@media screen and (min-width: 768px) {
@ -1642,6 +1640,7 @@ select:focus:invalid:focus {
font-weight: 500;
line-height: 20px;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid #a7a9aa;
@ -3465,9 +3464,19 @@ button.close {
}
.btn-group > .btn {
position: relative;
float: left;
}
.btn-group > .btn + btn {
margin-left: -1px;
}
.btn-group > .btn:hover,
.btn-group > .btn:active {
z-index: 2;
}
.btn-toolbar:before,
.btn-toolbar:after {
display: table;
@ -3560,15 +3569,16 @@ button.close {
display: block;
float: none;
max-width: 100%;
border-radius: 0;
}
.btn-group-vertical .btn:first-child {
border-radius: 0;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.btn-group-vertical .btn:last-child {
border-radius: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}

14
docs/css.html
View File

@ -1493,7 +1493,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p></p>
<form class="bs-docs-example">
<div class="input-group span7">
<div class="input-group-btn btn-group">
<div class="input-group-btn">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
@ -1508,7 +1508,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<br>
<div class="input-group span7">
<input type="text">
<div class="input-group-btn btn-group">
<div class="input-group-btn">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
@ -1522,7 +1522,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</form>
{% highlight html linenos %}
<div class="input-group span7">
<div class="input-group-btn btn-group">
<div class="input-group-btn">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
@ -1537,7 +1537,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="input-group span7">
<input type="text">
<div class="input-group-btn btn-group">
<div class="input-group-btn">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
@ -1553,7 +1553,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Segmented dropdown groups</h4>
<form class="bs-docs-example">
<div class="input-group span7">
<div class="input-group-btn btn-group">
<div class="input-group-btn">
<button class="btn" tabindex="-1">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<span class="caret"></span>
@ -1573,7 +1573,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="input-group span7">
<input type="text">
<div class="input-group-btn btn-group">
<div class="input-group-btn">
<button class="btn" tabindex="-1">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<span class="caret"></span>
@ -1590,7 +1590,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</form>
{% highlight html linenos %}
<div class="input-group span7">
<div class="input-group-btn btn-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text">

13
less/button-groups.less
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 {

1
less/buttons.less
View File

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

64
less/forms.less
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 {