winter/modules/system/assets/ui/less/popup.less

//
// Dependencies
// --------------------------------------------------

@import "global.less";
@import "loader.less";
@import "icon.close.less";

//
// Popup
// --------------------------------------------------

@import "popup.base.less";

//
// Popup
// --------------------------------------------------

@popup-size-giant: 982px;
@popup-size-huge: 900px;
@popup-size-large: 750px;
@popup-size-small: 400px;
@popup-size-tiny: 300px;

.modal-content {
    .box-shadow(@popup-box-shadow);
    .border-radius(@border-radius-base);
    border: none;
    background: @color-popup-content-bg;
}

.modal-content.popup-shaking {
    .animation(popup-shake 0.82s cubic-bezier(.36,.07,.19,.97) both);
    .transform(translate3d(0, 0, 0));
    .backface-visibility(hidden);
    .perspective(1000px);
}

.modal-header {
    background: @color-popup-header-bg;
    color: @color-popup-header-text;
    .border-top-radius(@border-radius-base);
    padding: @modal-title-padding @padding-standard;
    border: none;

    h4 {
        font-weight: normal;
        font-size: 18px;
    }
}

.modal-footer {
    background: @color-popup-footer-bg;
    border: none;
    margin-top: 0;
    padding: 0 @padding-standard @padding-standard @padding-standard;
}

.modal-body {
    padding-top: 0;
    padding-bottom: 0;

    > p:last-child {
        margin-bottom: 20px;
    }

    &.modal-no-header {
        padding-top: @padding-standard;
    }

    &.modal-no-footer {
        padding-bottom: @padding-standard;
    }
}

.modal-dialog {
    &.size-adaptive {
        width: 100%;
        padding-right: 50px;
        padding-left: 50px;
    }

    &.adaptive-height {
        height: 100%;
        min-height: 600px;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 50px;
        padding-bottom: 50px;

        .modal-content {
            height: 100%;
        }
    }

    @media (min-width: @screen-sm-min) {
        &.size-tiny  { width: @popup-size-tiny; }
        &.size-small { width: @popup-size-small; }
    }
    @media (min-width: @screen-md-min) {
        &.size-large { width: @popup-size-large; }
        &.size-huge  { width: @popup-size-huge; }
        &.size-giant { width: @popup-size-giant; }
    }
    @media (max-width: @screen-sm) {
        &.size-adaptive {
            width: auto;
            padding: 5px 0;
            margin: 0;
        }
    }
}

.control-popup {
    &.fade {
        &:not(.in) {
            pointer-events: none;
        }

        .modal-dialog {
            .opacity(0);
            .transition(~'all 0.3s, width 0s');
            .transform(~'scale(0.7)');
        }
    }

    &.fade.in {
        .modal-dialog {
            .opacity(1);
            .transform( ~'scale(1)');
        }
    }
}

.popup-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: (@zindex-modal-background - 10);
    background-color: @modal-backdrop-bg;
    .opacity(1);

    .popup-loading-indicator {
        display: block;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 130px;
        left: 50%;
        margin-left: -50px;
        .transition(~'all 0.3s, width 0s');
        .transform(~'scale(0.7)');
        .opacity(0);

        &:after {
            content: ' ';
            display: block;
            background-size: 50px 50px;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-image: url('@{loader-image-path}/loader-transparent.svg');
            .animation(spin 1s linear infinite);
            width: 50px;
            height: 50px;
            margin: 25px 0 0 25px;
        }
    }

    &.loading .popup-loading-indicator {
        .opacity(1);
        .transform(~'scale(1)');
    }

}

.mac body.modal-open {
    margin-right: 0;
}

// Popup animations
// -------------------------

@-moz-keyframes popup-shake {
    10%, 90% { -moz-transform: translate3d(-1px, 0, 0); }
    20%, 80% { -moz-transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { -moz-transform: translate3d(-4px, 0, 0); }
    40%, 60% { -moz-transform: translate3d(4px, 0, 0); }
}

@-webkit-keyframes popup-shake {
    10%, 90% { -webkit-transform: translate3d(-1px, 0, 0); }
    20%, 80% { -webkit-transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { -webkit-transform: translate3d(-4px, 0, 0); }
    40%, 60% { -webkit-transform: translate3d(4px, 0, 0); }
}

@keyframes popup-shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}