<commit_before>/*doc
---
title: Action Bar
name: action-bar
category: Components
---

A bar with items that trigger actions. Use this widget to provide a
consistent interface for actions like edit, delete, report, print, and share.
It is typically located at the top of a larger widget, e.g. a proposal detail.

Elements of the action bar are called action bar items (`action-bar-item`).
They can have the `m-selected` modifier.

An action can trigger showing a modal below the action bar.

```html_example
<div class="action-bar">
    <a class="action-bar-item">edit</a>
    <a class="action-bar-item m-selected">delete</a>
    <a class="action-bar-item">report</a>
</div>
<div class="modal">
    <form>
        <input type="text" />
        <input type="submit" class="button-cta" />
    </form>
</div>
```

```html_example
<div class="action-bar">
    <a class="action-bar-item">edit</a>
    <a class="action-bar-item">delete</a>
    <a class="action-bar-item">report</a>
</div>
<div class="action-bar">
    <a class="action-bar-item">edit</a>
    <a class="action-bar-item">delete</a>
    <a class="action-bar-item">report</a>
</div>
<div class="action-bar">
</div>
<div class="action-bar">
    <a class="action-bar-item">edit</a>
    <a class="action-bar-item">delete</a>
    <a class="action-bar-item">report</a>
    <a class="action-bar-item">edit</a>
    <a class="action-bar-item">delete</a>
    <a class="action-bar-item">report</a>
    <a class="action-bar-item">edit</a>
    <a class="action-bar-item">delete</a>
    <a class="action-bar-item">report</a>
    <a class="action-bar-item">edit</a>
    <a class="action-bar-item">delete</a>
    <a class="action-bar-item">report</a>
    <a class="action-bar-item">edit</a>
    <a class="action-bar-item">delete</a>
    <a class="action-bar-item">report</a>
</div>
```
*/
.action-bar,
.action-bar-item {
    line-height: 2;
}

.action-bar-item {
    @include rem(margin-right, 2rem);
    display: inline-block;
    position: relative;
    text-decoration: none;

    &.m-selected:after {
        @include rem(border-left, 5px solid transparent);
        @include rem(border-right, 5px solid transparent);
        @include rem(border-bottom, 5px solid $color-background-base);
        @include rem(margin-right, -2.5px);
        bottom: 0;
        content: "";
        display: block;
        height: 0;
        position: absolute;
        right: 50%;
        width: 0;
    }
}

.action-bar {
    @include rem(font-size, $font-size-small);
    @include rem(padding, 0 $padding);
    @include clearfix;
    overflow: visible;
    background: $color-structure-normal;
    margin-bottom: 1px;

    .map-switch {
        float: right;
    }

    .map-switch-item {
        @include rem(margin, 0 0 0 5px);

        &.m-selected {
            &:after {
                @include rem(margin-right, -4.5px);
            }
        }
    }

    @media print {
        display: none;
    }
}

/*doc
---
title: Modal
name: modal
category: Components
---

A modal contains optional interaction (e.g. a form) that is hidden by default
and will only show up if triggered by an user action.

Modals are displayed below the element where they were triggered. They should
open/close with a sliding animation.

```html_example
<div class="action-bar">
    <a class="action-bar-item">edit</a>
    <a class="action-bar-item m-selected">delete</a>
    <a class="action-bar-item">report</a>
</div>
<div class="modal">
    <form>
        <input type="text" />
        <input type="submit" class="button-cta" />
    </form>
</div>
```
*/
.modal {
    border-bottom: 2px solid $color-structure-normal;
    padding: $padding;
}

/*doc
---
title: Alerts
name: alerts
parent: modal
---

A list of alert messages to notify users of the result of a modal action.

The messages are informational by default, but can have the modifieres
`m-error` and `m-success`.

```html_example
<ul class="alerts" style="position: static">
    <li class="alerts-message">Info</li>
    <li class="alerts-message m-error">Error</li>
    <li class="alerts-message m-success">Success</li>
</ul>
```
*/
.alerts {
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 3;

    @media print {
        display: none;
    }
}

.alerts-message {
    @include rem(padding, $padding);
    background: $color-function-neutral;
    color: $color-text-normal;
    text-align: center;
    margin-bottom: 0.5em;

    &.m-error {
        background: $color-function-negative;
        color: $color-text-inverted;
    }

    &.m-success {
        background: $color-function-positive;
    }
}
<commit_msg>Revert "(unrelated) stop action bars from overflowing"<commit_after>/*doc
---
title: Action Bar
name: action-bar
category: Components
---

A bar with items that trigger actions. Use this widget to provide a
consistent interface for actions like edit, delete, report, print, and share.
It is typically located at the top of a larger widget, e.g. a proposal detail.

Elements of the action bar are called action bar items (`action-bar-item`).
They can have the `m-selected` modifier.

An action can trigger showing a modal below the action bar.

```html_example
<div class="action-bar">
    <a class="action-bar-item">edit</a>
    <a class="action-bar-item m-selected">delete</a>
    <a class="action-bar-item">report</a>
</div>
<div class="modal">
    <form>
        <input type="text" />
        <input type="submit" class="button-cta" />
    </form>
</div>
```

```html_example
<div class="action-bar">
    <a class="action-bar-item">edit</a>
    <a class="action-bar-item">delete</a>
    <a class="action-bar-item">report</a>
</div>
<div class="action-bar">
    <a class="action-bar-item">edit</a>
    <a class="action-bar-item">delete</a>
    <a class="action-bar-item">report</a>
</div>
<div class="action-bar">
</div>
<div class="action-bar">
    <a class="action-bar-item">edit</a>
    <a class="action-bar-item">delete</a>
    <a class="action-bar-item">report</a>
    <a class="action-bar-item">edit</a>
    <a class="action-bar-item">delete</a>
    <a class="action-bar-item">report</a>
    <a class="action-bar-item">edit</a>
    <a class="action-bar-item">delete</a>
    <a class="action-bar-item">report</a>
    <a class="action-bar-item">edit</a>
    <a class="action-bar-item">delete</a>
    <a class="action-bar-item">report</a>
    <a class="action-bar-item">edit</a>
    <a class="action-bar-item">delete</a>
    <a class="action-bar-item">report</a>
</div>
```
*/
.action-bar,
.action-bar-item {
    line-height: 2;
}

.action-bar-item {
    @include rem(margin-right, 2rem);
    display: inline-block;
    position: relative;
    text-decoration: none;

    &.m-selected:after {
        @include rem(border-left, 5px solid transparent);
        @include rem(border-right, 5px solid transparent);
        @include rem(border-bottom, 5px solid $color-background-base);
        @include rem(margin-right, -2.5px);
        bottom: 0;
        content: "";
        display: block;
        height: 0;
        position: absolute;
        right: 50%;
        width: 0;
    }
}

.action-bar {
    @include rem(font-size, $font-size-small);
    @include rem(padding, 0 $padding);
    @include clearfix;
    background: $color-structure-normal;
    margin-bottom: 1px;

    .map-switch {
        float: right;
    }

    .map-switch-item {
        @include rem(margin, 0 0 0 5px);

        &.m-selected {
            &:after {
                @include rem(margin-right, -4.5px);
            }
        }
    }

    @media print {
        display: none;
    }
}

/*doc
---
title: Modal
name: modal
category: Components
---

A modal contains optional interaction (e.g. a form) that is hidden by default
and will only show up if triggered by an user action.

Modals are displayed below the element where they were triggered. They should
open/close with a sliding animation.

```html_example
<div class="action-bar">
    <a class="action-bar-item">edit</a>
    <a class="action-bar-item m-selected">delete</a>
    <a class="action-bar-item">report</a>
</div>
<div class="modal">
    <form>
        <input type="text" />
        <input type="submit" class="button-cta" />
    </form>
</div>
```
*/
.modal {
    border-bottom: 2px solid $color-structure-normal;
    padding: $padding;
}

/*doc
---
title: Alerts
name: alerts
parent: modal
---

A list of alert messages to notify users of the result of a modal action.

The messages are informational by default, but can have the modifieres
`m-error` and `m-success`.

```html_example
<ul class="alerts" style="position: static">
    <li class="alerts-message">Info</li>
    <li class="alerts-message m-error">Error</li>
    <li class="alerts-message m-success">Success</li>
</ul>
```
*/
.alerts {
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 3;

    @media print {
        display: none;
    }
}

.alerts-message {
    @include rem(padding, $padding);
    background: $color-function-neutral;
    color: $color-text-normal;
    text-align: center;
    margin-bottom: 0.5em;

    &.m-error {
        background: $color-function-negative;
        color: $color-text-inverted;
    }

    &.m-success {
        background: $color-function-positive;
    }
}

{'fraction_non_alphanumeric': 0.1657638136511376, 'fraction_numerical': 0.005633802816901409, 'mean_word_length': 2.8414481897627963, 'pattern_counts': {'":': 0, '<': 175, '<?xml version=': 0, '>': 175, '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': '264344', 'n_tokens_mistral': 3188, 'n_tokens_neox': 3097, 'n_words': 786}