Skip to content

B
bootstrap
Commit 583fc4b9 authored by Mark Otto's avatar Mark Otto
Browse files
Options

buttons and button group flattening improvements

parent fb4fc323
Hide whitespace changes
Inline Side-by-side
Showing with 12 additions and 130 deletions
docs/assets/css/bootstrap.css
View file @ 583fc4b9
...@@ -2417,7 +2417,6 @@ button.close { ...@@ -2417,7 +2417,6 @@ button.close {
font-weight: bold; font-weight: bold;
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
border: 1px solid #a7a9aa; border: 1px solid #a7a9aa;
...@@ -2595,6 +2594,11 @@ fieldset[disabled] .btn-link:hover { ...@@ -2595,6 +2594,11 @@ fieldset[disabled] .btn-link:hover {
text-decoration: none; text-decoration: none;
} }
.caret {
border-top-color: #fff;
border-bottom-color: #fff;
}
.btn-group { .btn-group {
position: relative; position: relative;
display: inline-block; display: inline-block;
...@@ -2635,18 +2639,6 @@ fieldset[disabled] .btn-link:hover { ...@@ -2635,18 +2639,6 @@ fieldset[disabled] .btn-link:hover {
margin-left: 1px; margin-left: 1px;
} }
.btn-group > .btn-mini {
font-size: 10.5px;
}
.btn-group > .btn-small {
font-size: 11.9px;
}
.btn-group > .btn-large {
font-size: 17.5px;
}
.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;
...@@ -2727,9 +2719,7 @@ fieldset[disabled] .btn-link:hover { ...@@ -2727,9 +2719,7 @@ fieldset[disabled] .btn-link:hover {
} }
.btn-large .caret { .btn-large .caret {
border-top-width: 5px; border-width: 5px;
border-right-width: 5px;
border-left-width: 5px;
} }
.btn-mini .caret, .btn-mini .caret,
...@@ -2741,16 +2731,6 @@ fieldset[disabled] .btn-link:hover { ...@@ -2741,16 +2731,6 @@ fieldset[disabled] .btn-link:hover {
border-bottom-width: 5px; border-bottom-width: 5px;
} }
.btn-primary .caret,
.btn-warning .caret,
.btn-danger .caret,
.btn-info .caret,
.btn-success .caret,
.btn-inverse .caret {
border-top-color: #fff;
border-bottom-color: #fff;
}
.btn-group-vertical > .btn { .btn-group-vertical > .btn {
display: block; display: block;
float: none; float: none;
......
docs/components.html
View file @ 583fc4b9
...@@ -310,26 +310,6 @@ ...@@ -310,26 +310,6 @@
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">Inverse <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar --> </div><!-- /btn-toolbar -->
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
...@@ -448,28 +428,6 @@ ...@@ -448,28 +428,6 @@
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-info">Info</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-inverse">Inverse</button>
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar --> </div><!-- /btn-toolbar -->
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
......
docs/templates/pages/components.mustache
View file @ 583fc4b9
...@@ -242,26 +242,6 @@ ...@@ -242,26 +242,6 @@
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">Inverse <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar --> </div><!-- /btn-toolbar -->
</div>{{! /example }} </div>{{! /example }}
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
...@@ -380,28 +360,6 @@ ...@@ -380,28 +360,6 @@
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-info">Info</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-inverse">Inverse</button>
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar --> </div><!-- /btn-toolbar -->
</div>{{! /example }} </div>{{! /example }}
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
......
less/button-groups.less
View file @ 583fc4b9
...@@ -2,6 +2,11 @@ ...@@ -2,6 +2,11 @@
// Button groups // Button groups
// -------------------------------------------------- // --------------------------------------------------
// Button carets
.caret {
border-top-color: #fff;
border-bottom-color: #fff;
}
// Make the div behave like a button // Make the div behave like a button
.btn-group { .btn-group {
...@@ -124,9 +129,7 @@ ...@@ -124,9 +129,7 @@
margin-top: 6px; margin-top: 6px;
} }
.btn-large .caret { .btn-large .caret {
border-left-width: 5px; border-width: 5px;
border-right-width: 5px;
border-top-width: 5px;
} }
.btn-mini .caret, .btn-mini .caret,
.btn-small .caret { .btn-small .caret {
...@@ -138,22 +141,6 @@ ...@@ -138,22 +141,6 @@
} }
// Account for other colors
.btn-primary,
.btn-warning,
.btn-danger,
.btn-info,
.btn-success,
.btn-inverse {
.caret {
border-top-color: #fff;
border-bottom-color: #fff;
}
}
// Vertical button groups // Vertical button groups
// ---------------------- // ----------------------
......
less/buttons.less
View file @ 583fc4b9
...@@ -15,7 +15,6 @@ ...@@ -15,7 +15,6 @@
font-weight: bold; font-weight: bold;
line-height: @line-height-base; line-height: @line-height-base;
text-align: center; text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
border: 1px solid @btn-border; border: 1px solid @btn-border;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment