Drop the accordion for the panel
* Deletes the accordion.less file * Extends the panel to be collapsible with our JS plugin * Supports panel color variations
This commit is contained in:
Mark Otto
parent
54a3e4b780
commit
237640c706
|
|
@ -2386,12 +2386,16 @@ 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">
|
||||
Basic panel example
|
||||
<div class="panel-body">
|
||||
Basic panel example
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="panel">
|
||||
Basic panel example
|
||||
<div class="panel-body">
|
||||
Basic panel example
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
|
|
@ -2400,26 +2404,34 @@ body { padding-bottom: 70px; }
|
|||
<div class="bs-example">
|
||||
<div class="panel">
|
||||
<div class="panel-heading">Panel heading</div>
|
||||
Panel content
|
||||
<div class="panel-body">
|
||||
Panel content
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Panel title</h3>
|
||||
</div>
|
||||
Panel content
|
||||
<div class="panel-body">
|
||||
Panel content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="panel">
|
||||
<div class="panel-heading">Panel heading</div>
|
||||
Panel content
|
||||
<div class="panel-body">
|
||||
Panel content
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Panel title</h3>
|
||||
</div>
|
||||
Panel content
|
||||
<div class="panel-body">
|
||||
Panel content
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
|
|
@ -2427,13 +2439,17 @@ body { padding-bottom: 70px; }
|
|||
<p>Wrap buttons or secondary text in <code>.panel-footer</code>.</p>
|
||||
<div class="bs-example">
|
||||
<div class="panel">
|
||||
Panel content
|
||||
<div class="panel-body">
|
||||
Panel content
|
||||
</div>
|
||||
<div class="panel-footer">Panel footer</div>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="panel">
|
||||
Panel content
|
||||
<div class="panel-body">
|
||||
Panel content
|
||||
</div>
|
||||
<div class="panel-footer">Panel footer</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
|
@ -2445,31 +2461,41 @@ body { padding-bottom: 70px; }
|
|||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Panel title</h3>
|
||||
</div>
|
||||
Panel content
|
||||
<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>
|
||||
Panel content
|
||||
<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>
|
||||
Panel content
|
||||
<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>
|
||||
Panel content
|
||||
<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>
|
||||
Panel content
|
||||
<div class="panel-body">
|
||||
Panel content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
|
|
@ -2486,7 +2512,9 @@ body { padding-bottom: 70px; }
|
|||
<div class="panel">
|
||||
<!-- Default panel contents -->
|
||||
<div class="panel-heading">Panel heading</div>
|
||||
<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 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">
|
||||
|
|
@ -2502,7 +2530,9 @@ body { padding-bottom: 70px; }
|
|||
<div class="panel">
|
||||
<!-- Default panel contents -->
|
||||
<div class="panel-heading">Panel heading</div>
|
||||
<p>...</p>
|
||||
<div class="panel-body">
|
||||
<p>...</p>
|
||||
</div>
|
||||
|
||||
<!-- List group -->
|
||||
<ul class="list-group">
|
||||
|
|
|
|||
|
|
@ -2589,7 +2589,6 @@ a.list-group-item:focus {
|
|||
}
|
||||
|
||||
.panel {
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #dddddd;
|
||||
|
|
@ -2598,8 +2597,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 +2618,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 +2642,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 +2684,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 +2702,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 +2720,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 +2738,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 +2756,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;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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')
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
106
javascript.html
106
javascript.html
|
|
@ -1404,39 +1404,45 @@ $('.nav-tabs').button()
|
|||
<p>Using the collapse plugin, we built a simple accordion style widget:</p>
|
||||
|
||||
<div class="bs-example">
|
||||
<div class="accordion" id="accordion2">
|
||||
<div class="accordion-group">
|
||||
<div class="accordion-heading">
|
||||
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
|
||||
Collapsible Group Item #1
|
||||
</a>
|
||||
<div class="panel-group" id="accordion">
|
||||
<div class="panel">
|
||||
<div class="panel-heading">
|
||||
<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 class="accordion-inner">
|
||||
<div id="collapseOne" class="panel-collapse collapse in">
|
||||
<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="accordion-heading">
|
||||
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
|
||||
Collapsible Group Item #2
|
||||
</a>
|
||||
<div class="panel">
|
||||
<div class="panel-heading">
|
||||
<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 class="accordion-inner">
|
||||
<div id="collapseTwo" class="panel-collapse collapse">
|
||||
<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="accordion-heading">
|
||||
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
|
||||
Collapsible Group Item #3
|
||||
</a>
|
||||
<div class="panel">
|
||||
<div class="panel-heading">
|
||||
<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 class="accordion-inner">
|
||||
<div id="collapseThree" class="panel-collapse collapse">
|
||||
<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="accordion-group">
|
||||
<div class="accordion-heading">
|
||||
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
|
||||
Collapsible Group Item #1
|
||||
</a>
|
||||
<div class="panel-group" id="accordion">
|
||||
<div class="panel">
|
||||
<div class="panel-heading">
|
||||
<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 class="accordion-inner">
|
||||
...
|
||||
<div id="collapseOne" class="panel-collapse collapse in">
|
||||
<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="accordion-heading">
|
||||
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
|
||||
Collapsible Group Item #2
|
||||
</a>
|
||||
<div class="panel">
|
||||
<div class="panel-heading">
|
||||
<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 class="accordion-inner">
|
||||
...
|
||||
<div id="collapseTwo" class="panel-collapse collapse">
|
||||
<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="accordion-heading">
|
||||
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
|
||||
Collapsible Group Item #3
|
||||
</a>
|
||||
<div class="panel">
|
||||
<div class="panel-heading">
|
||||
<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 class="accordion-inner">
|
||||
...
|
||||
<div id="collapseThree" class="panel-collapse collapse">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -55,7 +55,6 @@
|
|||
@import "labels.less";
|
||||
@import "badges.less";
|
||||
@import "progress-bars.less";
|
||||
@import "accordion.less";
|
||||
@import "carousel.less";
|
||||
@import "jumbotron.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,14 +5,18 @@
|
|||
|
||||
// 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
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue