update alert and button styling aproach

1 files changed, 131 insertions, 62 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
 // ----------