|
|
- .modal .modal__modal {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- height: 100%; }
- .modal .modal__modal .modal__content {
- margin: auto;
- padding: 20px 30px;
- background-color: #FFF;
- -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
- -webkit-transition: opacity 300ms ease;
- transition: opacity 300ms ease;
- width: 80%;
- max-width: 1000px;
- max-height: 70%;
- border-radius: 2px;
- position: relative; }
- @media (min-width: 992px) {
- .modal .modal__modal .modal__content {
- width: 55%; } }
- .modal .modal__modal:focus {
- outline: none; }
- .modal .modal__modal h1,
- .modal .modal__modal h2,
- .modal .modal__modal h3,
- .modal .modal__modal h4 {
- margin-top: 0; }
- .modal .modal__modal .modal__close {
- cursor: pointer;
- position: absolute;
- top: 10px;
- right: 10px; }
- .modal .modal__modal .modal__footer {
- border-radius: 0 0 2px 2px;
- background-color: #fafafa;
- padding: 4px 6px;
- height: 56px;
- width: 100%;
- text-align: right; }
- .modal .modal__modal .modal__footer .btn,
- .modal .modal__modal .modal__footer .btn-flat {
- margin: 6px 0; }
-
- .modal .modal__mask {
- position: fixed;
- z-index: 999;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- height: 100%;
- width: 100%;
- background: rgba(0, 0, 0, 0.6);
- opacity: 1;
- -webkit-transition: opacity 300ms ease;
- transition: opacity 300ms ease;
- will-change: opacity; }
-
- .modal .modal-enter {
- opacity: 0; }
-
- .modal .modal-leave-active {
- opacity: 0; }
-
- .modal .modal-enter .modal-container,
- .modal .modal-leave-active .modal-container {
- -webkit-transform: scale(1.1);
- transform: scale(1.1); }
|