diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index 682bf75aaa..649cad06a3 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -163,6 +163,7 @@
Media object
+ Panels
Wells
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 4f034974a9..b86a16a788 100644
--- 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
index 6b576de2ad..181a3a734e 100644
--- 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
index 4b26296585..00af4ed0cf 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -4369,6 +4369,75 @@ For example, <section> should be wrapped as inline.
+
+
+
+
While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.
+
+
Basic panel
+
By default, all the .panel does is apply some basic border and padding to contain some content.
+
+
+ Basic panel example
+
+
+{% highlight html linenos %}
+
+ Basic panel example
+
+{% endhighlight %}
+
+
Panel with heading
+
Easily add a heading to your panel with .panel-heading. Use it on a <div> or any heading element (e.g., <h3>).
+
+
+
Panel heading
+ Panel content
+
+
+{% highlight html linenos %}
+
+
Panel heading
+ Panel content
+
+{% endhighlight %}
+
+
Contextual alternatives
+
Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.
+
+
+
Panel heading
+ Panel content
+
+
+
Panel heading
+ Panel content
+
+
+
Panel heading
+ Panel content
+
+
+
Panel heading
+ Panel content
+
+
+{% highlight html linenos %}
+
...
+
...
+
...
+
...
+{% endhighlight %}
+
+
diff --git a/less/alerts.less b/less/alerts.less
index 7f627fadf7..20e0a8b5d0 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 461f9eceac..c887fcef6f 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 ddbd196375..583d1e30f9 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 0000000000..43e5199223
--- /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 f70d46396d..196eff709f 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 c2f7b07351..a8a1c2dec4 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 45495a9e1a..c4b85d80e1 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