@charset "UTF-8";

/*doc
---
title: Basic panel
name: a-panel
category: Components - Panels
---

```html_example
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>
```
*/



/*doc
---
title: Panel with heading
name: b-panel-heading
category: Components - Panels
---

```html_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>
```
*/

.panel {
  border-color: $silver !important;
}

.panel-heading {
  @include light-hatching();
  background-color: #f9f9f9 !important;
  color: $mine !important;
  border-color: $silver !important;
}

/*doc
---
title: Panel with footer
name: c-panel-footer
category: Components - Panels
---

```html_example
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>
```
*/

.panel-footer {
  @include light-hatching();
}

/*doc
---
title: Contextual
name: d-contextual
category: Components - Panels
---

```html_example
<div class="panel panel-primary">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-success">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-info">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-warning">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-danger">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>
```
*/



/*doc
---
title: Panel with table
name: e-panel-table
category: Components - Panels
---

```html_example
<div class="panel panel-default">
  <div class="panel-heading">Panel heading</div>
  <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>
```
*/



/*doc
---
title: Panel with list
name: f-panel-list
category: Components - Panels
---

```html_example
<div class="panel panel-default">
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid igitur, inquit, eos responsuros putas? Sed residamus.</p>
  </div>
  <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>
```
*/