Merge branch '3.0.0-wip' of github.com:twbs/bootstrap into 3.0.0-wip

components.html

@@ -2426,13 +2426,17 @@ body { padding-bottom: 70px; }
     <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-body">
           Basic panel example
         </div>
       </div>
+    </div>
 {% highlight html %}
 <div class="panel">
+  <div class="panel-body">
     Basic panel example
   </div>
+</div>
 {% endhighlight %}
 
     <h3 id="panels-heading">Panel with heading</h3>
@@ -2440,40 +2444,52 @@ body { padding-bottom: 70px; }
     <div class="bs-example">
       <div class="panel">
         <div class="panel-heading">Panel heading</div>
+        <div class="panel-body">
           Panel content
         </div>
+      </div>
       <div class="panel">
         <div class="panel-heading">
           <h3 class="panel-title">Panel title</h3>
         </div>
+        <div class="panel-body">
           Panel content
         </div>
       </div>
+    </div>
 {% highlight html %}
 <div class="panel">
   <div class="panel-heading">Panel heading</div>
+  <div class="panel-body">
     Panel content
   </div>
+</div>
 
 <div class="panel">
   <div class="panel-heading">
     <h3 class="panel-title">Panel title</h3>
   </div>
+  <div class="panel-body">
     Panel content
   </div>
+</div>
 {% endhighlight %}
 
     <h3 id="panels-footer">Panel with footer</h3>
     <p>Wrap buttons or secondary text in <code>.panel-footer</code>.</p>
     <div class="bs-example">
       <div class="panel">
+        <div class="panel-body">
           Panel content
+        </div>
         <div class="panel-footer">Panel footer</div>
       </div>
     </div>
 {% highlight html %}
 <div class="panel">
+  <div class="panel-body">
     Panel content
+  </div>
   <div class="panel-footer">Panel footer</div>
 </div>
 {% endhighlight %}
@@ -2485,33 +2501,43 @@ body { padding-bottom: 70px; }
         <div class="panel-heading">
           <h3 class="panel-title">Panel title</h3>
         </div>
+        <div class="panel-body">
           Panel content
         </div>
+      </div>
       <div class="panel panel-success">
         <div class="panel-heading">
           <h3 class="panel-title">Panel title</h3>
         </div>
+        <div class="panel-body">
           Panel content
         </div>
+      </div>
       <div class="panel panel-warning">
         <div class="panel-heading">
           <h3 class="panel-title">Panel title</h3>
         </div>
+        <div class="panel-body">
           Panel content
         </div>
+      </div>
       <div class="panel panel-danger">
         <div class="panel-heading">
           <h3 class="panel-title">Panel title</h3>
         </div>
+        <div class="panel-body">
           Panel content
         </div>
+      </div>
       <div class="panel panel-info">
         <div class="panel-heading">
           <h3 class="panel-title">Panel title</h3>
         </div>
+        <div class="panel-body">
           Panel content
         </div>
       </div>
+    </div>
 {% highlight html %}
 <div class="panel panel-primary">...</div>
 <div class="panel panel-success">...</div>
@@ -2526,7 +2552,9 @@ body { padding-bottom: 70px; }
       <div class="panel">
         <!-- Default panel contents -->
         <div class="panel-heading">Panel heading</div>
+        <div class="panel-body">
           <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+        </div>
 
         <!-- List group -->
         <ul class="list-group">
@@ -2542,7 +2570,9 @@ body { padding-bottom: 70px; }
 <div class="panel">
   <!-- Default panel contents -->
   <div class="panel-heading">Panel heading</div>
+  <div class="panel-body">
     <p>...</p>
+  </div>
 
   <!-- List group -->
   <ul class="list-group">

dist/css/bootstrap.css

@@ -1704,7 +1704,7 @@ textarea.form-control {
   margin-left: 10px;
 }
 
-.input-lg {
+.input-sm {
   height: 45px;
   padding: 10px 16px;
   font-size: 18px;
@@ -1712,7 +1712,16 @@ textarea.form-control {
   border-radius: 6px;
 }
 
-.input-sm {
+select.input-sm {
+  height: 45px;
+  line-height: 45px;
+}
+
+textarea.input-sm {
+  height: auto;
+}
+
+.input-lg {
   height: 30px;
   padding: 5px 10px;
   font-size: 12px;
@@ -1721,17 +1730,11 @@ textarea.form-control {
 }
 
 select.input-lg {
-  height: 45px;
-  line-height: 45px;
-}
-
-select.input-sm {
   height: 30px;
   line-height: 30px;
 }
 
-textarea.input-lg,
+textarea.input-lg {
-textarea.input-sm {
   height: auto;
 }
 
@@ -2256,6 +2259,29 @@ input[type="button"].btn-block {
 
 .input-group-lg > .form-control,
 .input-group-lg > .input-group-addon,
+.input-group-lg > .input-group-btn > .btn {
+  height: 30px;
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+
+select.input-group-lg > .form-control,
+select.input-group-lg > .input-group-addon,
+select.input-group-lg > .input-group-btn > .btn {
+  height: 30px;
+  line-height: 30px;
+}
+
+textarea.input-group-lg > .form-control,
+textarea.input-group-lg > .input-group-addon,
+textarea.input-group-lg > .input-group-btn > .btn {
+  height: auto;
+}
+
+.input-group-sm > .form-control,
+.input-group-sm > .input-group-addon,
 .input-group-lg > .input-group-btn > .btn {
   height: 45px;
   padding: 10px 16px;
@@ -2264,14 +2290,17 @@ input[type="button"].btn-block {
   border-radius: 6px;
 }
 
-.input-group-sm > .form-control,
+select.input-group-sm > .form-control,
-.input-group-sm > .input-group-addon,
+select.input-group-sm > .input-group-addon,
-.input-group-lg > .input-group-btn > .btn {
+select.input-group-lg > .input-group-btn > .btn {
-  height: 30px;
+  height: 45px;
-  padding: 5px 10px;
+  line-height: 45px;
-  font-size: 12px;
+}
-  line-height: 1.5;
+
-  border-radius: 3px;
+textarea.input-group-sm > .form-control,
+textarea.input-group-sm > .input-group-addon,
+textarea.input-group-lg > .input-group-btn > .btn {
+  height: auto;
 }
 
 .input-group-addon,
@@ -2589,7 +2618,6 @@ a.list-group-item:focus {
 }
 
 .panel {
-  padding: 15px;
   margin-bottom: 20px;
   background-color: #ffffff;
   border: 1px solid #dddddd;
@@ -2598,8 +2626,12 @@ a.list-group-item:focus {
           box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
 }
 
+.panel-body {
+  padding: 15px;
+}
+
 .panel .list-group {
-  margin: 15px -15px -15px;
+  margin-bottom: 0;
 }
 
 .panel .list-group .list-group-item {
@@ -2615,17 +2647,12 @@ a.list-group-item:focus {
   border-bottom: 0;
 }
 
-.panel-heading + .list-group {
-  margin-top: -15px;
-}
-
 .panel-heading + .list-group .list-group-item:first-child {
   border-top-width: 0;
 }
 
 .panel-heading {
   padding: 10px 15px;
-  margin: -15px -15px 15px;
   background-color: #f5f5f5;
   border-bottom: 1px solid #dddddd;
   border-top-right-radius: 3px;
@@ -2644,13 +2671,38 @@ a.list-group-item:focus {
 
 .panel-footer {
   padding: 10px 15px;
-  margin: 15px -15px -15px;
   background-color: #f5f5f5;
   border-top: 1px solid #dddddd;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
 
+.panel-group .panel {
+  margin-bottom: 0;
+  overflow: hidden;
+  border-radius: 4px;
+}
+
+.panel-group .panel + .panel {
+  margin-top: 5px;
+}
+
+.panel-group .panel-heading {
+  border-bottom: 0;
+}
+
+.panel-group .panel-heading + .panel-collapse .panel-body {
+  border-top: 1px solid #dddddd;
+}
+
+.panel-group .panel-footer {
+  border-top: 0;
+}
+
+.panel-group .panel-footer + .panel-collapse .panel-body {
+  border-bottom: 1px solid #dddddd;
+}
+
 .panel-primary {
   border-color: #428bca;
 }
@@ -2661,6 +2713,14 @@ a.list-group-item:focus {
   border-color: #428bca;
 }
 
+.panel-primary .panel-heading + .panel-collapse .panel-body {
+  border-top-color: #428bca;
+}
+
+.panel-primary .panel-footer + .panel-collapse .panel-body {
+  border-bottom-color: #428bca;
+}
+
 .panel-success {
   border-color: #d6e9c6;
 }
@@ -2671,6 +2731,14 @@ a.list-group-item:focus {
   border-color: #d6e9c6;
 }
 
+.panel-success .panel-heading + .panel-collapse .panel-body {
+  border-top-color: #d6e9c6;
+}
+
+.panel-success .panel-footer + .panel-collapse .panel-body {
+  border-bottom-color: #d6e9c6;
+}
+
 .panel-warning {
   border-color: #fbeed5;
 }
@@ -2681,6 +2749,14 @@ a.list-group-item:focus {
   border-color: #fbeed5;
 }
 
+.panel-warning .panel-heading + .panel-collapse .panel-body {
+  border-top-color: #fbeed5;
+}
+
+.panel-warning .panel-footer + .panel-collapse .panel-body {
+  border-bottom-color: #fbeed5;
+}
+
 .panel-danger {
   border-color: #eed3d7;
 }
@@ -2691,6 +2767,14 @@ a.list-group-item:focus {
   border-color: #eed3d7;
 }
 
+.panel-danger .panel-heading + .panel-collapse .panel-body {
+  border-top-color: #eed3d7;
+}
+
+.panel-danger .panel-footer + .panel-collapse .panel-body {
+  border-bottom-color: #eed3d7;
+}
+
 .panel-info {
   border-color: #bce8f1;
 }
@@ -2701,6 +2785,14 @@ a.list-group-item:focus {
   border-color: #bce8f1;
 }
 
+.panel-info .panel-heading + .panel-collapse .panel-body {
+  border-top-color: #bce8f1;
+}
+
+.panel-info .panel-footer + .panel-collapse .panel-body {
+  border-bottom-color: #bce8f1;
+}
+
 .well {
   min-height: 20px;
   padding: 19px;
@@ -4604,31 +4696,6 @@ a.list-group-item.active > .badge,
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 }
 
-.accordion {
-  margin-bottom: 20px;
-}
-
-.accordion-group {
-  margin-bottom: 2px;
-  border: 1px solid #e5e5e5;
-  border-radius: 4px;
-}
-
-.accordion-heading {
-  border-bottom: 0;
-}
-
-.accordion-heading .accordion-toggle {
-  display: block;
-  padding: 8px 15px;
-  cursor: pointer;
-}
-
-.accordion-inner {
-  padding: 9px 15px;
-  border-top: 1px solid #e5e5e5;
-}
-
 .carousel {
   position: relative;
 }

dist/js/bootstrap.js

@@ -539,7 +539,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
-    var actives = this.$parent && this.$parent.find('> .accordion-group > .in')
+    var actives = this.$parent && this.$parent.find('> .panel > .in')
 
     if (actives && actives.length) {
       var hasData = actives.data('bs.collapse')

javascript.html

@@ -1401,42 +1401,48 @@ $('.nav-tabs').button()
     </div>
 
     <h2 id="collapse-examples">Example accordion</h2>
-    <p>Using the collapse plugin, we built a simple accordion style widget:</p>
+    <p>Using the collapse plugin, we built a simple accordion by extending the panel component.</p>
 
     <div class="bs-example">
-      <div class="accordion" id="accordion2">
+      <div class="panel-group" id="accordion">
-        <div class="accordion-group">
+        <div class="panel">
-          <div class="accordion-heading">
+          <div class="panel-heading">
-            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
+            <h3 class="panel-title">
+              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                 Collapsible Group Item #1
               </a>
+            </h3>
           </div>
-          <div id="collapseOne" class="accordion-body collapse in">
+          <div id="collapseOne" class="panel-collapse collapse in">
-            <div class="accordion-inner">
+            <div class="panel-body">
               Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
             </div>
           </div>
         </div>
-        <div class="accordion-group">
+        <div class="panel">
-          <div class="accordion-heading">
+          <div class="panel-heading">
-            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
+            <h3 class="panel-title">
+              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                 Collapsible Group Item #2
               </a>
+            </h3>
           </div>
-          <div id="collapseTwo" class="accordion-body collapse">
+          <div id="collapseTwo" class="panel-collapse collapse">
-            <div class="accordion-inner">
+            <div class="panel-body">
               Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
             </div>
           </div>
         </div>
-        <div class="accordion-group">
+        <div class="panel">
-          <div class="accordion-heading">
+          <div class="panel-heading">
-            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
+            <h3 class="panel-title">
+              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                 Collapsible Group Item #3
               </a>
+            </h3>
           </div>
-          <div id="collapseThree" class="accordion-body collapse">
+          <div id="collapseThree" class="panel-collapse collapse">
-            <div class="accordion-inner">
+            <div class="panel-body">
               Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
             </div>
           </div>
@@ -1444,40 +1450,46 @@ $('.nav-tabs').button()
       </div>
     </div><!-- /example -->
 {% highlight html %}
-<div class="accordion" id="accordion2">
+<div class="panel-group" id="accordion">
-  <div class="accordion-group">
+  <div class="panel">
-    <div class="accordion-heading">
+    <div class="panel-heading">
-      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
+      <h3 class="panel-title">
+        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
           Collapsible Group Item #1
         </a>
+      </h3>
     </div>
-    <div id="collapseOne" class="accordion-body collapse in">
+    <div id="collapseOne" class="panel-collapse collapse in">
-      <div class="accordion-inner">
+      <div class="panel-body">
-        ...
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
       </div>
     </div>
   </div>
-  <div class="accordion-group">
+  <div class="panel">
-    <div class="accordion-heading">
+    <div class="panel-heading">
-      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
+      <h3 class="panel-title">
+        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
           Collapsible Group Item #2
         </a>
+      </h3>
     </div>
-    <div id="collapseTwo" class="accordion-body collapse">
+    <div id="collapseTwo" class="panel-collapse collapse">
-      <div class="accordion-inner">
+      <div class="panel-body">
-        ...
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
       </div>
     </div>
   </div>
-  <div class="accordion-group">
+  <div class="panel">
-    <div class="accordion-heading">
+    <div class="panel-heading">
-      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
+      <h3 class="panel-title">
+        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
           Collapsible Group Item #3
         </a>
+      </h3>
     </div>
-    <div id="collapseThree" class="accordion-body collapse">
+    <div id="collapseThree" class="panel-collapse collapse">
-      <div class="accordion-inner">
+      <div class="panel-body">
-        ...
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
       </div>
     </div>
   </div>

js/collapse.js

@@ -48,7 +48,7 @@
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
-    var actives = this.$parent && this.$parent.find('> .accordion-group > .in')
+    var actives = this.$parent && this.$parent.find('> .panel > .in')
 
     if (actives && actives.length) {
       var hasData = actives.data('bs.collapse')

less/accordion.less

@@ -1,31 +0,0 @@
-//
-// Accordion
-// --------------------------------------------------
-
-
-// Parent container
-.accordion {
-  margin-bottom: @line-height-computed;
-}
-
-// Group == heading + body
-.accordion-group {
-  margin-bottom: 2px;
-  border: 1px solid @accordion-border-color;
-  border-radius: @border-radius-base;
-}
-.accordion-heading {
-  border-bottom: 0;
-
-  .accordion-toggle {
-    display: block;
-    padding: 8px 15px;
-    cursor: pointer;
-  }
-}
-
-// Inner needs the styles because you can't animate properly with any styles on the element
-.accordion-inner {
-  padding: 9px 15px;
-  border-top: 1px solid @accordion-border-color;
-}

less/bootstrap.less

@@ -55,7 +55,6 @@
 @import "labels.less";
 @import "badges.less";
 @import "progress-bars.less";
-@import "accordion.less";
 @import "carousel.less";
 @import "jumbotron.less";
 

less/mixins.less

@@ -335,6 +335,14 @@
     color: @heading-text-color;
     background-color: @heading-bg-color;
     border-color: @heading-border;
+    + .panel-collapse .panel-body {
+      border-top-color: @border;
+    }
+  }
+  .panel-footer {
+    + .panel-collapse .panel-body {
+      border-bottom-color: @border;
+    }
   }
 }
 

less/panels.less

@@ -5,14 +5,18 @@
 
 // Base class
 .panel {
-  padding: 15px;
+  margin-bottom: @line-height-computed;
-  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));
 }
 
+// Panel contents
+.panel-body {
+  padding: 15px;
+}
+
 // List groups in panels
 //
 // By default, space out list group content from panel headings to account for
@@ -20,7 +24,7 @@
 
 .panel {
   .list-group {
-    margin: 15px -15px -15px;
+    margin-bottom: 0;
 
     .list-group-item {
       border-width: 1px 0;
@@ -38,7 +42,6 @@
 }
 // Collapse space between when there's no additional content.
 .panel-heading + .list-group {
-  margin-top: -15px;
   .list-group-item:first-child {
     border-top-width: 0;
   }
@@ -46,7 +49,6 @@
 
 // Optional heading
 .panel-heading {
-  margin: -15px -15px 15px;
   padding: 10px 15px;
   background-color: @panel-heading-bg;
   border-bottom: 1px solid @panel-border;
@@ -65,13 +67,49 @@
 
 // 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-radius(@panel-border-radius - 1);
 }
 
+
+// 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 {
+    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);