_modals.less

// /**
//  * Copyright © 2016 Magento. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Lib -> Components -> Modals
//  _____________________________________________

//
//  Variables
//  ---------------------------------------------

@import '../../source/_variables.less';

@modal__background-color: @color-white;
@modal__box-shadow: 0 0 12px 2px rgba(0, 0, 0, .35);

@modal-popup__indent-vertical: 5rem;
@modal-popup__padding: 3rem;
@modal-popup__width: 75%;
@modal-popup__z-index: @modal__z-index;

@modal-slide__first__indent-left: 14.8rem;
@modal-slide__indent-left: 4.5rem;
@modal-slide__padding: 2.6rem;
@modal-slide__z-index: @modal__z-index;

@modal-slide-header__padding-vertical: 2.1rem;

@modal-popup-confirm__width: 50rem;

@modal-popup-image-box__border-color: @color-gray80;
@modal-popup-image-box__max-width: 78rem;

@modal-popup-image-box-preview__max-width: @modal-popup-image-box-preview-image__max-height + (2 * @indent__base);
@modal-popup-image-box-preview-image__max-height: 54rem;

//
//  Utilities
//  ---------------------------------------------

.lib-modal() {
    bottom: 0;
    left: 0;
    min-width: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;

    &._show {
        visibility: visible;

        .modal-inner-wrap {
            -webkit-transform: translate(0, 0);
                    transform: translate(0, 0);
        }
    }

    .modal-inner-wrap {
        .lib-css(background-color, @modal__background-color);
        .lib-css(box-shadow, @modal__box-shadow);
        opacity: 1;
        pointer-events: auto;
    }
}

.lib-modal-slide() {
    .lib-css(left, @modal-slide__first__indent-left);
    .lib-css(z-index, @modal-slide__z-index);

    &._show {
        .modal-inner-wrap {
            -webkit-transform: translateX(0);
                    transform: translateX(0);
        }
    }

    .modal-inner-wrap {
        height: 100%;
        overflow-y: auto;
        position: static;
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
        transition-duration: .3s;
        -webkit-transition-property: -webkit-transform, visibility;
                transition-property:         transform, visibility;
        transition-timing-function: ease-in-out;
        width: auto;
    }
}

.lib-modal-popup() {
    .lib-css(z-index, @modal-popup__z-index);
    left: 0;
    overflow-y: auto;

    &._show {
        .modal-inner-wrap {
            -webkit-transform: translateY(0);
                    transform: translateY(0);
        }
    }

    .modal-inner-wrap {
        .lib-css(margin, @modal-popup__indent-vertical auto);
        .lib-css(width, @modal-popup__width);
        .lib-vendor-prefix-display(flex);
        .lib-vendor-prefix-flex-direction(column);
        box-sizing: border-box;
        height: auto;
        left: 0;
        position: absolute;
        right: 0;
        -webkit-transform: translateY(-200%);
                transform: translateY(-200%);
        transition-duration: .2s;
        -webkit-transition-property: -webkit-transform, visibility;
                transition-property:         transform, visibility;
        transition-timing-function: ease;

    }
}

//
body {
    &._has-modal {
        height: 100%;
        overflow: hidden;
        width: 100%;
    }
}

//  Modals overlay
.modals-overlay {
    &:extend(.abs-modal-overlay all);
    .lib-css(z-index, @overlay__z-index);
}

.modal-slide,
.modal-popup {
    .lib-modal();
}

.modal-slide {
    .lib-modal-slide();
    &._inner-scroll {
        .modal-inner-wrap {
            overflow-y: visible;
            .lib-vendor-prefix-display(flex);
            .lib-vendor-prefix-flex-direction(column);
        }

        .modal-header,
        .modal-footer {
            .lib-vendor-prefix-flex-grow(0);
            .lib-vendor-prefix-flex-shrink(0);
        }

        .modal-content {
            overflow-y: auto;
        }

        .modal-footer {
            margin-top: auto;
        }
    }

    .modal-header,
    .modal-content,
    .modal-footer {
        .lib-css(padding, 0 @modal-slide__padding @modal-slide__padding);
    }

    .modal-header {
        .lib-css(padding-bottom, @modal-slide-header__padding-vertical);
        .lib-css(padding-top, @modal-slide-header__padding-vertical);
    }
}

.modal-popup {
    .lib-modal-popup();
    //  If applied, switching outer popup scroll to inner
    &._inner-scroll {
        overflow-y: visible;
        .ie10 &,
        .ie9 & {
            overflow-y: auto;
        }

        .modal-inner-wrap {
            max-height: 90%;
            .ie10 &,
            .ie9 & {
                max-height: none;
            }
        }

        .modal-content {
            overflow-y: auto;
        }
    }

    .modal-header,
    .modal-content,
    .modal-footer {
        .lib-css(padding-left, @modal-popup__padding);
        .lib-css(padding-right, @modal-popup__padding);
    }

    .modal-header,
    .modal-footer {
        .lib-vendor-prefix-flex-grow(0);
        .lib-vendor-prefix-flex-shrink(0);
    }

    .modal-header {
        .lib-css(padding-bottom, @modal-popup__padding / 2.5);
        .lib-css(padding-top, @modal-popup__padding);
    }

    .modal-footer {
        margin-top: auto;
        .lib-css(padding-bottom, @modal-popup__padding);
        .lib-css(padding-top, @modal-popup__padding);
    }

    .modal-footer-actions {
        text-align: right;
    }
}

//
//  Mobile
//  ---------------------------------------------

//  Mobile transform to modal-slide
@media (max-width: @screen__m) {
    .modal-popup {
        &.modal-slide {
            .lib-modal-slide();
            .modal-inner-wrap {
                margin: 0;
                max-height: none;
            }
        }
    }
}