0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00

Merge branch '2.0-wip' of https://github.com/twitter/bootstrap into 2.0-wip

This commit is contained in:
Jacob Thornton 2012-01-28 13:17:07 -08:00
commit b38a13ef98
10 changed files with 106 additions and 118 deletions

View File

@ -7,6 +7,9 @@
display: block;
line-height: 18px;
}
input[type="checkbox"], input[type="radio"] {
border: 1px solid #ccc;
}
.form-horizontal .control-group > label {
float: none;
width: auto;
@ -20,7 +23,8 @@
padding-top: 0;
}
.form-horizontal .form-actions {
padding-left: 0;
padding-left: 10px;
padding-right: 10px;
}
.modal {
position: absolute;

View File

@ -533,11 +533,9 @@ input[type="image"], input[type="checkbox"], input[type="radio"] {
/* IE7 */
line-height: normal;
border: none;
border: 0;
cursor: pointer;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
border-radius: 0 \0/;
}
input[type="file"] {
padding: initial;
@ -1913,6 +1911,7 @@ table .span12 {
background-image: -o-linear-gradient(top, #333333, #222222);
background-image: linear-gradient(top, #333333, #222222);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
@ -2127,6 +2126,7 @@ table .span12 {
background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
background-image: linear-gradient(top, #ffffff, #f5f5f5);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
@ -2518,92 +2518,100 @@ table .span12 {
color: rgba(255, 255, 255, 0.75);
}
.btn.primary {
background-color: #0074cc;
background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
background-image: -ms-linear-gradient(top, #0088cc, #0055cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
background-image: -o-linear-gradient(top, #0088cc, #0055cc);
background-image: linear-gradient(top, #0088cc, #0055cc);
background-color: #006dcc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(top, #0088cc, #0044cc);
background-repeat: repeat-x;
border-color: #0055cc #0055cc #003580;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
border-color: #0044cc #0044cc #002a80;
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);
}
.btn.primary:hover,
.btn.primary:active,
.btn.primary.active,
.btn.primary.disabled,
.btn.primary[disabled] {
background-color: #0055cc;
background-color: #0044cc;
}
.btn.primary:active, .btn.primary.active {
background-color: #004099 \9;
background-color: #003399 \9;
}
.btn.danger {
background-color: #dd514c;
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
background-image: linear-gradient(top, #ee5f5b, #c43c35);
background-color: #da4f49;
background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
background-image: linear-gradient(top, #ee5f5b, #bd362f);
background-repeat: repeat-x;
border-color: #c43c35 #c43c35 #882a25;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0);
border-color: #bd362f #bd362f #802420;
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);
}
.btn.danger:hover,
.btn.danger:active,
.btn.danger.active,
.btn.danger.disabled,
.btn.danger[disabled] {
background-color: #c43c35;
background-color: #bd362f;
}
.btn.danger:active, .btn.danger.active {
background-color: #9c302a \9;
background-color: #942a25 \9;
}
.btn.success {
background-color: #5eb95e;
background-image: -moz-linear-gradient(top, #62c462, #57a957);
background-image: -ms-linear-gradient(top, #62c462, #57a957);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
background-image: -webkit-linear-gradient(top, #62c462, #57a957);
background-image: -o-linear-gradient(top, #62c462, #57a957);
background-image: linear-gradient(top, #62c462, #57a957);
background-color: #5bb75b;
background-image: -moz-linear-gradient(top, #62c462, #51a351);
background-image: -ms-linear-gradient(top, #62c462, #51a351);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
background-image: -webkit-linear-gradient(top, #62c462, #51a351);
background-image: -o-linear-gradient(top, #62c462, #51a351);
background-image: linear-gradient(top, #62c462, #51a351);
background-repeat: repeat-x;
border-color: #57a957 #57a957 #3d773d;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0);
border-color: #51a351 #51a351 #387038;
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);
}
.btn.success:hover,
.btn.success:active,
.btn.success.active,
.btn.success.disabled,
.btn.success[disabled] {
background-color: #57a957;
background-color: #51a351;
}
.btn.success:active, .btn.success.active {
background-color: #458845 \9;
background-color: #408140 \9;
}
.btn.info {
background-color: #4bb1cf;
background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9));
background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
background-image: linear-gradient(top, #5bc0de, #339bb9);
background-color: #49afcd;
background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
background-image: linear-gradient(top, #5bc0de, #2f96b4);
background-repeat: repeat-x;
border-color: #339bb9 #339bb9 #22697d;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);
border-color: #2f96b4 #2f96b4 #1f6377;
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);
}
.btn.info:hover,
.btn.info:active,
.btn.info.active,
.btn.info.disabled,
.btn.info[disabled] {
background-color: #339bb9;
background-color: #2f96b4;
}
.btn.info:active, .btn.info.active {
background-color: #287a91 \9;
background-color: #24748c \9;
}
.btn {
display: inline-block;
@ -2621,6 +2629,7 @@ table .span12 {
background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
border: 1px solid #ccc;
border-bottom-color: #bbb;
-webkit-border-radius: 4px;
@ -2954,6 +2963,14 @@ a.thumbnail:hover {
background-position: 40px 0;
}
}
@-moz-keyframes progress-bar-stripes {
from {
background-position: 0 0;
}
to {
background-position: 40px 0;
}
}
@keyframes progress-bar-stripes {
from {
background-position: 0 0;
@ -2974,6 +2991,7 @@ a.thumbnail:hover {
background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);
-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);
@ -2996,6 +3014,7 @@ a.thumbnail:hover {
background-image: -o-linear-gradient(top, #149bdf, #0480be);
background-image: linear-gradient(top, #149bdf, #0480be);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);
-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);
@ -3035,6 +3054,7 @@ a.thumbnail:hover {
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
background-image: linear-gradient(top, #ee5f5b, #c43c35);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
}
.progress.danger.striped .bar {
background-color: #ee5f5b;
@ -3054,6 +3074,7 @@ a.thumbnail:hover {
background-image: -o-linear-gradient(top, #62c462, #57a957);
background-image: linear-gradient(top, #62c462, #57a957);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
}
.progress.success.striped .bar {
background-color: #62c462;
@ -3073,6 +3094,7 @@ a.thumbnail:hover {
background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
background-image: linear-gradient(top, #5bc0de, #339bb9);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
}
.progress.info.striped .bar {
background-color: #5bc0de;

View File

@ -306,42 +306,6 @@ hr.soften {
}
/* Quickstart section for getting le code
-------------------------------------------------- */
.getting-started p {
color: #777;
margin-bottom: 9px;
}
.getting-started .current-version,
.getting-started .current-version a {
color: #999;
}
.getting-started form {
margin-bottom: 0;
}
.getting-started textarea {
display: block;
width: 95%;
height: auto;
font-family: Menlo, Monaco, "Courier New", monospace;
font-size: 12px;
line-height: 20px;
white-space: nowrap;
overflow: hidden;
color: #999;
/* Makes inputs behave like true block-level elements */
-webkit-box-sizing: border-box; /* Older Webkit */
-moz-box-sizing: border-box; /* Older FF */
-ms-box-sizing: border-box; /* IE8 */
box-sizing: border-box; /* CSS3 spec*/
/* Hacks for IE7 to make this work just okay enough to function */
*width: 80%;
*height: 24px;
}
.getting-started textarea:focus {
color: #333;
}
/* Footer
-------------------------------------------------- */
@ -354,27 +318,6 @@ hr.soften {
margin-bottom: 0;
color: #555;
}
.footer dl {
margin-bottom: 0;
}
.footer dl dt {
font-size: 11px;
color: #999;
text-transform: uppercase;
}
.footer dl dd + dt {
margin-top: 18px;
}
.footer dl dd {
margin-left: 0;
font-size: 12px;
}
.footer dl a {
color: #999;
}
.footer dl a:hover {
color: #555;
}
@ -745,6 +688,11 @@ form.well {
bottom: auto;
left: auto;
}
/* Forms docs */
.form-docs {
padding-left: 0; /* down from 10px */
}
}

View File

@ -1128,11 +1128,11 @@ For example, <code>section</code> should be wrapped as inline.
<label class="control-label">Radio buttons</label>
<div class="controls">
<label class="radio">
<input type="radio" id="optionsRadios1" value="option1" checked>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why its great
</label>
<label class="radio">
<input type="radio" id="optionsRadios2" value="option2">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can is something else and selecting it will deselect option one
</label>
</div>

View File

@ -1063,11 +1063,11 @@
<label class="control-label">{{_i}}Radio buttons{{/i}}</label>
<div class="controls">
<label class="radio">
<input type="radio" id="optionsRadios1" value="option1" checked>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
{{_i}}Option one is this and that&mdash;be sure to include why its great{{/i}}
</label>
<label class="radio">
<input type="radio" id="optionsRadios2" value="option2">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
{{_i}}Option two can is something else and selecting it will deselect option one{{/i}}
</label>
</div>

View File

@ -25,19 +25,19 @@
color: rgba(255,255,255,.75);
}
&.primary {
.buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 15));
.buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 20));
}
// Danger and error appear as red
&.danger {
.buttonBackground(#ee5f5b, #c43c35);
.buttonBackground(#ee5f5b, #bd362f);
}
// Success appears as green
&.success {
.buttonBackground(#62c462, #57a957);
.buttonBackground(#62c462, #51a351);
}
// Info appears as a neutral blue
&.info {
.buttonBackground(#5bc0de, #339bb9);
.buttonBackground(#5bc0de, #2f96b4);
}
}

View File

@ -84,9 +84,9 @@ input[type="radio"] {
margin: 3px 0;
*margin-top: 0; /* IE7 */
line-height: normal;
border: none;
border: 0;
cursor: pointer;
.border-radius(0);
border-radius: 0 e("\0/");
}
// Reset the file input to browser defaults

View File

@ -298,6 +298,7 @@
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(left, @startColor, @endColor); // Le standard
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
}
.vertical(@startColor: #555, @endColor: #333) {
background-color: mix(@startColor, @endColor, 60%);
@ -308,6 +309,7 @@
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(top, @startColor, @endColor); // The standard
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
}
.directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
background-color: @endColor;
@ -327,6 +329,7 @@
background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
}
.radial(@innerColor: #555, @outerColor: #333) {
background-color: @outerColor;
@ -347,6 +350,10 @@
background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
}
}
// Reset filters for IE
.reset-filter() {
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}
// Mixin for generating button backgrounds
@ -354,6 +361,7 @@
.buttonBackground(@startColor, @endColor) {
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
.gradientBar(@startColor, @endColor);
.reset-filter();
// in these cases the gradient won't cover the background, so we override
&:hover, &:active, &.active, &.disabled, &[disabled] {

View File

@ -11,11 +11,10 @@
to { background-position: 40px 0; }
}
// Temporarily commented out since LESS won't compile with this
// @-moz-keyframes progress-bar-stripes {
// from { background-position: 0 0; }
// to { background-position: 40px 0; }
// }
@-moz-keyframes progress-bar-stripes {
from { background-position: 0 0; }
to { background-position: 40px 0; }
}
// Spec
@keyframes progress-bar-stripes {

View File

@ -33,6 +33,12 @@
line-height: @baseLineHeight;
}
// Update checkboxes for iOS
input[type="checkbox"],
input[type="radio"] {
border: 1px solid #ccc;
}
// Remove the horizontal form styles
.form-horizontal .control-group > label {
float: none;
@ -50,7 +56,8 @@
}
// Move over buttons in .form-actions to align with .controls
.form-horizontal .form-actions {
padding-left: 0;
padding-left: 10px;
padding-right: 10px;
}
// Modals