agneta-angularjs/source/form/password.styl

Create your agneta applications with AngularJS

height = 16px;
color-score-0 = #da0f0f;
color-score-1 = #d2208f;
color-score-2 = #a220d2;
color-score-3 = #0aa988;
color-score-4 = #43a200;

form{
  .password-field{
    .md-errors-spacer{
      display: none;
    }
  }
  .password-strength{

    padding: 10px;
    color: white;
    margin-top: 10px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    border-radius: 4px;

    &.score-0{
      background: color-score-0
      .md-bar{
        background: color-score-0;
      }
    }
    &.score-1{
      background: color-score-1
      .md-bar{
        background: color-score-1;
      }
    }
    &.score-2{
      background: color-score-2
      .md-bar{
        background: color-score-2;
      }
    }
    &.score-3{
      background: color-score-3
      .md-bar{
        background: color-score-3;
      }
    }
    &.score-4{
      background: color-score-4
      .md-bar{
        background: color-score-4;
      }
    }

    .messages{
      margin-top: 8px;
      margin-bottom: 20px;
    }

    .progress{

      background: white;
      border-radius: 3px;
      padding: 16px 10px;

      md-progress-linear{
        height: height;
        >div{
          height: height;
        }
      }

      .title{
        padding-right: 10px;
        font-weight: bold;
      }

      .md-bar{
        border-radius: 3px;
        height: height;
        transition: background 400ms ease, transform .2s linear;
      }
    }

    .feedback{
      margin-top: 10px;

      .warning{
        font-weight: bold;
        font-size: 0.9em;
      }

      .suggestions{
        li{
          font-size: 0.8em;
        }
      }
    }

  }
}