ost-ui/components/OstMask/style.less

ost ui for react

.ost-mask {

  &-bg {
    position: fixed;
    left: 0;
    top: -200 * @BU;
    z-index: 999;
    width: 100%;
    height: 1000%;
  }

  &-children {
    position: fixed;
    z-index: 1000;
  }

  &-am {

    .effect(@keyframes) {
      animation-duration: 0.2s; // animation-timing-function: cubic-bezier(.55, 0, .55, .2);
      animation: @keyframes .3s 1 linear;
      animation-name: @keyframes;
      animation-fill-mode: both;
    }

    &-fade-in {
      .effect(@keyframes: amFadeIn);
      animation-play-state: running;
    }

    &-fade-out {
      .effect(@keyframes: amFadeOut);
      animation-play-state: running;
    }

    @keyframes amFadeIn {
      0% {
        opacity: 0;
        visibility: hidden;
      }

      100% {
        opacity: 1;
        visibility: visible;
      }
    }

    @keyframes amFadeOut {
      0% {
        opacity: 1;
        visibility: visible;
      }

      100% {
        opacity: 0;
        visibility: hidden;
      }
    }

  }
}