classroom-instruments/src/components/layout/modals/suggestion-option.module.less

.pxToVW (@px, @attr: width) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}


.isHidden {
  background: url(../images/inBack.png) no-repeat,
    url(../images/inBack2.png) no-repeat,
    url(../images/inBack3.png) no-repeat,
    url(../images/inBack4.png) no-repeat,
    url(../images/inBack5.png) no-repeat;
  opacity: 0;
  background-size: 754px 672px;
}

.suggestOption {
  .updateBtnGroup {
    padding: 0;
    justify-content: center !important;
    position: relative;

    :global {
      .n-button {
        height: 48px !important;
        min-width: 156px;
      }
    }
  }

  .suggestSelect {
    :global {
      .n-base-selection__border {
        border: 1px solid #AADCFF;
      }


    }
  }


  @keyframes forDown {
    0% {
      top: 0
    }

    100% {
      top: 450px
    }
  }


  @keyframes forUp {
    0% {
      top: 0
    }

    100% {
      top: -180px
    }
  }

  @keyframes endRoute {
    0% {
      // top: -150px;
      // left: 200px;
      // transform-origin: 291px 438px; rotate(180deg)
      // transform: scale(1);
      opacity: 1;
    }

    // 25% {
    //   top: -180px;
    //   left: 300px;
    //   transform-origin: 291px 438px;
    //   transform: rotate(-360deg) scale(.8);
    // }

    // 50% {
    //   top: -210px;
    //   left: 400px;
    //   transform-origin: 291px 438px;
    //   transform: rotate(-450deg) scale(.6);
    // }

    100% {
      // top: -240px;
      // left: 500px;
      // transform-origin: 291px 438px;  rotate(360deg)
      opacity: 0;
      transform: scale(.4);
    }
  }

  @keyframes reversal {
    0% {
      background: url(../images/inBack.png) no-repeat;
      background-size: 754px 672px;

    }

    25% {
      background: url(../images/inBack2.png) no-repeat;
      background-size: 754px 672px;

    }

    // 50% {
    //   background: url(../images/inBack3.png) no-repeat;
    //   background-size: 754px 672px;
    //   z-index: .1;
    // }

    50% {
      background: url(../images/inBack3.png) no-repeat;
      background-size: 754px 672px;
      opacity: .1;
      z-index: 0;
    }

    75% {
      background: url(../images/inBack4.png) no-repeat;
      background-size: 754px 672px;
      // background-color: #005FA0;
      z-index: 300;
    }

    100% {
      background: url(../images/inBack5.png) no-repeat;
      background-size: 754px 672px;
      z-index: 300;
    }

  }

  @keyframes stamp {
    0% {
      opacity: 1;
      transform: scale(1.5);
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  .inBack {
    width: 754px;
    height: 672px;
    position: absolute;
    bottom: 0;
    background: url(../images/inBack.png) no-repeat;
    // url(../images/inBack2.png) no-repeat,
    // url(../images/inBack3.png) no-repeat,
    // url(../images/inBack4.png) no-repeat,
    // url(../images/inBack5.png) no-repeat;
    background-size: 754px 672px;
    z-index: 1;

  }

  .inBack.isAni {
    animation: reversal .3s 1s forwards;
  }

  .inBackBottom {

    width: 754px;
    left: 12px;
    width: 730px;
    height: 393px;
    // background: url(../images/boxBg.png) 754px 380px;
    position: absolute;
    bottom: 0;
    border-radius: 35px 25px;
  }

  .inFront {
    width: 754px;
    height: 262px;
    position: absolute;
    bottom: -1px;
    // left: 12px;
    z-index: 200;

  }

  .submitBtn {
    width: 272px;
    height: 54px;
    position: absolute;
    z-index: 201;
    bottom: 111px;
    left: 50%;
    margin-left: -136px;
    cursor: pointer;
    z-index: 400;
  }


  .updatePassword.isAni {
    // endRoute linear .3s 2.3s forwards;
    animation: forUp linear .3s forwards,
  }

  .updatePassword {
    // padding: 0 12px;

    background-color: transparent;
    margin: 0 auto 0;
    position: relative;
    overflow: hidden;
    top: 0;


    .formWrap.isAni {
      animation: forDown linear 1s forwards;
    }

    .sealing {
      position: absolute;
      bottom: 58px;
      z-index: 300;
      width: 173px;
      height: 175px;
      left: 50%;
      margin-left: -87px;
      opacity: 0;
    }

    .sealing.isAni {
      animation: stamp linear .3s 1.5s forwards;
    }

    // padding: 40px;
    .formWrap {
      background-color: #fff;
      margin: 0 27px 0;
      width: 700px;
      height: 836px;
      border-radius: 20px;
      padding: 15px 15px 5px;
      position: relative;
      z-index: 100;


      .formTitle {
        text-align: center;
        margin-top: 31px;
      }

      .bgLine {
        position: absolute;
        width: 670px;
        height: 779px;
        left: 15px;
        top: 15px;
      }

      h2 {
        font-size: 28px;
      }

      .formWrapInfo {
        padding: 24px 19px 0;
      }

      .closeBtn {
        width: 60px;
        height: 60px;
        position: absolute;
        right: -1px;
        top: 0;
        z-index: 100;
        cursor: pointer;
      }
    }
  }



  .countInput {
    border-radius: 8px;
    min-height: 265px;

    :global {
      .n-input__textarea-el {
        line-height: 51px !important;
        font-size: 16px;
        font-weight: 400;
        color: #131415;
        background: url('../images/textLIne.png') repeat;
        background-size: 632px 51px;
      }

      .n-input__placeholder {
        margin-top: 13px !important;
      }

      .n-input-wrapper {
        padding: 0 !important;
      }

      .n-input-word-count {
        bottom: -25px !important;
        font-size: 14px;
        font-weight: 400;
        color: #AAAAAA;
        line-height: 20px;
      }
    }



  }

  .addInput {
    font-size: 16px;
    font-weight: 400;
    color: #777777;
    line-height: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
      width: 35px;
      height: 35px;
      margin-bottom: 5px;
    }
  }

  :global {
    .n-upload-trigger.n-upload-trigger--image-card {
      width: 110px;
      height: 110px;
      background: #FDFDFD;
      border-radius: 8px;
    }

    .n-upload-file-list .n-upload-file.n-upload-file--image-card-type {
      width: 110px;
      height: 110px;
      background: #FDFDFD;
      border-radius: 8px;

    }


    .n-upload-file-list.n-upload-file-list--grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, 110px);
      grid-gap: 20px;
      margin-top: 0;
    }
  }

  .messageWrap {
    // display: flex;
    // flex-direction: row;
    align-items: center;
    position: absolute;
    bottom: 35px;
    z-index: 202;
    width: 100%;
    text-align: center;

    p {
      height: 25px;
      font-size: 18px;
      font-weight: 400;
      color: #005FA0;
      line-height: 25px;
      // margin-right: 40px;
    }
  }
}