reoverlay/src/ModalWrapper.css

The missing solution for managing modals in React.

.reOverlay .reOverlay__modalWrapper {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.6);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-animation: ro-fade 0.3s forwards;
  animation: ro-fade 0.3s forwards;
}

.reOverlay .reOverlay__modalWrapper .reOverlay__modalContainer {
  background-color: white;
}

.reOverlay .reOverlay__modalWrapper.-ro-zoom .reOverlay__modalContainer {
  -webkit-animation: ro-zoom 0.3s cubic-bezier(0.4, 0, 0, 1.5) forwards;
  animation: ro-zoom 0.3s cubic-bezier(0.4, 0, 0, 1.5) forwards;
}

.reOverlay .reOverlay__modalWrapper.-ro-slideDown .reOverlay__modalContainer {
  -webkit-animation: ro-slideDown 0.3s cubic-bezier(0.4, 0, 0, 1.5) forwards;
  animation: ro-slideDown 0.3s cubic-bezier(0.4, 0, 0, 1.5) forwards;
}

.reOverlay .reOverlay__modalWrapper.-ro-slideUp .reOverlay__modalContainer {
  -webkit-animation: ro-slideUp 0.3s cubic-bezier(0.4, 0, 0, 1.5) forwards;
  animation: ro-slideUp 0.3s cubic-bezier(0.4, 0, 0, 1.5) forwards;
}

.reOverlay .reOverlay__modalWrapper.-ro-slideLeft .reOverlay__modalContainer {
  -webkit-animation: ro-slideLeft 0.3s cubic-bezier(0.4, 0, 0, 1.5) forwards;
  animation: ro-slideLeft 0.3s cubic-bezier(0.4, 0, 0, 1.5) forwards;
}

.reOverlay .reOverlay__modalWrapper.-ro-slideRight .reOverlay__modalContainer {
  -webkit-animation: ro-slideRight 0.3s cubic-bezier(0.4, 0, 0, 1.5) forwards;
  animation: ro-slideRight 0.3s cubic-bezier(0.4, 0, 0, 1.5) forwards;
}

.reOverlay .reOverlay__modalWrapper.-ro-flip .reOverlay__modalContainer {
  -webkit-animation: ro-flip 0.3s forwards ease-in;
  animation: ro-flip 0.3s forwards ease-in;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

.reOverlay .reOverlay__modalWrapper.-ro-rotate .reOverlay__modalContainer {
  -webkit-animation: ro-rotate 0.3s forwards ease-out;
  animation: ro-rotate 0.3s forwards ease-out;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
}

.reOverlay .reOverlay__modalWrapper.-ro-door .reOverlay__modalContainer {
  -webkit-animation: ro-door 0.3s cubic-bezier(0.4, 0, 0, 1.5) forwards;
  animation: ro-door 0.3s cubic-bezier(0.4, 0, 0, 1.5) forwards;
}

/* Keyframes */

@-webkit-keyframes ro-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes ro-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes ro-zoom {
  from {
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes ro-zoom {
  from {
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes ro-slideDown {
  from {
    -webkit-transform: translate3d(0, -2rem, 0);
    transform: translate3d(0, -2rem, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ro-slideDown {
  from {
    -webkit-transform: translate3d(0, -2rem, 0);
    transform: translate3d(0, -2rem, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes ro-slideUp {
  from {
    -webkit-transform: translate3d(0, 2rem, 0);
    transform: translate3d(0, 2rem, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ro-slideUp {
  from {
    -webkit-transform: translate3d(0, 2rem, 0);
    transform: translate3d(0, 2rem, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes ro-slideLeft {
  from {
    -webkit-transform: translate3d(-2rem, 0, 0);
    transform: translate3d(-2rem, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ro-slideLeft {
  from {
    -webkit-transform: translate3d(-2rem, 0, 0);
    transform: translate3d(-2rem, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes ro-slideRight {
  from {
    -webkit-transform: translate3d(2rem, 0, 0);
    transform: translate3d(2rem, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ro-slideRight {
  from {
    -webkit-transform: translate3d(2rem, 0, 0);
    transform: translate3d(2rem, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes ro-flip {
  from {
    -webkit-transform: perspective(18rem) rotate3d(1, 0, 0, 50deg);
    transform: perspective(18rem) rotate3d(1, 0, 0, 50deg);
  }
  70% {
    -webkit-transform: perspective(18rem) rotate3d(1, 0, 0, -15deg);
    transform: perspective(18rem) rotate3d(1, 0, 0, -15deg);
  }
  to {
    -webkit-transform: perspective(18rem);
    transform: perspective(18rem);
  }
}

@keyframes ro-flip {
  from {
    -webkit-transform: perspective(18rem) rotate3d(1, 0, 0, 50deg);
    transform: perspective(18rem) rotate3d(1, 0, 0, 50deg);
  }
  70% {
    -webkit-transform: perspective(18rem) rotate3d(1, 0, 0, -15deg);
    transform: perspective(18rem) rotate3d(1, 0, 0, -15deg);
  }
  to {
    -webkit-transform: perspective(18rem);
    transform: perspective(18rem);
  }
}

@-webkit-keyframes ro-rotate {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -180deg) scale3d(0.3, 0.3, 0.3);
    transform: rotate3d(0, 0, 1, -180deg) scale3d(0.3, 0.3, 0.3);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg) scale3d(1, 1, 1);
    transform: rotate3d(0, 0, 1, 0deg) scale3d(1, 1, 1);
  }
}

@keyframes ro-rotate {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -180deg) scale3d(0.3, 0.3, 0.3);
    transform: rotate3d(0, 0, 1, -180deg) scale3d(0.3, 0.3, 0.3);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg) scale3d(1, 1, 1);
    transform: rotate3d(0, 0, 1, 0deg) scale3d(1, 1, 1);
  }
}

@-webkit-keyframes ro-door {
  from {
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes ro-door {
  from {
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}