mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-04 04:37:29 +02:00
fixes #3706: add textColor and textShadow as options to .buttonBackground mixin
This commit is contained in:
38
docs/assets/css/bootstrap.css
vendored
38
docs/assets/css/bootstrap.css
vendored
@@ -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 {
|
|||||||
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 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
|||||||
.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 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
|||||||
.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 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
|||||||
.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 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
|||||||
.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 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
|||||||
.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 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
|||||||
.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 {
|
|||||||
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 {
|
|||||||
.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 @@
|
|||||||
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 @@
|
|||||||
// 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 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 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 @@
|
|||||||
|
|
||||||
// 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%);
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user