Skip to content

Commit

Permalink
Drop the accordion for the panel
Browse files Browse the repository at this point in the history 
* Deletes the accordion.less file
* Extends the panel to be collapsible with our JS plugin
* Supports panel color variations
  • Loading branch information
@mdo
mdo committed Aug 13, 2013
1 parent 54a3e4b commit 237640c
Show file tree
Hide file tree
Showing 11 changed files with 231 additions and 112 deletions.
60 changes: 45 additions & 15 deletions components.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2386,12 +2386,16 @@ <h3 id="panels-basic">Basic panel</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">
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 %}

Expand All @@ -2400,40 +2404,52 @@ <h3 id="panels-heading">Panel with heading</h3>
<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 %}

<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">
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 %}
Expand All @@ -2445,31 +2461,41 @@ <h3 id="panels-alternatives">Contextual alternatives</h3>
<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 %}
Expand All @@ -2486,7 +2512,9 @@ <h3 id="panels-list-group">With list groups</h3>
<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">
Expand All @@ -2502,7 +2530,9 @@ <h3 id="panels-list-group">With list groups</h3>
<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">
Expand Down
79 changes: 71 additions & 8 deletions dist/css/bootstrap.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2589,7 +2589,6 @@ a.list-group-item:focus {
}

.panel {
padding: 15px;
margin-bottom: 20px;
background-color: #ffffff;
border: 1px solid #dddddd;
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -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;
}
Expand All @@ -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;
}
Expand All @@ -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;
}
Expand All @@ -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;
}
Expand All @@ -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;
}
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion dist/css/bootstrap.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/js/bootstrap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
2 changes: 1 addition & 1 deletion dist/js/bootstrap.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 237640c

Please sign in to comment.