@dialpad/dialtone-css/lib/build/less/components/notice.less

Dialpad's design system

//
//  DIALTONE
//  COMPONENTS: NOTICES
//
//  These are the styles for notices, which are used by alert users to
//  information they might need. For further documentation of these styles,
//  please visit https://dialtone.dialpad.com/components/notices
//
//  ============================================================================
//  $   BASE WRAPPER
//  ----------------------------------------------------------------------------

.d-notice,
.d-banner,
.d-toast {
    //  Component CSS Vars
    //  ------------------------------------------------------------------------
    --notice-color-background: var(--dt-color-surface-secondary);
    --notice-color-text: var(--dt-color-foreground-primary);
    --notice-color-icon: var(--notice-color-text);
    --notice-color-shadow: var(--dt-color-border-subtle);
    --notice-padding: var(--dt-space-500);
    --notice-font-size: var(--dt-font-size-200);
    --notice-line-height: var(--dt-font-line-height-300);
    --notice-border-radius: var(--dt-size-400);
    --notice-box-shadow: 0 0 0 var(--dt-size-100) var(--notice-color-shadow) inset;

    //  Base Styles
    //  ------------------------------------------------------------------------
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--dt-size-1020);
    padding: var(--notice-padding);
    color: var(--notice-color-text);
    font-size: var(--notice-font-size);
    line-height: var(--notice-line-height);
    background-color: var(--notice-color-background);
    border-radius: var(--notice-border-radius);
    box-shadow: var(--notice-box-shadow);
}

//  ============================================================================
//  $   NOTICE AREAS
//  ============================================================================
//  $$  CONTENT
//  ----------------------------------------------------------------------------
.d-notice__content {
    display: flex;
    flex: 1 auto;
    flex-direction: column;
    margin-right: var(--dt-space-500);
}

//  $$  ACTIONS
//  ----------------------------------------------------------------------------
.d-notice__actions {
    display: flex;
    flex: 0 auto;
    gap: var(--dt-space-400);
    align-items: center;

    .d-btn {
        color: var(--notice-color-text);
    }
}

//  $$  ICON
//  ----------------------------------------------------------------------------
.d-notice__icon {
    display: flex;
    flex: 0 auto;
    margin-right: var(--dt-space-450);
    color: var(--notice-color-icon);

    .d-banner & {
        margin-right: var(--dt-space-400);
    }
}

//  ============================================================================
//  $   COPY STYLES
//  ============================================================================
.d-notice__title {
    font-weight: var(--dt-font-weight-bold);
    font-size: inherit;
}

.d-notice__message {
    .d-notice__title:not([hidden]) + & {
        font-size: var(--dt-font-size-100);
    }
}

//  ============================================================================
//  $   STYLES
//  ============================================================================
//  $$  DEFAULT IMPORTANT
//  ----------------------------------------------------------------------------
.d-notice.d-notice--important,
.d-banner.d-banner--important,
.d-toast.d-toast--important {
    --notice-color-background: var(--dt-color-surface-strong);
    --notice-color-text: var(--dt-color-foreground-primary-inverted);
    --notice-color-icon: var(--notice-color-text);
    --notice-color-shadow: transparent;
}

//  $$  ERROR
//  ----------------------------------------------------------------------------
.d-notice--error,
.d-banner--error,
.d-toast--error {
    --notice-color-background: var(--dt-color-surface-critical);
    --notice-color-icon: var(--dt-color-foreground-critical);

    &.d-notice--important,
    &.d-banner--important,
    &.d-toast--important {
        --notice-color-background: var(--dt-color-surface-critical-strong);
    }
}

//  $$  INFO
//  ----------------------------------------------------------------------------
.d-notice--info,
.d-banner--info,
.d-toast--info {
    --notice-color-background: var(--dt-color-surface-info);
    --notice-color-icon: var(--dt-color-blue-500);

    &.d-notice--important,
    &.d-banner--important,
    &.d-toast--important {
        --notice-color-background: var(--dt-color-surface-info-strong);
        --notice-color-text: var(--dt-color-foreground-primary-inverted);
    }
}

//  $$  SUCCESS
//  ----------------------------------------------------------------------------
.d-notice--success,
.d-banner--success,
.d-toast--success {
    --notice-color-background: var(--dt-color-surface-success);
    --notice-color-icon: var(--dt-color-foreground-success);

    &.d-notice--important,
    &.d-banner--important,
    &.d-toast--important {
        --notice-color-background: var(--dt-color-surface-success-strong);
        --notice-color-text: var(--dt-color-foreground-primary-inverted);
    }
}

//  $$  WARNING
//  ----------------------------------------------------------------------------
.d-notice--warning,
.d-banner--warning,
.d-toast--warning {
    --notice-color-background: var(--dt-color-surface-warning);
    --notice-color-icon: var(--dt-color-foreground-warning);

    &.d-notice--important,
    &.d-banner--important,
    &.d-toast--important {
        --notice-color-background: var(--dt-color-surface-warning-strong);
        --notice-color-text: var(--dt-color-neutral-black);
    }
}

//  $$  TRUNCATE TEXT
//  ----------------------------------------------------------------------------
.d-notice.d-notice--truncate {
    .d-notice__content {
        overflow: hidden;

        .d-notice__title,
        .d-notice__message {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}