From: Jacob Thornton Date: Thu, 25 Aug 2011 20:31:46 +0000 (-0700) Subject: update alert and button styling aproach X-Git-Tag: v1.1.1~1^2~12 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=0e9d7c1c4d9552dda438d6eb5d2f175a99fd4501;p=thirdparty%2Fbootstrap.git update alert and button styling aproach --- diff --git a/bootstrap-1.1.0.css b/bootstrap-1.1.0.css index 246094daf9..34b9d085f3 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: Thu Aug 25 01:55:33 PDT 2011 + * Date: Thu Aug 25 13:30: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). @@ -121,6 +121,79 @@ aside { .container:after { clear: both; } +.btn.danger, +.alert.danger, +.btn.danger:hover, +.alert.danger:hover, +.btn.error, +.alert.error, +.btn.error:hover, +.alert.error:hover, +.btn.success, +.alert.success, +.btn.success:hover, +.alert.success:hover, +.btn.info, +.alert.info, +.btn.info:hover, +.alert.info:hover { + color: #ffffff; +} +.btn.danger, +.alert.danger, +.btn.danger:hover, +.alert.danger:hover, +.btn.error, +.alert.error, +.btn.error:hover, +.alert.error:hover { + background-color: #d6463e; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e)); + background-image: -moz-linear-gradient(#f56a66, #d6463e); + background-image: -ms-linear-gradient(#f56a66, #d6463e); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f56a66), color-stop(100%, #d6463e)); + background-image: -webkit-linear-gradient(#f56a66, #d6463e); + background-image: -o-linear-gradient(#f56a66, #d6463e); + background-image: linear-gradient(#f56a66, #d6463e); + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + border-color: #d6463e #d6463e #a52a23; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} +.btn.success, +.alert.success, +.btn.success:hover, +.alert.success:hover { + background-color: #57a957; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); + background-image: -moz-linear-gradient(#62c462, #57a957); + background-image: -ms-linear-gradient(#62c462, #57a957); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957)); + background-image: -webkit-linear-gradient(#62c462, #57a957); + background-image: -o-linear-gradient(#62c462, #57a957); + background-image: linear-gradient(#62c462, #57a957); + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + border-color: #57a957 #57a957 #3d773d; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} +.btn.info, +.alert.info, +.btn.info:hover, +.alert.info:hover { + background-color: #36b3d9; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9)); + background-image: -moz-linear-gradient(#6bd0ee, #36b3d9); + background-image: -ms-linear-gradient(#6bd0ee, #36b3d9); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6bd0ee), color-stop(100%, #36b3d9)); + background-image: -webkit-linear-gradient(#6bd0ee, #36b3d9); + background-image: -o-linear-gradient(#6bd0ee, #36b3d9); + background-image: linear-gradient(#6bd0ee, #36b3d9); + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + border-color: #36b3d9 #36b3d9 #1f85a4; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} /* * Scaffolding * Basic and global styles for generating a grid system, structural layout, and page templates @@ -286,110 +359,6 @@ 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: 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.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; -} /* Typography.less * Headings, body text, lists, code, and more for a versatile and durable typography system * ---------------------------------------------------------------------------------------- */ @@ -1324,6 +1293,91 @@ footer { .page-header h1 { margin-bottom: 8px; } +.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.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.primary, .btn.primary:hover { + 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(#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.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; +} .alert { background-color: #eedc94; background-repeat: repeat-x; @@ -1335,8 +1389,8 @@ footer { background-image: -o-linear-gradient(#fceec1, #eedc94); background-image: linear-gradient(#fceec1, #eedc94); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: #e7ce68 #e7ce68 #e4c652; - border-color: rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.075) rgba(0, 0, 0, 0.125); + border-color: #eedc94 #eedc94 #e4c652; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); margin-bottom: 18px; padding: 7px 14px; color: #404040; @@ -1366,58 +1420,7 @@ footer { -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); } -.alert-error, -.alert-success, -.alert-info, -.alert-error h5, -.alert-success h5, -.alert-info h5 { - color: #fff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); -} -.alert-error { - background-color: #d6463e; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e)); - background-image: -moz-linear-gradient(#f56a66, #d6463e); - background-image: -ms-linear-gradient(#f56a66, #d6463e); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f56a66), color-stop(100%, #d6463e)); - background-image: -webkit-linear-gradient(#f56a66, #d6463e); - background-image: -o-linear-gradient(#f56a66, #d6463e); - background-image: linear-gradient(#f56a66, #d6463e); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: #ba2f27 #ba2f27 #a52a23; - border-color: rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.075) rgba(0, 0, 0, 0.125); -} -.alert-success { - background-color: #57a957; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); - background-image: -moz-linear-gradient(#62c462, #57a957); - background-image: -ms-linear-gradient(#62c462, #57a957); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957)); - background-image: -webkit-linear-gradient(#62c462, #57a957); - background-image: -o-linear-gradient(#62c462, #57a957); - background-image: linear-gradient(#62c462, #57a957); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: #458845 #458845 #3d773d; - border-color: rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.075) rgba(0, 0, 0, 0.125); -} -.alert-info { - background-color: #36b3d9; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9)); - background-image: -moz-linear-gradient(#6bd0ee, #36b3d9); - background-image: -ms-linear-gradient(#6bd0ee, #36b3d9); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6bd0ee), color-stop(100%, #36b3d9)); - background-image: -webkit-linear-gradient(#6bd0ee, #36b3d9); - background-image: -o-linear-gradient(#6bd0ee, #36b3d9); - background-image: linear-gradient(#6bd0ee, #36b3d9); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: #2396b9 #2396b9 #1f85a4; - border-color: rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.075) rgba(0, 0, 0, 0.125); -} -.close { +.alert .close { float: right; margin-top: -2px; color: #000000; @@ -1429,7 +1432,7 @@ footer { -moz-opacity: 0.2; opacity: 0.2; } -.close:hover { +.alert .close:hover { color: #000000; text-decoration: none; filter: alpha(opacity=40); @@ -1437,7 +1440,7 @@ footer { -moz-opacity: 0.4; opacity: 0.4; } -.alert-block { +.alert.alert-block, .alert.alert-block:hover { background-image: none; background-color: #fdf5d9; padding: 14px; @@ -1446,21 +1449,30 @@ footer { -moz-box-shadow: none; box-shadow: none; } -.alert-block p { +.alert.alert-block p, .alert.alert-block:hover p { margin-right: 30px; } -.alert-block .alert-actions { +.alert.alert-block .alert-actions, .alert.alert-block:hover .alert-actions { margin-top: 5px; } -.alert-block.error { +.alert.alert-block.error, +.alert.alert-block:hover.error, +.alert.alert-block.success, +.alert.alert-block:hover.success, +.alert.alert-block.info, +.alert.alert-block:hover.info { + color: #404040; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); +} +.alert.alert-block.error, .alert.alert-block:hover.error { background-color: #fddfde; border-color: #fbc7c6; } -.alert-block.success { +.alert.alert-block.success, .alert.alert-block:hover.success { background-color: #d1eed1; border-color: #bfe7bf; } -.alert-block.info { +.alert.alert-block.info, .alert.alert-block:hover.info { background-color: #ddf4fb; border-color: #c6edf9; } diff --git a/bootstrap-1.1.0.min.css b/bootstrap-1.1.0.min.css index 5e273bf8e8..a3aca6ef4a 100644 --- a/bootstrap-1.1.0.min.css +++ b/bootstrap-1.1.0.min.css @@ -9,6 +9,10 @@ header,section,footer,article,aside{display:block;} .center-block{display:block;margin:0 auto;} .container{width:940px;margin:0 auto;zoom:1;}.container:before,.container:after{display:table;content:"";} .container:after{clear:both;} +.btn.danger,.alert.danger,.btn.danger:hover,.alert.danger:hover,.btn.error,.alert.error,.btn.error:hover,.alert.error:hover,.btn.success,.alert.success,.btn.success:hover,.alert.success:hover,.btn.info,.alert.info,.btn.info:hover,.alert.info:hover{color:#ffffff;} +.btn.danger,.alert.danger,.btn.danger:hover,.alert.danger:hover,.btn.error,.alert.error,.btn.error:hover,.alert.error:hover{background-color:#d6463e;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e));background-image:-moz-linear-gradient(#f56a66, #d6463e);background-image:-ms-linear-gradient(#f56a66, #d6463e);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f56a66), color-stop(100%, #d6463e));background-image:-webkit-linear-gradient(#f56a66, #d6463e);background-image:-o-linear-gradient(#f56a66, #d6463e);background-image:linear-gradient(#f56a66, #d6463e);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#d6463e #d6463e #a52a23;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.success,.alert.success,.btn.success:hover,.alert.success:hover{background-color:#57a957;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(#62c462, #57a957);background-image:-ms-linear-gradient(#62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(#62c462, #57a957);background-image:-o-linear-gradient(#62c462, #57a957);background-image:linear-gradient(#62c462, #57a957);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.info,.alert.info,.btn.info:hover,.alert.info:hover{background-color:#36b3d9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9));background-image:-moz-linear-gradient(#6bd0ee, #36b3d9);background-image:-ms-linear-gradient(#6bd0ee, #36b3d9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #6bd0ee), color-stop(100%, #36b3d9));background-image:-webkit-linear-gradient(#6bd0ee, #36b3d9);background-image:-o-linear-gradient(#6bd0ee, #36b3d9);background-image:linear-gradient(#6bd0ee, #36b3d9);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#36b3d9 #36b3d9 #1f85a4;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";} .row:after{clear:both;} .row .span1,.row .span2,.row .span3,.row .span4,.row .span5,.row .span6,.row .span7,.row .span8,.row .span9,.row .span10,.row .span11,.row .span12,.row .span13,.row .span14,.row .span15,.row .span16{display:inline;float:left;margin-left:20px;} @@ -48,16 +52,6 @@ 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: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.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;} h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;} @@ -182,20 +176,25 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .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;} -.alert{background-color:#eedc94;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(#fceec1, #eedc94);background-image:-ms-linear-gradient(#fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(#fceec1, #eedc94);background-image:-o-linear-gradient(#fceec1, #eedc94);background-image:linear-gradient(#fceec1, #eedc94);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#e7ce68 #e7ce68 #e4c652;border-color:rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.075) rgba(0, 0, 0, 0.125);margin-bottom:18px;padding:7px 14px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert h5{line-height:18px;} +.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.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.primary,.btn.primary:hover{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(#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.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;} +.alert{background-color:#eedc94;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(#fceec1, #eedc94);background-image:-ms-linear-gradient(#fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(#fceec1, #eedc94);background-image:-o-linear-gradient(#fceec1, #eedc94);background-image:linear-gradient(#fceec1, #eedc94);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);margin-bottom:18px;padding:7px 14px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert h5{line-height:18px;} .alert p{margin-bottom:0;} .alert div{margin-top:5px;margin-bottom:2px;line-height:28px;} .alert .btn{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);} -.alert-error,.alert-success,.alert-info,.alert-error h5,.alert-success h5,.alert-info h5{color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);} -.alert-error{background-color:#d6463e;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#f56a66), to(#d6463e));background-image:-moz-linear-gradient(#f56a66, #d6463e);background-image:-ms-linear-gradient(#f56a66, #d6463e);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f56a66), color-stop(100%, #d6463e));background-image:-webkit-linear-gradient(#f56a66, #d6463e);background-image:-o-linear-gradient(#f56a66, #d6463e);background-image:linear-gradient(#f56a66, #d6463e);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#ba2f27 #ba2f27 #a52a23;border-color:rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.075) rgba(0, 0, 0, 0.125);} -.alert-success{background-color:#57a957;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(#62c462, #57a957);background-image:-ms-linear-gradient(#62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(#62c462, #57a957);background-image:-o-linear-gradient(#62c462, #57a957);background-image:linear-gradient(#62c462, #57a957);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#458845 #458845 #3d773d;border-color:rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.075) rgba(0, 0, 0, 0.125);} -.alert-info{background-color:#36b3d9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#6bd0ee), to(#36b3d9));background-image:-moz-linear-gradient(#6bd0ee, #36b3d9);background-image:-ms-linear-gradient(#6bd0ee, #36b3d9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #6bd0ee), color-stop(100%, #36b3d9));background-image:-webkit-linear-gradient(#6bd0ee, #36b3d9);background-image:-o-linear-gradient(#6bd0ee, #36b3d9);background-image:linear-gradient(#6bd0ee, #36b3d9);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#2396b9 #2396b9 #1f85a4;border-color:rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.075) rgba(0, 0, 0, 0.125);} -.close{float:right;margin-top:-2px;color:#000000;font-size:20px;font-weight:bold;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;} -.alert-block{background-image:none;background-color:#fdf5d9;padding:14px;border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-block p{margin-right:30px;} -.alert-block .alert-actions{margin-top:5px;} -.alert-block.error{background-color:#fddfde;border-color:#fbc7c6;} -.alert-block.success{background-color:#d1eed1;border-color:#bfe7bf;} -.alert-block.info{background-color:#ddf4fb;border-color:#c6edf9;} +.alert .close{float:right;margin-top:-2px;color:#000000;font-size:20px;font-weight:bold;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.alert .close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;} +.alert.alert-block,.alert.alert-block:hover{background-image:none;background-color:#fdf5d9;padding:14px;border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert.alert-block p,.alert.alert-block:hover p{margin-right:30px;} +.alert.alert-block .alert-actions,.alert.alert-block:hover .alert-actions{margin-top:5px;} +.alert.alert-block.error,.alert.alert-block:hover.error,.alert.alert-block.success,.alert.alert-block:hover.success,.alert.alert-block.info,.alert.alert-block:hover.info{color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);} +.alert.alert-block.error,.alert.alert-block:hover.error{background-color:#fddfde;border-color:#fbc7c6;} +.alert.alert-block.success,.alert.alert-block:hover.success{background-color:#d1eed1;border-color:#bfe7bf;} +.alert.alert-block.info,.alert.alert-block:hover.info{background-color:#ddf4fb;border-color:#c6edf9;} .tabs,.pills{margin:0 0 20px;padding:0;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";} .tabs:after,.pills:after{clear:both;} .tabs li,.pills li{display:inline;}.tabs li a,.pills li a{float:left;width:auto;} diff --git a/docs/index.html b/docs/index.html index ebaa5a6f3a..02dd26e0c0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -859,13 +859,17 @@

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 and a red .danger class is available. Plus, rolling your own styles is easy peasy.

+

All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue .primary class, a light-blue .info class, a green .success class, and a red .danger class. 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!

@@ -1077,15 +1081,15 @@ ×

Oh snap! Change this and that and try again.

-
+
×

Holy gaucamole! Best check yo self, you’re not looking too good.

-
+
×

Well done! You successfully read this alert message.

-
+
×

Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

diff --git a/lib/patterns.less b/lib/patterns.less index 466727cc42..2d946e39db 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -288,21 +288,96 @@ footer { } } +// BUTTON STYLES +// ------------- + + +// Base .btn styles +.btn { + // Button Base + cursor: pointer; + display: inline-block; + #gradient > .vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%)); + padding: 5px 14px 6px; + text-shadow: 0 1px 1px rgba(255,255,255,.75); + color: #333; + font-size: 13px; + 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); -// ERROR STYLES -// ------------ + &:hover { + background-position: 0 -15px; + color: #333; + text-decoration: none; + } + + // Transitions + .transition(.1s linear all); + + // Active and Disabled states + &.disabled { + cursor: default; + background-image: none; + .opacity(65); + } + + &:disabled { + // disabled pseudo can't be included with .disabled + // def because IE8 and below will drop it ;_; + cursor: default; + background-image: none; + .opacity(65); + } + + &:active { + @shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); + } -// Setup a mixin to colorize different alerts -.alertTheme(@primaryColor, @secondaryColor) { - #gradient > .vertical(@primaryColor, @secondaryColor); - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - border-color: darken(@secondaryColor, 10%) darken(@secondaryColor, 10%) darken(@secondaryColor, 15%); - border-color: rgba(0,0,0,.05) rgba(0,0,0,.075) rgba(0,0,0,.125); + // Primary Button Type + &.primary, + &.primary:hover { + color:#fff; + .gradientBar(@blue, @blueDark) + } + + + // 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 +button.btn, +input[type=submit].btn { + &::-moz-focus-inner { + padding: 0; + border: 0; + } } + + +// ERROR STYLES +// ------------ + // Base alert styles .alert { - .alertTheme(#fceec1, #eedc94); + .gradientBar(#fceec1, #eedc94); // warning by default margin-bottom: @baseline; padding: 7px 14px; color: @grayDark; @@ -311,6 +386,7 @@ footer { border-style: solid; .border-radius(4px); .box-shadow(inset 0 1px 0 rgba(255,255,255,.25)); + // Remove extra margin from content h5 { line-height: @baseline; @@ -323,66 +399,59 @@ footer { margin-bottom: 2px; line-height: 28px; } - // Provide actions with buttons .btn { + // Provide actions with buttons .box-shadow(0 1px 0 rgba(255,255,255,.25)); } -} -// Alternate alerts -.alert-error, -.alert-success, -.alert-info, -.alert-error h5, -.alert-success h5, -.alert-info h5 { - color: #fff; - text-shadow: 0 -1px 0 rgba(0,0,0,.3); -} -.alert-error { .alertTheme(#f56a66, #d6463e); } -.alert-success { .alertTheme(#62c462, #57a957); } -.alert-info { .alertTheme(#6bd0ee, #36b3d9); } -// Close action -.close { - float: right; - margin-top: -2px; - color: @black; - font-size: 20px; - font-weight: bold; - text-shadow: 0 1px 0 rgba(255,255,255,1); - .opacity(20); - &:hover { + .close { + float: right; + margin-top: -2px; color: @black; - text-decoration: none; - .opacity(40); - } -} -// Block-level alerts -.alert-block { - background-image: none; - background-color: lighten(#fceec1, 5%); - padding: 14px; - border-color: #fceec1; - .box-shadow(none); - p { - margin-right: 30px; + font-size: 20px; + font-weight: bold; + text-shadow: 0 1px 0 rgba(255,255,255,1); + .opacity(20); + &:hover { + color: @black; + text-decoration: none; + .opacity(40); + } } - .alert-actions { - margin-top: 5px; + + &.alert-block, + &.alert-block:hover { + background-image: none; + background-color: lighten(#fceec1, 5%); + padding: 14px; + border-color: #fceec1; + .box-shadow(none); + + p { + margin-right: 30px; + } + .alert-actions { + margin-top: 5px; + } + &.error, + &.success, + &.info { + color: @grayDark; + text-shadow: 0 1px 0 rgba(255,255,255,.5); + } + &.error { + background-color: lighten(#f56a66, 25%); + border-color: lighten(#f56a66, 20%); + } + &.success { + background-color: lighten(#62c462, 30%); + border-color: lighten(#62c462, 25%); + } + &.info { + background-color: lighten(#6bd0ee, 25%); + border-color: lighten(#6bd0ee, 20%); + } } } -.alert-block.error { - background-color: lighten(#f56a66, 25%); - border-color: lighten(#f56a66, 20%); -} -.alert-block.success { - background-color: lighten(#62c462, 30%); - border-color: lighten(#62c462, 25%); -} -.alert-block.info { - background-color: lighten(#6bd0ee, 25%); - border-color: lighten(#6bd0ee, 20%); -} - // NAVIGATION // ---------- diff --git a/lib/preboot.less b/lib/preboot.less index 964f677a68..cec847852d 100644 --- a/lib/preboot.less +++ b/lib/preboot.less @@ -170,14 +170,6 @@ column-gap: @columnGap; } -// Buttons -.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 { .background(@color: @white, @alpha: 1) { @@ -189,6 +181,49 @@ } } +// Gradient Bar Colors for buttons and allerts +.gradientBar(@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%); +} + +// Shared colors for buttons and alerts + +.btn, +.alert { + + &.danger, + &.danger:hover, + &.error, + &.error:hover, + &.success, + &.success:hover, + &.info, + &.info:hover { + color: @white + } + + &.danger, + &.danger:hover, + &.error, + &.error:hover { + .gradientBar(#f56a66, #d6463e); + } + + &.success, + &.success:hover { + .gradientBar(#62c462, #57a957); + } + + &.info, + &.info:hover { + .gradientBar(#6bd0ee, #36b3d9); + } + +} + // Gradients #gradient { .horizontal (@startColor: #555, @endColor: #333) { diff --git a/lib/scaffolding.less b/lib/scaffolding.less index f5bc68868c..ad5cc7644d 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -115,90 +115,4 @@ a { color: @linkColorHover; text-decoration: underline; } -} - -// Buttons -.btn { - // Button Base - cursor: pointer; - display: inline-block; - #gradient > .vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%)); - padding: 5px 14px 6px; - text-shadow: 0 1px 1px rgba(255,255,255,.75); - color: #333; - font-size: 13px; - 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:hover, - &.primary:hover { - color: #fff; - } - - &.primary { - .btnColoring(@blue, @blueDark) - } - - &.danger { - .btnColoring(lighten(@red, 15%), @red) - } - - // Active and Disabled states - &.disabled { - cursor: default; - background-image: none; - .opacity(65); - } - - &:disabled { - // disabled pseudo can't be included with .disabled - // def because IE8 and below will drop it ;_; - cursor: default; - background-image: none; - .opacity(65); - } - - &: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 -button.btn, -input[type=submit].btn { - &::-moz-focus-inner { - padding: 0; - border: 0; - } -} +} \ No newline at end of file