extpoint-yii2/form/style/PasswordFieldView.less

JavaScript part for projects on ExtPoint Yii2 Boilerplate and yii2-core

.PasswordFieldView {
  &__container {
    position: relative;
  }

  &__security-level {
    font-size: @font-size-small;
    color: @brand-danger;
  }

  &__security-level-bar {
    background: #fbf8eb;
    height: 5px;
    margin: 10px 0 0 0;
    border-radius: 3px;
    position: relative;

    &:after {
      display: block;
      content: '';
      position: absolute;
      left: 0;
      height: 100%;
      transition: 0.5s;
      background: @brand-danger;
      border-radius: 3px;
      top: 0;
      width: 0;
    }
  }
  &_easy &__security-level-bar:after {
    width: 25%;
  }
  &_medium &__security-level-bar:after {
    background: @brand-warning;
    width: 50%;
  }
  &_hard &__security-level-bar:after {
    width: 100%;
    background: @brand-success;
  }

  &__security-level-error {
    display: none;
    margin: 5px 0 0 0;
    font-size: @font-size-small;
    color: @brand-danger;
  }
  &_medium &__security-level-error {
    color: @brand-warning;
  }
  &_hard &__security-level-error {
    background: @brand-success;
  }

  &_error &__security-level-error {
    display: block;
  }

  &__icon-eye {
    position: absolute;
    right: 15px;
    top: 9px;
    cursor: pointer;
  }
}