mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
move around some comments in buttons.less, update labels to use correct variables, add snippet to docs about IE9
This commit is contained in:
Mark Otto
parent
dd9a0a3f16
commit
edef89f30e
2
bootstrap-responsive.min.css
vendored
2
bootstrap-responsive.min.css
vendored
@ -1,3 +1,3 @@
|
||||
|
||||
.hidden{display:none;visibility:hidden;}
|
||||
@media (max-width:480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;opacity:1;filter:alpha(opacity=100);content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;} .modal{position:absolute;top:20px;left:20px;right:20px;width:auto;margin:0;}.modal.fade.in{top:auto;} .modal-header .close{padding:10px;}}@media (max-width:768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width:768px) and (max-width:940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:84px;} .offset2{margin-left:148px;} .offset3{margin-left:212px;} .offset4{margin-left:276px;} .offset5{margin-left:340px;} .offset6{margin-left:404px;} .offset7{margin-left:468px;} .offset8{margin-left:532px;} .offset9{margin-left:596px;} .offset10{margin-left:660px;} .offset11{margin-left:724px;} .offset12{margin-left:788px;}}
|
||||
@media (max-width: 480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;opacity:1;filter:alpha(opacity=100);content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;} .modal{position:absolute;top:20px;left:20px;right:20px;width:auto;margin:0;}.modal.fade.in{top:auto;} .modal-header .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:84px;} .offset2{margin-left:148px;} .offset3{margin-left:212px;} .offset4{margin-left:276px;} .offset5{margin-left:340px;} .offset6{margin-left:404px;} .offset7{margin-left:468px;} .offset8{margin-left:532px;} .offset9{margin-left:596px;} .offset10{margin-left:660px;} .offset11{margin-left:724px;} .offset12{margin-left:788px;}}
|
||||
|
||||
12
bootstrap.css
vendored
12
bootstrap.css
vendored
@ -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,
|
||||
@ -1828,7 +1828,7 @@ table .span12 {
|
||||
.navbar-search .search-query :-moz-placeholder {
|
||||
color: #eeeeee;
|
||||
}
|
||||
.navbar-search .search-query::-webkit-input-placeholder {
|
||||
.navbar-search .search-query ::-webkit-input-placeholder {
|
||||
color: #eeeeee;
|
||||
}
|
||||
.navbar-search .search-query:hover {
|
||||
@ -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 {
|
||||
|
||||
8
bootstrap.min.css
vendored
8
bootstrap.min.css
vendored
@ -377,7 +377,7 @@ table .span12{float:none;width:924px;margin-left:0;}
|
||||
.navbar .btn-group .btn{margin-top:0;}
|
||||
.navbar-form{margin-bottom:0;}.navbar-form input,.navbar-form select{display:inline-block;margin-bottom:0;}
|
||||
.navbar-search{position:relative;float:left;margin-top:6px;margin-bottom:0;}.navbar-search .search-query{padding:4px 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;color:#ffffff;color:rgba(255, 255, 255, 0.75);background:#444;background:rgba(255, 255, 255, 0.3);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query :-moz-placeholder{color:#eeeeee;}
|
||||
.navbar-search .search-query::-webkit-input-placeholder{color:#eeeeee;}
|
||||
.navbar-search .search-query ::-webkit-input-placeholder{color:#eeeeee;}
|
||||
.navbar-search .search-query:hover{color:#ffffff;background-color:#999999;background-color:rgba(255, 255, 255, 0.5);}
|
||||
.navbar-search .search-query:focus,.navbar-search .search-query.focused{padding:5px 10px;color:#333333;text-shadow:0 1px 0 #ffffff;background-color:#ffffff;border:0;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);outline:0;}
|
||||
.navbar-static{margin-bottom:18px;}
|
||||
@ -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;}
|
||||
|
||||
@ -432,10 +432,10 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label notice">Notice</span>
|
||||
<span class="label info">Info</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label notice">Notice</span></code>
|
||||
<code><span class="label info">Info</span></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><button></code> elements.</p>
|
||||
<p>For disabled buttons, use <code>.disabled</code> for links and <code>:disabled</code> for <code><button></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—unfortunately we can't fix this.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
15
docs/templates/pages/base-css.mustache
vendored
15
docs/templates/pages/base-css.mustache
vendored
@ -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><span class="label notice">{{_i}}Notice{{/i}}</span></code>
|
||||
<code><span class="label info">{{_i}}Info{{/i}}</span></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><button></code> elements.{{/i}}</p>
|
||||
<p>{{_i}}For disabled buttons, use <code>.disabled</code> for links and <code>:disabled</code> for <code><button></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—unfortunately we can't fix this.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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; }
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user