diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index c59d1aae74..76b5ec31df 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3033,6 +3033,16 @@ a.list-group-item.active .list-group-item-text { border-top-left-radius: 3px; } +.panel-primary { + border-color: #428bca; +} + +.panel-primary .panel-heading { + color: #ffffff; + background-color: #428bca; + border-color: #428bca; +} + .panel-success { border-color: #d6e9c6; } diff --git a/docs/docs.html b/docs/docs.html index 88f272c15c..94826ffde8 100644 --- a/docs/docs.html +++ b/docs/docs.html @@ -4578,6 +4578,10 @@ For example, <section> should be wrapped as inline.

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 @@ -4596,6 +4600,7 @@ For example, <section> should be wrapped as inline.
{% highlight html linenos %} +
...
...
...
...
diff --git a/less/panels.less b/less/panels.less index a74feccaf3..fe13a278fa 100644 --- a/less/panels.less +++ b/less/panels.less @@ -26,6 +26,14 @@ } // Contextual variations +.panel-primary { + border-color: @panel-primary-border; + .panel-heading { + color: @panel-primary-text; + background-color: @panel-primary-heading-bg; + border-color: @panel-primary-border; + } +} .panel-success { border-color: @panel-success-border; .panel-heading { diff --git a/less/variables.less b/less/variables.less index 99f8bfb693..57a08f3b23 100644 --- a/less/variables.less +++ b/less/variables.less @@ -304,6 +304,10 @@ @panel-border-radius: @border-radius-base; @panel-heading-bg: #f5f5f5; +@panel-primary-text: #fff; +@panel-primary-border: @brand-primary; +@panel-primary-heading-bg: @brand-primary; + @panel-success-text: @state-success-text; @panel-success-border: @state-success-border; @panel-success-heading-bg: @state-success-bg;