Modal: Size Small 

<div class="kx-modal" tabindex="-1" role="dialog" aria-labelledby="--22119">
    <div class="kx-modal__dialog kx-modal--skin-discreet kx-modal--size-small" role="document">
        <div class="kx-modal__content">
            <div class="kx-modal__header">
                <h5 class="kx-modal__title" id="--22119">Small 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 windows are sometimes called heavy windows or modal dialogs because they often display a dialog box.</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">OK</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": "Small Modal",
  "classes": null,
  "skin": "discreet",
  "size": "small",
  "cta": {
    "align": [
      "kx-justify-content-center"
    ],
    "buttons": [
      {
        "context": {
          "text": "OK",
          "skin": "primary",
          "size": "large"
        }
      },
      {
        "context": {
          "text": "Cancel",
          "skin": "secondary",
          "size": "large"
        }
      }
    ]
  },
  "alert": null,
  "content": "Modal windows are sometimes called heavy windows or modal dialogs because they often display a dialog box."
}
  • 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.