From 29f0e4c28b56e684a9be9931dcf77b418cb63ae0 Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Thu, 26 Jan 2012 13:01:03 -0500 Subject: Removes filters as a way to provide gradients for IE<=9 - Lets us use rounded corners in IE9 - Makes hover / active states work correctly in IE<=9 Only change for non-IE is that moving from hover -> not hovering no longer animates (was a subtle blend) due to mismatch between the bottom of the gradient and the background color. Refactor: moves the primary button background to match the others. --- lib/buttons.less | 53 ++++++++++++++++++++++++++++++++--------------------- lib/mixins.less | 12 ++---------- 2 files changed, 34 insertions(+), 31 deletions(-) (limited to 'lib') diff --git a/lib/buttons.less b/lib/buttons.less index d97f044cf..7f5a91b99 100644 --- a/lib/buttons.less +++ b/lib/buttons.less @@ -1,9 +1,10 @@ // BUTTON STYLES // ------------- -// Shared colors for buttons and alerts .btn { // Set text color + &.primary, + &.primary:hover, &.danger, &.danger:hover, &.success, @@ -13,17 +14,36 @@ text-shadow: 0 -1px 0 rgba(0,0,0,.25); color: @white } + &.primary { + .buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 15)); + } // Danger and error appear as red &.danger { - .gradientBar(#ee5f5b, #c43c35); + .buttonBackground(#ee5f5b, #c43c35); } // Success appears as green &.success { - .gradientBar(#62c462, #57a957); + .buttonBackground(#62c462, #57a957); } // Info appears as a neutral blue &.info { - .gradientBar(#5bc0de, #339bb9); + .buttonBackground(#5bc0de, #339bb9); + } +} + +.buttonBackground(@startColor, @endColor) { + // gradientBar will set the background to a pleasing blend of these, to support IE<=9 + .gradientBar(@startColor, @endColor); + + // in these cases the gradient won't cover the background, so we override + &:hover, &:active, &.active { + background-color: @endColor; + } + + &:active, + &.active { + // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves + background-color: darken(@endColor, 10%) e("\9"); } } @@ -47,7 +67,12 @@ &:hover { color: @grayDark; text-decoration: none; + background-color: darken(@white, 10%); background-position: 0 -15px; + + // transition is only when going to hover, otherwise the background + // behind the gradient (there for IE<=9 fallback) gets mismatched + .transition(background-position .1s linear); } // Focus state for keyboard and accessibility @@ -55,27 +80,18 @@ outline: 1px dotted #666; } - // Primary Button Type - &.primary { - color: @white; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - .gradientBar(@primaryButtonBackground, spin(@primaryButtonBackground, 15)); - } - - // Transitions - .transition(.1s linear all); - // Active and Disabled states &.active, &:active { background-image: none; @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); .box-shadow(@shadow); + background-color: darken(@white, 10%); + background-color: darken(@white, 15%) e("\9"); } &.disabled { cursor: default; background-image: none; - .reset-filter(); .opacity(65); .box-shadow(none); } @@ -84,7 +100,6 @@ // def because IE8 and below will drop it ;_; cursor: default; background-image: none; - .reset-filter(); .opacity(65); .box-shadow(none); } @@ -101,10 +116,6 @@ font-size: @baseFontSize - 2px; } } -// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons -:root .btn { - border-radius: 0 \0; -} // Help Firefox not be a jerk about adding extra padding to buttons button.btn, @@ -113,4 +124,4 @@ input[type=submit].btn { padding: 0; border: 0; } -} \ No newline at end of file +} diff --git a/lib/mixins.less b/lib/mixins.less index b58571e6a..b8c969ea8 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -266,10 +266,9 @@ 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: @endColor; + background-color: mix(@startColor, @endColor, 60%); background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ @@ -277,7 +276,6 @@ 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; @@ -289,7 +287,7 @@ background-image: linear-gradient(@deg, @startColor, @endColor); // The standard } .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { - background-color: @endColor; + background-color: @midColor; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); @@ -297,7 +295,6 @@ 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: @outsideColor; @@ -319,11 +316,6 @@ } } -// Reset filters for IE -.reset-filter() { - filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); -} - // COMPONENT MIXINS -- cgit v1.2.3 From 7117db499f0b02da32a8d08f6371cab1f6b53338 Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Thu, 26 Jan 2012 13:26:14 -0500 Subject: Makes default button the tiniest bit of gray for IE<=9 --- lib/mixins.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index b8c969ea8..dd331ebf2 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -287,7 +287,7 @@ background-image: linear-gradient(@deg, @startColor, @endColor); // The standard } .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { - background-color: @midColor; + background-color: mix(@midColor, @endColor, 80%); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); -- cgit v1.2.3 From cd907067b81eb5b46cd416a3e65fb2858c4603f9 Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Thu, 26 Jan 2012 13:51:03 -0500 Subject: Fixes background color for disabled buttons to match pre-IE fix (which prevents hover effects) --- lib/buttons.less | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/buttons.less b/lib/buttons.less index 7f5a91b99..228b6c06d 100644 --- a/lib/buttons.less +++ b/lib/buttons.less @@ -36,7 +36,11 @@ .gradientBar(@startColor, @endColor); // in these cases the gradient won't cover the background, so we override - &:hover, &:active, &.active { + &:hover, &:active, &.active, &.disabled { + background-color: @endColor; + } + + &[disabled] { background-color: @endColor; } @@ -92,6 +96,7 @@ &.disabled { cursor: default; background-image: none; + background-color: darken(@white, 10%); .opacity(65); .box-shadow(none); } @@ -100,6 +105,7 @@ // def because IE8 and below will drop it ;_; cursor: default; background-image: none; + background-color: darken(@white, 10%); .opacity(65); .box-shadow(none); } -- cgit v1.2.3 From edef89f30efd73e5fca9952eef48136f8264aa93 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 26 Jan 2012 11:10:07 -0800 Subject: move around some comments in buttons.less, update labels to use correct variables, add snippet to docs about IE9 --- lib/buttons.less | 15 +++++++++++++-- lib/labels.less | 6 +++--- 2 files changed, 16 insertions(+), 5 deletions(-) (limited to 'lib') diff --git a/lib/buttons.less b/lib/buttons.less index 228b6c06d..cebacd049 100644 --- a/lib/buttons.less +++ b/lib/buttons.less @@ -1,6 +1,10 @@ // BUTTON STYLES // ------------- + +// Colors +// ------ + .btn { // Set text color &.primary, @@ -31,6 +35,9 @@ } } + +// Mixin for generating button backgrounds +// --------------------------------------- .buttonBackground(@startColor, @endColor) { // gradientBar will set the background to a pleasing blend of these, to support IE<=9 .gradientBar(@startColor, @endColor); @@ -40,18 +47,22 @@ background-color: @endColor; } + // called out separately because IE8 would ignore otherwise &[disabled] { background-color: @endColor; } + // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves &:active, &.active { - // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves background-color: darken(@endColor, 10%) e("\9"); } } -// Base .btn styles + +// Base styles +// ----------- + .btn { // Button Base display: inline-block; diff --git a/lib/labels.less b/lib/labels.less index 114bc85b5..06dc7f3c0 100644 --- a/lib/labels.less +++ b/lib/labels.less @@ -9,8 +9,8 @@ text-transform: uppercase; background-color: @grayLight; .border-radius(3px); - &.important { background-color: #c43c35; } + &.important { background-color: @errorText; } &.warning { background-color: @orange; } - &.success { background-color: @green; } - &.notice { background-color: lighten(@blue, 25%); } + &.success { background-color: @successText; } + &.info { background-color: @infoText; } } -- cgit v1.2.3