Anastasia / clinica

$colorNormal: #ffee58;
$colorHover: #ffd632;
$colorActive: #ffc444;
$colorError: #ff4081;

* {margin: 0; padding: 0; box-sizing: border-box;}
body {
  background: #efefef;
  font-family: Ubuntu;
  font-size: 13px;
  color: #fff;
}
img {
  vertical-align: top;
}
a {
  color: #fff;
  &:hover {
    text-decoration: underline;
    color: $colorNormal;
  }
}

.style {
  width: 100%;
  float: left;
}

.form-login-wrapp {
  width: 360px;
  left: 50%;
  margin-left: -180px;
  background: #fff;
  position: absolute;
  top: 100px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.55);

  &.animated {
    .logo-form-wr {
      perspective: 250px;
      div {
        animation: rotate 3s infinite linear;

      }
    }
  }
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@-webkit-keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@-moz-keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

.logo-form-wr {
  padding: 30px 0;

  div {
    transition: 1s;
    margin: 0 auto;
    width: 68px;height: 68px;
    background: url("../login-img/logo.png") 50% 50% no-repeat;
  }
}

.start-form {
  background: #aacf38 url("../login-img/bg.png") 50% 0 no-repeat;
  form {
    padding: 50px 30px 30px 30px;
    float: left;
    width: 100%;
  }

}

.inputs-wrapp {
  position: relative;

  .help-block {
    display: none;
  }

  .form-group {
    width: 100%;
    float: left;
    position: relative;
    &:first-child {
      input {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top: 1px solid #fff;
      }
    }
    &:last-child {
      input {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }
    }

    label {
      position: absolute;
      color: #bdbdbd;
      height: 14px;
      top: 50%;
      margin-top: -7px;
      left: 37px;
    }
    input {
      width: 100%;
      float: left;
      border: 1px solid #fff;
      border-top: 1px solid #e0e0e0;;
      outline: none !important;
      background: #fff;
      height: 38px;
      padding-left: 37px;
      padding-right: 5px;

      &:focus {
        + label {
          display: none;
        }
      }
    }

    &.has-error {
      input {
        border: 1px solid $colorError;
      }
    }
    &.has-success {
      label {
        display: none !important;
      }
    }
    &:before {
      width: 37px;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      content: '';
    }

    &.field-loginform-username {
      &:before {
        background: url("../login-img/user-ico.png") 50% 50% no-repeat;
      }
    }
    &.field-loginform-password {
      &:before {
        background: url("../login-img/pass-ico.png") 50% 50% no-repeat;
      }
    }
  }
}

.checks-wrapp {
  text-align: center;
  margin-top: 19px;
  input {
    display: none;

    + label {
      position: relative;
      padding-left: 27px;
      cursor: pointer;
      line-height: 16px;
      color: #fff;
      span {
        position: absolute;
        width:16px;
        height:16px;
        top: -0;
        left: 0;
        background: #b6df48;
        border-radius: 1px;
        cursor: pointer;
        &:before {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          content: '';
          display: none;
        }
      }


    }



    &:hover {
      + label {

        span {

          &:before {
display: block;
            background: -moz-radial-gradient(center, ellipse cover, rgba(164,254,105,0) 0%, rgba(164,254,105,1) 100%);
            background: -webkit-radial-gradient(center, ellipse cover, rgba(164,254,105,0) 0%,rgba(164,254,105,1) 100%);
            background: radial-gradient(ellipse at center, rgba(164,254,105,0) 0%,rgba(164,254,105,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a4fe69', endColorstr='#a4fe69',GradientType=1 );

          }
        }

      }
    }

    &:active {
      + label {
        &:before {

        }

      }
    }
    &:checked {

      + label {

        span {
          &:before {
            display: block;
          background: url("../login-img/check.png") 50% 50% no-repeat;
          }
        }

      }

    }



  }
}


.button-wr {
  margin-top: 21px;
  button {
    margin: 0 auto;
    width: 165px;
    height: 38px;
    line-height: 38px;
    outline: none !important;
    border: none !important;
    background: $colorNormal;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.55);
    text-align: center;
    font-size: 14px;
    color: #444444;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 4px;
    display: block;
    cursor: pointer;
    &:hover {
      box-shadow: none;
    }
    &:active {
      background: $colorActive;
    }
  }
}

.form-login-wrapp {
  &.shop {
    .logo-form-wr {
      div {
        background: url("../login-img/logo-shop.png") 50% 50% no-repeat;
      }
    }

    .start-form {
      background: #a73d97 url("../login-img/bg-shop.png") 50% 0 no-repeat;
      form {
      }

    }

    .checks-wrapp {
      input {
        + label {
          span {
            background: #c451b3;
            &:before {
            }
          }
        }

        &:hover {
          + label {

            span {
              &:before {
                background: -moz-radial-gradient(center, ellipse cover, rgba(223,133,212,0) 0%, rgba(223,133,212,1) 100%);
                background: -webkit-radial-gradient(center, ellipse cover, rgba(223,133,212,0) 0%,rgba(223,133,212,1) 100%);
                background: radial-gradient(ellipse at center, rgba(223,133,212,0) 0%,rgba(223,133,212,1) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00df85d4', endColorstr='#df85d4',GradientType=1 );
              }
            }

          }
        }

        &:active {
          + label {
            &:before {

            }

          }
        }
        &:checked {

          + label {

            span {
              &:before {
                display: block;
                background: url("../login-img/check-shop.png") 50% 50% no-repeat;
              }
            }

          }

        }



      }
    }


  }
}