Change error to danger for all classes; add panels component

docs/_includes/docs-nav.html

@@ -163,6 +163,7 @@
       </ul>
     </li>
     <li><a href="#media">Media object</a></li>
+    <li><a href="#panels">Panels</a></li>
     <li><a href="#wells">Wells</a></li>
 
     <!-- JavaScript -->

docs/assets/css/bootstrap.css

@@ -383,12 +383,12 @@ a.text-warning:focus {
   color: #a47e3c;
 }
 
-.text-error {
+.text-danger {
   color: #b94a48;
 }
 
-a.text-error:hover,
+a.text-danger:hover,
-a.text-error:focus {
+a.text-danger:focus {
   color: #953b39;
 }
 
@@ -1119,9 +1119,9 @@ table th[class*="col-span-"] {
   border-color: #d6e9c6;
 }
 
-.table > tbody > tr > td.error,
+.table > tbody > tr > td.danger,
-.table > tbody > tr > th.error,
+.table > tbody > tr > th.danger,
-.table > tbody > tr.error > td {
+.table > tbody > tr.danger > td {
   background-color: #f2dede;
   border-color: #eed3d7;
 }
@@ -1140,9 +1140,9 @@ table th[class*="col-span-"] {
   border-color: #c9e2b3;
 }
 
-.table-hover > tbody > tr > td.error:hover,
+.table-hover > tbody > tr > td.danger:hover,
-.table-hover > tbody > tr > th.error:hover,
+.table-hover > tbody > tr > th.danger:hover,
-.table-hover > tbody > tr.error:hover > td {
+.table-hover > tbody > tr.danger:hover > td {
   background-color: #ebcccc;
   border-color: #e6c1c7;
 }
@@ -2944,6 +2944,68 @@ fieldset[disabled] .btn-link:focus {
   z-index: 1051;
 }
 
+.panel {
+  padding: 15px;
+  margin-bottom: 20px;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+}
+
+.panel-heading {
+  padding: 10px 15px;
+  margin: -15px -15px 15px;
+  font-size: 16px;
+  font-size: 1.6rem;
+  font-weight: 500;
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #dddddd;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+
+.panel-success {
+  border-color: #d6e9c6;
+}
+
+.panel-success .panel-heading {
+  color: #468847;
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+}
+
+.panel-warning {
+  border-color: #fbeed5;
+}
+
+.panel-warning .panel-heading {
+  color: #c09853;
+  background-color: #fcf8e3;
+  border-color: #fbeed5;
+}
+
+.panel-danger {
+  border-color: #eed3d7;
+}
+
+.panel-danger .panel-heading {
+  color: #b94a48;
+  background-color: #f2dede;
+  border-color: #eed3d7;
+}
+
+.panel-info {
+  border-color: #bce8f1;
+}
+
+.panel-info .panel-heading {
+  color: #3a87ad;
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+}
+
 .well {
   min-height: 20px;
   padding: 19px;

docs/assets/css/docs.css

@@ -309,7 +309,9 @@ section > ul li {
 .bs-docs-example > textarea:last-child,
 .bs-docs-example > .table:last-child,
 .bs-docs-example > .jumbotron:last-child,
-.bs-docs-example > .alert:last-child {
+.bs-docs-example > .alert:last-child,
+.bs-docs-example > .panel:last-child,
+.bs-docs-example > .well:last-child {
   margin-bottom: 0;
 }
 

docs/docs.html

@@ -4369,6 +4369,75 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
 
+  <!-- Panels
+  ================================================== -->
+  <div class="bs-docs-section" id="panels">
+    <div class="page-header">
+      <h1>Panels</h1>
+    </div>
+    <p class="lead">While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.</p>
+
+    <h3>Basic panel</h3>
+    <p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
+    <div class="bs-docs-example">
+      <div class="panel">
+        Basic panel example
+      </div>
+    </div>
+{% highlight html linenos %}
+<div class="panel">
+  Basic panel example
+</div>
+{% endhighlight %}
+
+    <h3>Panel with heading</h3>
+    <p>Easily add a heading to your panel with <code>.panel-heading</code>. Use it on a <code>&lt;div&gt;</code> or any heading element (e.g., <code>&lt;h3&gt;</code>).</p>
+    <div class="bs-docs-example">
+      <div class="panel">
+        <div class="panel-heading">Panel heading</div>
+        Panel content
+      </div>
+    </div>
+{% highlight html linenos %}
+<div class="panel">
+  <div class="panel-heading">Panel heading</div>
+  Panel content
+</div>
+{% endhighlight %}
+
+    <h3>Contextual alternatives</h3>
+    <p>Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.</p>
+    <div class="bs-docs-example">
+      <div class="panel panel-success">
+        <div class="panel-heading">Panel heading</div>
+        Panel content
+      </div>
+      <div class="panel panel-warning">
+        <div class="panel-heading">Panel heading</div>
+        Panel content
+      </div>
+      <div class="panel panel-danger">
+        <div class="panel-heading">Panel heading</div>
+        Panel content
+      </div>
+      <div class="panel panel-info">
+        <div class="panel-heading">Panel heading</div>
+        Panel content
+      </div>
+    </div>
+{% highlight html linenos %}
+<div class="panel panel-success">...</div>
+<div class="panel panel-warning">...</div>
+<div class="panel panel-danger">...</div>
+<div class="panel panel-info">...</div>
+{% endhighlight %}
+
+  </div>
+
+
+
+
+
   <!-- Wells
   ================================================== -->
   <div class="bs-docs-section" id="wells">

less/alerts.less

@@ -58,15 +58,15 @@
 }
 .alert-danger,
 .alert-error {
-  background-color: @state-error-background;
+  background-color: @state-danger-background;
-  border-color: @state-error-border;
+  border-color: @state-danger-border;
-  color: @state-error-text;
+  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 {

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";
 

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 {

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;
+  }
+}

less/tables.less

@@ -200,11 +200,11 @@ table th[class*="col-span-"] {
     background-color: @state-success-background;
     border-color: @state-success-border;
   }
-  > td.error,
+  > td.danger,
-  > th.error,
+  > th.danger,
-  &.error > td {
+  &.danger > td {
-    background-color: @state-error-background;
+    background-color: @state-danger-background;
-    border-color: @state-error-border;
+    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,
+  > td.danger:hover,
-  > th.error:hover,
+  > th.danger:hover,
-  &.error:hover > td {
+  &.danger:hover > td {
-    background-color: darken(@state-error-background, 5%);
+    background-color: darken(@state-danger-background, 5%);
-    border-color: darken(@state-error-border, 5%);
+    border-color: darken(@state-danger-border, 5%);
   }
   > td.warning:hover,
   > th.warning:hover,

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; }
+.text-danger         { color: @state-danger-text; }
-a.text-error:hover,
+a.text-danger:hover,
-a.text-error:focus   { color: darken(@state-error-text, 10%); }
+a.text-danger:focus  { color: darken(@state-danger-text, 10%); }
 
 .text-success        { color: @state-success-text; }
 a.text-success:hover,

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-danger-text:              #b94a48;
-@state-error-background:         #f2dede;
+@state-danger-background:        #f2dede;
-@state-error-border:             darken(spin(@state-error-background, -10), 3%);
+@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