From 8c1e60c638ba9f2c564f9c0f05c255a673672a5e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 2 Sep 2011 12:19:43 -0700 Subject: [PATCH] add reset filter to preboot for turning off gradients in IE when necessary; make :disabled [disabled] for crossbrowser usage --- bootstrap-1.2.0.css | 25 +++++++++++++------------ bootstrap-1.2.0.min.css | 6 +++--- docs/index.html | 2 +- lib/patterns.less | 7 ++++--- lib/preboot.less | 9 +++++++-- 5 files changed, 28 insertions(+), 21 deletions(-) diff --git a/bootstrap-1.2.0.css b/bootstrap-1.2.0.css index 8f5599737e..7d69a412b9 100644 --- a/bootstrap-1.2.0.css +++ b/bootstrap-1.2.0.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Fri Sep 2 12:02:29 PDT 2011 + * Date: Fri Sep 2 12:18:37 PDT 2011 */ /* Reset.less * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). @@ -1530,16 +1530,15 @@ footer { .btn { cursor: pointer; display: inline-block; - background-color: #eeeeee; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee)); - background-image: -moz-linear-gradient(top, #ffffff, #eeeeee); - background-image: -ms-linear-gradient(top, #ffffff, #eeeeee); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #eeeeee)); - background-image: -webkit-linear-gradient(top, #ffffff, #eeeeee); - background-image: -o-linear-gradient(top, #ffffff, #eeeeee); - background-image: linear-gradient(top, #ffffff, #eeeeee); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0)\9; + background-color: #e6e6e6; + background-repeat: no-repeat; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(0.25, #ffffff), to(#e6e6e6)); + background-image: -webkit-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6); + background-image: -moz-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6); + background-image: -ms-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6); + background-image: -o-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6); + background-image: linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0)\9; padding: 5px 14px 6px; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); color: #333; @@ -1586,6 +1585,7 @@ footer { .btn.disabled { cursor: default; background-image: none; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); filter: alpha(opacity=65); -khtml-opacity: 0.65; -moz-opacity: 0.65; @@ -1594,9 +1594,10 @@ footer { -moz-box-shadow: none; box-shadow: none; } -.btn:disabled { +.btn[disabled] { cursor: default; background-image: none; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); filter: alpha(opacity=65); -khtml-opacity: 0.65; -moz-opacity: 0.65; diff --git a/bootstrap-1.2.0.min.css b/bootstrap-1.2.0.min.css index 3527b8bc85..bf6294646f 100644 --- a/bootstrap-1.2.0.min.css +++ b/bootstrap-1.2.0.min.css @@ -214,11 +214,11 @@ a.menu:after,.dropdown-toggle:after{width:0;height:0;display:inline-block;conten .hero-unit p{font-size:18px;font-weight:200;line-height:27px;} footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;} .page-header{margin-bottom:17px;border-bottom:1px solid #ddd;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}.page-header h1{margin-bottom:8px;} -.btn{cursor:pointer;display:inline-block;background-color:#eeeeee;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee));background-image:-moz-linear-gradient(top, #ffffff, #eeeeee);background-image:-ms-linear-gradient(top, #ffffff, #eeeeee);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #eeeeee));background-image:-webkit-linear-gradient(top, #ffffff, #eeeeee);background-image:-o-linear-gradient(top, #ffffff, #eeeeee);background-image:linear-gradient(top, #ffffff, #eeeeee);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0)\9;padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;} +.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(0.25, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-moz-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0)\9;padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;} .btn.primary{color:#fff;background-color:#0064cd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0)\9;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .btn:active{-webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);} -.btn.disabled{cursor:default;background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} -.btn:disabled{cursor:default;background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} +.btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} +.btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .btn.large{font-size:16px;line-height:normal;padding:9px 14px 9px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;} .btn.small{padding:7px 9px 7px;font-size:11px;} button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;} diff --git a/docs/index.html b/docs/index.html index e9686b90d1..d2e0366118 100644 --- a/docs/index.html +++ b/docs/index.html @@ -891,7 +891,7 @@

Buttons

-   +  
diff --git a/lib/patterns.less b/lib/patterns.less index c574b9c1e2..6749633bb5 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -429,8 +429,7 @@ footer { // Button Base cursor: pointer; display: inline-block; - //#gradient > .vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%)); - #gradient > .vertical(#ffffff, #eeeeee); + #gradient > .vertical-three-colors(#ffffff, #ffffff, 0.25, darken(#ffffff, 10%)); padding: 5px 14px 6px; text-shadow: 0 1px 1px rgba(255,255,255,.75); color: #333; @@ -465,14 +464,16 @@ footer { &.disabled { cursor: default; background-image: none; + .reset-filter(); .opacity(65); .box-shadow(none); } - &:disabled { + &[disabled] { // disabled pseudo can't be included with .disabled // def because IE8 and below will drop it ;_; cursor: default; background-image: none; + .reset-filter(); .opacity(65); .box-shadow(none); } diff --git a/lib/preboot.less b/lib/preboot.less index 96bca86883..b92acb9d37 100644 --- a/lib/preboot.less +++ b/lib/preboot.less @@ -240,7 +240,7 @@ background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 background-image: linear-gradient(top, @startColor, @endColor); // The standard - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)\9",@startColor,@endColor)); + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)\9",@startColor,@endColor)); // IE8 and down } .directional (@startColor: #555, @endColor: #333, @deg: 45deg) { background-color: @endColor; @@ -260,10 +260,15 @@ background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor); background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor); background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)\9",@startColor,@endColor)); + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)\9",@startColor,@endColor)); // IE8 and down, gets no color-stop at all for proper fallback } } +// Reset filters for IE +.reset-filter() { + filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); +} + // Opacity .opacity(@opacity: 100) { filter: e(%("alpha(opacity=%d)", @opacity));