toggle-password-with-tips.directive.scss

@import 'topcoder/tc-includes';
@import "../tc-ui-variables.scss";

// Toggle password with password tips directive
toggle-password-with-tips {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0px;
  position: relative;

  .input-btn {
    position: relative;
    width: 100%;
  }

  .input-btn .input {
    padding-right: 80px;
  }

  .input-btn .input:focus ~ .tc-btn {
    color: #FFFFFF;
    background: $tc-dark-blue-90;
  }

  .input-btn .tc-btn,
  .input-btn .tc-btn:hover,
  .input-btn .tc-btn:focus,
  .input-btn .tc-btn:active {
    position: absolute;
    right: 1px;
    top: 1px;
    background: $tc-gray-60;
    border: 0;
    height: 38px;
    border-radius: 0 3px 3px 0;
    box-shadow: none;
    line-height: inherit;
  }

  button#toggleInputTypeBtn {
    width: 75px;
  }

  .tooltip {
    opacity: 0;
  }

  input#password-input:focus ~ .tooltip {
    opacity: 1;
  }

  label {
    display: flex !important;
    line-height: 20px !important;
    position: absolute;
    top: 10px;
    right: 0px;
  }
}