@taiga-ui/core/styles/components/notification.less

Core library for creating Angular components and applications using Taiga UI

@import '@taiga-ui/core/styles/taiga-ui-local.less';

/**
 * @name Notification
 * @selector tui-notification, [tuiNotification]
 *
 * @description
 * A colored rounded block of information with optional icon, title, subtitle and actions
 *
 * @attributes
 * data-size — size (default: 'l') ('s' | 'm' | 'l')
 *
 * @example
 * <tui-notification tuiAppearance data-appearance="negative">
 *   <span tuiTitle>
 *     Error
 *     <span tuiSubtitle>Something went wrong</span>
 *   </span>
 * </tui-notification>
 *
 * @see-also
 * Icons, Appearance
 */
tui-notification,
[tuiNotification] {
    .button-clear();

    position: relative;
    display: block;
    max-block-size: 100%;
    color: var(--tui-text-primary);
    padding: 1rem;
    font: var(--tui-font-text-m);
    line-height: 1.5rem;
    border-radius: var(--tui-radius-l);
    box-sizing: border-box;
    text-align: start;
    text-decoration: none;
    border-inline-start: var(--t-start) solid transparent;
    border-inline-end: var(--t-end) solid transparent;

    --t-start: 0;
    --t-end: 0;

    &[style*='--t-icon-start:'] {
        --t-start: 2rem;
    }

    &[style*='--t-icon-end:'] {
        --t-end: 1.5rem;
    }

    &::before {
        position: absolute;
        left: -1rem;
        inset-inline-start: -1rem;
    }

    &::after {
        .center-top();

        right: -0.5rem;
        font-size: 1rem;
        margin: 0;
        margin-inline-end: -0.25rem;
        margin-inline-start: auto;
        color: var(--tui-text-tertiary) !important;

        @supports (inset-inline-end: 0) {
            right: unset;
            inset-inline-end: -0.5rem;
        }
    }

    &[data-size='s'] {
        padding: 0.375rem 0.625rem;
        font: var(--tui-font-text-s);
        line-height: 1.25rem;
        border-radius: var(--tui-radius-m);

        &[style*='--t-icon-start:'] {
            --t-start: 1.5rem;
        }

        &::before {
            top: 0.5rem;
            left: -0.875rem;
            inset-inline-start: -0.875rem;
            font-size: 1rem;
        }

        &::after {
            right: -0.875rem;

            @supports (inset-inline-end: 0) {
                right: unset;
                inset-inline-end: -0.875rem;
            }
        }

        tui-icon {
            font-size: 1rem;
        }

        [tuiTitle] {
            font: var(--tui-font-text-s);
            font-weight: bold;
        }

        [tuiSubtitle] {
            font: var(--tui-font-text-s);
        }

        [tuiSubtitle] + * {
            gap: 1rem;
            margin: 0.375rem 0 0.25rem;
        }

        > [tuiIconButton] {
            top: 0;
            right: 0;

            @supports (inset-inline-end: 0) {
                right: unset;
                inset-inline-end: 0;
            }
        }
    }

    &[data-size='m'] {
        padding: 0.75rem;
        font: var(--tui-font-text-s);
        line-height: 1.25rem;
        border-radius: var(--tui-radius-m);

        &[style*='--t-icon-start:'] {
            --t-start: 1.625rem;
        }

        &::before {
            left: -0.875rem;
            inset-inline-start: -0.875rem;
            font-size: 1.25rem;
        }

        &::after {
            right: -0.75rem;

            @supports (inset-inline-end: 0) {
                right: unset;
                inset-inline-end: -0.75rem;
            }
        }

        tui-icon {
            font-size: 1.25rem;
        }

        [tuiTitle] {
            font: var(--tui-font-text-ui-m);
            font-weight: bold;
        }

        [tuiSubtitle] {
            font: var(--tui-font-text-s);
        }

        [tuiSubtitle] + * {
            gap: 1rem;
            margin: 0.625rem 0 0.25rem;
        }

        > [tuiIconButton] {
            top: 0.375rem;
            right: 0.5rem;

            @supports (inset-inline-end: 0) {
                right: unset;
                inset-inline-end: 0.5rem;
            }
        }
    }

    [tuiTitle] {
        gap: 0.125rem;
        font: var(--tui-font-text-ui-l);
        font-weight: bold;
    }

    [tuiSubtitle] {
        font: var(--tui-font-text-m);

        + * {
            display: flex;
            align-items: center;
            gap: 1.25rem;
            margin-block-start: 0.625rem;
            font: var(--tui-font-text-s);
        }
    }

    > [tuiIconButton] {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        box-shadow: none !important;
        background: transparent !important;

        @supports (inset-inline-end: 0) {
            right: unset;
            inset-inline-end: 0.75rem;
        }
    }
}

[tuiNotification] {
    cursor: pointer;
}