@adactive/arc-modal/src/AdsumModal.css

Adsum Modal Component

.vertical-align {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.adsumModal {
  display: none;
  opacity: 0;
}
.adsumModal.open {
  width: 1920px;
  height: 1080px;
  position: absolute;
  display: block;
  opacity: 1;
  z-index: 6;
}
.adsumModal .adsumModal-overlay {
  pointer-events: all;
  background: #9a9b9a;
  opacity: 0.5;
  display: block;
  z-index: 2;
  height: 100%;
  width: 100%;
}
.adsumModal .adsumModal-wrapper {
  background: white;
  pointer-events: all;
  z-index: 4;
  width: 30%;
  height: 40%;
  position: absolute;
  left: 35%;
  top: 30%;
  opacity: 1;
  /* Effect 1: Fade in and scale up */
  /* Effect 2: Slide from the right */
  /* Effect 3: Slide from the bottom */
  /* Effect 11: Super scaled */
}
.adsumModal .adsumModal-wrapper.fadeIn {
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.adsumModal .adsumModal-wrapper.fadeIn.show {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
.adsumModal .adsumModal-wrapper.slideRight {
  -webkit-transform: translateX(20%);
  -moz-transform: translateX(20%);
  -ms-transform: translateX(20%);
  transform: translateX(0%);
  opacity: 0;
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.adsumModal .adsumModal-wrapper.slideRight.show {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}
.adsumModal .adsumModal-wrapper.slideBottom {
  -webkit-transform: translateY(20%);
  -moz-transform: translateY(20%);
  -ms-transform: translateY(20%);
  transform: translateY(20%);
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.adsumModal .adsumModal-wrapper.slideBottom.show {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.adsumModal .adsumModal-wrapper.superScaled {
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.adsumModal .adsumModal-wrapper.superScaled.show {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}