asan-service/sass/pages/user-auth.scss

.user-auth {
  background: url('/assets/img/auth/bg.jpg');
  background-size: cover;
  -webkit-background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 150px 15px;
  $sideWidth: 250px;
  $formBoxWidth: 800px;

  .formBox {
    width: 100%;
    max-width: $formBoxWidth;
    position: relative;
    @extend %defaultBorderRadius;
    overflow: hidden;
    background: #fff;

    .side {
      width: $sideWidth;
      height: 100%;
      background: url('/assets/img/auth/formbg.jpg');
      background-size: cover;
      -webkit-background-size: cover;
      background-repeat: no-repeat;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      p {
        text-align: center;
        margin-bottom: 20px;

        span {
          color: #fff;
          font-size: 14px;
        }
      }
    }

    .main {
      background: #fff;
      margin-right: $sideWidth;
      width: calc(#{$formBoxWidth} - #{$sideWidth});
      padding: 50px 0;

      .form_2 {
        width: 70%;
        margin-left: auto;
        margin-right: auto;

        .title {
          text-align: center;
          margin-bottom: 50px;

          p {
            font-size: 20px;
          }
        }

        .btnRow {
          a {
            font-size: 14px;
            color: $theme;
            display: block;
            margin-top: 15px;
          }
        }

        .err {
          p {
            padding-right: 30px;
          }
        }
      }
    }

    @media (max-width: 992px) {
      $sideHeight: 150px;

      .side {
        width: 100%;
        height: $sideHeight;
        position: absolute;
        top: 0;
        right: 0;
      }

      .main {
        margin: $sideHeight auto 0;
        width: 100%;
        //height: call(100% - #{$sideHeight});

        .form_2 {
          width: 100%;
          max-width: 500px;
          margin: 0 auto;
        }
      }
    }
  }

  &.login {
    .formBox {
      .main {
        .form_2 {
          .formRow {
            input {
              -webkit-background-size: 16px;
              background-size: 16px;
              background-position: 95% 10px;
              background-repeat: no-repeat;
              padding-right: 38px;

              &[name='email'] {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(0,0,0,0.5)' viewBox='0 0 512 512'%3E%3Cpath d='M464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h416c8.8 0 16 7.2 16 16v41.4c-21.9 18.5-53.2 44-150.6 121.3-16.9 13.4-50.2 45.7-73.4 45.3-23.2.4-56.6-31.9-73.4-45.3C85.2 197.4 53.9 171.9 32 153.4V112c0-8.8 7.2-16 16-16zm416 320H48c-8.8 0-16-7.2-16-16V195c22.8 18.7 58.8 47.6 130.7 104.7 20.5 16.4 56.7 52.5 93.3 52.3 36.4.3 72.3-35.5 93.3-52.3 71.9-57.1 107.9-86 130.7-104.7v205c0 8.8-7.2 16-16 16z'/%3E%3C/svg%3E");
                background-position: 95% 11px;
                direction: ltr;
                text-align: right;
              }

              &[name='password'] {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(0,0,0,0.5)' viewBox='0 0 448 512'%3E%3Cpath d='M224 420c-11 0-20-9-20-20v-64c0-11 9-20 20-20s20 9 20 20v64c0 11-9 20-20 20zm224-148v192c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V272c0-26.5 21.5-48 48-48h16v-64C64 71.6 136-.3 224.5 0 312.9.3 384 73.1 384 161.5V224h16c26.5 0 48 21.5 48 48zM96 224h256v-64c0-70.6-57.4-128-128-128S96 89.4 96 160v64zm320 240V272c0-8.8-7.2-16-16-16H48c-8.8 0-16 7.2-16 16v192c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16z'/%3E%3C/svg%3E");
                -webkit-background-size: 15px;
                background-size: 15px;
                direction: ltr;
                text-align: right;
              }
            }

            &.err {
              input {
                &[name='email'] {
                  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(255,0,0,0.5)' viewBox='0 0 512 512'%3E%3Cpath d='M464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h416c8.8 0 16 7.2 16 16v41.4c-21.9 18.5-53.2 44-150.6 121.3-16.9 13.4-50.2 45.7-73.4 45.3-23.2.4-56.6-31.9-73.4-45.3C85.2 197.4 53.9 171.9 32 153.4V112c0-8.8 7.2-16 16-16zm416 320H48c-8.8 0-16-7.2-16-16V195c22.8 18.7 58.8 47.6 130.7 104.7 20.5 16.4 56.7 52.5 93.3 52.3 36.4.3 72.3-35.5 93.3-52.3 71.9-57.1 107.9-86 130.7-104.7v205c0 8.8-7.2 16-16 16z'/%3E%3C/svg%3E");
                }

                &[name='password'] {
                  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(255,0,0,0.5)' viewBox='0 0 448 512'%3E%3Cpath d='M224 420c-11 0-20-9-20-20v-64c0-11 9-20 20-20s20 9 20 20v64c0 11-9 20-20 20zm224-148v192c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V272c0-26.5 21.5-48 48-48h16v-64C64 71.6 136-.3 224.5 0 312.9.3 384 73.1 384 161.5V224h16c26.5 0 48 21.5 48 48zM96 224h256v-64c0-70.6-57.4-128-128-128S96 89.4 96 160v64zm320 240V272c0-8.8-7.2-16-16-16H48c-8.8 0-16 7.2-16 16v192c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16z'/%3E%3C/svg%3E");
                }
              }
            }
          }

          .btnRow {
            a {
              font-size: 14px;
              color: $theme;
              display: block;
              margin-top: 15px;
            }
          }
        }
      }
    }
  }

  &.register {
    .formBox {
      .main {
        .form_2 {
          .formRow {
            input {
              padding-right: 20px;

              &[name='email'] {
                background-image: none;
              }

              &[name='password'] {
                background-image: none;
              }

              &[name='mobile'],
              &[name='password_confirmation'],
              &[name='national_code'] {
                direction: ltr;
                text-align: right;
              }
            }

            &.err {
              input {
                &[name='email'] {
                  background-image: none;
                }

                &[name='password'] {
                  background-image: none;
                }
              }
            }

            &.addressTextArea {
              textarea {
                display: block;
                width: 95%;
                max-width: 95%;
                height: 70px;
                padding-right: 20px;
                margin-right: 2.5% !important;
                resize: none !important;
              }
            }

            .el-select {
              .el-input__suffix {
                right: 0;
                left: 20px;
                text-align: left;
              }
            }
          }
        }
      }
    }

    .hasValidationError {
      height: 1570px !important;

      //@media (max-width: 992px) {
      //  height: 1100px !important;
      //}
    }
  }

  &.reset-pass {
    .formBox {
      .main {
        padding: 100px 0;

        &.hasMessage {
          padding: 50px 0;
        }

        .form_2 {
          .title {
            margin-bottom: 30px;
          }

          .btnRow {
            button {
              margin-top: 0;
            }
          }
        }
      }
    }
  }
}