update alert and button styling aproach

1 files changed, 178 insertions, 166 deletions

diff --git a/bootstrap-1.1.0.css b/bootstrap-1.1.0.css
index 246094daf..34b9d085f 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;
 }