From: Jacob Thornton Date: Wed, 24 Aug 2011 22:55:08 +0000 (-0700) Subject: optimize btn for outputted code + line-height: normal for firefox with adjusted padding X-Git-Tag: v1.2.0~44 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=0739583a46833b4813524e69726f79fe1b009542;p=thirdparty%2Fbootstrap.git 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 6fefd30973..4e91a519d2 100644 --- 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 c6a5a379f7..9d7fa25e05 100644 --- 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 399d50825f..964f677a68 100644 --- 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 a75a47c5fa..5dc054f93b 100644 --- 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