<commit_before>/* Basic panel component for boxes and bordered containers.

The panel can be used with different content structures.
See the documentation of the child elements for additional information.

```
<div class="panel">
    <h3 class="panel--title">Panel title</h3>
    <div class="panel--body">
        Panel content ...
    </div>
</div>
```
*/
.panel {
    display: block;

    &.has--shadow {
        .box-shadow(0 1px 3px 0 rgba(0, 0, 0, 0.1));
    }

    &.has--border {
        border: 1px solid @borderColor;
    }
}

/* A header box for a panel.

```
<div class="panel--header primary">Panel header</div>
```
*/
.panel--header {
    display: block;
    .unitize-padding(10, 10);
    .unitize(14, 16, font-size);
    font-weight: bold;
    color: @primaryTextColor;
    background: @primaryBackgroundColor;
    border-bottom: 1px solid @borderColor;

    &.secondary {
        color: @lightTextColor;
        background: #fff;
    }

    &.primary {
        color: @primaryColor;
        background: #fff;
    }
}

/* A title heading for a panel.

```
<h3 class="panel--title primary">Panel title</h3>
```
*/
.panel--title {
    display: block;
    .unitize-padding(20, 0, 0, 0);
    .unitize-margin(0, 20);
    .unitize(16, 16, font-size);
    font-weight: bold;
    color: @darkTextColor;

    &.is--underline {
        .unitize-padding(20, 0, 10, 0);
        border-bottom: 1px solid @borderColor;
        text-decoration: none !important;
    }

    &.is--secondary {
        color: @primaryTextColor;
    }

    &.is--primary {
        color: @primaryColor;
    }
}

/* The content body for a panel.

```
<div class="panel--body wide">Panel content ...</div>
```
*/
.panel--body {
    display: block;
    position: relative;
    .unitize-padding(10, 10);
    .unitize(14, 16, font-size);
    .unitize(24, 16, line-height);

    &.has--border {
        border: 1px solid @borderColor;
    }

    &.is--slim {
        .unitize-padding(5, 5);
    }

    &.is--wide {
        .unitize-padding(20, 20);
    }

    &.is--flat {
        background: @primaryBackgroundColor;
    }

    &.is--embossed {
        .box-shadow(inset 0 0 3px 0 rgba(0, 0, 0, 0.2));
        background: @primaryBackgroundColor;
    }
}

/* A container for action elements

```
<div class="panel--actions">
    <a href="#" class="btn">Action Link</a>
    <a href="#" class="btn">Action Link</a>
</div>
```
*/
.panel--actions {
    .unitize-padding(10, 10);
    display: block;

    &.has--border {
        .unitize-margin(10, 0 , 0, 0);
        .unitize-padding(10, 0, 0, 0);
        border-top: 1px solid @borderColor;
    }

    &.is--slim {
        .unitize-padding(5, 5);
    }

    &.is--wide {
        .unitize-padding(20, 20);
    }

    .btn {
        .unitize-margin(0, 10, 0, 0);
    }
}


/* A table in a panel.

```
<div class="panel">
    <table class="panel--table">
        <tr class="primary">
            <th></th>
        </tr>
        <tr class="has--border">
            <td></td>
        </tr>
    </table>
</div>
```
*/
.panel--table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;

    &.has--border {
        border: 1px solid @borderColor;
    }

    th, td {
        .unitize-padding(10, 10);
        .unitize(14, 16, font-size);
        .unitize(24, 16, line-height);
        border-width: 0 0 1px 0;
        border-style: solid;
        border-color: @borderColor;
    }

    th {
        font-weight: bold;
        text-align: left;
        color: #38434e;
        background: @primaryBackgroundColor;
    }

    tr.is--secondary {
        th {
            background: #fff;
        }
        td {
            background: @primaryBackgroundColor;
        }
    }

    tr.is--primary {
        th, td {
            background: #fff;
        }
    }

    tr.has--border {
        th, td {
            border-width: 0 1px 1px 0;
        }
        th:last-child,
        td:last-child {
            border-width: 0 0 1px 0;
        }
    }

    tr:last-child {
        td {
            border-bottom: 0 none;
        }
    }
}

/* A list in a panel.

```
<div class="panel">
    <ul class="panel--list">
        <li></li>
        <li class="secondary"></li>
        <li class="primary"></li>
    </ul>
</div>
```
*/
.panel--list {
    list-style: none;

    &.has--border {
        border: 1px solid @borderColor;
    }

    li {
        .unitize-padding(10, 10);
        .unitize(14, 16, font-size);
        .unitize(24, 16, line-height);
        border-bottom: 1px solid @borderColor;

        &:last-child {
            border-bottom: 0 none;
        }

        &.is--secondary {
            background: @primaryBackgroundColor;
        }

        &.is--primary {
            color: @primaryColor;
        }
    }
}

/* Arrow buttons for example for a slider panel.

```
<div class="panel--body">
    <a href="" class="panel--arrow left"></a>
    <a href="" class="panel--arrow right"></a>
</div>
```
*/
.panel--arrow {
    .unitize-width(22);
    .unitize-height(30);
    .unitize(-15, 16, margin-top);
    .unitize(28, 16, line-height);
    .unitize(12, 16, font-size);
    display: none;
    position: absolute;
    top: 50%;
    z-index: 90;
    font-family: 'shopware';
    text-align: center;
    color: @primaryTextColor;

    &.has--background {
        .border-radius(3px);
        .linear-gradient(#ffffff, #edeff2);
        border: 1px solid @borderColor;
    }

    &.left--arrow {
        .unitize(10, 16, left);

        &::before {
            content: "\e611";
        }
    }

    &.right--arrow {
        .unitize(10, 16, right);

        &:before {
            content: "\e60f";
        }
    }

    &:hover {
        color: @primaryColor;
    }
}

/* A small dot navigation for example for a slider panel.

```
<div class="panel--dot-nav">
    <a href=""></a>
    <a href="" class="is--active"></a>
    <a href=""></a>
</div>
```
*/
.panel--dot-nav {
	.unitize(12, 16, bottom);
    position: absolute;

    a {
        .unitize-variable(21, 16);
        .border-radius(11px);
        .unitize-margin(0, 5);
        .unitize-width(11);
        .unitize-height(11);
        display: inline-block;
        border: 1px solid @borderColor;

        &.is--active {
            border-color: @primaryColor;
            background: @primaryColor;
        }
    }
}

/* A tab navigation for a tab-content panel.

```
<div class="panel">
    <ul class="panel--tab-nav">
        <li><a href="" class="is--active"></a></li>
        <li><a href=""></a></li>
    </ul>
    <div class="panel--body has--border">
        <div class="panel--tab-content is--active"></div>
        <div class="panel--tab-content"></div>
    </div>
</div>
```
*/
.panel--tab-nav {
    list-style: none;

    .navigation--entry {
        display: inline-block;
    }

    .navigation--link {
        .unitize-padding(10, 15);
        .unitize-margin(0, 5, 0, 0);
        .unitize(24, 16, line-height);
        .unitize(14, 16, font-size);
        .linear-gradient(#ffffff, #eff0f3);
        .border-radius-multi(3px, 3px, 0, 0);
        display: block;
        position: relative;
        z-index: 90;
        font-weight: bold;
        text-align: center;
        color: #748595;
        border-width: 1px 1px 0 1px;
        border-style: solid;
        border-color: @borderColor;

        &.is--active {
            .unitize(1, 16, top);
            color: @darkTextColor;
            background: #fff;

            &:hover {
                color: @darkTextColor;
            }
        }

        &:hover {
            color: @primaryColor;
            background: #fff;
        }
    }
}

/* A content box for a tab-content panel.

```
<div class="panel">
    <ul class="panel--tab-nav">
        <li><a href="" class="is--active"></a></li>
        <li><a href=""></a></li>
    </ul>
    <div class="panel--body has--border">
        <div class="panel--tab-content is--active"></div>
        <div class="panel--tab-content"></div>
    </div>
</div>
```
*/
.panel--tab-content {
    display: none;
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;

    &.is--active {
        display: block;
        z-index: 11;
    }
}

/* A paging navigation for pagination content.

```
<div class="panel--paging">
    <a href=""><i class="icon--arrow-left"></i></a>
    <a href="">1</a>
    <a href="">2</a>
    <a href="">...</a>
    <a href=""><i class="icon--arrow-right"></i></a>
</div>
```
*/
.panel--paging {
    display: inline-block;

    a {
        display: inline-block;
        color: @primaryTextColor;
        font-weight: normal;
        text-align: center;
        border: 1px solid #c7cfda;
        .unitize-padding(0, 10);
        .unitize-margin(0, 1);
        .unitize(14, 16, font-size);
        .unitize(26, 16, line-height);
        .border-radius(3px);
        .linear-gradient(#ffffff, #edeff2);
        .box-shadow(0 1px 1px 0 rgba(0, 0, 0, 0.05));

        i {
            .unitize(10, 16, font-size);
        }

        &:hover {
            color: @darkTextColor;
        }
    }
}

/* A btn for filter options in a filter action panel.

```
<a href="" class="panel--filter-btn">
  <i class="icon--numbered-list"></i> Weitere Filtermöglichkeiten
</a>
```
*/
.panel--filter-btn {
    display: inline-block;
    color: @primaryTextColor;
    font-weight: normal;
    text-align: center;
    border: 1px solid #c7cfda;
    .unitize-padding(0, 10);
    .unitize-margin(0, 10);
    .unitize(14, 16, font-size);
    .unitize(26, 16, line-height);
    .border-radius(3px);
    .linear-gradient(#ffffff, #edeff2);
    .box-shadow(0 1px 1px 0 rgba(0, 0, 0, 0.05));

    i {
        .unitize-margin(0, 10, 0, 0);
        .unitize(10, 16, font-size);
    }

    &:hover {
        color: @primaryColor;
    }
}

/* A combobox for a filter selection.

```
<div class="panel--filter-select">
    <span class="arrow"></span>
    <select name="selection" size="1">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</div>
```
*/
.panel--filter-select {
    display: inline-block;
    vertical-align: bottom;
    position: relative;
    border: 1px solid #c7cfda;
    overflow: hidden;
    .unitize-width(160);
    .unitize-height(28);
    .unitize(14, 16, font-size);
    .unitize(26, 16, line-height);
    .border-radius(3px);
    .box-sizing();
    .box-shadow(0 1px 1px 0 rgba(0, 0, 0, 0.05));
    .linear-gradient(#ffffff, #edeff2);

    .arrow {
        .unitize-width(34);
        .unitize(6, 16, font-size);
        .unitize(28, 16, line-height);
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        border-left: 1px solid @borderColor;
        font-family: 'shopware';
        text-align: center;

        &::before {
            content: "\e612";
        }
    }

    select {
        .unitize-width(180);
        .unitize-padding(0, 0, 0, 10);
        .unitize(14, 16, font-size);
        .unitize(26, 16, line-height);
        .appearance(none);
        color: @primaryTextColor;
        background: transparent;
        border: 0 none;
    }

    option {
        .unitize-padding(0, 10);
        display: block;
        border: 0 none;
        background: #fff;
    }
}

.js--mobile-tab-panel {
    .tab--content { display: none; }
    .navigation--entry {
        .unitize-margin(0, 0, 6, 0);
        display: block;

        & > [class^=content] {
            .unitize-padding(10, 10);
            border: 1px solid @borderColor;
            border-top: 0 none;
        }
    }

    .navigation--link {
        .unitize-padding(5, 10, 5, 10);
        text-align: left;
        font-weight: normal;
        border: 1px solid @borderColor;
        margin: 0;

        &::after {
            .unitize(16, 16, font-size);
            .unitize(8, 16, right);
            content: '+';
            position: absolute;
            font-weight: bold;
        }

        &.is--active { top: 0; cursor: default }
        &.is--active::after {
            content: '-';
        }
    }
}
<commit_msg>SW-7869 Added panel actions element<commit_after>/* Basic panel component for boxes and bordered containers.

The panel can be used with different content structures.
See the documentation of the child elements for additional information.

```
<div class="panel">
    <h3 class="panel--title">Panel title</h3>
    <div class="panel--body">
        Panel content ...
    </div>
</div>
```
*/
.panel {
    display: block;

    &.has--shadow {
        .box-shadow(0 1px 3px 0 rgba(0, 0, 0, 0.1));
    }

    &.has--border {
        border: 1px solid @borderColor;
    }
}

/* A header box for a panel.

```
<div class="panel--header primary">Panel header</div>
```
*/
.panel--header {
    display: block;
    .unitize-padding(10, 10);
    .unitize(14, 16, font-size);
    font-weight: bold;
    color: @primaryTextColor;
    background: @primaryBackgroundColor;
    border-bottom: 1px solid @borderColor;

    &.secondary {
        color: @lightTextColor;
        background: #fff;
    }

    &.primary {
        color: @primaryColor;
        background: #fff;
    }
}

/* A title heading for a panel.

```
<h3 class="panel--title primary">Panel title</h3>
```
*/
.panel--title {
    display: block;
    .unitize-padding(20, 0, 0, 0);
    .unitize-margin(0, 20);
    .unitize(16, 16, font-size);
    font-weight: bold;
    color: @darkTextColor;

    &.is--underline {
        .unitize-padding(20, 0, 10, 0);
        border-bottom: 1px solid @borderColor;
        text-decoration: none !important;
    }

    &.is--secondary {
        color: @primaryTextColor;
    }

    &.is--primary {
        color: @primaryColor;
    }
}

/* The content body for a panel.

```
<div class="panel--body wide">Panel content ...</div>
```
*/
.panel--body {
    display: block;
    position: relative;
    .unitize-padding(10, 10);
    .unitize(14, 16, font-size);
    .unitize(24, 16, line-height);

    &.has--border {
        border: 1px solid @borderColor;
    }

    &.is--slim {
        .unitize-padding(5, 5);
    }

    &.is--wide {
        .unitize-padding(20, 20);
    }

    &.is--flat {
        background: @primaryBackgroundColor;
    }

    &.is--embossed {
        .box-shadow(inset 0 0 3px 0 rgba(0, 0, 0, 0.2));
        background: @primaryBackgroundColor;
    }
}

/* A container for action elements

```
<div class="panel--actions">
    <a href="#" class="btn">Action Link</a>
    <a href="#" class="btn">Action Link</a>
</div>
```
*/
.panel--actions {
    .unitize-padding(10, 10);
    .unitize(40, 16, line-height);
    display: block;

    &.has--border {
        .unitize-margin(10, 0 , 0, 0);
        .unitize-padding(10, 0, 0, 0);
        border-top: 1px solid @borderColor;
    }

    &.is--slim {
        .unitize-padding(5, 5);
    }

    &.is--wide {
        .unitize-padding(20, 20);
    }

    .btn {
        .unitize-margin(0, 10, 0, 0);
    }
}


/* A table in a panel.

```
<div class="panel">
    <table class="panel--table">
        <tr class="primary">
            <th></th>
        </tr>
        <tr class="has--border">
            <td></td>
        </tr>
    </table>
</div>
```
*/
.panel--table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;

    &.has--border {
        border: 1px solid @borderColor;
    }

    th, td {
        .unitize-padding(10, 10);
        .unitize(14, 16, font-size);
        .unitize(24, 16, line-height);
        border-width: 0 0 1px 0;
        border-style: solid;
        border-color: @borderColor;
    }

    th {
        font-weight: bold;
        text-align: left;
        color: #38434e;
        background: @primaryBackgroundColor;
    }

    tr.is--secondary {
        th {
            background: #fff;
        }
        td {
            background: @primaryBackgroundColor;
        }
    }

    tr.is--primary {
        th, td {
            background: #fff;
        }
    }

    tr.has--border {
        th, td {
            border-width: 0 1px 1px 0;
        }
        th:last-child,
        td:last-child {
            border-width: 0 0 1px 0;
        }
    }

    tr:last-child {
        td {
            border-bottom: 0 none;
        }
    }
}

/* A list in a panel.

```
<div class="panel">
    <ul class="panel--list">
        <li></li>
        <li class="secondary"></li>
        <li class="primary"></li>
    </ul>
</div>
```
*/
.panel--list {
    list-style: none;

    &.has--border {
        border: 1px solid @borderColor;
    }

    li {
        .unitize-padding(10, 10);
        .unitize(14, 16, font-size);
        .unitize(24, 16, line-height);
        border-bottom: 1px solid @borderColor;

        &:last-child {
            border-bottom: 0 none;
        }

        &.is--secondary {
            background: @primaryBackgroundColor;
        }

        &.is--primary {
            color: @primaryColor;
        }
    }
}

/* Arrow buttons for example for a slider panel.

```
<div class="panel--body">
    <a href="" class="panel--arrow left"></a>
    <a href="" class="panel--arrow right"></a>
</div>
```
*/
.panel--arrow {
    .unitize-width(22);
    .unitize-height(30);
    .unitize(-15, 16, margin-top);
    .unitize(28, 16, line-height);
    .unitize(12, 16, font-size);
    display: none;
    position: absolute;
    top: 50%;
    z-index: 90;
    font-family: 'shopware';
    text-align: center;
    color: @primaryTextColor;

    &.has--background {
        .border-radius(3px);
        .linear-gradient(#ffffff, #edeff2);
        border: 1px solid @borderColor;
    }

    &.left--arrow {
        .unitize(10, 16, left);

        &::before {
            content: "\e611";
        }
    }

    &.right--arrow {
        .unitize(10, 16, right);

        &:before {
            content: "\e60f";
        }
    }

    &:hover {
        color: @primaryColor;
    }
}

/* A small dot navigation for example for a slider panel.

```
<div class="panel--dot-nav">
    <a href=""></a>
    <a href="" class="is--active"></a>
    <a href=""></a>
</div>
```
*/
.panel--dot-nav {
	.unitize(12, 16, bottom);
    position: absolute;

    a {
        .unitize-variable(21, 16);
        .border-radius(11px);
        .unitize-margin(0, 5);
        .unitize-width(11);
        .unitize-height(11);
        display: inline-block;
        border: 1px solid @borderColor;

        &.is--active {
            border-color: @primaryColor;
            background: @primaryColor;
        }
    }
}

/* A tab navigation for a tab-content panel.

```
<div class="panel">
    <ul class="panel--tab-nav">
        <li><a href="" class="is--active"></a></li>
        <li><a href=""></a></li>
    </ul>
    <div class="panel--body has--border">
        <div class="panel--tab-content is--active"></div>
        <div class="panel--tab-content"></div>
    </div>
</div>
```
*/
.panel--tab-nav {
    list-style: none;

    .navigation--entry {
        display: inline-block;
    }

    .navigation--link {
        .unitize-padding(10, 15);
        .unitize-margin(0, 5, 0, 0);
        .unitize(24, 16, line-height);
        .unitize(14, 16, font-size);
        .linear-gradient(#ffffff, #eff0f3);
        .border-radius-multi(3px, 3px, 0, 0);
        display: block;
        position: relative;
        z-index: 90;
        font-weight: bold;
        text-align: center;
        color: #748595;
        border-width: 1px 1px 0 1px;
        border-style: solid;
        border-color: @borderColor;

        &.is--active {
            .unitize(1, 16, top);
            color: @darkTextColor;
            background: #fff;

            &:hover {
                color: @darkTextColor;
            }
        }

        &:hover {
            color: @primaryColor;
            background: #fff;
        }
    }
}

/* A content box for a tab-content panel.

```
<div class="panel">
    <ul class="panel--tab-nav">
        <li><a href="" class="is--active"></a></li>
        <li><a href=""></a></li>
    </ul>
    <div class="panel--body has--border">
        <div class="panel--tab-content is--active"></div>
        <div class="panel--tab-content"></div>
    </div>
</div>
```
*/
.panel--tab-content {
    display: none;
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;

    &.is--active {
        display: block;
        z-index: 11;
    }
}

/* A paging navigation for pagination content.

```
<div class="panel--paging">
    <a href=""><i class="icon--arrow-left"></i></a>
    <a href="">1</a>
    <a href="">2</a>
    <a href="">...</a>
    <a href=""><i class="icon--arrow-right"></i></a>
</div>
```
*/
.panel--paging {
    display: inline-block;

    a {
        display: inline-block;
        color: @primaryTextColor;
        font-weight: normal;
        text-align: center;
        border: 1px solid #c7cfda;
        .unitize-padding(0, 10);
        .unitize-margin(0, 1);
        .unitize(14, 16, font-size);
        .unitize(26, 16, line-height);
        .border-radius(3px);
        .linear-gradient(#ffffff, #edeff2);
        .box-shadow(0 1px 1px 0 rgba(0, 0, 0, 0.05));

        i {
            .unitize(10, 16, font-size);
        }

        &:hover {
            color: @darkTextColor;
        }
    }
}

/* A btn for filter options in a filter action panel.

```
<a href="" class="panel--filter-btn">
  <i class="icon--numbered-list"></i> Weitere Filtermöglichkeiten
</a>
```
*/
.panel--filter-btn {
    display: inline-block;
    color: @primaryTextColor;
    font-weight: normal;
    text-align: center;
    border: 1px solid #c7cfda;
    .unitize-padding(0, 10);
    .unitize-margin(0, 10);
    .unitize(14, 16, font-size);
    .unitize(26, 16, line-height);
    .border-radius(3px);
    .linear-gradient(#ffffff, #edeff2);
    .box-shadow(0 1px 1px 0 rgba(0, 0, 0, 0.05));

    i {
        .unitize-margin(0, 10, 0, 0);
        .unitize(10, 16, font-size);
    }

    &:hover {
        color: @primaryColor;
    }
}

/* A combobox for a filter selection.

```
<div class="panel--filter-select">
    <span class="arrow"></span>
    <select name="selection" size="1">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</div>
```
*/
.panel--filter-select {
    display: inline-block;
    vertical-align: bottom;
    position: relative;
    border: 1px solid #c7cfda;
    overflow: hidden;
    .unitize-width(160);
    .unitize-height(28);
    .unitize(14, 16, font-size);
    .unitize(26, 16, line-height);
    .border-radius(3px);
    .box-sizing();
    .box-shadow(0 1px 1px 0 rgba(0, 0, 0, 0.05));
    .linear-gradient(#ffffff, #edeff2);

    .arrow {
        .unitize-width(34);
        .unitize(6, 16, font-size);
        .unitize(28, 16, line-height);
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        border-left: 1px solid @borderColor;
        font-family: 'shopware';
        text-align: center;

        &::before {
            content: "\e612";
        }
    }

    select {
        .unitize-width(180);
        .unitize-padding(0, 0, 0, 10);
        .unitize(14, 16, font-size);
        .unitize(26, 16, line-height);
        .appearance(none);
        color: @primaryTextColor;
        background: transparent;
        border: 0 none;
    }

    option {
        .unitize-padding(0, 10);
        display: block;
        border: 0 none;
        background: #fff;
    }
}

.js--mobile-tab-panel {
    .tab--content { display: none; }
    .navigation--entry {
        .unitize-margin(0, 0, 6, 0);
        display: block;

        & > [class^=content] {
            .unitize-padding(10, 10);
            border: 1px solid @borderColor;
            border-top: 0 none;
        }
    }

    .navigation--link {
        .unitize-padding(5, 10, 5, 10);
        text-align: left;
        font-weight: normal;
        border: 1px solid @borderColor;
        margin: 0;

        &::after {
            .unitize(16, 16, font-size);
            .unitize(8, 16, right);
            content: '+';
            position: absolute;
            font-weight: bold;
        }

        &.is--active { top: 0; cursor: default }
        &.is--active::after {
            content: '-';
        }
    }
}

{'fraction_non_alphanumeric': 0.1731698253437384, 'fraction_numerical': 0.033775135224410585, 'mean_word_length': 1.7721185761703102, 'pattern_counts': {'":': 0, '<': 247, '<?xml version=': 0, '>': 249, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3407074', 'n_tokens_mistral': 9052, 'n_tokens_neox': 8217, 'n_words': 1835}