/*doc
---
title: Listing
name: listing
category: Widgets
---

A Listing represents a list of elements that may be filtered and/or sorted.
It is generic because it can be used with very different kinds of elements.

Apart from the list of elements the listing optionally contains
a form for creating new elements. This form is then always visible.

```html_example
<div class="listing">
    <form class="listing-create-form placeholder">
        Create Form
    </form>
    <ol class="listing-elements">
        <li class="listing-element placeholder">Element1</li>
        <li class="listing-element placeholder">Element2</li>
    </ol>
</div>
```
*/
.listing-elements {
    margin: 0;
    padding: 0;
    list-style: none;
}

// starting animations
.listing-element {
    &.ng-enter {
        @include transition(all 3s);
        background: greenyellow;
        @include opacity(0.5);

        // destination animations
        &.ng-enter-active {
            background: white;
            @include opacity(1);
        }
    }
}

.listing-create-form {
    background-color: $color-structure-surface;
    padding: 0.5em;
    margin-left: -0.5em;
    margin-right: -0.5em;
    margin-bottom: 2em;
}

/*doc
---
title: Listing
name: listing
category: Widgets
---

A Listing represents a list of elements that may be filtered and/or sorted.
It is generic because it can be used with very different kinds of elements.

Apart from the list of elements the listing optionally contains
a form for creating new elements. This form is then always visible.

```html_example
<div class="listing">
    <form class="listing-create-form placeholder">
        Create Form
    </form>
    <ol class="listing-elements">
        <li class="listing-element placeholder">Element1</li>
        <li class="listing-element placeholder">Element2</li>
    </ol>
</div>
```
*/
.listing-elements {
    margin: 0;
    padding: 0;
    list-style: none;
}

// starting animations
.listing-element {
    &.ng-enter {
        @include transition(all 3s);
        background: greenyellow;
        @include opacity(0.5);

        // destination animations
        &.ng-enter-active {
            background: white;
            @include opacity(1);
        }
    }
}

.listing-create-form {
    background-color: $color-structure-surface;
    padding: 0.5em;
    margin-bottom: 2em;
}

Remove listing margins from create form
Remove listing margins from create form

The hereby removed margins caused the form to stand out of it actual
size.

This causes scrollbars if such a form is to be embedded.

As the design isn't final anyway, this simply removes the margins.
