framework7-without-localstorage/src/less/material/modals.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Modals === */
@modalBgColor:#fff;
@modalButonColor : #4285f4;
@modalButonBg: @modalBgColor;
@modalDuration:400ms;
@actionsModalDuration:300ms;
@popoverDuration: 300ms;
@popupDuration: 400ms;
.modal-overlay, .preloader-indicator-overlay, .popup-overlay, .picker-modal-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 13000;
    visibility: hidden;
    opacity: 0;
    .transition(@modalDuration);
    &.not-animated {
        .transition(0ms);
    }
    &.modal-overlay-visible {
        visibility: visible;
        opacity: 1;
    }
}
.popup-overlay {
    z-index: 10500;
}
.picker-modal-overlay {
    z-index: 12000;
}
.modal {
    width: 280px;
    position: absolute;
    z-index: 13500;
    left: 50%;
    margin-left: -140px;
    margin-top: 0;
    top: 50%;
    border-radius: 3px;
    opacity: 0;
    .transform(translate3d(0,0,0) scale(1.185));
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -ms-transition-property: -ms-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    transition-property: transform, opacity;
    color:#757575;
    display: none;
    background: #fff;
    font-size: 16px;
    .depth(5);
    &.modal-in {
        opacity: 1;
        .transition(@modalDuration);
        .transform(translate3d(0,0,0) scale(1));
    }
    &.modal-out {
        opacity: 0;
        z-index: 13500-1;
        .transition(@modalDuration);
        .transform(translate3d(0,0,0) scale(0.815));
    }
}
.modal-inner {
    padding: 24px 24px 20px;
    position: relative;
}
.modal-title {
    font-weight: 500;
    font-size: 20px;
    color:#212121;
    line-height: 1.3;
    +.modal-text {
        margin-top: 20px;
    }
}
.modal-text {
    line-height: 1.5;
}
.modal-buttons {
    height: 48px;
    padding: 6px 8px;
    overflow: hidden;
    box-sizing:border-box;
    .flexbox();
    .justify-content(flex-end);
    &.modal-buttons-vertical {
        display: block;
        height: auto;
        padding: 0 0 8px 0;
        .modal-button {
            margin-left: 0;
            text-align: right;
            height: 48px;
            line-height: 48px;
            border-radius: 0;
            padding-left: 16px;
            padding-right: 16px;
        }
    }
}
.modal-button, .modal-buttons .button {
    .button;
    &.modal-button-bold {
        font-weight: 700;
    }
    + .modal-button {
        margin-left: 4px;
    }
}
.modal-no-buttons {
    .modal-buttons {
        display: none;
    }
}
// Action sheet
.actions-modal {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 13500;
    width: 100%;
    background: #fff;
    .transform(translate3d(0,100%,0));
    max-height: 100%;
    .scrollable();
    &.modal-in, &.modal-out {
        .transition(@actionsModalDuration);
        &.not-animated {
            .transition(0ms);
        }
    }
    &.modal-in {
        .transform(translate3d(0,0,0));
    }
    &.modal-out {
        z-index: 13500-1;
        .transform(translate3d(0,100%,0));
    }
}
.actions-modal-group {
    position: relative;
    .hairline(bottom, #d2d2d6);
    &:last-child {
        .hairline-remove(bottom);
    }
}
.actions-modal-button, .actions-modal-label {
    width: 100%;
    font-weight: normal;
    margin: 0;
    box-sizing: border-box;
    display: block;
    position: relative;
    padding: 0 16px;
    a {
        text-decoration: none;
        color: inherit;
        display: block;
    }
    b {
        font-weight: 500;
    }
    &.actions-modal-button-bold {
        font-weight: 500;
    }
    &.actions-modal-button-red {
        color: @red;
    }
    &.disabled {
        opacity: 0.95;
        color:@gray;
    }
}
.actions-modal-button {
    cursor: pointer;
    line-height: 48px;
    font-size: 16px;
    color: rgba(0,0,0,0.87);
    .transition(300ms);
    a, & {
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    html:not(.watch-active-state) &:active, &.active-state {
        background: rgba(0,0,0,0.1);
    }
}
.actions-modal-label {
    font-size: 16px;
    color: rgba(0,0,0,0.54);
    min-height: 56px;
    line-height: 1.3;
    padding-top: 12px;
    padding-bottom: 12px;
    .flexbox();
    .justify-content(flex-start);
    .align-items(center);
}
// Prompt
input.modal-text-input {
    box-sizing:border-box;
    height: 36px;
    background: #fff;
    margin: 0;
    margin-top: 15px;
    padding: 0;
    border: none;
    width: 100%;
    font-size: 16px;
    font-family: inherit;
    display: block;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    .transition(200ms);
    &::-webkit-input-placeholder {
       color: rgba(0,0,0,0.35);
    }
    + input.modal-text-input {
        margin-top: 16px;
    }
}
// Popover
.popover {
    width: 320px;
    background: #fff;
    z-index: 13500;
    margin: 0;
    top: 0;
    opacity: 0;
    left: 0;
    border-radius: 3px;
    position: absolute;
    display: none;
    .depth(2);
    .transform(scale(0.85, 0.6));
    -webkit-transition-property: opacity, -webkit-transform, border-radius;
    -moz-transition-property: opacity, -moz-transform, border-radius;
    transition-property: opacity, transform, border-radius;
    &.popover-on-top {
        .transform-origin(center bottom);
    }
    &.popover-on-bottom {
        .transform-origin(center top);
    }
    &.modal-in, &.modal-out {
        .transition(@popoverDuration);
        &.not-animated {
            .transition(0ms);
        }
    }
    &.modal-in {
        .transform(scale(1));
        opacity: 1;
    }
    &.modal-out {
        .transform(scale(1));
        opacity: 0;
    }
    .list-block {
        margin: 0;
        &:first-child:last-child ul {
            .hairline-remove(top);
            .hairline-remove(bottom);
        }
        ul {
            background: none;
            .hairline-remove(top);
        }
        &:first-child {
            ul {
                border-radius: 3px 3px 0 0;
            }
            li:first-child a {
                border-radius: 3px 3px 0 0;
            }
        }
        &:last-child {
            ul {
                .hairline-remove(bottom);
                border-radius: 0 0 3px 3px;
            }
            li:last-child a {
                border-radius: 0 0 3px 3px;
            }
        }
        &:first-child:last-child {
            li:first-child:last-child a, ul:first-child:last-child {
                border-radius: 3px;
            }
        }
    }
    &.popover-floating-button {
        .transform-origin(center center);
        .transform(scale(0.7));
        border-radius: 50%;
        box-shadow: none;
        .depth(3);
        &.modal-in {
            border-radius: 0%;
            .transform(scale(1));
            .delay(200ms);
            .transition(200ms);
        }
        &.modal-out {
            border-radius: 50%;
            .transform(scale(0.7));
            .delay(0ms);
            .transition(100ms);
        }
        .list-block {
            margin: 0;
            &:first-child {
                ul {
                    border-radius: 0;
                }
                li:first-child a {
                    border-radius: 0;
                }
            }
            &:last-child {
                ul {
                    border-radius: 0;
                }
                li:last-child a {
                    border-radius: 0;
                }
            }
            &:first-child:last-child {
                li:first-child:last-child a, ul:first-child:last-child {
                    border-radius: 0;
                }
            }
        }
    }
}
.popover-inner {
    .scrollable();
}
.actions-popover {
    .list-block {
        margin: 0;
    }
}
.actions-popover-label {
    padding: 8px 16px;
    color:rgba(0,0,0,0.54);
    font-size: 16px;
    line-height: 1.3;
    padding-top: 12px;
    padding-bottom: 12px;
    position: relative;
    .hairline(bottom, #d2d2d6);
    &:last-child {
        .hairline-remove(bottom);
    }
}
// Popup
.popup, .login-screen {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 11000;
    background: #fff;
    box-sizing:border-box;
    display: none;
    .scrollable();
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -ms-transition-property: -ms-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    .translate3d(0,100%,0);
    &.modal-in, &.modal-out {
        .transition(@popupDuration);
        &.not-animated {
            .transition(0ms);
        }
    }
    &.modal-in {
        .translate3d(0,0,0);
    }
    &.modal-out {
        .translate3d(0,100%,0);
    }
}
.login-screen.modal-in, .login-screen.modal-out {
    display: block;
}
// iPad Popup
@media all and (min-width:630px) and (min-height:630px) {
    .popup:not(.tablet-fullscreen) {
        width: 630px;
        height: 630px;
        left: 50%;
        top: 50%;
        margin-left: -315px;
        margin-top: -315px;
        box-shadow: 0px 20px 44px rgba(0,0,0,0.5);
        border-radius: 3px;
        .translate3d(0,1024px,0);
        &.modal-in {
            .translate3d(0,0,0);
        }
        &.modal-out {
            .translate3d(0,1024px,0);
        }
    }
}
html.with-statusbar-overlay {
    // iPhone with statusbar overlay
    @media all and (max-width:629px), (max-height:629px) {
        .popup {
            height: ~"-webkit-calc(100% - 24px)";
            height: ~"calc(100% - 24px)";
            top: 24px;
        }
        .popup-overlay {
            z-index: 9500;
        }
        &.ios .popup{
            height: ~"-webkit-calc(100% - 20px)";
            height: ~"calc(100% - 20px)";
            top: 20px;
        }
    }
    .login-screen, .popup.tablet-fullscreen {
        height: ~"-webkit-calc(100% - 24px)";
        height: ~"calc(100% - 24px)";
        top: 24px;
    }
    &.ios {
        .login-screen, .popup.tablet-fullscreen {
            height: ~"-webkit-calc(100% - 20px)";
            height: ~"calc(100% - 20px)";
            top: 20px;
        }
    }
}

//Preloaders modals
.modal-preloader {
    .modal-title, .modal-inner {
        text-align: center;
    }
}
.preloader-indicator-overlay {
    visibility: visible;
    opacity: 0;
    background: none;
}
.preloader-indicator-modal {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 8px;
    margin-left: -24px;
    margin-top: -24px;
    background: rgba(0,0,0,0.8);
    z-index: 13500;
    border-radius: 4px;
    .preloader {
        display: block;
    }
}

// Picker Modal
.picker-modal {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 260px;
    z-index: 12000;
    display: none;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -ms-transition-property: -ms-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    background: #fff;
    .translate3d(0,100%,0);
    &.modal-in, &.modal-out {
        .transition(400ms);
        &.not-animated {
            .transition(0ms);
        }
    }
    &.modal-in {
        .translate3d(0,0,0);
    }
    &.modal-out {
        .translate3d(0,100%,0);
    }
    .picker-modal-inner {
        height: 100%;
        position: relative;
    }
    .toolbar {
        position: relative;
        width: 100%;
        top: 0;
        + .picker-modal-inner {
            height: ~"-webkit-calc(100% - @{toolbarSize})";
            height: ~"-moz-calc(100% - @{toolbarSize})";
            height: ~"calc(100% - @{toolbarSize})";
        }
        a.link {
            .flex-shrink(0);
        }
    }
    .picker-header, .picker-footer {
        height: @toolbarSize;
    }
    .picker-header {
        background: @themeColor;
        + .toolbar .toolbar-inner {
            overflow: visible;
        }
        + .picker-footer + .toolbar + .picker-modal-inner {
            height: ~"-webkit-calc(100% - @{toolbarSize} * 3)";
            height: ~"-moz-calc(100% - @{toolbarSize} * 3)";
            height: ~"calc(100% - @{toolbarSize} * 3)";
        }
    }
    .picker-footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        .modal-buttons;

    }
    .picker-header, .picker-footer {
        + .picker-modal-inner {
            height: ~"-webkit-calc(100% - @{toolbarSize})";
            height: ~"-moz-calc(100% - @{toolbarSize})";
            height: ~"calc(100% - @{toolbarSize})";
        }
        + .toolbar + .picker-modal-inner {
            height: ~"-webkit-calc(100% - @{toolbarSize} * 2)";
            height: ~"-moz-calc(100% - @{toolbarSize} * 2)";
            height: ~"calc(100% - @{toolbarSize} * 2)";
        }
    }
    &.picker-modal-inline, .popover & {
        display: block;
        position: relative;
        background: none;
        z-index: inherit;
        .translate3d(0,0,0);
        .toolbar {
            top: 0;
        }
    }
    .popover & {
        width: auto;
        .toolbar:first-child, .picker-header:first-child {
            border-radius: 2px 2px 0 0;
        }
    }
    &.smart-select-picker {
        .list-block {
            margin: 0;
            ul {
                .hairline-remove(top);
                .hairline-remove(bottom);
            }
        }
    }
}