mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-17 14:54:30 +01:00
Drop: Panels completely, as they'll be replaced
This commit is contained in:
Mark Otto
parent
67d3119c5a
commit
527eccaa9f
311
dist/css/bootstrap.css
vendored
311
dist/css/bootstrap.css
vendored
@ -4392,314 +4392,6 @@ a.list-group-item-danger.active:focus {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.panel {
|
||||
margin-bottom: 24px;
|
||||
background-color: #fff;
|
||||
border: 1px solid transparent;
|
||||
border-radius: .2rem;
|
||||
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
|
||||
}
|
||||
.panel-body {
|
||||
padding: 15px;
|
||||
}
|
||||
.panel-heading {
|
||||
padding: 10px 15px;
|
||||
border-bottom: 1px solid transparent;
|
||||
border-top-left-radius: -.8rem;
|
||||
border-top-right-radius: -.8rem;
|
||||
}
|
||||
.panel-heading > .dropdown .dropdown-toggle {
|
||||
color: inherit;
|
||||
}
|
||||
.panel-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 2rem;
|
||||
color: inherit;
|
||||
}
|
||||
.panel-title > a {
|
||||
color: inherit;
|
||||
}
|
||||
.panel-footer {
|
||||
padding: 10px 15px;
|
||||
background-color: #f5f5f5;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom-right-radius: -.8rem;
|
||||
border-bottom-left-radius: -.8rem;
|
||||
}
|
||||
.panel > .list-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.panel > .list-group .list-group-item {
|
||||
border-width: 1px 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.panel > .list-group:first-child .list-group-item:first-child {
|
||||
border-top: 0;
|
||||
border-top-left-radius: -.8rem;
|
||||
border-top-right-radius: -.8rem;
|
||||
}
|
||||
.panel > .list-group:last-child .list-group-item:last-child {
|
||||
border-bottom: 0;
|
||||
border-bottom-right-radius: -.8rem;
|
||||
border-bottom-left-radius: -.8rem;
|
||||
}
|
||||
.panel-heading + .list-group .list-group-item:first-child {
|
||||
border-top-width: 0;
|
||||
}
|
||||
.list-group + .panel-footer {
|
||||
border-top-width: 0;
|
||||
}
|
||||
.panel > .table,
|
||||
.panel > .table-responsive > .table,
|
||||
.panel > .panel-collapse > .table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.panel > .table:first-child,
|
||||
.panel > .table-responsive:first-child > .table:first-child {
|
||||
border-top-left-radius: -.8rem;
|
||||
border-top-right-radius: -.8rem;
|
||||
}
|
||||
.panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
|
||||
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
|
||||
.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
|
||||
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
|
||||
.panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
|
||||
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
|
||||
.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
|
||||
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
|
||||
border-top-left-radius: -.8rem;
|
||||
}
|
||||
.panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
|
||||
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
|
||||
.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
|
||||
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
|
||||
.panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
|
||||
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
|
||||
.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
|
||||
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
|
||||
border-top-right-radius: -.8rem;
|
||||
}
|
||||
.panel > .table:last-child,
|
||||
.panel > .table-responsive:last-child > .table:last-child {
|
||||
border-bottom-right-radius: -.8rem;
|
||||
border-bottom-left-radius: -.8rem;
|
||||
}
|
||||
.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
|
||||
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
|
||||
.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
|
||||
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
|
||||
.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
|
||||
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
|
||||
.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
|
||||
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
|
||||
border-bottom-left-radius: -.8rem;
|
||||
}
|
||||
.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
|
||||
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
|
||||
.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
|
||||
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
|
||||
.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
|
||||
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
|
||||
.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
|
||||
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
|
||||
border-bottom-right-radius: -.8rem;
|
||||
}
|
||||
.panel > .panel-body + .table,
|
||||
.panel > .panel-body + .table-responsive {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
.panel > .table > tbody:first-child > tr:first-child th,
|
||||
.panel > .table > tbody:first-child > tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
.panel > .table-bordered,
|
||||
.panel > .table-responsive > .table-bordered {
|
||||
border: 0;
|
||||
}
|
||||
.panel > .table-bordered > thead > tr > th:first-child,
|
||||
.panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
|
||||
.panel > .table-bordered > tbody > tr > th:first-child,
|
||||
.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
|
||||
.panel > .table-bordered > tfoot > tr > th:first-child,
|
||||
.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
|
||||
.panel > .table-bordered > thead > tr > td:first-child,
|
||||
.panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
|
||||
.panel > .table-bordered > tbody > tr > td:first-child,
|
||||
.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
|
||||
.panel > .table-bordered > tfoot > tr > td:first-child,
|
||||
.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
.panel > .table-bordered > thead > tr > th:last-child,
|
||||
.panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
|
||||
.panel > .table-bordered > tbody > tr > th:last-child,
|
||||
.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
|
||||
.panel > .table-bordered > tfoot > tr > th:last-child,
|
||||
.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
|
||||
.panel > .table-bordered > thead > tr > td:last-child,
|
||||
.panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
|
||||
.panel > .table-bordered > tbody > tr > td:last-child,
|
||||
.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
|
||||
.panel > .table-bordered > tfoot > tr > td:last-child,
|
||||
.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
.panel > .table-bordered > thead > tr:first-child > td,
|
||||
.panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
|
||||
.panel > .table-bordered > tbody > tr:first-child > td,
|
||||
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,
|
||||
.panel > .table-bordered > thead > tr:first-child > th,
|
||||
.panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
|
||||
.panel > .table-bordered > tbody > tr:first-child > th,
|
||||
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.panel > .table-bordered > tbody > tr:last-child > td,
|
||||
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
|
||||
.panel > .table-bordered > tfoot > tr:last-child > td,
|
||||
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,
|
||||
.panel > .table-bordered > tbody > tr:last-child > th,
|
||||
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
|
||||
.panel > .table-bordered > tfoot > tr:last-child > th,
|
||||
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.panel > .table-responsive {
|
||||
margin-bottom: 0;
|
||||
border: 0;
|
||||
}
|
||||
.panel-group {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.panel-group .panel {
|
||||
margin-bottom: 0;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
.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 #ddd;
|
||||
}
|
||||
.panel-group .panel-footer {
|
||||
border-top: 0;
|
||||
}
|
||||
.panel-group .panel-footer + .panel-collapse .panel-body {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.panel-default {
|
||||
border-color: #ddd;
|
||||
}
|
||||
.panel-default > .panel-heading {
|
||||
color: #373a3c;
|
||||
background-color: #f5f5f5;
|
||||
border-color: #ddd;
|
||||
}
|
||||
.panel-default > .panel-heading + .panel-collapse > .panel-body {
|
||||
border-top-color: #ddd;
|
||||
}
|
||||
.panel-default > .panel-heading .badge {
|
||||
color: #f5f5f5;
|
||||
background-color: #373a3c;
|
||||
}
|
||||
.panel-default > .panel-footer + .panel-collapse > .panel-body {
|
||||
border-bottom-color: #ddd;
|
||||
}
|
||||
.panel-primary {
|
||||
border-color: #027de7;
|
||||
}
|
||||
.panel-primary > .panel-heading {
|
||||
color: #fff;
|
||||
background-color: #027de7;
|
||||
border-color: #027de7;
|
||||
}
|
||||
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
|
||||
border-top-color: #027de7;
|
||||
}
|
||||
.panel-primary > .panel-heading .badge {
|
||||
color: #027de7;
|
||||
background-color: #fff;
|
||||
}
|
||||
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
|
||||
border-bottom-color: #027de7;
|
||||
}
|
||||
.panel-success {
|
||||
border-color: #d6e9c6;
|
||||
}
|
||||
.panel-success > .panel-heading {
|
||||
color: #3c763d;
|
||||
background-color: #dff0d8;
|
||||
border-color: #d6e9c6;
|
||||
}
|
||||
.panel-success > .panel-heading + .panel-collapse > .panel-body {
|
||||
border-top-color: #d6e9c6;
|
||||
}
|
||||
.panel-success > .panel-heading .badge {
|
||||
color: #dff0d8;
|
||||
background-color: #3c763d;
|
||||
}
|
||||
.panel-success > .panel-footer + .panel-collapse > .panel-body {
|
||||
border-bottom-color: #d6e9c6;
|
||||
}
|
||||
.panel-info {
|
||||
border-color: #bce8f1;
|
||||
}
|
||||
.panel-info > .panel-heading {
|
||||
color: #31708f;
|
||||
background-color: #d9edf7;
|
||||
border-color: #bce8f1;
|
||||
}
|
||||
.panel-info > .panel-heading + .panel-collapse > .panel-body {
|
||||
border-top-color: #bce8f1;
|
||||
}
|
||||
.panel-info > .panel-heading .badge {
|
||||
color: #d9edf7;
|
||||
background-color: #31708f;
|
||||
}
|
||||
.panel-info > .panel-footer + .panel-collapse > .panel-body {
|
||||
border-bottom-color: #bce8f1;
|
||||
}
|
||||
.panel-warning {
|
||||
border-color: #faebcc;
|
||||
}
|
||||
.panel-warning > .panel-heading {
|
||||
color: #8a6d3b;
|
||||
background-color: #fcf8e3;
|
||||
border-color: #faebcc;
|
||||
}
|
||||
.panel-warning > .panel-heading + .panel-collapse > .panel-body {
|
||||
border-top-color: #faebcc;
|
||||
}
|
||||
.panel-warning > .panel-heading .badge {
|
||||
color: #fcf8e3;
|
||||
background-color: #8a6d3b;
|
||||
}
|
||||
.panel-warning > .panel-footer + .panel-collapse > .panel-body {
|
||||
border-bottom-color: #faebcc;
|
||||
}
|
||||
.panel-danger {
|
||||
border-color: #ebccd1;
|
||||
}
|
||||
.panel-danger > .panel-heading {
|
||||
color: #a94442;
|
||||
background-color: #f2dede;
|
||||
border-color: #ebccd1;
|
||||
}
|
||||
.panel-danger > .panel-heading + .panel-collapse > .panel-body {
|
||||
border-top-color: #ebccd1;
|
||||
}
|
||||
.panel-danger > .panel-heading .badge {
|
||||
color: #f2dede;
|
||||
background-color: #a94442;
|
||||
}
|
||||
.panel-danger > .panel-footer + .panel-collapse > .panel-body {
|
||||
border-bottom-color: #ebccd1;
|
||||
}
|
||||
.embed-responsive {
|
||||
position: relative;
|
||||
display: block;
|
||||
@ -5289,8 +4981,6 @@ button.close {
|
||||
.navbar-collapse:after,
|
||||
.pager:before,
|
||||
.pager:after,
|
||||
.panel-body:before,
|
||||
.panel-body:after,
|
||||
.modal-footer:before,
|
||||
.modal-footer:after {
|
||||
display: table;
|
||||
@ -5309,7 +4999,6 @@ button.close {
|
||||
.navbar-header:after,
|
||||
.navbar-collapse:after,
|
||||
.pager:after,
|
||||
.panel-body:after,
|
||||
.modal-footer:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
2
dist/css/bootstrap.css.map
vendored
2
dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,279 +0,0 @@
|
||||
<div class="bs-docs-section">
|
||||
<h1 id="panels" class="page-header">Panels</h1>
|
||||
|
||||
<p class="lead">While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.</p>
|
||||
|
||||
<h3 id="panels-basic">Basic example</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 panel-default">
|
||||
<div class="panel-body">
|
||||
Basic panel example
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
Basic panel example
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="panels-heading">Panel with heading</h3>
|
||||
<p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code><h1></code>-<code><h6></code> with a <code>.panel-title</code> class to add a pre-styled heading.</p>
|
||||
<p>For proper link coloring, be sure to place links in headings within <code>.panel-title</code>.</p>
|
||||
<div class="bs-example">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Panel heading without title</div>
|
||||
<div class="panel-body">
|
||||
Panel content
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<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-default">
|
||||
<div class="panel-heading">Panel heading without title</div>
|
||||
<div class="panel-body">
|
||||
Panel content
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<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>. Note that panel footers <strong>do not</strong> inherit colors and borders when using contextual variations as they are not meant to be in the foreground.</p>
|
||||
<div class="bs-example">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
Panel content
|
||||
</div>
|
||||
<div class="panel-footer">Panel footer</div>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
Panel content
|
||||
</div>
|
||||
<div class="panel-footer">Panel footer</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="panels-alternatives">Contextual alternatives</h3>
|
||||
<p>Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.</p>
|
||||
<div class="bs-example">
|
||||
<div class="panel panel-primary">
|
||||
<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-info">
|
||||
<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>
|
||||
{% highlight html %}
|
||||
<div class="panel panel-primary">...</div>
|
||||
<div class="panel panel-success">...</div>
|
||||
<div class="panel panel-info">...</div>
|
||||
<div class="panel panel-warning">...</div>
|
||||
<div class="panel panel-danger">...</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="panels-tables">With tables</h3>
|
||||
<p>Add any non-bordered <code>.table</code> within a panel for a seamless design. If there is a <code>.panel-body</code>, we add an extra border to the top of the table for separation.</p>
|
||||
<div class="bs-example">
|
||||
<div class="panel panel-default">
|
||||
<!-- 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>
|
||||
|
||||
<!-- Table -->
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="panel panel-default">
|
||||
<!-- Default panel contents -->
|
||||
<div class="panel-heading">Panel heading</div>
|
||||
<div class="panel-body">
|
||||
<p>...</p>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<table class="table">
|
||||
...
|
||||
</table>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<p>If there is no panel body, the component moves from panel header to table without interruption.</p>
|
||||
<div class="bs-example">
|
||||
<div class="panel panel-default">
|
||||
<!-- Default panel contents -->
|
||||
<div class="panel-heading">Panel heading</div>
|
||||
|
||||
<!-- Table -->
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="panel panel-default">
|
||||
<!-- Default panel contents -->
|
||||
<div class="panel-heading">Panel heading</div>
|
||||
|
||||
<!-- Table -->
|
||||
<table class="table">
|
||||
...
|
||||
</table>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<h3 id="panels-list-group">With list groups</h3>
|
||||
<p>Easily include full-width <a href="#list-group">list groups</a> within any panel.</p>
|
||||
<div class="bs-example">
|
||||
<div class="panel panel-default">
|
||||
<!-- 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">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="panel panel-default">
|
||||
<!-- Default panel contents -->
|
||||
<div class="panel-heading">Panel heading</div>
|
||||
<div class="panel-body">
|
||||
<p>...</p>
|
||||
</div>
|
||||
|
||||
<!-- List group -->
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
@ -129,14 +129,4 @@
|
||||
<li><a href="#list-group-custom-content">Custom content</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#panels">Panels</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#panels-basic">Basic example</a></li>
|
||||
<li><a href="#panels-heading">Panel with heading</a></li>
|
||||
<li><a href="#panels-alternatives">Contextual alternatives</a></li>
|
||||
<li><a href="#panels-tables">With tables</a>
|
||||
<li><a href="#panels-list-group">With list groups</a>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#responsive-embed">Responsive embed</a></li>
|
||||
|
||||
@ -22,5 +22,4 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
|
||||
{% include components/progress-bars.html %}
|
||||
{% include components/media.html %}
|
||||
{% include components/list-group.html %}
|
||||
{% include components/panels.html %}
|
||||
{% include components/responsive-embed.html %}
|
||||
|
||||
311
docs/dist/css/bootstrap.css
vendored
311
docs/dist/css/bootstrap.css
vendored
@ -4392,314 +4392,6 @@ a.list-group-item-danger.active:focus {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.panel {
|
||||
margin-bottom: 24px;
|
||||
background-color: #fff;
|
||||
border: 1px solid transparent;
|
||||
border-radius: .2rem;
|
||||
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
|
||||
}
|
||||
.panel-body {
|
||||
padding: 15px;
|
||||
}
|
||||
.panel-heading {
|
||||
padding: 10px 15px;
|
||||
border-bottom: 1px solid transparent;
|
||||
border-top-left-radius: -.8rem;
|
||||
border-top-right-radius: -.8rem;
|
||||
}
|
||||
.panel-heading > .dropdown .dropdown-toggle {
|
||||
color: inherit;
|
||||
}
|
||||
.panel-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 2rem;
|
||||
color: inherit;
|
||||
}
|
||||
.panel-title > a {
|
||||
color: inherit;
|
||||
}
|
||||
.panel-footer {
|
||||
padding: 10px 15px;
|
||||
background-color: #f5f5f5;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom-right-radius: -.8rem;
|
||||
border-bottom-left-radius: -.8rem;
|
||||
}
|
||||
.panel > .list-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.panel > .list-group .list-group-item {
|
||||
border-width: 1px 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.panel > .list-group:first-child .list-group-item:first-child {
|
||||
border-top: 0;
|
||||
border-top-left-radius: -.8rem;
|
||||
border-top-right-radius: -.8rem;
|
||||
}
|
||||
.panel > .list-group:last-child .list-group-item:last-child {
|
||||
border-bottom: 0;
|
||||
border-bottom-right-radius: -.8rem;
|
||||
border-bottom-left-radius: -.8rem;
|
||||
}
|
||||
.panel-heading + .list-group .list-group-item:first-child {
|
||||
border-top-width: 0;
|
||||
}
|
||||
.list-group + .panel-footer {
|
||||
border-top-width: 0;
|
||||
}
|
||||
.panel > .table,
|
||||
.panel > .table-responsive > .table,
|
||||
.panel > .panel-collapse > .table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.panel > .table:first-child,
|
||||
.panel > .table-responsive:first-child > .table:first-child {
|
||||
border-top-left-radius: -.8rem;
|
||||
border-top-right-radius: -.8rem;
|
||||
}
|
||||
.panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
|
||||
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
|
||||
.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
|
||||
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
|
||||
.panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
|
||||
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
|
||||
.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
|
||||
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
|
||||
border-top-left-radius: -.8rem;
|
||||
}
|
||||
.panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
|
||||
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
|
||||
.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
|
||||
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
|
||||
.panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
|
||||
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
|
||||
.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
|
||||
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
|
||||
border-top-right-radius: -.8rem;
|
||||
}
|
||||
.panel > .table:last-child,
|
||||
.panel > .table-responsive:last-child > .table:last-child {
|
||||
border-bottom-right-radius: -.8rem;
|
||||
border-bottom-left-radius: -.8rem;
|
||||
}
|
||||
.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
|
||||
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
|
||||
.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
|
||||
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
|
||||
.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
|
||||
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
|
||||
.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
|
||||
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
|
||||
border-bottom-left-radius: -.8rem;
|
||||
}
|
||||
.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
|
||||
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
|
||||
.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
|
||||
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
|
||||
.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
|
||||
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
|
||||
.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
|
||||
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
|
||||
border-bottom-right-radius: -.8rem;
|
||||
}
|
||||
.panel > .panel-body + .table,
|
||||
.panel > .panel-body + .table-responsive {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
.panel > .table > tbody:first-child > tr:first-child th,
|
||||
.panel > .table > tbody:first-child > tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
.panel > .table-bordered,
|
||||
.panel > .table-responsive > .table-bordered {
|
||||
border: 0;
|
||||
}
|
||||
.panel > .table-bordered > thead > tr > th:first-child,
|
||||
.panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
|
||||
.panel > .table-bordered > tbody > tr > th:first-child,
|
||||
.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
|
||||
.panel > .table-bordered > tfoot > tr > th:first-child,
|
||||
.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
|
||||
.panel > .table-bordered > thead > tr > td:first-child,
|
||||
.panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
|
||||
.panel > .table-bordered > tbody > tr > td:first-child,
|
||||
.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
|
||||
.panel > .table-bordered > tfoot > tr > td:first-child,
|
||||
.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
.panel > .table-bordered > thead > tr > th:last-child,
|
||||
.panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
|
||||
.panel > .table-bordered > tbody > tr > th:last-child,
|
||||
.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
|
||||
.panel > .table-bordered > tfoot > tr > th:last-child,
|
||||
.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
|
||||
.panel > .table-bordered > thead > tr > td:last-child,
|
||||
.panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
|
||||
.panel > .table-bordered > tbody > tr > td:last-child,
|
||||
.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
|
||||
.panel > .table-bordered > tfoot > tr > td:last-child,
|
||||
.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
.panel > .table-bordered > thead > tr:first-child > td,
|
||||
.panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
|
||||
.panel > .table-bordered > tbody > tr:first-child > td,
|
||||
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,
|
||||
.panel > .table-bordered > thead > tr:first-child > th,
|
||||
.panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
|
||||
.panel > .table-bordered > tbody > tr:first-child > th,
|
||||
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.panel > .table-bordered > tbody > tr:last-child > td,
|
||||
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
|
||||
.panel > .table-bordered > tfoot > tr:last-child > td,
|
||||
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,
|
||||
.panel > .table-bordered > tbody > tr:last-child > th,
|
||||
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
|
||||
.panel > .table-bordered > tfoot > tr:last-child > th,
|
||||
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.panel > .table-responsive {
|
||||
margin-bottom: 0;
|
||||
border: 0;
|
||||
}
|
||||
.panel-group {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.panel-group .panel {
|
||||
margin-bottom: 0;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
.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 #ddd;
|
||||
}
|
||||
.panel-group .panel-footer {
|
||||
border-top: 0;
|
||||
}
|
||||
.panel-group .panel-footer + .panel-collapse .panel-body {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.panel-default {
|
||||
border-color: #ddd;
|
||||
}
|
||||
.panel-default > .panel-heading {
|
||||
color: #373a3c;
|
||||
background-color: #f5f5f5;
|
||||
border-color: #ddd;
|
||||
}
|
||||
.panel-default > .panel-heading + .panel-collapse > .panel-body {
|
||||
border-top-color: #ddd;
|
||||
}
|
||||
.panel-default > .panel-heading .badge {
|
||||
color: #f5f5f5;
|
||||
background-color: #373a3c;
|
||||
}
|
||||
.panel-default > .panel-footer + .panel-collapse > .panel-body {
|
||||
border-bottom-color: #ddd;
|
||||
}
|
||||
.panel-primary {
|
||||
border-color: #027de7;
|
||||
}
|
||||
.panel-primary > .panel-heading {
|
||||
color: #fff;
|
||||
background-color: #027de7;
|
||||
border-color: #027de7;
|
||||
}
|
||||
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
|
||||
border-top-color: #027de7;
|
||||
}
|
||||
.panel-primary > .panel-heading .badge {
|
||||
color: #027de7;
|
||||
background-color: #fff;
|
||||
}
|
||||
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
|
||||
border-bottom-color: #027de7;
|
||||
}
|
||||
.panel-success {
|
||||
border-color: #d6e9c6;
|
||||
}
|
||||
.panel-success > .panel-heading {
|
||||
color: #3c763d;
|
||||
background-color: #dff0d8;
|
||||
border-color: #d6e9c6;
|
||||
}
|
||||
.panel-success > .panel-heading + .panel-collapse > .panel-body {
|
||||
border-top-color: #d6e9c6;
|
||||
}
|
||||
.panel-success > .panel-heading .badge {
|
||||
color: #dff0d8;
|
||||
background-color: #3c763d;
|
||||
}
|
||||
.panel-success > .panel-footer + .panel-collapse > .panel-body {
|
||||
border-bottom-color: #d6e9c6;
|
||||
}
|
||||
.panel-info {
|
||||
border-color: #bce8f1;
|
||||
}
|
||||
.panel-info > .panel-heading {
|
||||
color: #31708f;
|
||||
background-color: #d9edf7;
|
||||
border-color: #bce8f1;
|
||||
}
|
||||
.panel-info > .panel-heading + .panel-collapse > .panel-body {
|
||||
border-top-color: #bce8f1;
|
||||
}
|
||||
.panel-info > .panel-heading .badge {
|
||||
color: #d9edf7;
|
||||
background-color: #31708f;
|
||||
}
|
||||
.panel-info > .panel-footer + .panel-collapse > .panel-body {
|
||||
border-bottom-color: #bce8f1;
|
||||
}
|
||||
.panel-warning {
|
||||
border-color: #faebcc;
|
||||
}
|
||||
.panel-warning > .panel-heading {
|
||||
color: #8a6d3b;
|
||||
background-color: #fcf8e3;
|
||||
border-color: #faebcc;
|
||||
}
|
||||
.panel-warning > .panel-heading + .panel-collapse > .panel-body {
|
||||
border-top-color: #faebcc;
|
||||
}
|
||||
.panel-warning > .panel-heading .badge {
|
||||
color: #fcf8e3;
|
||||
background-color: #8a6d3b;
|
||||
}
|
||||
.panel-warning > .panel-footer + .panel-collapse > .panel-body {
|
||||
border-bottom-color: #faebcc;
|
||||
}
|
||||
.panel-danger {
|
||||
border-color: #ebccd1;
|
||||
}
|
||||
.panel-danger > .panel-heading {
|
||||
color: #a94442;
|
||||
background-color: #f2dede;
|
||||
border-color: #ebccd1;
|
||||
}
|
||||
.panel-danger > .panel-heading + .panel-collapse > .panel-body {
|
||||
border-top-color: #ebccd1;
|
||||
}
|
||||
.panel-danger > .panel-heading .badge {
|
||||
color: #f2dede;
|
||||
background-color: #a94442;
|
||||
}
|
||||
.panel-danger > .panel-footer + .panel-collapse > .panel-body {
|
||||
border-bottom-color: #ebccd1;
|
||||
}
|
||||
.embed-responsive {
|
||||
position: relative;
|
||||
display: block;
|
||||
@ -5289,8 +4981,6 @@ button.close {
|
||||
.navbar-collapse:after,
|
||||
.pager:before,
|
||||
.pager:after,
|
||||
.panel-body:before,
|
||||
.panel-body:after,
|
||||
.modal-footer:before,
|
||||
.modal-footer:after {
|
||||
display: table;
|
||||
@ -5309,7 +4999,6 @@ button.close {
|
||||
.navbar-header:after,
|
||||
.navbar-collapse:after,
|
||||
.pager:after,
|
||||
.panel-body:after,
|
||||
.modal-footer:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
2
docs/dist/css/bootstrap.css.map
vendored
2
docs/dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap.min.css
vendored
2
docs/dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
1
less/bootstrap.less
vendored
1
less/bootstrap.less
vendored
@ -33,7 +33,6 @@
|
||||
@import "progress-bars.less";
|
||||
@import "media.less";
|
||||
@import "list-group.less";
|
||||
@import "panels.less";
|
||||
@import "responsive-embed.less";
|
||||
@import "close.less";
|
||||
|
||||
|
||||
@ -17,7 +17,6 @@
|
||||
// Components
|
||||
@import "mixins/alerts.less";
|
||||
@import "mixins/buttons.less";
|
||||
@import "mixins/panels.less";
|
||||
@import "mixins/pagination.less";
|
||||
@import "mixins/list-group.less";
|
||||
@import "mixins/nav-divider.less";
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
// Panels
|
||||
|
||||
.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
|
||||
border-color: @border;
|
||||
|
||||
& > .panel-heading {
|
||||
color: @heading-text-color;
|
||||
background-color: @heading-bg-color;
|
||||
border-color: @heading-border;
|
||||
|
||||
+ .panel-collapse > .panel-body {
|
||||
border-top-color: @border;
|
||||
}
|
||||
.badge {
|
||||
color: @heading-bg-color;
|
||||
background-color: @heading-text-color;
|
||||
}
|
||||
}
|
||||
& > .panel-footer {
|
||||
+ .panel-collapse > .panel-body {
|
||||
border-bottom-color: @border;
|
||||
}
|
||||
}
|
||||
}
|
||||
243
less/panels.less
243
less/panels.less
@ -1,243 +0,0 @@
|
||||
//
|
||||
// Panels
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Base class
|
||||
.panel {
|
||||
margin-bottom: @line-height-computed;
|
||||
background-color: @panel-bg;
|
||||
border: 1px solid transparent;
|
||||
border-radius: @panel-border-radius;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.05);
|
||||
}
|
||||
|
||||
// Panel contents
|
||||
.panel-body {
|
||||
padding: @panel-body-padding;
|
||||
&:extend(.clearfix all);
|
||||
}
|
||||
|
||||
// Optional heading
|
||||
.panel-heading {
|
||||
padding: @panel-heading-padding;
|
||||
border-bottom: 1px solid transparent;
|
||||
.border-top-radius((@panel-border-radius - 1));
|
||||
|
||||
> .dropdown .dropdown-toggle {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Within heading, strip any `h*` tag of its default margins for spacing.
|
||||
.panel-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: ceil((@font-size-base * 1.125));
|
||||
color: inherit;
|
||||
|
||||
> a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Optional footer (stays gray in every modifier class)
|
||||
.panel-footer {
|
||||
padding: @panel-footer-padding;
|
||||
background-color: @panel-footer-bg;
|
||||
border-top: 1px solid @panel-inner-border;
|
||||
.border-bottom-radius((@panel-border-radius - 1));
|
||||
}
|
||||
|
||||
|
||||
// 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;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Add border top radius for first one
|
||||
&:first-child {
|
||||
.list-group-item:first-child {
|
||||
border-top: 0;
|
||||
.border-top-radius((@panel-border-radius - 1));
|
||||
}
|
||||
}
|
||||
// Add border bottom radius for last one
|
||||
&:last-child {
|
||||
.list-group-item:last-child {
|
||||
border-bottom: 0;
|
||||
.border-bottom-radius((@panel-border-radius - 1));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Collapse space between when there's no additional content.
|
||||
.panel-heading + .list-group {
|
||||
.list-group-item:first-child {
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
.list-group + .panel-footer {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
// Tables in panels
|
||||
//
|
||||
// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
|
||||
// watch it go full width.
|
||||
|
||||
.panel {
|
||||
> .table,
|
||||
> .table-responsive > .table,
|
||||
> .panel-collapse > .table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
// Add border top radius for first one
|
||||
> .table:first-child,
|
||||
> .table-responsive:first-child > .table:first-child {
|
||||
.border-top-radius((@panel-border-radius - 1));
|
||||
|
||||
> thead:first-child,
|
||||
> tbody:first-child {
|
||||
> tr:first-child {
|
||||
td:first-child,
|
||||
th:first-child {
|
||||
border-top-left-radius: (@panel-border-radius - 1);
|
||||
}
|
||||
td:last-child,
|
||||
th:last-child {
|
||||
border-top-right-radius: (@panel-border-radius - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Add border bottom radius for last one
|
||||
> .table:last-child,
|
||||
> .table-responsive:last-child > .table:last-child {
|
||||
.border-bottom-radius((@panel-border-radius - 1));
|
||||
|
||||
> tbody:last-child,
|
||||
> tfoot:last-child {
|
||||
> tr:last-child {
|
||||
td:first-child,
|
||||
th:first-child {
|
||||
border-bottom-left-radius: (@panel-border-radius - 1);
|
||||
}
|
||||
td:last-child,
|
||||
th:last-child {
|
||||
border-bottom-right-radius: (@panel-border-radius - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .panel-body + .table,
|
||||
> .panel-body + .table-responsive {
|
||||
border-top: 1px solid @table-border-color;
|
||||
}
|
||||
> .table > tbody:first-child > tr:first-child th,
|
||||
> .table > tbody:first-child > tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
> .table-bordered,
|
||||
> .table-responsive > .table-bordered {
|
||||
border: 0;
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th:first-child,
|
||||
> td:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
> th:last-child,
|
||||
> td:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
> thead,
|
||||
> tbody {
|
||||
> tr:first-child {
|
||||
> td,
|
||||
> th {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr:last-child {
|
||||
> td,
|
||||
> th {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .table-responsive {
|
||||
border: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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 {
|
||||
margin-bottom: @line-height-computed;
|
||||
|
||||
// Tighten up margin so it's only between panels
|
||||
.panel {
|
||||
margin-bottom: 0;
|
||||
border-radius: @panel-border-radius;
|
||||
+ .panel {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
border-bottom: 0;
|
||||
+ .panel-collapse > .panel-body {
|
||||
border-top: 1px solid @panel-inner-border;
|
||||
}
|
||||
}
|
||||
.panel-footer {
|
||||
border-top: 0;
|
||||
+ .panel-collapse .panel-body {
|
||||
border-bottom: 1px solid @panel-inner-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Contextual variations
|
||||
.panel-default {
|
||||
.panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
|
||||
}
|
||||
.panel-primary {
|
||||
.panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
|
||||
}
|
||||
.panel-success {
|
||||
.panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
|
||||
}
|
||||
.panel-info {
|
||||
.panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
|
||||
}
|
||||
.panel-warning {
|
||||
.panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
|
||||
}
|
||||
.panel-danger {
|
||||
.panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user