Refactor panels to have a base class for improved flexibility when customizing (and no overriding to start, too)

components.html

@@ -2673,14 +2673,14 @@ body { padding-bottom: 70px; }
     <h3 id="panels-basic">Basic example</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-example">
-      <div class="panel">
+      <div class="panel panel-default">
         <div class="panel-body">
           Basic panel example
         </div>
       </div>
     </div>
 {% highlight html %}
-<div class="panel">
+<div class="panel panel-default">
   <div class="panel-body">
     Basic panel example
   </div>
@@ -2690,13 +2690,13 @@ body { padding-bottom: 70px; }
     <h3 id="panels-heading">Panel with heading</h3>
     <p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> with a <code>.panel-title</code> class to add a pre-styled heading.</p>
     <div class="bs-example">
-      <div class="panel">
+      <div class="panel panel-default">
         <div class="panel-heading">Panel heading without title</div>
         <div class="panel-body">
           Panel content
         </div>
       </div>
-      <div class="panel">
+      <div class="panel panel-default">
         <div class="panel-heading">
           <h3 class="panel-title">Panel title</h3>
         </div>
@@ -2706,14 +2706,14 @@ body { padding-bottom: 70px; }
       </div>
     </div>
 {% highlight html %}
-<div class="panel">
+<div class="panel panel-default">
   <div class="panel-heading">Panel heading without title</div>
   <div class="panel-body">
     Panel content
   </div>
 </div>
 
-<div class="panel">
+<div class="panel panel-default">
   <div class="panel-heading">
     <h3 class="panel-title">Panel title</h3>
   </div>
@@ -2726,7 +2726,7 @@ body { padding-bottom: 70px; }
     <h3 id="panels-footer">Panel with footer</h3>
     <p>Wrap buttons or secondary text in <code>.panel-footer</code>. Note that panel footers <strong>do not</strong> inherit colors and borders when using contextual variations as they are not meant to be in the foreground.</p>
     <div class="bs-example">
-      <div class="panel">
+      <div class="panel panel-default">
         <div class="panel-body">
           Panel content
         </div>
@@ -2734,7 +2734,7 @@ body { padding-bottom: 70px; }
       </div>
     </div>
 {% highlight html %}
-<div class="panel">
+<div class="panel panel-default">
   <div class="panel-body">
     Panel content
   </div>

dist/css/bootstrap-theme.css

@@ -317,7 +317,7 @@
           box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
-.panel-heading {
+.panel-default > .panel-heading {
   background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f5f5f5), to(#e8e8e8));
   background-image: -webkit-linear-gradient(top, #f5f5f5, 0%, #e8e8e8, 100%);
   background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);

dist/css/bootstrap.css

@@ -5254,7 +5254,7 @@ a.list-group-item:focus {
 .panel {
   margin-bottom: 20px;
   background-color: #ffffff;
-  border: 1px solid #dddddd;
+  border: 1px solid transparent;
   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);
@@ -5319,8 +5319,7 @@ a.list-group-item:focus {
 
 .panel-heading {
   padding: 10px 15px;
-  background-color: #f5f5f5;
+  border-bottom: 1px solid transparent;
-  border-bottom: 1px solid #dddddd;
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
@@ -5369,6 +5368,24 @@ a.list-group-item:focus {
   border-bottom: 1px solid #dddddd;
 }
 
+.panel-default {
+  border-color: #dddddd;
+}
+
+.panel-default > .panel-heading {
+  color: #333333;
+  background-color: #f5f5f5;
+  border-color: #dddddd;
+}
+
+.panel-default > .panel-heading + .panel-collapse .panel-body {
+  border-top-color: #dddddd;
+}
+
+.panel-default > .panel-footer + .panel-collapse .panel-body {
+  border-bottom-color: #dddddd;
+}
+
 .panel-primary {
   border-color: #428bca;
 }

examples/theme/index.html

@@ -309,7 +309,7 @@
       </div>
       <div class="row">
         <div class="col-sm-4">
-          <div class="panel">
+          <div class="panel panel-default">
             <div class="panel-heading">
               <h3 class="panel-title">Panel title</h3>
             </div>

less/mixins.less

@@ -340,7 +340,7 @@
 
 // Panels
 // -------------------------
-.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
+.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) {
   border-color: @border;
   & > .panel-heading {
     color: @heading-text-color;

less/panels.less

@@ -7,7 +7,7 @@
 .panel {
   margin-bottom: @line-height-computed;
   background-color: @panel-bg;
-  border: 1px solid @panel-border;
+  border: 1px solid transparent;
   border-radius: @panel-border-radius;
   .box-shadow(0 1px 1px rgba(0,0,0,.05));
 }
@@ -71,8 +71,7 @@
 // Optional heading
 .panel-heading {
   padding: 10px 15px;
-  background-color: @panel-heading-bg;
+  border-bottom: 1px solid transparent;
-  border-bottom: 1px solid @panel-border;
   .border-top-radius(@panel-border-radius - 1);
 }
 
@@ -90,7 +89,7 @@
 .panel-footer {
   padding: 10px 15px;
   background-color: @panel-footer-bg;
-  border-top: 1px solid @panel-border;
+  border-top: 1px solid @panel-inner-border;
   .border-bottom-radius(@panel-border-radius - 1);
 }
 
@@ -114,13 +113,13 @@
   .panel-heading {
     border-bottom: 0;
     + .panel-collapse .panel-body {
-      border-top: 1px solid @panel-border;
+      border-top: 1px solid @panel-inner-border;
     }
   }
   .panel-footer {
     border-top: 0;
     + .panel-collapse .panel-body {
-      border-bottom: 1px solid @panel-border;
+      border-bottom: 1px solid @panel-inner-border;
     }
   }
 
@@ -132,6 +131,9 @@
 
 
 // Contextual variations
+.panel-default {
+  .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
+}
 .panel-primary {
   .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
 }

less/theme.less

@@ -211,7 +211,7 @@
 }
 
 // Apply the mixin to the panel headings only
-.panel-heading                    { .panel-heading-styles(@panel-heading-bg); }
+.panel-default > .panel-heading   { .panel-heading-styles(@panel-default-heading-bg); }
 .panel-primary > .panel-heading   { .panel-heading-styles(@panel-primary-heading-bg); }
 .panel-success > .panel-heading   { .panel-heading-styles(@panel-success-heading-bg); }
 .panel-info > .panel-heading      { .panel-heading-styles(@panel-info-heading-bg); }

less/variables.less

@@ -486,11 +486,14 @@
 // Panels
 // -------------------------
 @panel-bg:                    #fff;
-@panel-border:                #ddd;
+@panel-inner-border:          #ddd;
 @panel-border-radius:         @border-radius-base;
-@panel-heading-bg:            #f5f5f5;
 @panel-footer-bg:             #f5f5f5;
 
+@panel-default-text:          @gray-dark;
+@panel-default-border:        #ddd;
+@panel-default-heading-bg:    #f5f5f5;
+
 @panel-primary-text:          #fff;
 @panel-primary-border:        @brand-primary;
 @panel-primary-heading-bg:    @brand-primary;