Drupal 8 Site using Vue
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

69 lines
1.7 KiB

.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); }