mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-19 06:18:22 +01:00
Code Issues Releases Wiki Activity

move around some comments in buttons.less, update labels to use correct variables, add snippet to docs about IE9

Browse Source
This commit is contained in:
Mark Otto 2012-01-26 11:10:07 -08:00
parent dd9a0a3f16
commit edef89f30e
7 changed files with 49 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
bootstrap.css vendored
View File

@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Thu Jan 26 13:51:07 EST 2012
* Date: Thu Jan 26 11:09:38 PST 2012
*/
article,
aside,
@ -2721,16 +2721,16 @@ a.thumbnail:hover {
border-radius: 3px;
}
.label.important {
background-color: #c43c35;
background-color: #b94a48;
}
.label.warning {
background-color: #f89406;
}
.label.success {
background-color: #46a546;
background-color: #468847;
}
.label.notice {
background-color: #62cffc;
.label.info {
background-color: #3a87ad;
}
@-webkit-keyframes progress-bar-stripes {
from {

6
bootstrap.min.css vendored
View File

@ -506,10 +506,10 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}
.thumbnail>img{display:block;max-width:100%;}
.thumbnail .caption{padding:9px;}
.label{padding:1px 3px 2px;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;background-color:#999999;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;}
.label{padding:1px 3px 2px;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;background-color:#999999;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#b94a48;}
.label.warning{background-color:#f89406;}
.label.success{background-color:#46a546;}
.label.notice{background-color:#62cffc;}
.label.success{background-color:#468847;}
.label.info{background-color:#3a87ad;}
@-webkit-keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}@keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}.progress,.progress .bar{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.progress{height:18px;margin-bottom:18px;background-color:#f7f7f7;background-image:-moz-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-ms-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));background-image:-webkit-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-o-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:linear-gradient(top, #f5f5f5, #f9f9f9);background-repeat:repeat-x;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);}
.progress .bar{width:0%;height:18px;color:#ffffff;font-size:12px;text-align:center;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0e90d2;background-image:-moz-linear-gradient(top, #149bdf, #0480be);background-image:-ms-linear-gradient(top, #149bdf, #0480be);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));background-image:-webkit-linear-gradient(top, #149bdf, #0480be);background-image:-o-linear-gradient(top, #149bdf, #0480be);background-image:linear-gradient(top, #149bdf, #0480be);background-repeat:repeat-x;-webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-moz-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:width 0.6s ease;-moz-transition:width 0.6s ease;-ms-transition:width 0.6s ease;-o-transition:width 0.6s ease;transition:width 0.6s ease;}

15
docs/base-css.html
View File

@ -432,10 +432,10 @@
</tr>
<tr>
<td>
<span class="label notice">Notice</span>
<span class="label info">Info</span>
</td>
<td>
<code>&lt;span class="label notice"&gt;Notice&lt;/span&gt;</code>
<code>&lt;span class="label info"&gt;Info&lt;/span&gt;</code>
</td>
</tr>
</tbody>
@ -1210,6 +1210,8 @@
<!-- Buttons
================================================== -->
<section id="buttons">
<div class="page-header">
<h1>Buttons</h1>
@ -1278,9 +1280,9 @@
<a href="#" class="btn small">Action</a>
</p>
</div>
<div class="span8">
<div class="span4">
<h3>Disabled state</h3>
<p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.</p>
<p>For disabled buttons, use <code>.disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.</p>
<p>
<a href="#" class="btn large primary disabled">Primary action</a>
<a href="#" class="btn large disabled">Action</a>
@ -1290,6 +1292,11 @@
<button class="btn large" disabled>Action</button>
</p>
</div>
<div class="span4">
<h3>Cross browser compatibility</h3>
<p>In IE9, we drop the gradient on all buttons in favor of rounded corners as IE9 doesn't crop background gradients to the corners.</p>
<p>Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow&mdash;unfortunately we can't fix this.</p>
</div>
</div>
<br>

15
docs/templates/pages/base-css.mustache vendored
View File

@ -367,10 +367,10 @@
</tr>
<tr>
<td>
<span class="label notice">{{_i}}Notice{{/i}}</span>
<span class="label info">{{_i}}Info{{/i}}</span>
</td>
<td>
<code>&lt;span class="label notice"&gt;{{_i}}Notice{{/i}}&lt;/span&gt;</code>
<code>&lt;span class="label info"&gt;{{_i}}Info{{/i}}&lt;/span&gt;</code>
</td>
</tr>
</tbody>
@ -1145,6 +1145,8 @@
<!-- Buttons
================================================== -->
<section id="buttons">
<div class="page-header">
<h1>{{_i}}Buttons{{/i}}</h1>
@ -1213,9 +1215,9 @@
<a href="#" class="btn small">{{_i}}Action{{/i}}</a>
</p>
</div>
<div class="span8">
<div class="span4">
<h3>{{_i}}Disabled state{{/i}}</h3>
<p>{{_i}}For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.{{/i}}</p>
<p>{{_i}}For disabled buttons, use <code>.disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.{{/i}}</p>
<p>
<a href="#" class="btn large primary disabled">{{_i}}Primary action{{/i}}</a>
<a href="#" class="btn large disabled">{{_i}}Action{{/i}}</a>
@ -1225,6 +1227,11 @@
<button class="btn large" disabled>{{_i}}Action{{/i}}</button>
</p>
</div>
<div class="span4">
<h3>Cross browser compatibility</h3>
<p>In IE9, we drop the gradient on all buttons in favor of rounded corners as IE9 doesn't crop background gradients to the corners.</p>
<p>Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow&mdash;unfortunately we can't fix this.</p>
</div>
</div>
<br>

15
lib/buttons.less
View File

@ -1,6 +1,10 @@
// BUTTON STYLES
// -------------
// Colors
// ------
.btn {
// Set text color
&.primary,
@ -31,6 +35,9 @@
}
}
// Mixin for generating button backgrounds
// ---------------------------------------
.buttonBackground(@startColor, @endColor) {
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
.gradientBar(@startColor, @endColor);
@ -40,18 +47,22 @@
background-color: @endColor;
}
// called out separately because IE8 would ignore otherwise
&[disabled] {
background-color: @endColor;
}
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
&:active,
&.active {
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
background-color: darken(@endColor, 10%) e("\9");
}
}
// Base .btn styles
// Base styles
// -----------
.btn {
// Button Base
display: inline-block;

6
lib/labels.less
View File

@ -9,8 +9,8 @@
text-transform: uppercase;
background-color: @grayLight;
.border-radius(3px);
&.important { background-color: #c43c35; }
&.important { background-color: @errorText; }
&.warning { background-color: @orange; }
&.success { background-color: @green; }
&.notice { background-color: lighten(@blue, 25%); }
&.success { background-color: @successText; }
&.info { background-color: @infoText; }
}