1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-18 11:21:23 +02:00

darken buttons, uncomment out firefox keyframes from progress bars

This commit is contained in:
Mark Otto
2012-01-28 12:43:19 -08:00
parent 39f70afed9
commit 2bfda031ce
5 changed files with 61 additions and 54 deletions

View File

@@ -2506,15 +2506,15 @@ table .span12 {
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
} }
.btn.primary { .btn.primary {
background-color: #0074cc; background-color: #006dcc;
background-image: -moz-linear-gradient(top, #0088cc, #0055cc); background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -ms-linear-gradient(top, #0088cc, #0055cc); background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0055cc); background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0055cc); background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(top, #0088cc, #0055cc); background-image: linear-gradient(top, #0088cc, #0044cc);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #0055cc #0055cc #003580; 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); border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
} }
.btn.primary:hover, .btn.primary:hover,
@@ -2522,21 +2522,21 @@ table .span12 {
.btn.primary.active, .btn.primary.active,
.btn.primary.disabled, .btn.primary.disabled,
.btn.primary[disabled] { .btn.primary[disabled] {
background-color: #0055cc; background-color: #0044cc;
} }
.btn.primary:active, .btn.primary.active { .btn.primary:active, .btn.primary.active {
background-color: #004099 \9; background-color: #003399 \9;
} }
.btn.danger { .btn.danger {
background-color: #dd514c; background-color: #da4f49;
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35); background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35); background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
background-image: linear-gradient(top, #ee5f5b, #c43c35); background-image: linear-gradient(top, #ee5f5b, #bd362f);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #c43c35 #c43c35 #882a25; 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); border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
} }
.btn.danger:hover, .btn.danger:hover,
@@ -2544,21 +2544,21 @@ table .span12 {
.btn.danger.active, .btn.danger.active,
.btn.danger.disabled, .btn.danger.disabled,
.btn.danger[disabled] { .btn.danger[disabled] {
background-color: #c43c35; background-color: #bd362f;
} }
.btn.danger:active, .btn.danger.active { .btn.danger:active, .btn.danger.active {
background-color: #9c302a \9; background-color: #942a25 \9;
} }
.btn.success { .btn.success {
background-color: #5eb95e; background-color: #5bb75b;
background-image: -moz-linear-gradient(top, #62c462, #57a957); background-image: -moz-linear-gradient(top, #62c462, #51a351);
background-image: -ms-linear-gradient(top, #62c462, #57a957); background-image: -ms-linear-gradient(top, #62c462, #51a351);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
background-image: -webkit-linear-gradient(top, #62c462, #57a957); background-image: -webkit-linear-gradient(top, #62c462, #51a351);
background-image: -o-linear-gradient(top, #62c462, #57a957); background-image: -o-linear-gradient(top, #62c462, #51a351);
background-image: linear-gradient(top, #62c462, #57a957); background-image: linear-gradient(top, #62c462, #51a351);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #57a957 #57a957 #3d773d; 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); border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
} }
.btn.success:hover, .btn.success:hover,
@@ -2566,21 +2566,21 @@ table .span12 {
.btn.success.active, .btn.success.active,
.btn.success.disabled, .btn.success.disabled,
.btn.success[disabled] { .btn.success[disabled] {
background-color: #57a957; background-color: #51a351;
} }
.btn.success:active, .btn.success.active { .btn.success:active, .btn.success.active {
background-color: #458845 \9; background-color: #408140 \9;
} }
.btn.info { .btn.info {
background-color: #4bb1cf; background-color: #49afcd;
background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -o-linear-gradient(top, #5bc0de, #339bb9); background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
background-image: linear-gradient(top, #5bc0de, #339bb9); background-image: linear-gradient(top, #5bc0de, #2f96b4);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #339bb9 #339bb9 #22697d; 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); border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
} }
.btn.info:hover, .btn.info:hover,
@@ -2588,10 +2588,10 @@ table .span12 {
.btn.info.active, .btn.info.active,
.btn.info.disabled, .btn.info.disabled,
.btn.info[disabled] { .btn.info[disabled] {
background-color: #339bb9; background-color: #2f96b4;
} }
.btn.info:active, .btn.info.active { .btn.info:active, .btn.info.active {
background-color: #287a91 \9; background-color: #24748c \9;
} }
.btn { .btn {
display: inline-block; display: inline-block;
@@ -2942,6 +2942,14 @@ a.thumbnail:hover {
background-position: 40px 0; background-position: 40px 0;
} }
} }
@-moz-keyframes progress-bar-stripes {
from {
background-position: 0 0;
}
to {
background-position: 40px 0;
}
}
@keyframes progress-bar-stripes { @keyframes progress-bar-stripes {
from { from {
background-position: 0 0; background-position: 0 0;

View File

@@ -1128,11 +1128,11 @@ For example, <code>section</code> should be wrapped as inline.
<label class="control-label">Radio buttons</label> <label class="control-label">Radio buttons</label>
<div class="controls"> <div class="controls">
<label class="radio"> <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 Option one is this and that&mdash;be sure to include why its great
</label> </label>
<label class="radio"> <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 Option two can is something else and selecting it will deselect option one
</label> </label>
</div> </div>

View File

@@ -1063,11 +1063,11 @@
<label class="control-label">{{_i}}Radio buttons{{/i}}</label> <label class="control-label">{{_i}}Radio buttons{{/i}}</label>
<div class="controls"> <div class="controls">
<label class="radio"> <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}} {{_i}}Option one is this and that&mdash;be sure to include why its great{{/i}}
</label> </label>
<label class="radio"> <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}} {{_i}}Option two can is something else and selecting it will deselect option one{{/i}}
</label> </label>
</div> </div>

View File

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

View File

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