Modal: Error 

<div class="kx-modal" tabindex="-1" role="alertdialog" aria-labelledby="--23226">
    <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="--23226">Error error!</h5>
                <!-- BUTTON Component -->
                <button class="kx-btn kx-btn--skin-flat 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>An error doesn't become a mistake until you refuse to correct it.</p>
            </div>

            <div class="kx-modal__footer">
                <!-- BUTTON-GROUP Component -->
                <div class="kx-btngroup kx-btngroup--align-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">Try again</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">Forget it</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 title %}<h5 class="kx-modal__title" id="{{ id }}">{{ title }}</h5>{% endif %}
                {% render '@button', { text: 'Close', skin: 'flat', 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": "Error error!",
  "classes": null,
  "skin": "discreet",
  "size": "large",
  "cta": {
    "align": [
      "center"
    ],
    "buttons": [
      {
        "context": {
          "text": "Try again",
          "skin": "primary",
          "size": "large"
        }
      },
      {
        "context": {
          "text": "Forget it",
          "skin": "secondary",
          "size": "large"
        }
      }
    ]
  },
  "alert": "error",
  "content": "An error doesn't become a mistake until you refuse to correct it."
}
  • 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 p(base, base, base, base);
    display: flex;
    align-items: center;
}

.kx-modal__body {
    @include p(base, base, base, base);
    background-color: $color-modal-dialog-bg;
}

.kx-modal__footer {
    @include p(base, base, base, base);
    display: flex;

    .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 my(small, small);
    @include center-box;
    border-radius: $radius-global * 3;
    overflow: hidden;
    position: relative;
    width: auto;
    max-width: 500px;
    z-index: 1;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);

    @include mq($from: tab-s) {
        @include my(xlarge, xlarge);
    }
}

.kx-modal__backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba($color-overlay-bg, 0.75);
    opacity: 1;
}

// 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__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__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: 296px;

    .kx-modal__footer {
        > .kx-btngroup {
            flex-direction: column;

            .kx-btn {
                @include mt(mini);
                @include ml(none);
                width: 100%;
            }
        }
    }
}

.kx-modal--size-large {
    max-width: 500px;
}
  • URL: /components/raw/modal/_modal.scss
  • Filesystem Path: src\components\01-modal\_modal.scss
  • Size: 3 KB

There are no notes for this item.