fiedl/your_platform

View on GitHub
app/assets/stylesheets/your_platform/password_strength.sass

Summary

Maintainability
Test Coverage

$color-s0: #c81818
$color-s1: #c81818
$color-s2: #ffac1d
$color-s3: #a6c060
$color-s4: #27b30f

.password_strength_container
  position: relative
  width: 200px
  margin-top: 2px
  height: 14px

.password_strength_bg
  height: 4px
  background-color: #E8E8E8
  width: 100%
  position: absolute
  left: 0px

.password_strength
  height: 4px
  width: 0px
  position: absolute
  left: 0px

.password_strength_separator
  height: 4px
  width: 2px
  background-color: #FFF
  position: absolute
  left: 0px
  visibility: hidden

.password_strength_desc
  float: right
  margin-top: 6px
  line-height: 16px

.password_strength_icon
  float: right
  margin-top: 5px
  margin-left: 3px

.password_strength_score0
  .password_strength_desc
    color: $color-s0
  .password_strength
    background-color: $color-s0

.password_strength_score1
  .password_strength_desc
    color: $color-s1
  .password_strength
    background-color: $color-s1

.password_strength_score2
  .password_strength_desc
    color: $color-s2
  .password_strength
    background-color: $color-s2

.password_strength_score3
  .password_strength_desc
    color: $color-s3
  .password_strength
    background-color: $color-s3

.password_strength_score4
  .password_strength_desc
    color: $color-s4
  .password_strength
    background-color: $color-s4