From 713105774fcccf1250a7555b47483b578cf82eb6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 10 Jul 2012 00:45:44 -0700 Subject: [PATCH] fixes #3706: add textColor and textShadow as options to .buttonBackground mixin --- docs/assets/css/bootstrap.css | 38 ++++++++++++++++++++--------------- less/buttons.less | 21 +------------------ less/mixins.less | 9 ++++++--- 3 files changed, 29 insertions(+), 39 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index e290d86464..e98f9357bc 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2820,6 +2820,7 @@ button.close { .btn.active, .btn.disabled, .btn[disabled] { + color: #333333; background-color: #e6e6e6; *background-color: #d9d9d9; } @@ -2905,22 +2906,6 @@ button.close { 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-warning.active, .btn-danger.active, @@ -2936,6 +2921,8 @@ button.close { } .btn-primary { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #006dcc; *background-color: #0044cc; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)); @@ -2955,6 +2942,7 @@ button.close { .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { + color: #ffffff; background-color: #0044cc; *background-color: #003bb3; } @@ -2965,6 +2953,8 @@ button.close { } .btn-warning { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #faa732; *background-color: #f89406; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); @@ -2984,6 +2974,7 @@ button.close { .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] { + color: #ffffff; background-color: #f89406; *background-color: #df8505; } @@ -2994,6 +2985,8 @@ button.close { } .btn-danger { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #da4f49; *background-color: #bd362f; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f)); @@ -3013,6 +3006,7 @@ button.close { .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] { + color: #ffffff; background-color: #bd362f; *background-color: #a9302a; } @@ -3023,6 +3017,8 @@ button.close { } .btn-success { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #5bb75b; *background-color: #51a351; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351)); @@ -3042,6 +3038,7 @@ button.close { .btn-success.active, .btn-success.disabled, .btn-success[disabled] { + color: #ffffff; background-color: #51a351; *background-color: #499249; } @@ -3052,6 +3049,8 @@ button.close { } .btn-info { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #49afcd; *background-color: #2f96b4; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4)); @@ -3071,6 +3070,7 @@ button.close { .btn-info.active, .btn-info.disabled, .btn-info[disabled] { + color: #ffffff; background-color: #2f96b4; *background-color: #2a85a0; } @@ -3081,6 +3081,8 @@ button.close { } .btn-inverse { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #363636; *background-color: #222222; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222)); @@ -3100,6 +3102,7 @@ button.close { .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] { + color: #ffffff; background-color: #222222; *background-color: #151515; } @@ -4101,6 +4104,8 @@ input[type="submit"].btn.btn-mini { padding: 7px 10px; margin-right: 5px; margin-left: 5px; + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #0e0e0e; *background-color: #040404; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404)); @@ -4123,6 +4128,7 @@ input[type="submit"].btn.btn-mini { .navbar .btn-navbar.active, .navbar .btn-navbar.disabled, .navbar .btn-navbar[disabled] { + color: #ffffff; background-color: #040404; *background-color: #000000; } diff --git a/less/buttons.less b/less/buttons.less index 222a587bdc..b25d971805 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -15,12 +15,10 @@ font-size: 13px; line-height: 20px; *line-height: 20px; - color: @grayDark; text-align: center; - text-shadow: 0 1px 1px rgba(255,255,255,.75); vertical-align: middle; cursor: pointer; - .buttonBackground(@btnBackground, @btnBackgroundHighlight); + .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75)); border: 1px solid @btnBorder; *border: 0; // Remove the border to prevent IE7's black border on input:focus border-bottom-color: darken(@btnBorder, 10%); @@ -105,23 +103,6 @@ // 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 .btn-primary.active, .btn-warning.active, diff --git a/less/mixins.less b/less/mixins.less index 957e7faccc..54490b73bc 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -389,7 +389,9 @@ } // 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); 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%); @@ -481,14 +483,15 @@ // 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(@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 */ .reset-filter(); // in these cases the gradient won't cover the background, so we override &:hover, &:active, &.active, &.disabled, &[disabled] { + color: @textColor; background-color: @endColor; *background-color: darken(@endColor, 5%); }