1 files changed, 83 insertions, 57 deletions

diff --git a/less/panels.less b/less/panels.less
index 691a15545..6d22dd965 100644
--- a/less/panels.less
+++ b/less/panels.less
@@ -5,22 +5,54 @@
 
 // Base class
 .panel {
-  padding: 15px;
-  margin-bottom: 20px;
+  margin-bottom: @line-height-computed;
   background-color: @panel-bg;
   border: 1px solid @panel-border;
   border-radius: @panel-border-radius;
   .box-shadow(0 1px 1px rgba(0,0,0,.05));
 }
 
+// Panel contents
+.panel-body {
+  padding: 15px;
+}
+
+// List groups in panels
+//
+// By default, space out list group content from panel headings to account for
+// any kind of custom content between the two.
+
+.panel {
+  > .list-group {
+    margin-bottom: 0;
+
+    .list-group-item {
+      border-width: 1px 0;
+
+      // Remove border radius for top one
+      &:first-child {
+        .border-top-radius(0);
+      }
+      // But keep it for the last one
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+  }
+}
+// Collapse space between when there's no additional content.
+.panel-heading + .list-group {
+  .list-group-item:first-child {
+    border-top-width: 0;
+  }
+}
+
 // Optional heading
 .panel-heading {
-  margin: -15px -15px 15px;
   padding: 10px 15px;
   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);
+  .border-top-radius(@panel-border-radius - 1);
 }
 
 // Within heading, strip any `h*` tag of it's default margins for spacing.
@@ -28,75 +60,69 @@
   margin-top: 0;
   margin-bottom: 0;
   font-size: (@font-size-base * 1.25);
-  font-weight: 500;
+  > a {
+    color: inherit;
+  }
 }
 
 // Optional footer (stays gray in every modifier class)
 .panel-footer {
-  margin: 15px -15px -15px;
   padding: 10px 15px;
   background-color: @panel-footer-bg;
   border-top: 1px solid @panel-border;
-  border-bottom-left-radius:  (@panel-border-radius - 1);
-  border-bottom-right-radius: (@panel-border-radius - 1);
+  .border-bottom-radius(@panel-border-radius - 1);
 }
 
-// Contextual variations
-.panel-primary {
-  border-color: @panel-primary-border;
+
+// Collapsable panels (aka, accordion)
+//
+// Wrap a series of panels in `.panel-group` to turn them into an accordion with
+// the help of our collapse JavaScript plugin.
+
+.panel-group {
+  // Tighten up margin so it's only between panels
+  .panel {
+    margin-bottom: 0;
+    border-radius: @panel-border-radius;
+    overflow: hidden; // crop contents when collapsed
+    + .panel {
+      margin-top: 5px;
+    }
+  }
+
   .panel-heading {
-    color: @panel-primary-text;
-    background-color: @panel-primary-heading-bg;
-    border-color: @panel-primary-border;
+    border-bottom: 0;
+    + .panel-collapse .panel-body {
+      border-top: 1px solid @panel-border;
+    }
+  }
+  .panel-footer {
+    border-top: 0;
+    + .panel-collapse .panel-body {
+      border-bottom: 1px solid @panel-border;
+    }
+  }
+
+  // New subcomponent for wrapping collapsable content for proper animations
+  .panel-collapse {
+
   }
 }
+
+
+// Contextual variations
+.panel-primary {
+  .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
+}
 .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-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @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-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @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-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @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;
-  }
-}
-
-// List groups in panels
-.list-group-flush {
-  margin: 15px -15px -15px;
-
-  .list-group-item {
-    border-width: 1px 0;
-
-    // Remove border radius for top one
-    &:first-child {
-      .border-top-radius(0);
-    }
-    // But keep it for the last one
-    &:last-child {
-      border-bottom: 0;
-    }
-  }
+  .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
 }