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

Adsum Modal Component

@import "../../adsum-utils/less/colors-default";
@import "../../adsum-utils/less/mixins";

@grey: #8a8b8a;

.adsumModal {
  display: none;
  opacity: 0;

  &.open {
    width: 1920px;
    height: 1080px;
    position: absolute;

    display: block;
    opacity: 1;
    z-index: 6;
  }

  .adsumModal-overlay {
    pointer-events: all;

    background: @light-grey;
    opacity: 0.5;
    display: block;
    z-index: 2;

    height: 100%;
    width: 100%;
  }
  .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 */
    &.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;

      &.show {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
      }
    }

    /* Effect 2: Slide from the right */
    &.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);

      &.show {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
      }
    }

    /* Effect 3: Slide from the bottom */
    &.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;

      &.show {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
      }
    }

    /* Effect 11: Super scaled */
    &.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;

      &.show {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
      }
    }
  }
}