optimize btn for outputted code + line-height: normal for firefox with adjusted padding

diff --git a/bootstrap-1.1.0.css b/bootstrap-1.1.0.css
index 6fefd30973a968d957222ed8c9e979dda5f730e6..4e91a519d2914a21fc3d9c3616de3e8b0f7aaa04 100644 (file)
--- a/bootstrap-1.1.0.css
+++ b/bootstrap-1.1.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: Tue Aug 23 20:13:44 PDT 2011
+ * Date: Wed Aug 24 15:54:36 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).
@@ -297,11 +297,11 @@ a:hover {
   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);
-  padding: 4px 14px;
+  padding: 5px 14px 6px;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
   color: #333;
   font-size: 13px;
-  line-height: 18px;
+  line-height: normal;
   border: 1px solid #ccc;
   border-bottom-color: #bbb;
   -webkit-border-radius: 4px;
@@ -319,10 +319,10 @@ a:hover {
   color: #333;
   text-decoration: none;
 }
-.btn.primary, .btn.danger {
-  color: #fff;
-}
-.btn.primary:hover, .btn.danger:hover {
+.btn.primary,
+.btn.danger,
+.btn.danger:hover,
+.btn.primary:hover {
   color: #fff;
 }
 .btn.primary {
@@ -353,39 +353,39 @@ a:hover {
   border-color: #9d261d #9d261d #5c1611;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 }
-.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;
-}
 .btn.disabled {
+  cursor: default;
   background-image: none;
   filter: alpha(opacity=65);
   -khtml-opacity: 0.65;
   -moz-opacity: 0.65;
   opacity: 0.65;
-  cursor: default;
 }
 .btn:disabled {
+  cursor: default;
   background-image: none;
   filter: alpha(opacity=65);
   -khtml-opacity: 0.65;
   -moz-opacity: 0.65;
   opacity: 0.65;
-  cursor: default;
 }
 .btn:active {
   -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
   -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
   box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
 }
+.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/bootstrap-1.1.0.min.css b/bootstrap-1.1.0.min.css
index c6a5a379f745f585ba81a99f5de45d9c478014d8..9d7fa25e05544f5e448a004bc98b49f2379b47ca 100644 (file)
--- a/bootstrap-1.1.0.min.css
+++ b/bootstrap-1.1.0.min.css
@@ -48,15 +48,15 @@ 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;font-weight:inherit;}a:hover{color:#0050a3;text-decoration:underline;}
-.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);padding:4px 14px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:18px;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,.btn.danger{color:#fff;}.btn.primary:hover,.btn.danger:hover{color:#fff;}
+.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);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,.btn.danger,.btn.danger:hover,.btn.primary:hover{color:#fff;}
 .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);background-image:linear-gradient(#049cdb, #0064cd);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.danger{background-color:#9d261d;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#d83a2e), to(#9d261d));background-image:-moz-linear-gradient(#d83a2e, #9d261d);background-image:-ms-linear-gradient(#d83a2e, #9d261d);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #d83a2e), color-stop(100%, #9d261d));background-image:-webkit-linear-gradient(#d83a2e, #9d261d);background-image:-o-linear-gradient(#d83a2e, #9d261d);background-image:linear-gradient(#d83a2e, #9d261d);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#9d261d #9d261d #5c1611;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
-.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;}
-.btn.disabled{background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;cursor:default;}
-.btn:disabled{background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;cursor:default;}
+.btn.disabled{cursor:default;background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;}
+.btn:disabled{cursor:default;background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;}
 .btn:active{-webkit-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);}
+.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;}
 p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;}
 h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}

diff --git a/lib/preboot.less b/lib/preboot.less
index 399d50825f44b1e74d640f43175a41bf8e19cff0..964f677a68b208f425f41c422d7cded32a84915c 100644 (file)
--- a/lib/preboot.less
+++ b/lib/preboot.less
@@ -171,26 +171,12 @@
 }
 
 // Buttons
-// .button(@color: #fff, @padding: 4px 14px, @textColor: #333, @textShadow: 0 1px 1px rgba(255,255,255,.75), @fontSize: 13px, @borderColor: rgba(0,0,0,.1), @borderRadius: 4px) {
-//  display: inline-block;
-//  #gradient > .vertical-three-colors(@color, @color, 0.25, darken(@color, 10%));
-//  padding: @padding;
-//  text-shadow: @textShadow;
-//  color: @textColor;
-//  font-size: @fontSize;
-//  line-height: @baseline;
-//  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);
-//  &:hover {
-//    background-position: 0 -15px;
-//    color: @textColor;
-//    text-decoration: none;
-//  }
-// }
+.btnColoring(@primaryColor, @secondaryColor) {
+  #gradient > .vertical(@primaryColor, @secondaryColor);
+  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  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%);
+}
 
 // Add an alphatransparency value to any background or border color (via Elyse Holladay)
 #translucent {

diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index a75a47c5fa23c3c09261d345a7317fd61a532a6f..5dc054f93b033167318d8325d4b56d3dc5b02d1b 100644 (file)
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -118,73 +118,80 @@ a {
 }
 
 // Buttons
-.btnColor(@primaryColor, @secondaryColor) {
-  #gradient > .vertical(@primaryColor, @secondaryColor);
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-  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%);
-}
-
 .btn {
-  // .button(#1174C6);
+  // Button Base
   cursor: pointer;
   display: inline-block;
   #gradient > .vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%));
-  padding: 4px 14px;
+  padding: 5px 14px 6px;
   text-shadow: 0 1px 1px rgba(255,255,255,.75);
   color: #333;
   font-size: 13px;
-  line-height: @baseline;
+  line-height: normal;
   border: 1px solid #ccc;
   border-bottom-color: #bbb;
   .border-radius(4px);
   @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
   .box-shadow(@shadow);
+
   &:hover {
     background-position: 0 -15px;
     color: #333;
     text-decoration: none;
   }
+
+   // Transitions
   .transition(.1s linear all);
+
+  // Colored Button Types
   &.primary,
-  &.danger {
+  &.danger,
+  &.danger:hover,
+  &.primary:hover {
     color: #fff;
-    &:hover {
-      color: #fff;
-    }
   }
+
   &.primary {
-    .btnColor(@blue, @blueDark)
+    .btnColoring(@blue, @blueDark)
   }
+
   &.danger {
-    .btnColor(lighten(@red, 15%), @red)
-  }
-  &.large {
-    font-size: 16px;
-    line-height: 28px;
-    .border-radius(6px);
-  }
-  &.small {
-    padding-right: 9px;
-    padding-left: 9px;
-    font-size: 11px;
+    .btnColoring(lighten(@red, 15%), @red)
   }
+
+  // Active and Disabled states
   &.disabled {
+    cursor: default;
     background-image: none;
     .opacity(65);
-    cursor: default;
   }
 
-  // this can't be included with the .disabled def because IE8 and below will drop it ;_;
   &:disabled {
+    // disabled pseudo can't be included with .disabled
+    // def because IE8 and below will drop it ;_;
+    cursor: default;
     background-image: none;
     .opacity(65);
-    cursor: default;
   }
+
   &:active {
     @shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05);
     .box-shadow(@shadow);
   }
+
+  // Button Sizes
+  &.large {
+    font-size: 16px;
+    line-height: normal;
+    padding: 9px 14px 9px;
+    .border-radius(6px);
+  }
+
+  &.small {
+    padding: 7px 9px 7px;
+    font-size: 11px;
+  }
+
 }
 
 // Help Firefox not be a jerk about adding extra padding to buttons