Skip to content

B
bootstrap
Commit 60826077 authored by Andreas Cederström's avatar Andreas Cederström
Browse files
Options

Clean up inverse button using variables, adding button group examples. Also... 

Clean up inverse button using variables, adding button group examples. Also adding inverse inline label
parent da948508
Hide whitespace changes
Inline Side-by-side
Showing with 81 additions and 14 deletions
docs/assets/css/bootstrap.css
View file @ 60826077
......@@ -1806,7 +1806,7 @@ table .span12 {
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-dark.active {
.btn-inverse.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-primary {
......@@ -1930,16 +1930,16 @@ table .span12 {
background-color: #24748c \9;
}
.btn-inverse {
background-color: #393939;
background-image: -moz-linear-gradient(top, #454545, #262626);
background-image: -ms-linear-gradient(top, #454545, #262626);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#454545), to(#262626));
background-image: -webkit-linear-gradient(top, #454545, #262626);
background-image: -o-linear-gradient(top, #454545, #262626);
background-image: linear-gradient(top, #454545, #262626);
background-color: #414141;
background-image: -moz-linear-gradient(top, #555555, #222222);
background-image: -ms-linear-gradient(top, #555555, #222222);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#222222));
background-image: -webkit-linear-gradient(top, #555555, #222222);
background-image: -o-linear-gradient(top, #555555, #222222);
background-image: linear-gradient(top, #555555, #222222);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#262626', GradientType=0);
border-color: #262626 #262626 #000000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#222222', GradientType=0);
border-color: #222222 #222222 #000000;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
......@@ -1948,10 +1948,10 @@ table .span12 {
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
background-color: #262626;
background-color: #222222;
}
.btn-inverse:active, .btn-inverse.active {
background-color: #0c0c0c \9;
background-color: #080808 \9;
}
button.btn, input[type="submit"].btn {
*padding-top: 2px;
......@@ -3172,6 +3172,12 @@ a.thumbnail:hover {
.label-info:hover {
background-color: #2d6987;
}
.label-inverse {
background-color: #333333;
}
.label-inverse:hover {
background-color: #1a1a1a;
}
@-webkit-keyframes progress-bar-stripes {
from {
background-position: 0 0;
......
docs/components.html
View file @ 60826077
......@@ -248,6 +248,16 @@
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#">Inverse <span class="caret"></span></a>
<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 -->
<hr>
<p><span class="label label-info">Heads up!</span> Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
......@@ -331,6 +341,17 @@
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<a class="btn btn-inverse" href="#">Inverse</a>
<a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<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>
</div>
<div class="span8">
......@@ -1136,6 +1157,14 @@
<code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-inverse">Inverse</span>
</td>
<td>
<code>&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</code>
</td>
</tr>
</tbody>
</table>
</section>
......
docs/templates/pages/components.mustache
View file @ 60826077
......@@ -172,6 +172,16 @@
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Inverse{{/i}} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<hr>
<p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.{{/i}}</p>
......@@ -255,6 +265,17 @@
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<a class="btn btn-inverse" href="#">{{_i}}Inverse{{/i}}</a>
<a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
</div>
</div>
<div class="span8">
......@@ -1060,6 +1081,14 @@
<code>&lt;span class="label label-info"&gt;{{_i}}Info{{/i}}&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-inverse">{{_i}}Inverse{{/i}}</span>
</td>
<td>
<code>&lt;span class="label label-inverse"&gt;{{_i}}Inverse{{/i}}&lt;/span&gt;</code>
</td>
</tr>
</tbody>
</table>
</section>
......
less/buttons.less
View file @ 60826077
......@@ -119,7 +119,7 @@
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-dark.active {
.btn-inverse.active {
color: rgba(255,255,255,.75);
}
......@@ -146,7 +146,7 @@
}
// Inverse appears as dark gray
.btn-inverse {
.buttonBackground(#454545, #262626);
.buttonBackground(@gray, @grayDarker);
}
......
less/labels.less
View file @ 60826077
......@@ -30,3 +30,6 @@
.label-info { background-color: @infoText; }
.label-info:hover { background-color: darken(@infoText, 10%); }
.label-inverse { background-color: @grayDark; }
.label-inverse:hover { background-color: darken(@grayDark, 10%); }
\ No newline at end of file
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