Skip to content

B
bootstrap
Commit 729854fa authored by Mark Otto's avatar Mark Otto
Browse files
Options

Merge pull request #9404 from twbs/bs3_drop_accordion_for_panel 

BS3: Drop the accordion for the panel (fixes #8648)
parents 3e373a84 33a88c9a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 278 additions and 155 deletions
components.html
View file @ 729854fa
...@@ -2426,12 +2426,16 @@ body { padding-bottom: 70px; } ...@@ -2426,12 +2426,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> <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="bs-example">
<div class="panel"> <div class="panel">
Basic panel example <div class="panel-body">
Basic panel example
</div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="panel"> <div class="panel">
Basic panel example <div class="panel-body">
Basic panel example
</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
...@@ -2440,26 +2444,34 @@ body { padding-bottom: 70px; } ...@@ -2440,26 +2444,34 @@ body { padding-bottom: 70px; }
<div class="bs-example"> <div class="bs-example">
<div class="panel"> <div class="panel">
<div class="panel-heading">Panel heading</div> <div class="panel-heading">Panel heading</div>
Panel content <div class="panel-body">
Panel content
</div>
</div> </div>
<div class="panel"> <div class="panel">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">Panel title</h3> <h3 class="panel-title">Panel title</h3>
</div> </div>
Panel content <div class="panel-body">
Panel content
</div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="panel"> <div class="panel">
<div class="panel-heading">Panel heading</div> <div class="panel-heading">Panel heading</div>
Panel content <div class="panel-body">
Panel content
</div>
</div> </div>
<div class="panel"> <div class="panel">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">Panel title</h3> <h3 class="panel-title">Panel title</h3>
</div> </div>
Panel content <div class="panel-body">
Panel content
</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
...@@ -2467,13 +2479,17 @@ body { padding-bottom: 70px; } ...@@ -2467,13 +2479,17 @@ body { padding-bottom: 70px; }
<p>Wrap buttons or secondary text in <code>.panel-footer</code>.</p> <p>Wrap buttons or secondary text in <code>.panel-footer</code>.</p>
<div class="bs-example"> <div class="bs-example">
<div class="panel"> <div class="panel">
Panel content <div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div> <div class="panel-footer">Panel footer</div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="panel"> <div class="panel">
Panel content <div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div> <div class="panel-footer">Panel footer</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
...@@ -2485,31 +2501,41 @@ body { padding-bottom: 70px; } ...@@ -2485,31 +2501,41 @@ body { padding-bottom: 70px; }
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">Panel title</h3> <h3 class="panel-title">Panel title</h3>
</div> </div>
Panel content <div class="panel-body">
Panel content
</div>
</div> </div>
<div class="panel panel-success"> <div class="panel panel-success">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">Panel title</h3> <h3 class="panel-title">Panel title</h3>
</div> </div>
Panel content <div class="panel-body">
Panel content
</div>
</div> </div>
<div class="panel panel-warning"> <div class="panel panel-warning">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">Panel title</h3> <h3 class="panel-title">Panel title</h3>
</div> </div>
Panel content <div class="panel-body">
Panel content
</div>
</div> </div>
<div class="panel panel-danger"> <div class="panel panel-danger">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">Panel title</h3> <h3 class="panel-title">Panel title</h3>
</div> </div>
Panel content <div class="panel-body">
Panel content
</div>
</div> </div>
<div class="panel panel-info"> <div class="panel panel-info">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">Panel title</h3> <h3 class="panel-title">Panel title</h3>
</div> </div>
Panel content <div class="panel-body">
Panel content
</div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
...@@ -2526,7 +2552,9 @@ body { padding-bottom: 70px; } ...@@ -2526,7 +2552,9 @@ body { padding-bottom: 70px; }
<div class="panel"> <div class="panel">
<!-- Default panel contents --> <!-- Default panel contents -->
<div class="panel-heading">Panel heading</div> <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 --> <!-- List group -->
<ul class="list-group"> <ul class="list-group">
...@@ -2542,7 +2570,9 @@ body { padding-bottom: 70px; } ...@@ -2542,7 +2570,9 @@ body { padding-bottom: 70px; }
<div class="panel"> <div class="panel">
<!-- Default panel contents --> <!-- Default panel contents -->
<div class="panel-heading">Panel heading</div> <div class="panel-heading">Panel heading</div>
<p>...</p> <div class="panel-body">
<p>...</p>
</div>
<!-- List group --> <!-- List group -->
<ul class="list-group"> <ul class="list-group">
......
dist/css/bootstrap.css
View file @ 729854fa
...@@ -1704,7 +1704,7 @@ textarea.form-control { ...@@ -1704,7 +1704,7 @@ textarea.form-control {
margin-left: 10px; margin-left: 10px;
} }
.input-lg { .input-sm {
height: 45px; height: 45px;
padding: 10px 16px; padding: 10px 16px;
font-size: 18px; font-size: 18px;
...@@ -1712,7 +1712,16 @@ textarea.form-control { ...@@ -1712,7 +1712,16 @@ textarea.form-control {
border-radius: 6px; border-radius: 6px;
} }
.input-sm { select.input-sm {
height: 45px;
line-height: 45px;
}
textarea.input-sm {
height: auto;
}
.input-lg {
height: 30px; height: 30px;
padding: 5px 10px; padding: 5px 10px;
font-size: 12px; font-size: 12px;
...@@ -1721,17 +1730,11 @@ textarea.form-control { ...@@ -1721,17 +1730,11 @@ textarea.form-control {
} }
select.input-lg { select.input-lg {
height: 45px;
line-height: 45px;
}
select.input-sm {
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
} }
textarea.input-lg, textarea.input-lg {
textarea.input-sm {
height: auto; height: auto;
} }
...@@ -2256,6 +2259,29 @@ input[type="button"].btn-block { ...@@ -2256,6 +2259,29 @@ input[type="button"].btn-block {
.input-group-lg > .form-control, .input-group-lg > .form-control,
.input-group-lg > .input-group-addon, .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 { .input-group-lg > .input-group-btn > .btn {
height: 45px; height: 45px;
padding: 10px 16px; padding: 10px 16px;
...@@ -2264,14 +2290,17 @@ input[type="button"].btn-block { ...@@ -2264,14 +2290,17 @@ input[type="button"].btn-block {
border-radius: 6px; 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, .input-group-addon,
...@@ -2589,7 +2618,6 @@ a.list-group-item:focus { ...@@ -2589,7 +2618,6 @@ a.list-group-item:focus {
} }
.panel { .panel {
padding: 15px;
margin-bottom: 20px; margin-bottom: 20px;
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #dddddd; border: 1px solid #dddddd;
...@@ -2598,8 +2626,12 @@ a.list-group-item:focus { ...@@ -2598,8 +2626,12 @@ a.list-group-item:focus {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
} }
.panel-body {
padding: 15px;
}
.panel .list-group { .panel .list-group {
margin: 15px -15px -15px; margin-bottom: 0;
} }
.panel .list-group .list-group-item { .panel .list-group .list-group-item {
...@@ -2615,17 +2647,12 @@ a.list-group-item:focus { ...@@ -2615,17 +2647,12 @@ a.list-group-item:focus {
border-bottom: 0; border-bottom: 0;
} }
.panel-heading + .list-group {
margin-top: -15px;
}
.panel-heading + .list-group .list-group-item:first-child { .panel-heading + .list-group .list-group-item:first-child {
border-top-width: 0; border-top-width: 0;
} }
.panel-heading { .panel-heading {
padding: 10px 15px; padding: 10px 15px;
margin: -15px -15px 15px;
background-color: #f5f5f5; background-color: #f5f5f5;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
border-top-right-radius: 3px; border-top-right-radius: 3px;
...@@ -2644,13 +2671,38 @@ a.list-group-item:focus { ...@@ -2644,13 +2671,38 @@ a.list-group-item:focus {
.panel-footer { .panel-footer {
padding: 10px 15px; padding: 10px 15px;
margin: 15px -15px -15px;
background-color: #f5f5f5; background-color: #f5f5f5;
border-top: 1px solid #dddddd; border-top: 1px solid #dddddd;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-bottom-left-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 { .panel-primary {
border-color: #428bca; border-color: #428bca;
} }
...@@ -2661,6 +2713,14 @@ a.list-group-item:focus { ...@@ -2661,6 +2713,14 @@ a.list-group-item:focus {
border-color: #428bca; 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 { .panel-success {
border-color: #d6e9c6; border-color: #d6e9c6;
} }
...@@ -2671,6 +2731,14 @@ a.list-group-item:focus { ...@@ -2671,6 +2731,14 @@ a.list-group-item:focus {
border-color: #d6e9c6; 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 { .panel-warning {
border-color: #fbeed5; border-color: #fbeed5;
} }
...@@ -2681,6 +2749,14 @@ a.list-group-item:focus { ...@@ -2681,6 +2749,14 @@ a.list-group-item:focus {
border-color: #fbeed5; 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 { .panel-danger {
border-color: #eed3d7; border-color: #eed3d7;
} }
...@@ -2691,6 +2767,14 @@ a.list-group-item:focus { ...@@ -2691,6 +2767,14 @@ a.list-group-item:focus {
border-color: #eed3d7; 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 { .panel-info {
border-color: #bce8f1; border-color: #bce8f1;
} }
...@@ -2701,6 +2785,14 @@ a.list-group-item:focus { ...@@ -2701,6 +2785,14 @@ a.list-group-item:focus {
border-color: #bce8f1; 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 { .well {
min-height: 20px; min-height: 20px;
padding: 19px; padding: 19px;
...@@ -4604,31 +4696,6 @@ a.list-group-item.active > .badge, ...@@ -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); 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 { .carousel {
position: relative; position: relative;
} }
......
dist/css/bootstrap.min.css
View file @ 729854fa
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/bootstrap.js
View file @ 729854fa
...@@ -539,7 +539,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") } ...@@ -539,7 +539,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
this.$element.trigger(startEvent) this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return 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) { if (actives && actives.length) {
var hasData = actives.data('bs.collapse') var hasData = actives.data('bs.collapse')
......
dist/js/bootstrap.min.js
View file @ 729854fa
This diff is collapsed.
javascript.html
View file @ 729854fa
...@@ -1401,42 +1401,48 @@ $('.nav-tabs').button() ...@@ -1401,42 +1401,48 @@ $('.nav-tabs').button()
</div> </div>
<h2 id="collapse-examples">Example accordion</h2> <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="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">
Collapsible Group Item #1 <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
</a> Collapsible Group Item #1
</a>
</h3>
</div> </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. 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>
</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">
Collapsible Group Item #2 <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
</a> Collapsible Group Item #2
</a>
</h3>
</div> </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. 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>
</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">
Collapsible Group Item #3 <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
</a> Collapsible Group Item #3
</a>
</h3>
</div> </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. 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>
...@@ -1444,40 +1450,46 @@ $('.nav-tabs').button() ...@@ -1444,40 +1450,46 @@ $('.nav-tabs').button()
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% 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">
Collapsible Group Item #1 <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
</a> Collapsible Group Item #1
</a>
</h3>
</div> </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>
</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">
Collapsible Group Item #2 <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
</a> Collapsible Group Item #2
</a>
</h3>
</div> </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>
</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">
Collapsible Group Item #3 <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
</a> Collapsible Group Item #3
</a>
</h3>
</div> </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> </div>
</div> </div>
......
js/collapse.js
View file @ 729854fa
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
this.$element.trigger(startEvent) this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return 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) { if (actives && actives.length) {
var hasData = actives.data('bs.collapse') var hasData = actives.data('bs.collapse')
......
less/accordion.less deleted 100644 → 0
View file @ 3e373a84
//
// 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
View file @ 729854fa
...@@ -55,7 +55,6 @@ ...@@ -55,7 +55,6 @@
@import "labels.less"; @import "labels.less";
@import "badges.less"; @import "badges.less";
@import "progress-bars.less"; @import "progress-bars.less";
@import "accordion.less";
@import "carousel.less"; @import "carousel.less";
@import "jumbotron.less"; @import "jumbotron.less";
......
less/mixins.less
View file @ 729854fa
...@@ -335,6 +335,14 @@ ...@@ -335,6 +335,14 @@
color: @heading-text-color; color: @heading-text-color;
background-color: @heading-bg-color; background-color: @heading-bg-color;
border-color: @heading-border; 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
View file @ 729854fa
...@@ -5,14 +5,18 @@ ...@@ -5,14 +5,18 @@
// Base class // Base class
.panel { .panel {
padding: 15px; margin-bottom: @line-height-computed;
margin-bottom: 20px;
background-color: @panel-bg; background-color: @panel-bg;
border: 1px solid @panel-border; border: 1px solid @panel-border;
border-radius: @panel-border-radius; border-radius: @panel-border-radius;
.box-shadow(0 1px 1px rgba(0,0,0,.05)); .box-shadow(0 1px 1px rgba(0,0,0,.05));
} }
// Panel contents
.panel-body {
padding: 15px;
}
// List groups in panels // List groups in panels
// //
// By default, space out list group content from panel headings to account for // By default, space out list group content from panel headings to account for
...@@ -20,7 +24,7 @@ ...@@ -20,7 +24,7 @@
.panel { .panel {
.list-group { .list-group {
margin: 15px -15px -15px; margin-bottom: 0;
.list-group-item { .list-group-item {
border-width: 1px 0; border-width: 1px 0;
...@@ -38,7 +42,6 @@ ...@@ -38,7 +42,6 @@
} }
// Collapse space between when there's no additional content. // Collapse space between when there's no additional content.
.panel-heading + .list-group { .panel-heading + .list-group {
margin-top: -15px;
.list-group-item:first-child { .list-group-item:first-child {
border-top-width: 0; border-top-width: 0;
} }
...@@ -46,7 +49,6 @@ ...@@ -46,7 +49,6 @@
// Optional heading // Optional heading
.panel-heading { .panel-heading {
margin: -15px -15px 15px;
padding: 10px 15px; padding: 10px 15px;
background-color: @panel-heading-bg; background-color: @panel-heading-bg;
border-bottom: 1px solid @panel-border; border-bottom: 1px solid @panel-border;
...@@ -65,13 +67,49 @@ ...@@ -65,13 +67,49 @@
// Optional footer (stays gray in every modifier class) // Optional footer (stays gray in every modifier class)
.panel-footer { .panel-footer {
margin: 15px -15px -15px;
padding: 10px 15px; padding: 10px 15px;
background-color: @panel-footer-bg; background-color: @panel-footer-bg;
border-top: 1px solid @panel-border; border-top: 1px solid @panel-border;
.border-bottom-radius(@panel-border-radius - 1); .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 // Contextual variations
.panel-primary { .panel-primary {
.panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border); .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment