update alert and button styling aproach

3 files changed, 175 insertions, 157 deletions

diff --git a/lib/patterns.less b/lib/patterns.less
index 466727cc4..2d946e39d 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 964f677a6..cec847852 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 f5bc68868..ad5cc7644 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