From: Jacob Thornton Date: Tue, 23 Aug 2011 06:53:02 +0000 (-0700) Subject: add delete button + give .btn cursor:pointer X-Git-Tag: v1.1.1~7 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=0bfce13983ada3029d98916b01703d5c0cef2104;p=thirdparty%2Fbootstrap.git add delete button + give .btn cursor:pointer --- diff --git a/bootstrap-1.1.0.css b/bootstrap-1.1.0.css index f81b032de3..7f0248fc45 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: Mon Aug 22 22:02:17 PDT 2011 + * Date: Mon Aug 22 23:50:35 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). @@ -382,6 +382,7 @@ a:hover { text-decoration: underline; } .btn { + cursor: pointer; display: inline-block; background-color: #e6e6e6; background-repeat: no-repeat; @@ -404,13 +405,22 @@ a:hover { -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; } -.primary { +.btn.primary, .btn.danger { + color: #fff; +} +.btn.primary:hover, .btn.danger: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)); @@ -420,27 +430,23 @@ a:hover { background-image: -webkit-linear-gradient(#049cdb, #0064cd); background-image: -o-linear-gradient(#049cdb, #0064cd); background-image: linear-gradient(#049cdb, #0064cd); - color: #fff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border: 1px solid #004b9a; - border-bottom-color: #003f81; -} -.primary:hover { - color: #fff; -} -.btn { - -webkit-transition: 0.1s linear all; - -moz-transition: 0.1s linear all; - transition: 0.1s linear all; -} -.btn.primary { - color: #fff; 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.primary:hover { - color: #fff; +.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; @@ -469,7 +475,6 @@ a:hover { -moz-opacity: 0.65; opacity: 0.65; cursor: default; - color: #fff; } .btn:active { -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); diff --git a/bootstrap-1.1.0.min.css b/bootstrap-1.1.0.min.css index d9b1b3010c..01f020d2e9 100644 --- a/bootstrap-1.1.0.min.css +++ b/bootstrap-1.1.0.min.css @@ -47,13 +47,14 @@ 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{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);}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;} -.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);color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border:1px solid #004b9a;border-bottom-color:#003f81;}.primary:hover{color:#fff;} -.btn{-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;transition:0.1s linear all;}.btn.primary{color:#fff;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.primary: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: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.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;color:#fff;} +.btn:disabled{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);} 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;} diff --git a/docs/index.html b/docs/index.html index 0099a270db..1669e6123a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -858,13 +858,13 @@

Buttons

As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.

-

All buttons default to a light gray style, but a blue .primary class is available. Plus, rolling your own styles is easy peasy.

+

All buttons default to a light gray style, but a blue .primary class and a red .danger class is available. Plus, rolling your own styles is easy peasy.

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!

diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 0ce3fc831d..b1900f0126 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -95,7 +95,16 @@ 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); + cursor: pointer; display: inline-block; #gradient > .vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%)); padding: 4px 14px; @@ -113,31 +122,20 @@ a { color: #333; text-decoration: none; } -} -.primary { - #gradient > .vertical(#049CDB, #0064CD); - color: #fff; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - border: 1px solid darken(#0064CD, 10%); - border-bottom-color: darken(#0064CD, 15%); - &:hover { - color: #fff; - } -} - -.btn { - // .button(#1174C6); .transition(.1s linear all); - &.primary { - // #gradient > .vertical(@blue, @blueDark); + &.primary, + &.danger { color: #fff; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - border-color: @blueDark @blueDark darken(@blueDark, 15%); - border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); &:hover { color: #fff; } } + &.primary { + .btnColor(@blue, @blueDark) + } + &.danger { + .btnColor(lighten(@red, 15%), @red) + } &.large { font-size: 16px; line-height: 28px; @@ -159,7 +157,6 @@ a { background-image: none; .opacity(65); cursor: default; - color: #fff; } &:active { @shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05);