Change error to danger for all classes; add panels component

20111564 · Mar 30, 2013 · 9fff2d3 · 9fff2d3
1 parent aee2578
commit 9fff2d3
Show file tree

Hide file tree

Showing 11 changed files with 256 additions and 36 deletions.
diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
@@ -163,6 +163,7 @@ <h3 class="bs-docs-sidenav-heading"><a href="/">Bootstrap</a></h3>
       </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 -->

diff --git a/docs/assets/css/bootstrap.css b/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-error:focus {
+a.text-danger:hover,
+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 > th.error,
-.table > tbody > tr.error > td {
+.table > tbody > tr > td.danger,
+.table > tbody > tr > th.danger,
+.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 > th.error:hover,
-.table-hover > tbody > tr.error:hover > td {
+.table-hover > tbody > tr > td.danger:hover,
+.table-hover > tbody > tr > th.danger:hover,
+.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;

diff --git a/docs/assets/css/docs.css b/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;
 }
 

diff --git a/docs/docs.html b/docs/docs.html
@@ -4369,6 +4369,75 @@ <h4 class="media-heading">Media heading</h4>
 
 
 
+  <!-- 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">

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,