Change error to danger for all classes; add panels component

7 files changed, 112 insertions, 26 deletions

diff --git a/less/alerts.less b/less/alerts.less
index 7f627fadf..20e0a8b5d 100644
--- a/less/alerts.less
+++ b/less/alerts.less
@@ -58,15 +58,15 @@
 }
 .alert-danger,
 .alert-error {
-  background-color: @state-error-background;
-  border-color: @state-error-border;
-  color: @state-error-text;
+  background-color: @state-danger-background;
+  border-color: @state-danger-border;
+  color: @state-danger-text;
   hr {
-    border-top-color: darken(@state-error-border, 5%);
+    border-top-color: darken(@state-danger-border, 5%);
   }
   > a,
   > p > a {
-    color: darken(@state-error-text, 10%);
+    color: darken(@state-danger-text, 10%);
   }
 }
 .alert-info {
diff --git a/less/bootstrap.less b/less/bootstrap.less
index 461f9ecea..c887fcef6 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -30,6 +30,7 @@
 @import "component-animations.less";
 @import "glyphicons.less";
 @import "dropdowns.less";
+@import "panels.less";
 @import "wells.less";
 @import "close.less";
 
diff --git a/less/forms.less b/less/forms.less
index ddbd19637..583d1e30f 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -311,7 +311,7 @@ input[type="checkbox"] {
 }
 // Error
 .has-error {
-  .formFieldState(@state-error-text, @state-error-text, @state-error-background);
+  .formFieldState(@state-danger-text, @state-danger-text, @state-danger-background);
 }
 // Success
 .has-success {
diff --git a/less/panels.less b/less/panels.less
new file mode 100644
index 000000000..43e519922
--- /dev/null
+++ b/less/panels.less
@@ -0,0 +1,60 @@
+//
+// Panels
+// --------------------------------------------------
+
+
+// Base class
+.panel {
+  padding: 15px;
+  margin-bottom: 20px;
+  background-color: @panel-bg;
+  border: 1px solid @panel-border;
+  border-radius: @panel-border-radius;
+  .box-shadow(0 1px 1px rgba(0,0,0,.05));
+}
+
+// Optional heading
+.panel-heading {
+  margin: -15px -15px 15px;
+  padding: 10px 15px;
+  .font-size(16);
+  font-weight: 500;
+  background-color: @panel-heading-bg;
+  border-bottom: 1px solid @panel-border;
+  border-top-left-radius:  (@panel-border-radius - 1);
+  border-top-right-radius: (@panel-border-radius - 1);
+}
+
+// Contextual variations
+.panel-success {
+  border-color: @panel-success-border;
+  .panel-heading {
+    color: @panel-success-text;
+    background-color: @panel-success-heading-bg;
+    border-color: @panel-success-border;
+  }
+}
+.panel-warning {
+  border-color: @panel-warning-border;
+  .panel-heading {
+    color: @panel-warning-text;
+    background-color: @panel-warning-heading-bg;
+    border-color: @panel-warning-border;
+  }
+}
+.panel-danger {
+  border-color: @panel-danger-border;
+  .panel-heading {
+    color: @panel-danger-text;
+    background-color: @panel-danger-heading-bg;
+    border-color: @panel-danger-border;
+  }
+}
+.panel-info {
+  border-color: @panel-info-border;
+  .panel-heading {
+    color: @panel-info-text;
+    background-color: @panel-info-heading-bg;
+    border-color: @panel-info-border;
+  }
+}
diff --git a/less/tables.less b/less/tables.less
index f70d46396..196eff709 100644
--- a/less/tables.less
+++ b/less/tables.less
@@ -200,11 +200,11 @@ table th[class*="col-span-"] {
     background-color: @state-success-background;
     border-color: @state-success-border;
   }
-  > td.error,
-  > th.error,
-  &.error > td {
-    background-color: @state-error-background;
-    border-color: @state-error-border;
+  > td.danger,
+  > th.danger,
+  &.danger > td {
+    background-color: @state-danger-background;
+    border-color: @state-danger-border;
   }
   > td.warning,
   > th.warning,
@@ -222,11 +222,11 @@ table th[class*="col-span-"] {
     background-color: darken(@state-success-background, 5%);
     border-color: darken(@state-success-border, 5%);
   }
-  > td.error:hover,
-  > th.error:hover,
-  &.error:hover > td {
-    background-color: darken(@state-error-background, 5%);
-    border-color: darken(@state-error-border, 5%);
+  > td.danger:hover,
+  > th.danger:hover,
+  &.danger:hover > td {
+    background-color: darken(@state-danger-background, 5%);
+    border-color: darken(@state-danger-border, 5%);
   }
   > td.warning:hover,
   > th.warning:hover,
diff --git a/less/type.less b/less/type.less
index c2f7b0735..a8a1c2dec 100644
--- a/less/type.less
+++ b/less/type.less
@@ -36,9 +36,9 @@ a.text-muted:focus   { color: darken(@grayLight, 10%); }
 a.text-warning:hover,
 a.text-warning:focus { color: darken(@state-warning-text, 10%); }
 
-.text-error          { color: @state-error-text; }
-a.text-error:hover,
-a.text-error:focus   { color: darken(@state-error-text, 10%); }
+.text-danger         { color: @state-danger-text; }
+a.text-danger:hover,
+a.text-danger:focus  { color: darken(@state-danger-text, 10%); }
 
 .text-success        { color: @state-success-text; }
 a.text-success:hover,
diff --git a/less/variables.less b/less/variables.less
index 45495a9e1..c4b85d80e 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -240,9 +240,9 @@
 @state-warning-background:       #fcf8e3;
 @state-warning-border:           darken(spin(@state-warning-background, -10), 3%);
 
-@state-error-text:               #b94a48;
-@state-error-background:         #f2dede;
-@state-error-border:             darken(spin(@state-error-background, -10), 3%);
+@state-danger-text:              #b94a48;
+@state-danger-background:        #f2dede;
+@state-danger-border:            darken(spin(@state-danger-background, -10), 3%);
 
 @state-success-text:             #468847;
 @state-success-background:       #dff0d8;
@@ -280,7 +280,6 @@
 
 // Modals
 // -------------------------
-
 @modal-inner-padding:         20px;
 
 
@@ -294,6 +293,35 @@
 @progress-bar-info-bg:        @brand-info;
 
 
+// Panels
+// -------------------------
+@panel-bg:                    #fff;
+@panel-border:                #ddd;
+@panel-border-radius:         @border-radius-base;
+@panel-heading-bg:            #f5f5f5;
+
+@panel-success-text:          @state-success-text;
+@panel-success-border:        @state-success-border;
+@panel-success-heading-bg:    @state-success-background;
+
+@panel-warning-text:          @state-warning-text;
+@panel-warning-border:        @state-warning-border;
+@panel-warning-heading-bg:    @state-warning-background;
+
+@panel-danger-text:           @state-danger-text;
+@panel-danger-border:         @state-danger-border;
+@panel-danger-heading-bg:     @state-danger-background;
+
+@panel-info-text:             @state-info-text;
+@panel-info-border:           @state-info-border;
+@panel-info-heading-bg:       @state-info-background;
+
+
+// Wells
+// -------------------------
+@well-background:             #f5f5f5;
+
+
 // Miscellaneous
 // -------------------------
 
@@ -303,9 +331,6 @@
 // Horizontal forms & lists
 @component-offset-horizontal: 180px;
 
-// Wells
-@well-background:             #f5f5f5;
-
 
 
 // Grid system