From 50f484eed6e9161cb7e50531b0fa3f16ada549e0 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Thu, 25 Aug 2011 02:00:07 -0700
Subject: big update to change the alerts, normal and block level, to have
 simpler css and new colors independent of the base color scheme

---
 lib/patterns.less | 153 +++++++++++++++++++++++++++---------------------------
 1 file changed, 77 insertions(+), 76 deletions(-)

(limited to 'lib/patterns.less')

diff --git a/lib/patterns.less b/lib/patterns.less
index ec42b033c..466727cc4 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -292,95 +292,96 @@ footer {
 // ERROR STYLES
 // ------------
 
-// One-liner alert bars
-.alert-message {
-  // TODO: Ask cloudhead how to do this fancy filter elegantly. Less eval is returning strings with quotes ;_;
-  #gradient > .vertical(transparent, rgba(0,0,0,0.15));
-  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#15000000')";
-  background-color: @grayLighter;
-  margin-bottom: @baseline;
-  padding: 8px 15px;
-  color: #fff;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.3);
-  border-bottom: 1px solid rgba(0,0,0,.3);
-  .border-radius(4px);
-  p {
-    color: #fff;
-    margin-bottom: 0;
-    + p {
-      margin-top: 5px;
-    }
-  }
-  &.error {
-    #gradient > .vertical(lighten(@red, 30%), lighten(@red, 15%));
-    border-bottom-color: lighten(@red, 5%);
-  }
-  &.warning {
-    #gradient > .vertical(lighten(@yellow, 25%), lighten(@yellow, 10%));
-    border-bottom-color: @yellow;
-  }
-  &.success {
-    #gradient > .vertical(lighten(@green, 25%), lighten(@green, 10%));
-    border-bottom-color: @green;
-  }
-  &.info {
-    #gradient > .vertical(lighten(@blue, 25%), lighten(@blue, 5%));
-    border-bottom-color: @blue;
-  }
-  .close {
-    float: right;
-    margin-top: -2px;
-    color: #000;
-    font-size: 20px;
-    font-weight: bold;
-    text-shadow: 0 1px 0 rgba(255,255,255,1);
-    .opacity(20);
-    &:hover {
-      text-decoration: none;
-      .opacity(40);
-    }
-  }
+// 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);
 }
 
-// Block-level Alerts
-.block-message {
+// Base alert styles
+.alert {
+  .alertTheme(#fceec1, #eedc94);
   margin-bottom: @baseline;
-  padding: 14px;
+  padding: 7px 14px;
   color: @grayDark;
-  color: rgba(0,0,0,.8);
-  *color: @grayDark; /* IE 6-7 */
-  text-shadow: 0 1px 0 rgba(255,255,255,.25);
-  .border-radius(6px);
-  p {
-    color: @grayDark;
-    color: rgba(0,0,0,.8);
-    *color: @grayDark; /* IE 6-7 */
-    margin-right: 30px;
-    margin-bottom: 0;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+  border-width: 1px;
+  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;
   }
-  ul {
+  p {
     margin-bottom: 0;
   }
-  strong {
-    display: block;
+  div {
+    margin-top: 5px;
+    margin-bottom: 2px;
+    line-height: 28px;
   }
-  &.error {
-    background: lighten(@red, 55%);
-    border: 1px solid lighten(@red, 50%);
+  // Provide actions with buttons
+  .btn {
+    .box-shadow(0 1px 0 rgba(255,255,255,.25));
   }
-  &.warning {
-    background: lighten(@yellow, 35%);
-    border: 1px solid lighten(@yellow, 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 {
+    color: @black;
+    text-decoration: none;
+    .opacity(40);
   }
-  &.success {
-    background: lighten(@green, 45%);
-    border: 1px solid lighten(@green, 35%)
+}
+// 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;
   }
-  &.info {
-    background: lighten(@blue, 45%);
-    border: 1px solid lighten(@blue, 40%);
+  .alert-actions {
+    margin-top: 5px;
   }
 }
+.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
-- 
cgit v1.2.3