@charset "UTF-8";

/*doc
---
title: List group
name: a-list-group
category: Components - List group
---

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



/*doc
---
title: Badge
name: b-badge
category: Components - List group
---

```html_example
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
  <li class="list-group-item">
    <span class="badge">2</span>
    Dapibus ac facilisis in
  </li>
  <li class="list-group-item">
    <span class="badge">1</span>
    Morbi leo risus
  </li>
</ul>
```
*/



/*doc
---
title: Linked items
name: c-linked-item
category: Components - List group
---

```html_example
<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
```
*/

.list-group-item:hover {
  @include light-hatching();
}

.list-group-item.active, .list-group-item.active:hover {
  @include dark-hatching();
  border: 1px solid $mine;
}



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

```html_example
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
```
*/



/*doc
---
title: Custom content
name: e-custom-content
category: Components - List group
---

```html_example
<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Serpere anguiculos, nare anaticulas.</p>
  </a>
  <li href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Serpere anguiculos, nare anaticulas.</p>
  </li>
  <li href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Serpere anguiculos, nare anaticulas.</p>
  </li>
</div>
```
*/