Modal: Size Large 

<div class="kx-modal" tabindex="-1" role="dialog" aria-labelledby="--79453">
    <div class="kx-modal__dialog kx-modal--skin-discreet kx-modal--size-large" role="document">
        <div class="kx-modal__content">
            <div class="kx-modal__header">
                <h5 class="kx-modal__title" id="--79453">Large Modal</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>Modal dialogs are part of a task flow, and recommendations are given to place them where the focus is in that flow. For example, the window could be placed near the graphical control element that triggers its activation. Using a semi-transparent
                    dark background can obscure information in the main window, so it is best used only when that information would be distracting. A semi-transparent background can be made less intrusive by having the whole background area function as
                    a close button: this is standard on most mobile operating systems, avoids making the user feel trapped, and makes modal windows feel less like malicious pop-ups.</p>
            </div>

            <div class="kx-modal__footer">
                <!-- BUTTON-GROUP Component -->
                <div class="kx-btngroup kx-flex kx-flex-wrap kx-justify-content-center" role="group" aria-label="">
                    <!-- BUTTON Component -->
                    <button class="kx-btn kx-btn--skin-primary kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Fine, whatever</span>
    </span>
</button>
                    <!-- BUTTON Component -->
                    <button class="kx-btn kx-btn--skin-secondary kx-btn--size-large">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Cancel</span>
    </span>
</button>
                </div>
            </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": "Large Modal",
  "classes": null,
  "skin": "discreet",
  "size": "large",
  "cta": {
    "align": [
      "kx-justify-content-center"
    ],
    "buttons": [
      {
        "context": {
          "text": "Fine, whatever",
          "skin": "primary",
          "size": "large"
        }
      },
      {
        "context": {
          "text": "Cancel",
          "skin": "secondary",
          "size": "large"
        }
      }
    ]
  },
  "alert": null,
  "content": "Modal dialogs are part of a task flow, and recommendations are given to place them where the focus is in that flow. For example, the window could be placed near the graphical control element that triggers its activation. Using a semi-transparent dark background can obscure information in the main window, so it is best used only when that information would be distracting. A semi-transparent background can be made less intrusive by having the whole background area function as a close button: this is standard on most mobile operating systems, avoids making the user feel trapped, and makes modal windows feel less like malicious pop-ups."
}
  • 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.