scopado.vue

<style lang="scss">
@import '~@style/reference';


.login-page {

  .logo-form {
      margin-bottom: 40px;
      margin-top: 50px !important;
  }
  .form {
    min-width: 250px;
    max-width: 320px;

    & >.text {
      margin-bottom: 25px;
      color: #121E48;
      opacity: 0.5;
      font-family: "Nunito Sans";
      font-size: 14px;
      line-height: 19px;
    }
    & > .input-data {
      //margin-bottom: 35px !important;

      input:not(.-has-validation) {
        &:hover,
        &:active,
        &:focus {
          border-color: $primary-color-placeholder;
          box-shadow: 0 0 0 1px $primary-color-placeholder;
          outline: $primary-color-placeholder;
        }
      }
    }

    & > .under-input {
        margin-top: -10px;
        display: flex;
        position: relative;
        justify-content: space-between;

    & > .wrongdata {
        font-size: 12px;
        color: $failure-color;
        font-family: $base-font-family;
        font-weight: 100;
        padding-right: 100px;
        position: absolute;

        & > .icon {
          fill: $failure-color;
        }
      }
      & > .forget-pwd {
        position: absolute;
        font-size: 12px;
        right: 0;
        color: #8FB2F4;
        font-family: $base-font-family;
        font-weight: 100;
        text-decoration: none;
        cursor: pointer;
      }
    }
    & > .btn-group {
      display: flex;
      align-items: center;
      flex-direction: column;
      margin-top: 40px;
      margin-bottom: 40px;

      & > .btn {
          width: 100%;
          margin: 10px 0px;
          font-family: $base-font-family;
          font-weight: 100;
      }

      & > .lines{
        font-size: 12px;
        width: 100%;
        text-align: center;
        margin: 15px auto;
        overflow: hidden;
        color: grey     ;
        font-family: $base-font-family;
        font-weight: 100;

        &:before {
            margin-left: -100%;
        }
        &:after {
            margin-right: -100%;
        }
        &:before,
        &:after {
            display: inline-block;
            content: '';
            background-color: #F1F1F4;
            height: 1px;
            width: 100%;
            vertical-align: middle;
            box-sizing: border-box;
            border: solid #FFF;
            border-width: 0 10px;
        }
      }
    }
  }

  .modal-carrousel {
    background-color: rgba(234,237,239, 0.25);
    margin: 20px -20px -15px -20px;
    padding: 45px 20px;

    & >.text {
      text-align: center;
      margin: 0 15%;
      color: rgba(18,30,72,0.8);
    }
      & > .carousel {
        margin: 0 auto;
        margin-top: 70px;

        .swiper-slide {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 130px;
          min-width: 150px;

          & > .card-link > .item {
            width: 150px;
            height: 75px;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
              max-width: 60px;
              max-height: 40px;
            }
          }
          & >.text {
            margin-top: 5px;
            text-transform: uppercase;
            font-size: 11px;
            color: rgba(18,30,72,0.8);
          }
        }

        & > .swiper-button {
          z-index: 20;
          background-color: rgba(234,237,239, 0.7);
          display: block;
          position: absolute;
          cursor: pointer;
          top: 50%;
          border-radius: 50%;
          width: 60px;
          height: 60px;
          transition: opacity .3s ease;

          & > .c-icon.icon {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
          }

          &.-disabled,
          &.-hidden { opacity: 0; }

          &.-prev {
            left: 0;
            transform: translate(-50%, -50%);

            & > .c-icon.icon { right: 8px; }
          }

          &.-next {
            right: 0;
            transform: translate(50%, -50%);

            & > .c-icon.icon { left: 8px; }
          }
        }
      }
  }
}