oui-kit/lib/basic/oui-password.styl

🎯 *UI toolkit with a French touch* 🇫🇷

@require "../../stylus/index.styl";

.oui-password {
  use: stack-y;
  display: inline-flex;

  input {
    width: 100%;
  }

  &-strength {
    position: relative;
    width: 100%;
    height: 5;
    margin-top: 8;
    background: #ccc;
    border-radius: 2px;

    &:after {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      content: " ";
      border-radius: 2px;
      transition: all 0.1s linear;
    }

    &[data-score="0"] {
      background-color: alpha(#f95e68, 0.25);

      &:after {
        background-color: #f95e68;
        width: 10%;
      }
    }

    &[data-score="1"] {
      background-color: alpha(#fb964d, 0.25);

      &:after {
        background-color: #fb964d;
        width: 32.5%;
      }
    }

    &[data-score="2"] {
      background-color: alpha(#fdd244, 0.25);

      &:after {
        background-color: #fdd244;
        width: 55%;
      }
    }

    &[data-score="3"] {
      background-color: alpha(#b0dc53, 0.25);

      &:after {
        background-color: #b0dc53;
        width: 77.5%;
      }
    }

    &[data-score="4"] {
      background-color: alpha(#35cc62, 0.25);

      &:after {
        background-color: #35cc62;
        width: 100%;
      }
    }
  }
}