[Summary view] [Print] [Text view]

   1  .media-modal-backdrop {
   2    position: fixed;
   3    top: 0;
   4    left: 0;
   5    z-index: 1049;
   6    display: table;
   7    width: 100%;
   8    height: 100%;
   9    background-color: $modal-backdrop-color;
  10  
  11    .modal {
  12      display: flex;
  13      align-items: center;
  14      justify-content: center;
  15      animation: .5s ease 0s normal none 1 running fadeIn;
  16    }
  17  
  18    .modal-body {
  19      width: auto;
  20      padding: 15px;
  21    }
  22  
  23    .modal-content {
  24      box-shadow: $modal-box-shadow;
  25    }
  26  
  27  }
  28  
  29  .media-preview-modal {
  30    color: $modal-preview-text-color;
  31  
  32    .modal {
  33      display: grid !important;
  34      align-items: center !important;
  35      justify-content: center !important;
  36    }
  37  
  38    .modal-content {
  39      display: flex;
  40      flex-direction: column;
  41      align-items: flex-start;
  42      background-color: transparent;
  43      border: 0;
  44      box-shadow: none;
  45    }
  46    .modal-header {
  47      padding: 0;
  48      border: 0;
  49    }
  50    .modal-body {
  51      padding: 0;
  52      background-color: #fff;
  53      box-shadow: $modal-box-shadow;
  54      img {
  55        max-width: 100%;
  56      }
  57    }
  58    .modal-footer {
  59      display: none;
  60    }
  61  }
  62  
  63  .media-preview-close {
  64    position: absolute;
  65    top: -2rem;
  66    right: 0;
  67    font-size: 2rem;
  68    color: inherit;
  69    background: none;
  70    border: 0;
  71    opacity: .7;
  72    &:hover {
  73      cursor: pointer;
  74      opacity: 1;
  75    }
  76  }
  77  
  78  @media (min-width: 576px) {
  79    .media-preview-modal {
  80      .modal-dialog {
  81        max-width: unset !important;
  82      }
  83    }
  84  }
  85  
  86  @keyframes fadeInUp {
  87    from {
  88      opacity: 0;
  89      transition: transform .3s ease-out;
  90      transform: translate(0, -25%);
  91    }
  92  
  93    to {
  94      opacity: 1;
  95      transform: none;
  96    }
  97  }