<div class="kx-modal" tabindex="-1" role="dialog" aria-labelledby="--19951">
    <div class="kx-modal__dialog kx-modal--skin-discreet kx-modal--size-medium" role="document">
        <div class="kx-modal__content">
            <div class="kx-modal__header">
                <h5 class="kx-modal__title" id="--19951">Modal title</h5>
                <!-- BUTTON Component -->
                <button class="kx-btn kx-btn--size-base kx-btn--icon kx-modal__close" aria-label="Close">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-moderate">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#close"></use>
    </svg>
</i>
        <span class="kx-btn__txt kx-is-vishidden">Close</span>
    </span>
</button>
            </div>
            <div class="kx-modal__body">
                <p>Users must interact with the modal window before they can return to the parent application</p>
            </div>

        </div>
    </div>
    <div class="kx-modal__backdrop"></div>
</div>
{% if id %}
    {% set random_number = range(0, 100000) | random %}
    {% set id = id | replace(' ', '-') | lower + '--' + random_number %}
{% else %}
    {% set random_number = range(0, 100000) | random %}
    {% set id = label | replace(' ', '-') | lower + '--' + random_number %}
{% endif %}
<div class="kx-modal" tabindex="-1"{% if alert %} role="alertdialog"{% else %} role="dialog"{% endif %} aria-labelledby="{{ id }}">
    <div class="kx-modal__dialog{% if skin %} kx-modal--skin-{{ skin }}{% endif %}{% if size %} kx-modal--size-{{ size }}{% endif %}" role="document">
        <div class="kx-modal__content">
            <div class="kx-modal__header">
                {% if alert -%}
                    {% if alert == 'warning' -%}
                        {% render '@icon', { symbol: 'warning', size: 'medium', classes: ['kx-mr--mini'] } -%}
                    {% elseif alert == 'success' -%}
                        {% render '@icon', { symbol: 'success', size: 'medium', classes: ['kx-mr--mini'] } -%}
                    {% elseif alert == 'danger' -%}
                        {% render '@icon', { symbol: 'danger', size: 'medium', classes: ['kx-mr--mini'] } -%}
                    {% endif %}
                {% endif -%}
                {% if title %}<h5 class="kx-modal__title" id="{{ id }}">{{ title }}</h5>{% endif %}
                {% render '@button', { text: 'Close', size: 'base', hideText: true, icon: { symbol: 'close', size: 'moderate' }, classes: [ 'kx-modal__close' ] } %}
            </div>
            <div class="kx-modal__body">
                <p>{{ content }}</p>
            </div>
            {% if cta %}
            <div class="kx-modal__footer">
                {% render '@button-group', cta %}
            </div>
            {% endif %}
        </div>
    </div>
    <div class="kx-modal__backdrop"></div>
</div>
{
  "id": null,
  "title": "Modal title",
  "classes": null,
  "skin": "discreet",
  "size": "medium",
  "cta": null,
  "alert": null,
  "content": "Users must interact with the modal window before they can return to the parent application"
}
  • Content:
    // ==========================================================================
    // Component: modal
    // ==========================================================================
    
    // Elements (children)
    // ==========================================================================
    
    .kx-modal__title {
        @include type-scale(medium);
        @include type-weight(bold);
    }
    
    .kx-modal__close {
        margin-left: auto;
    }
    
    .kx-modal__header {
        @include flex;
        @include align-items-center;
        @include p(base, base, base, base);
    }
    
    .kx-modal__body {
        @include p(base, base, base, base);
        max-height: calc(100vh - 270px);
        overflow-y: auto;
        background-color: $color-modal-dialog-bg;
    
        > .kx-container {
            padding-left: 0;
            padding-right: 0;
        }
    }
    
    .kx-modal__footer {
        @include flex;
        @include p(base, base, base, base);
    
        .kx-btngroup {
            width: 100%;
        }
    
        // Stack buttongroup on small screens
        @include mq($until: mob-m) {
            > .kx-btngroup {
                flex-direction: column;
    
                .kx-btn {
                    @include mt(mini);
                    @include ml(none);
                    width: 100%;
                }
            }
        }
    }
    
    .kx-modal__dialog {
        @include m(small, auto, small, auto);
        border-radius: $radius-global * 3;
        overflow: hidden;
        position: relative;
        width: auto;
        z-index: 1;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
        transition: margin $duration-fast ease-out;
    
        @include mq($from: tab-s) {
            @include my(xlarge, xlarge);
        }
    }
    
    .kx-modal__backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: $color-overlay-bg;
        opacity: 0.5;
    }
    
    // Block (parent)
    // ==========================================================================
    .kx-modal {
        padding-left: gutter() / 2;
        padding-right: gutter() / 2;
        box-sizing: content-box;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        outline: 0;
    }
    
    // Modifiers
    // ==========================================================================
    
    .kx-modal--skin-prominent {
        .kx-modal__close {
            &:hover {
                color: $color-modal-close-prominent-hover;
            }
        }
    
        .kx-modal__header {
            color: $color-modal-header-prominent-txt;
            background-color: $color-modal-header-prominent-bg;
        }
    
        .kx-modal__footer {
            background-color: $color-modal-footer-prominent-bg;
            border-top: 1px solid $color-modal-footer-prominent-border;
        }
    }
    
    .kx-modal--skin-discreet {
        .kx-modal__close {
            &:hover {
                color: $color-modal-close-discreet-hover;
            }
        }
    
        .kx-modal__header {
            background-color: $color-modal-header-discreet-bg;
            padding-bottom: 0;
        }
    
        .kx-modal__footer {
            background-color: $color-modal-footer-discreet-bg;
        }
    }
    
    .kx-modal--size-small {
        max-width: rem-calc(mq-get-breakpoint-width(mob-s) - 1px) - gutter();
    
        .kx-modal__footer {
            > .kx-btngroup {
                flex-direction: column;
    
                .kx-btn {
                    @include mt(mini);
                    @include ml(none);
                    width: 100%;
                }
            }
        }
    }
    
    .kx-modal--size-medium {
        max-width: rem-calc(mq-get-breakpoint-width(tab-s) - 1px) - gutter();
    }
    
    .kx-modal--size-large {
        max-width: rem-calc(mq-get-breakpoint-width(tab-l) - 1px) - gutter();
    }
    
  • URL: /components/raw/modal/_modal.scss
  • Filesystem Path: src\components\01-modal\_modal.scss
  • Size: 3.6 KB

There are no notes for this item.