|
|
- // Import site utilities.
- @import '../../global/utils/init';
-
- .modal {
- .modal__modal {
- display: flex;
- height: 100%;
-
- .modal__content {
- margin: auto;
- padding: 20px 30px;
- background-color: $color-white;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
- transition: opacity 300ms ease;
- width: 80%;
- max-width: 1000px;
- max-height: 70%;
- border-radius: 2px;
- position: relative;
-
- @include breakpoint($lg) {
- width: 55%;
- }
- }
-
- &:focus {
- outline: none;
- }
-
- h1,
- h2,
- h3,
- h4 {
- margin-top: 0;
- }
-
- .modal__close {
- cursor: pointer;
- position: absolute;
- top: 10px;
- right: 10px;
- }
-
- .modal__footer {
- border-radius: 0 0 2px 2px;
- background-color: #fafafa;
- padding: 4px 6px;
- height: 56px;
- width: 100%;
- text-align: right;
-
- .btn,
- .btn-flat {
- margin: 6px 0;
- }
- }
- }
-
- .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;
- transition: opacity 300ms ease;
- will-change: opacity;
- }
-
- .modal-enter {
- opacity: 0;
- }
-
- .modal-leave-active {
- opacity: 0;
- }
-
- .modal-enter .modal-container,
- .modal-leave-active .modal-container {
- transform: scale(1.1);
- }
- }
|