mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-26 23:04:32 +02:00
Code Issues Releases Wiki 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
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">