Skip to content

Commit bfc4aaf

Browse files
mdomdo
committed
Holy fucking shit fix that input group with buttons rounded corner noise
1 parent b19eb88 commit bfc4aaf

File tree

5 files changed

+91
-79
lines changed

5 files changed

+91
-79
lines changed

‎docs/assets/css/bootstrap.css

Lines changed: 44 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1546,62 +1546,60 @@ select:focus:invalid:focus {
15461546
border-left: 0;
15471547
}
15481548

1549-
.input-group-btn,
1550-
.input-group-btn .btn {
1549+
.input-group-btn {
1550+
position: relative;
15511551
white-space: nowrap;
15521552
}
15531553

15541554
.input-group-btn > .btn {
1555+
position: relative;
15551556
float: left;
15561557
border-radius: 0;
15571558
}
15581559

15591560
.input-group-btn > .btn + .btn {
1560-
border-left: 0;
1561-
}
1562-
1563-
.input-group-btn.btn-group {
1564-
display: table-cell;
1565-
}
1566-
1567-
.input-group-btn:first-child > .btn,
1568-
.input-group-btn.btn-group:first-child > .btn {
1569-
border-right: 0;
1561+
margin-left: -1px;
15701562
}
15711563

1572-
.input-group-btn:first-child > .btn,
1573-
.input-group-btn.btn-group:first-child > .btn {
1574-
border-radius: 4px 0 0 4px;
1564+
.input-group-btn > .btn:hover,
1565+
.input-group-btn > .btn:active {
1566+
z-index: 2;
15751567
}
15761568

1577-
.input-group-btn:first-child > .btn.btn-large,
1578-
.input-group-btn.btn-group:first-child > .btn.btn-large {
1579-
border-radius: 6px 0 0 6px;
1569+
.input-group-btn:first-child > .btn:first-child,
1570+
.input-group-btn:first-child > .dropdown-toggle:first-child {
1571+
border-bottom-left-radius: 4px;
1572+
border-top-left-radius: 4px;
15801573
}
15811574

1582-
.input-group-btn:first-child > .btn.btn-small,
1583-
.input-group-btn.btn-group:first-child > .btn.btn-small {
1584-
border-radius: 3px 0 0 3px;
1575+
.input-group-btn:first-child > .btn:first-child.btn-large,
1576+
.input-group-btn:first-child > .dropdown-toggle:first-child.btn-large {
1577+
border-bottom-left-radius: 6px;
1578+
border-top-left-radius: 6px;
15851579
}
15861580

1587-
.input-group-btn:last-child > .btn,
1588-
.input-group-btn.btn-group:last-child > .btn:first-child {
1589-
border-left: 0;
1581+
.input-group-btn:first-child > .btn:first-child.btn-small,
1582+
.input-group-btn:first-child > .dropdown-toggle:first-child.btn-small {
1583+
border-bottom-left-radius: 3px;
1584+
border-top-left-radius: 3px;
15901585
}
15911586

1592-
.input-group-btn:last-child > .btn,
1593-
.input-group-btn.btn-group:last-child > .btn {
1594-
border-radius: 0 4px 4px 0;
1587+
.input-group-btn:last-child > .btn:last-child,
1588+
.input-group-btn:last-child > .dropdown-toggle {
1589+
border-top-right-radius: 4px;
1590+
border-bottom-right-radius: 4px;
15951591
}
15961592

1597-
.input-group-btn:last-child > .btn.btn-large,
1598-
.input-group-btn.btn-group:last-child > .btn.btn-large {
1599-
border-radius: 0 6px 6px 0;
1593+
.input-group-btn:last-child > .btn:last-child.btn-large,
1594+
.input-group-btn:last-child > .dropdown-toggle.btn-large {
1595+
border-top-right-radius: 6px;
1596+
border-bottom-right-radius: 6px;
16001597
}
16011598

1602-
.input-group-btn:last-child > .btn.btn-small,
1603-
.input-group-btn.btn-group:last-child > .btn.btn-small {
1604-
border-radius: 0 3px 3px 0;
1599+
.input-group-btn:last-child > .btn:last-child.btn-small,
1600+
.input-group-btn:last-child > .dropdown-toggle.btn-small {
1601+
border-top-right-radius: 3px;
1602+
border-bottom-right-radius: 3px;
16051603
}
16061604

16071605
@media screen and (min-width: 768px) {
@@ -1642,6 +1640,7 @@ select:focus:invalid:focus {
16421640
font-weight: 500;
16431641
line-height: 20px;
16441642
text-align: center;
1643+
white-space: nowrap;
16451644
vertical-align: middle;
16461645
cursor: pointer;
16471646
border: 1px solid #a7a9aa;
@@ -3465,9 +3464,19 @@ button.close {
34653464
}
34663465

34673466
.btn-group > .btn {
3467+
position: relative;
34683468
float: left;
34693469
}
34703470

3471+
.btn-group > .btn + btn {
3472+
margin-left: -1px;
3473+
}
3474+
3475+
.btn-group > .btn:hover,
3476+
.btn-group > .btn:active {
3477+
z-index: 2;
3478+
}
3479+
34713480
.btn-toolbar:before,
34723481
.btn-toolbar:after {
34733482
display: table;
@@ -3560,15 +3569,16 @@ button.close {
35603569
display: block;
35613570
float: none;
35623571
max-width: 100%;
3563-
border-radius: 0;
35643572
}
35653573

35663574
.btn-group-vertical .btn:first-child {
3575+
border-radius: 0;
35673576
border-top-right-radius: 4px;
35683577
border-top-left-radius: 4px;
35693578
}
35703579

35713580
.btn-group-vertical .btn:last-child {
3581+
border-radius: 0;
35723582
border-bottom-right-radius: 4px;
35733583
border-bottom-left-radius: 4px;
35743584
}

‎docs/css.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1493,7 +1493,7 @@ <h4>Button dropdowns</h4>
14931493
<p></p>
14941494
<form class="bs-docs-example">
14951495
<div class="input-group span7">
1496-
<div class="input-group-btn btn-group">
1496+
<div class="input-group-btn">
14971497
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
14981498
<ul class="dropdown-menu">
14991499
<li><a href="#">Action</a></li>
@@ -1508,7 +1508,7 @@ <h4>Button dropdowns</h4>
15081508
<br>
15091509
<div class="input-group span7">
15101510
<input type="text">
1511-
<div class="input-group-btn btn-group">
1511+
<div class="input-group-btn">
15121512
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
15131513
<ul class="dropdown-menu">
15141514
<li><a href="#">Action</a></li>
@@ -1522,7 +1522,7 @@ <h4>Button dropdowns</h4>
15221522
</form>
15231523
{% highlight html linenos %}
15241524
<div class="input-group span7">
1525-
<div class="input-group-btn btn-group">
1525+
<div class="input-group-btn">
15261526
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
15271527
<ul class="dropdown-menu">
15281528
<li><a href="#">Action</a></li>
@@ -1537,7 +1537,7 @@ <h4>Button dropdowns</h4>
15371537

15381538
<div class="input-group span7">
15391539
<input type="text">
1540-
<div class="input-group-btn btn-group">
1540+
<div class="input-group-btn">
15411541
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
15421542
<ul class="dropdown-menu">
15431543
<li><a href="#">Action</a></li>
@@ -1553,7 +1553,7 @@ <h4>Button dropdowns</h4>
15531553
<h4>Segmented dropdown groups</h4>
15541554
<form class="bs-docs-example">
15551555
<div class="input-group span7">
1556-
<div class="input-group-btn btn-group">
1556+
<div class="input-group-btn">
15571557
<button class="btn" tabindex="-1">Action</button>
15581558
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
15591559
<span class="caret"></span>
@@ -1573,7 +1573,7 @@ <h4>Segmented dropdown groups</h4>
15731573

15741574
<div class="input-group span7">
15751575
<input type="text">
1576-
<div class="input-group-btn btn-group">
1576+
<div class="input-group-btn">
15771577
<button class="btn" tabindex="-1">Action</button>
15781578
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
15791579
<span class="caret"></span>
@@ -1590,7 +1590,7 @@ <h4>Segmented dropdown groups</h4>
15901590
</form>
15911591
{% highlight html linenos %}
15921592
<div class="input-group span7">
1593-
<div class="input-group-btn btn-group">
1593+
<div class="input-group-btn">
15941594
<!-- Button and dropdown menu -->
15951595
</div>
15961596
<input type="text">

‎less/button-groups.less

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,17 @@
1616
display: inline-block;
1717
vertical-align: middle; // match .btn alignment given font-size hack above
1818
> .btn {
19+
position: relative;
1920
float: left;
21+
// Prevent double borders when buttons are next to each other
22+
+ btn {
23+
margin-left: -1px;
24+
}
25+
// Bring the "active" button to the front
26+
&:hover,
27+
&:active {
28+
z-index: 2;
29+
}
2030
}
2131
}
2232

@@ -116,13 +126,14 @@
116126
.btn-group-vertical > .btn {
117127
display: block;
118128
float: none;
119-
border-radius: 0;
120129
max-width: 100%;
121130
}
122131
.btn-group-vertical .btn:first-child {
132+
border-radius: 0; // Needs to be here for specificity since we're not zeroing them out again
123133
.border-top-radius(@border-radius-base);
124134
}
125135
.btn-group-vertical .btn:last-child {
136+
border-radius: 0; // Needs to be here for specificity since we're not zeroing them out again
126137
.border-bottom-radius(@border-radius-base);
127138
}
128139
.btn-group-vertical .btn-large:first-child {

‎less/buttons.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
cursor: pointer;
2020
border: 1px solid @btn-border;
2121
border-radius: @border-radius-base;
22+
white-space: nowrap;
2223

2324
&:focus {
2425
.tab-focus();

‎less/forms.less

Lines changed: 27 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -503,52 +503,43 @@ select:focus:invalid {
503503

504504
// Button input groups
505505
// -------------------------
506-
.input-group-btn,
507-
.input-group-btn .btn {
506+
.input-group-btn {
507+
position: relative;
508508
white-space: nowrap;
509509
}
510510
.input-group-btn > .btn {
511+
position: relative;
511512
float: left; // Collapse white-space
512513
border-radius: 0;
513514
+ .btn {
514-
border-left: 0;
515-
}
516-
}
517-
.input-group-btn.btn-group {
518-
display: table-cell;
519-
}
520-
// Prepend
521-
.input-group-btn {
522-
&:first-child > .btn,
523-
&.btn-group:first-child > .btn {
524-
border-right: 0;
515+
margin-left: -1px;
525516
}
526-
&:first-child > .btn,
527-
&.btn-group:first-child > .btn {
528-
border-radius: @border-radius-base 0 0 @border-radius-base;
529-
&.btn-large {
530-
border-radius:@border-radius-large 0 0 @border-radius-large;
531-
}
532-
&.btn-small {
533-
border-radius:@border-radius-small 0 0 @border-radius-small;
534-
}
517+
// Bring the "active" button to the front
518+
&:hover,
519+
&:active {
520+
z-index: 2;
535521
}
536522
}
537-
// Append
538-
.input-group-btn {
539-
&:last-child > .btn,
540-
&.btn-group:last-child > .btn:first-child {
541-
border-left: 0;
523+
524+
// Prepended buttons
525+
.input-group-btn:first-child {
526+
// Round the left corners only
527+
> .btn:first-child,
528+
> .dropdown-toggle:first-child {
529+
.border-left-radius(@border-radius-base);
530+
&.btn-large { .border-left-radius(@border-radius-large); }
531+
&.btn-small { .border-left-radius(@border-radius-small); }
542532
}
543-
&:last-child > .btn,
544-
&.btn-group:last-child > .btn {
545-
border-radius: 0 @border-radius-base @border-radius-base 0;
546-
&.btn-large {
547-
border-radius: 0 @border-radius-large @border-radius-large 0;
548-
}
549-
&.btn-small {
550-
border-radius: 0 @border-radius-small @border-radius-small 0;
551-
}
533+
}
534+
535+
// Appended buttons
536+
.input-group-btn:last-child {
537+
// Round the right corners only
538+
> .btn:last-child,
539+
> .dropdown-toggle {
540+
.border-right-radius(@border-radius-base);
541+
&.btn-large { .border-right-radius(@border-radius-large); }
542+
&.btn-small { .border-right-radius(@border-radius-small); }
552543
}
553544
}
554545

@@ -557,7 +548,6 @@ select:focus:invalid {
557548
// Horizontal forms
558549
// --------------------------------------------------
559550

560-
561551
@media screen and (min-width: 768px) {
562552

563553
.form-horizontal {

0 commit comments

Comments
 (0)