YetiForceCompany/YetiForceCRM

View on GitHub
public_html/layouts/basic/styles/layout/_Modal.scss

Summary

Maintainability
Test Coverage
/* {[The file is published on the basis of YetiForce Public License 6.5 that can be found in the following directory: licenses/LicenseEN.txt or yetiforce.com]} */

.modal-content {
    -moz-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
}

.modal-backdrop {
    z-index: 1032;
}

.modal-backdrop-filter {
  backdrop-filter: blur(10px);
}

@include media-breakpoint-down(sm) {
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 0.5rem;
    }
    .modal {
        padding: 0 !important; //overwrite padding added by js
    }
    .modal-dialog {
        margin: 2px;
    }
    .modal-content {
        border: none;
        border-radius: 0;
    }
    .modal-dialog {
        max-width: 100%;
    }
}
@include media-breakpoint-up(md) {
    .modal-full {
        max-width: 72%;
    }
    .modal-fullscreen {
        top: 21px;
        right: 32px;
        left: 0;
        max-width: calc(100% - 50px);
        width: calc(100% - 50px);
        margin-left: 50px;
        margin-right: 0;
        min-height: calc(100% - 80px); // if not - nested modals will be cutted
    }
}
.modal-blg {
    max-width: 90%;
}

.modal-md {
    max-width: 600px;
}

.c-modal--custom-animation {
    &.modal.fade {
        opacity: 1;

        .modal-dialog {
            -webkit-transform: translate(0);
            -moz-transform: translate(0);
            transform: translate(0);
        }
    }
}

@include media-breakpoint-up(lg) {
    .modal-dialog.c-modal--fit-lg {
        width: fit-content;
    }
}

@each $breakpoint, $max in $grid-breakpoints {
    @if $max > map-get($grid-breakpoints, sm) and $max < map-get($grid-breakpoints, xxl) {
        @media (min-width: $max) {
            @if $breakpoint != xxl {
                .c-modal-xl {
                    max-width: calc(#{map-get($grid-breakpoints, $breakpoint)} - 5vw);
                }

                .c-modal-xxl {
                    max-width: calc(#{map-get($grid-breakpoints, $breakpoint)} - 2vw);
                }
            }
        }
    }
}

@include media-breakpoint-up(xxl) {
    .c-modal-xl {
        max-width: 80vw;
    }

    .c-modal-xxl {
        max-width: 90vw;
    }
}

.clonedPopupUi.modal {
    top: $h-header;
}