@atlassian/aui/src/less/aui-lozenge.less

Atlassian User Interface library

@import (reference) './imports/global';

/*! AUI Lozenge */

/*
Internal only. This will be removed in the future,
when ADG will provide explicit tokens for borders.
*/
#aui-themes.when-light-mode({
    --aui-lozenge-border-l-factor: 1.33;
});

#aui-themes.when-dark-mode({
    --aui-lozenge-border-l-factor: 0.7;
});

.aui-lozenge {
    background: var(--aui-lozenge-bg-color);
    border-width: @aui-border-width;
    border-style: @aui-border-type;
    border-color: var(--aui-lozenge-border-color);
    border-radius: var(--ds-radius-small, 4px);
    color: var(--aui-lozenge-text-color);
    display: inline-block;
    font: var(--ds-font-body-small);
    line-height: 1;
    margin: 0;
    padding: var(--ds-space-025, 2px) var(--ds-space-050, 4px);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    &.aui-lozenge-subtle {
        background-color: var(--aui-lozenge-subtle-bg-color);
        border-color: var(--aui-lozenge-subtle-border-color);
        color: var(--aui-lozenge-subtle-text-color);
    }
}

.aui-lozenge-success {
    background-color: var(--aui-lozenge-success-bg-color);
    border-color: var(--aui-lozenge-success-border-color);
    color: var(--aui-lozenge-success-text-color);

    &.aui-lozenge-subtle {
        background-color: var(--aui-lozenge-success-subtle-bg-color);
        border-color: var(--aui-lozenge-success-subtle-border-color);
        color: var(--aui-lozenge-success-subtle-text-color);
    }
}

.aui-lozenge-error,
.aui-lozenge-removed {
    background-color: var(--aui-lozenge-error-bg-color);
    border-color: var(--aui-lozenge-error-border-color);
    color: var(--aui-lozenge-error-text-color);

    &.aui-lozenge-subtle {
        background-color: var(--aui-lozenge-error-subtle-bg-color);
        border-color: var(--aui-lozenge-error-subtle-border-color);
        color: var(--aui-lozenge-error-subtle-text-color);
    }
}

.aui-lozenge-current,
.aui-lozenge-inprogress {
    background-color: var(--aui-lozenge-current-bg-color);
    border-color: var(--aui-lozenge-current-border-color);
    color: var(--aui-lozenge-current-text-color);

    &.aui-lozenge-subtle {
        background-color: var(--aui-lozenge-current-subtle-bg-color);
        border-color: var(--aui-lozenge-current-subtle-border-color);
        color: var(--aui-lozenge-current-subtle-text-color);
    }
}

.aui-lozenge-complete,
.aui-lozenge-new {
    background-color: var(--aui-lozenge-new-bg-color);
    border-color: var(--aui-lozenge-new-border-color);
    color: var(--aui-lozenge-new-text-color);

    &.aui-lozenge-subtle {
        background-color: var(--aui-lozenge-new-subtle-bg-color);
        border-color: var(--aui-lozenge-new-subtle-border-color);
        color: var(--aui-lozenge-new-subtle-text-color);
    }
}
.aui-lozenge-moved {
    background-color: var(--aui-lozenge-moved-bg-color);
    border-color: var(--aui-lozenge-moved-border-color);
    color: var(--aui-lozenge-moved-text-color);

    &.aui-lozenge-subtle {
        background-color: var(--aui-lozenge-moved-subtle-bg-color);
        border-color: var(--aui-lozenge-moved-subtle-border-color);
        color: var(--aui-lozenge-moved-subtle-text-color);
    }
}