Commit 71310577 authored by Mark Otto's avatar Mark Otto
Browse files

fixes #3706: add textColor and textShadow as options to .buttonBackground mixin

parent a750551f
Showing with 29 additions and 39 deletions
+29 -39
...@@ -2820,6 +2820,7 @@ button.close { ...@@ -2820,6 +2820,7 @@ button.close {
.btn.active, .btn.active,
.btn.disabled, .btn.disabled,
.btn[disabled] { .btn[disabled] {
color: #333333;
background-color: #e6e6e6; background-color: #e6e6e6;
*background-color: #d9d9d9; *background-color: #d9d9d9;
} }
...@@ -2905,22 +2906,6 @@ button.close { ...@@ -2905,22 +2906,6 @@ button.close {
line-height: 16px; line-height: 16px;
} }
.btn-primary,
.btn-primary:hover,
.btn-warning,
.btn-warning:hover,
.btn-danger,
.btn-danger:hover,
.btn-success,
.btn-success:hover,
.btn-info,
.btn-info:hover,
.btn-inverse,
.btn-inverse:hover {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-primary.active, .btn-primary.active,
.btn-warning.active, .btn-warning.active,
.btn-danger.active, .btn-danger.active,
...@@ -2936,6 +2921,8 @@ button.close { ...@@ -2936,6 +2921,8 @@ button.close {
} }
.btn-primary { .btn-primary {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #006dcc; background-color: #006dcc;
*background-color: #0044cc; *background-color: #0044cc;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
...@@ -2955,6 +2942,7 @@ button.close { ...@@ -2955,6 +2942,7 @@ button.close {
.btn-primary.active, .btn-primary.active,
.btn-primary.disabled, .btn-primary.disabled,
.btn-primary[disabled] { .btn-primary[disabled] {
color: #ffffff;
background-color: #0044cc; background-color: #0044cc;
*background-color: #003bb3; *background-color: #003bb3;
} }
...@@ -2965,6 +2953,8 @@ button.close { ...@@ -2965,6 +2953,8 @@ button.close {
} }
.btn-warning { .btn-warning {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #faa732; background-color: #faa732;
*background-color: #f89406; *background-color: #f89406;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
...@@ -2984,6 +2974,7 @@ button.close { ...@@ -2984,6 +2974,7 @@ button.close {
.btn-warning.active, .btn-warning.active,
.btn-warning.disabled, .btn-warning.disabled,
.btn-warning[disabled] { .btn-warning[disabled] {
color: #ffffff;
background-color: #f89406; background-color: #f89406;
*background-color: #df8505; *background-color: #df8505;
} }
...@@ -2994,6 +2985,8 @@ button.close { ...@@ -2994,6 +2985,8 @@ button.close {
} }
.btn-danger { .btn-danger {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #da4f49; background-color: #da4f49;
*background-color: #bd362f; *background-color: #bd362f;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
...@@ -3013,6 +3006,7 @@ button.close { ...@@ -3013,6 +3006,7 @@ button.close {
.btn-danger.active, .btn-danger.active,
.btn-danger.disabled, .btn-danger.disabled,
.btn-danger[disabled] { .btn-danger[disabled] {
color: #ffffff;
background-color: #bd362f; background-color: #bd362f;
*background-color: #a9302a; *background-color: #a9302a;
} }
...@@ -3023,6 +3017,8 @@ button.close { ...@@ -3023,6 +3017,8 @@ button.close {
} }
.btn-success { .btn-success {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #5bb75b; background-color: #5bb75b;
*background-color: #51a351; *background-color: #51a351;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
...@@ -3042,6 +3038,7 @@ button.close { ...@@ -3042,6 +3038,7 @@ button.close {
.btn-success.active, .btn-success.active,
.btn-success.disabled, .btn-success.disabled,
.btn-success[disabled] { .btn-success[disabled] {
color: #ffffff;
background-color: #51a351; background-color: #51a351;
*background-color: #499249; *background-color: #499249;
} }
...@@ -3052,6 +3049,8 @@ button.close { ...@@ -3052,6 +3049,8 @@ button.close {
} }
.btn-info { .btn-info {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #49afcd; background-color: #49afcd;
*background-color: #2f96b4; *background-color: #2f96b4;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
...@@ -3071,6 +3070,7 @@ button.close { ...@@ -3071,6 +3070,7 @@ button.close {
.btn-info.active, .btn-info.active,
.btn-info.disabled, .btn-info.disabled,
.btn-info[disabled] { .btn-info[disabled] {
color: #ffffff;
background-color: #2f96b4; background-color: #2f96b4;
*background-color: #2a85a0; *background-color: #2a85a0;
} }
...@@ -3081,6 +3081,8 @@ button.close { ...@@ -3081,6 +3081,8 @@ button.close {
} }
.btn-inverse { .btn-inverse {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #363636; background-color: #363636;
*background-color: #222222; *background-color: #222222;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
...@@ -3100,6 +3102,7 @@ button.close { ...@@ -3100,6 +3102,7 @@ button.close {
.btn-inverse.active, .btn-inverse.active,
.btn-inverse.disabled, .btn-inverse.disabled,
.btn-inverse[disabled] { .btn-inverse[disabled] {
color: #ffffff;
background-color: #222222; background-color: #222222;
*background-color: #151515; *background-color: #151515;
} }
...@@ -4101,6 +4104,8 @@ input[type="submit"].btn.btn-mini { ...@@ -4101,6 +4104,8 @@ input[type="submit"].btn.btn-mini {
padding: 7px 10px; padding: 7px 10px;
margin-right: 5px; margin-right: 5px;
margin-left: 5px; margin-left: 5px;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #0e0e0e; background-color: #0e0e0e;
*background-color: #040404; *background-color: #040404;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404));
...@@ -4123,6 +4128,7 @@ input[type="submit"].btn.btn-mini { ...@@ -4123,6 +4128,7 @@ input[type="submit"].btn.btn-mini {
.navbar .btn-navbar.active, .navbar .btn-navbar.active,
.navbar .btn-navbar.disabled, .navbar .btn-navbar.disabled,
.navbar .btn-navbar[disabled] { .navbar .btn-navbar[disabled] {
color: #ffffff;
background-color: #040404; background-color: #040404;
*background-color: #000000; *background-color: #000000;
} }
......
...@@ -15,12 +15,10 @@ ...@@ -15,12 +15,10 @@
font-size: 13px; font-size: 13px;
line-height: 20px; line-height: 20px;
*line-height: 20px; *line-height: 20px;
color: @grayDark;
text-align: center; text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,.75);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
.buttonBackground(@btnBackground, @btnBackgroundHighlight); .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
border: 1px solid @btnBorder; border: 1px solid @btnBorder;
*border: 0; // Remove the border to prevent IE7's black border on input:focus *border: 0; // Remove the border to prevent IE7's black border on input:focus
border-bottom-color: darken(@btnBorder, 10%); border-bottom-color: darken(@btnBorder, 10%);
...@@ -105,23 +103,6 @@ ...@@ -105,23 +103,6 @@
// Alternate buttons // Alternate buttons
// -------------------------------------------------- // --------------------------------------------------
// Set text color
// -------------------------
.btn-primary,
.btn-primary:hover,
.btn-warning,
.btn-warning:hover,
.btn-danger,
.btn-danger:hover,
.btn-success,
.btn-success:hover,
.btn-info,
.btn-info:hover,
.btn-inverse,
.btn-inverse:hover {
color: @white;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
// Provide *some* extra contrast for those who can get it // Provide *some* extra contrast for those who can get it
.btn-primary.active, .btn-primary.active,
.btn-warning.active, .btn-warning.active,
......
...@@ -389,7 +389,9 @@ ...@@ -389,7 +389,9 @@
} }
// Gradient Bar Colors for buttons and alerts // Gradient Bar Colors for buttons and alerts
.gradientBar(@primaryColor, @secondaryColor) { .gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
color: @textColor;
text-shadow: @textShadow;
#gradient > .vertical(@primaryColor, @secondaryColor); #gradient > .vertical(@primaryColor, @secondaryColor);
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%); border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
...@@ -481,14 +483,15 @@ ...@@ -481,14 +483,15 @@
// Button backgrounds // Button backgrounds
// ------------------ // ------------------
.buttonBackground(@startColor, @endColor) { .buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
// gradientBar will set the background to a pleasing blend of these, to support IE<=9 // gradientBar will set the background to a pleasing blend of these, to support IE<=9
.gradientBar(@startColor, @endColor); .gradientBar(@startColor, @endColor, @textColor, @textShadow);
*background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
.reset-filter(); .reset-filter();
// in these cases the gradient won't cover the background, so we override // in these cases the gradient won't cover the background, so we override
&:hover, &:active, &.active, &.disabled, &[disabled] { &:hover, &:active, &.active, &.disabled, &[disabled] {
color: @textColor;
background-color: @endColor; background-color: @endColor;
*background-color: darken(@endColor, 5%); *background-color: darken(@endColor, 5%);
} }
......
Supports Markdown
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