Notification: Banner Warning 

<div class="kx-notification kx-notification--warning kx-notification--banner kx-flex kx-align-items-start kx-justify-content-start">
    <div class="kx-notification__content kx-flex kx-flex-wrap kx-align-items-start">
        <div class="kx-notification__body">
            <p>Our systems are experiencing connectivity problems. Slow responses may occur.</p>
        </div>
    </div>
</div>
 
<div class="kx-notification{% if tone %} kx-notification--{{ tone }}{% endif %}{% if type %} kx-notification--{{ type }}{% endif %} kx-flex kx-align-items-start kx-justify-content-start{% for class in classes %} {{ class }}{% endfor %}">
    <div class="kx-notification__content kx-flex kx-flex-wrap kx-align-items-start">
        {% if icon.symbol -%}
            <span class="kx-notification__icon">
            {% render '@icon', icon %}
        </span>
        {% endif -%}
        {% if title -%}
            <header class="kx-notification__header">
            <h3 class="kx-notification__title">{{ title }}</h3>
        </header>
        {% endif -%}
        {% if content -%}
        <div class="kx-notification__body">
            <p>{{ content }}</p>
        </div>
        {% endif -%}
    </div>
    {%if dismissable -%}
        {% render '@button', {
            text: 'Close',
            icon: {
                symbol: 'close',
                size: 'moderate'
            },
            size: 'tiny',
            classes: ['kx-notification__dismiss kx-js-notification__dismiss'],
            hideText: true
        } %}
    {% endif -%}
</div>
 
{
  "title": null,
  "content": "Our systems are experiencing connectivity problems. Slow responses may occur.",
  "tone": "warning",
  "type": "banner",
  "icon": {
    "symbol": null,
    "size": "moderate"
  },
  "dismissable": null,
  "classes": null
}
  • Content: 
    // ==========================================================================
// Component: notification
// ==========================================================================

// Elements (children)
// ==========================================================================

.kx-notification__icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;

    .kx-icon {
        display: block;
        width: 100%;
        height: 100%;
    }
}

.kx-notification__title {
    @include type-scale(medium);
    @include type-weight(bold);
    @include mb(tiny);
    line-height: 1.5rem;
}

.kx-notification__header {
    + .kx-notification__body {
        flex: 1 1 calc(100% - 32px);
    }

    .kx-notification__icon + & {
        + .kx-notification__body {
            @include ml(large);
        }
    }
}

.kx-notification__content {
    @include flex-row;
    @include p(large, large, large, large);
    flex: 1 1 auto;
    max-width: 80ch;
}

.kx-notification__dismiss {
    @include mt(large);
    @include mr(large);
    margin-left: auto;
    color: inherit;

    &:hover {
        background-color: inherit;
    }
}

// Block (parent)
// ==========================================================================
.kx-notification {
    position: relative;
    background-color: $color-notification-bg-neutral; 

    .kx-notification__icon {
        @include mr(mini);

        svg {
            fill: currentColor;
        }
    }
}

// Modifiers
// ==========================================================================

.kx-notification--success {
    background-color: $color-notification-bg-success;
    color: $color-notification-txt-success;

    &.kx-notification--banner {
        background-color: $color-notification-bg-banner-success;
        color: $color-notification-txt-banner-success;
    }
}

.kx-notification--warning {
    background-color: $color-notification-bg-warning;
    color: $color-notification-txt-warning;

    &.kx-notification--banner {
        background-color: $color-notification-bg-banner-warning;
        color: $color-notification-txt-banner-warning;
    }
}

.kx-notification--danger {
    background-color: $color-notification-bg-danger;
    color: $color-notification-txt-danger;

    &.kx-notification--banner {
        background-color: $color-notification-bg-banner-danger;
        color: $color-notification-txt-banner-danger;
    }
}

.kx-notification--info {
    background-color: $color-notification-bg-info;
    color: $color-notification-txt-info;

    &.kx-notification--banner {
        background-color: $color-notification-bg-banner-info;
        color: $color-notification-txt-banner-info;
    }
}

.kx-notification--critical {

    &.kx-notification--banner {
        background-color: $color-notification-bg-banner-critical;
        color: $color-notification-txt-banner-critical;
    }   
}

.kx-notification--inline {
    @include inline-flex;
    width: fit-content;

    .kx-notification__content {
        @include p(tiny, tiny, tiny, tiny);
    }

    .kx-notification__dismiss {
        @include mt(tiny);
        @include mr(tiny);
    }
}


.kx-notification--banner {
    @include mq($until: tab-m) {
        .kx-notification__body {
            flex: 1 1 auto;
            width: calc(100% - 32px);
        }
    }

    @include mq($from: tab-m) {
        @include justify-content-center;

        .kx-notification__content {
            @include justify-content-center;
        }

        .kx-notification__header {
            + .kx-notification__body {
                flex: 1 1 100%;
                text-align: center;
                margin-left: 0;
            }
        }

        .kx-notification__body {
            text-align: center;
            flex: 0 1 auto;
            max-width: calc(100% - 32px);
        }
    }
}
  • URL: /components/raw/notification/_notification.scss
  • Filesystem Path: src\components\01-notification\_notification.scss
  • Size: 4 KB

There are no notes for this item.