<div class="kx-notification kx-notification--warning kx-notification--block kx-flex kx-align-items-start kx-justify-content-start">
    <div class="kx-notification__content kx-flex kx-flex-wrap kx-align-items-start">
        <span class="kx-notification__icon">
            <!-- ICON Component -->
<i class="kx-icon kx-icon--size-moderate">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#warning"></use>
    </svg>
</i>
        </span>
        <header class="kx-notification__header">
            <h3 class="kx-notification__title">Warning Notification Title</h3>
        </header>
        <div class="kx-notification__body">
            <p>If needed (e.g. error message notifications), add extra information about the specific nature of a problem and a way to solve it.</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": "Warning Notification Title",
  "content": "If needed (e.g. error message notifications), add extra information about the specific nature of a problem and a way to solve it.",
  "tone": "warning",
  "type": "block",
  "icon": {
    "symbol": "warning",
    "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.