semi-design/src/components/Notice/index.scss

@import '../../styles/variable.scss';

.notice {
    display: flex;
    align-items: top;
    padding: 24px 24px 24px 24px;
    margin-bottom: 2 * $bf;
    border-radius: 3px 6px 6px 3px;

    span[role=img] {
        font-size: 22px;
    }

    &.primary {
        background: var(--semi-color-primary-light-default);
        border-left: 4px solid var(--semi-color-primary);
        color: var(--semi-color-primary);
    }

    &.warning {
        background: var(--semi-color-warning-light-default);
        border-left: 4px solid var(--semi-color-warning);
        color: var(--semi-color-warning);
    }

    &.danger {
        background: var(--semi-color-danger-light-default);
        border-left: 4px solid var(--semi-color-danger);
        color: var(--semi-color-danger);
    }

    &-caption {
        padding-left: 12px;
        line-height: 1.15;
    }

    &-title {
        font-size: $h4;
        font-weight: bold;
        margin-bottom: $bf * 0.8;
    }

    &-body {
        line-height: 1.8;
        color: var(--semi-color-text-1);
    }
}