From f17b2633adb016ef58423c083d2a377368fc51c7 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 21 Aug 2011 19:56:43 -0700 Subject: [PATCH] fix btn borders ie7/ie8 --- bootstrap-1.0.0.css | 8 ++++---- bootstrap-1.0.0.min.css | 2 +- docs/index.html | 12 ++++++++---- lib/patterns.less | 3 +-- lib/preboot.less | 7 ++++--- 5 files changed, 18 insertions(+), 14 deletions(-) diff --git a/bootstrap-1.0.0.css b/bootstrap-1.0.0.css index 31668772e9..220af6d325 100644 --- a/bootstrap-1.0.0.css +++ b/bootstrap-1.0.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: Sun Aug 21 19:46:16 PDT 2011 + * Date: Sun Aug 21 19:56:38 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). @@ -395,9 +395,9 @@ a:hover { color: #333333; font-size: 13px; line-height: 18px; - border: 1px solid rgba(0, 0, 0, 0.1); - border-bottom: 1px solid #ccc; - border-bottom-color: rgba(0, 0, 0, 0.25); + border: 1px solid; + border-color: #ccc #ccc #bbb; + border-color: borderColor borderColor rgba(0, 0, 0, 0.25); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; diff --git a/bootstrap-1.0.0.min.css b/bootstrap-1.0.0.min.css index 8fe16f527a..9200528c5a 100644 --- a/bootstrap-1.0.0.min.css +++ b/bootstrap-1.0.0.min.css @@ -47,7 +47,7 @@ div.container-fluid:after{clear:both;} div.container-fluid div.sidebar{float:left;width:220px;} div.container-fluid div.content{min-width:700px;max-width:1180px;margin-left:240px;} a{color:#0069d6;text-decoration:none;line-height:inherit;}a:hover{color:#0050a3;text-decoration:underline;} -.btn{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, color-stop(0.25, #ffffff), #e6e6e6);background-image:-moz-linear-gradient(#ffffff, color-stop(#ffffff, 0.25), #e6e6e6);background-image:-ms-linear-gradient(#ffffff, color-stop(#ffffff, 0.25), #e6e6e6);background-image:-o-linear-gradient(#ffffff, color-stop(#ffffff, 0.25), #e6e6e6);background-image:linear-gradient(#ffffff, color-stop(#ffffff, 0.25), #e6e6e6);padding:4px 14px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333333;font-size:13px;line-height:18px;border:1px solid rgba(0, 0, 0, 0.1);border-bottom:1px solid #ccc;border-bottom-color:rgba(0, 0, 0, 0.25);-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:#333333;text-decoration:none;} +.btn{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, color-stop(0.25, #ffffff), #e6e6e6);background-image:-moz-linear-gradient(#ffffff, color-stop(#ffffff, 0.25), #e6e6e6);background-image:-ms-linear-gradient(#ffffff, color-stop(#ffffff, 0.25), #e6e6e6);background-image:-o-linear-gradient(#ffffff, color-stop(#ffffff, 0.25), #e6e6e6);background-image:linear-gradient(#ffffff, color-stop(#ffffff, 0.25), #e6e6e6);padding:4px 14px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333333;font-size:13px;line-height:18px;border:1px solid;border-color:#ccc #ccc #bbb;border-color:borderColor borderColor rgba(0, 0, 0, 0.25);-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:#333333;text-decoration:none;} .btn.primary{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(#049cdb, #0064cd);background-image:-ms-linear-gradient(#049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(#049cdb, #0064cd);background-image:-o-linear-gradient(#049cdb, #0064cd);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0)";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);background-image:linear-gradient(#049cdb, #0064cd);color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-bottom-color:#003f81;border-bottom-color:rgba(0, 0, 0, 0.25);}.btn.primary:hover{color:#fff;} .btn.large{font-size:16px;line-height:28px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;} .btn.small{padding-right:9px;padding-left:9px;font-size:11px;} diff --git a/docs/index.html b/docs/index.html index b9fffce971..686115684e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -843,8 +843,10 @@

Example buttons

Button styles can be applied to anything with the .btn applied. Typically you’ll want to apply these to only <a>, <button>, and select <input> elements. Here’s how it looks:

- - +
+ + +

Alternate sizes

Fancy larger or smaller buttons? Have at it!

@@ -866,8 +868,10 @@

Buttons

- - +
+ + +
diff --git a/lib/patterns.less b/lib/patterns.less index cb89710f6e..e920122407 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -286,11 +286,10 @@ div.page-header { // One-liner alert bars div.alert-message { - // TODO: Ask cloudhead how to do this fany filter elegantly. Less eval is returning strings with quotes ;_; + // TODO: Ask cloudhead how to do this fancy filter elegantly. Less eval is returning strings with quotes ;_; #gradient > .vertical(transparent, rgba(0,0,0,0.15)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#15000000')"; filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#15000000')"; - background-color: @grayLighter; margin-bottom: @baseline; padding: 8px 15px; diff --git a/lib/preboot.less b/lib/preboot.less index 9c3da46b1b..e02182eca1 100644 --- a/lib/preboot.less +++ b/lib/preboot.less @@ -189,9 +189,10 @@ color: @textColor; font-size: @fontSize; line-height: @baseline; - border: 1px solid @borderColor; - border-bottom: 1px solid #ccc; - border-bottom-color: fadein(@borderColor, 15%); + border: 1px solid; + border-color: #ccc #ccc #bbb; + border-color: borderColor borderColor fadein(@borderColor, 15%); + .border-radius(@borderRadius); @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); .box-shadow(@shadow);