smart-webcomponents-react/source/styles/default/smart.passwordtextbox.css

[](https://jqwidgets.com/license/)

/* smart-password-text-box */
smart-password-text-box {
  display: block;
  width: var(--smart-text-box-default-width);
  height: var(--smart-text-box-default-height);
}
smart-password-text-box.smart-element {
  border: 1px solid var(--smart-border);
  background: var(--smart-background);
  overflow: visible;
  border-radius: var(--smart-border-radius);
}

.smart-password-text-box > .smart-container {
  position: relative;
}
.smart-password-text-box .smart-content {
  width: 100%;
  height: 100%;
  color: inherit;
  font-family: inherit;
  position: relative;
  overflow: hidden;
}
.smart-password-text-box .smart-content .smart-input {
  width: 100%;
  height: 100%;
  color: inherit;
  font-family: inherit;
  position: relative;
  overflow: hidden;
}
.smart-password-text-box .smart-content .smart-input::-ms-reveal {
  display: none;
}
.smart-password-text-box .smart-password-icon {
  position: absolute;
  right: 0px;
  top: 0px;
  height: 100%;
  width: 30px;
  display: flex;
  justify-content: center;
  font-size: inherit;
  align-items: center;
  cursor: pointer;
  user-select: none;
  color: var(--smart-background-color);
  font-family: var(--smart-font-family-icon);
}
.smart-password-text-box .smart-password-icon:after {
  content: var(--smart-icon-visibility);
}
.smart-password-text-box .smart-password-icon.smart-hidden {
  display: none;
}
.smart-password-text-box smart-tooltip {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
}
.smart-password-text-box .smart-label,
.smart-password-text-box .smart-hint {
  display: none;
  position: absolute;
}
.smart-password-text-box[label] .smart-label, .smart-password-text-box[hint] .smart-hint {
  position: absolute;
  left: 0;
  bottom: 100%;
  font-size: 12px;
  width: 100%;
  display: block;
  padding: var(--smart-editor-label-padding);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  text-align: initial;
  line-height: initial;
  vertical-align: initial;
}
.smart-password-text-box[hint] .smart-hint {
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1);
  top: 100%;
  bottom: initial;
}
.smart-password-text-box[hint][focus] .smart-hint {
  opacity: 1;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .smart-password-text-box .smart-hint,
    .smart-password-text-box .smart-hint::after {
      transition-duration: 0.1s;
    }
  }
}
.smart-password-text-box[show-password-strength]:focus .smart-password-short input, .smart-password-text-box[show-password-strength] .smart-password-short input:focus {
  border-color: var(--smart-error);
}
.smart-password-text-box[show-password-strength]:focus .smart-password-weak input, .smart-password-text-box[show-password-strength] .smart-password-weak input:focus {
  border-color: orange;
}
.smart-password-text-box[show-password-strength]:focus .smart-password-far input, .smart-password-text-box[show-password-strength] .smart-password-far input:focus {
  border-color: yellow;
}
.smart-password-text-box[show-password-strength]:focus .smart-password-good input, .smart-password-text-box[show-password-strength] .smart-password-good input:focus {
  border-color: deepskyblue;
}
.smart-password-text-box[show-password-strength]:focus .smart-password-strong input, .smart-password-text-box[show-password-strength] .smart-password-strong input:focus {
  border-color: var(--smart-success);
}

/* smart-password-text-box */
smart-password-text-box[right-to-left] .smart-label,
smart-password-text-box[right-to-left] .smart-hint,
smart-password-text-box[right-to-left] > .smart-container {
  direction: rtl;
}
smart-password-text-box[right-to-left] smart-tooltip {
  direction: initial;
}
smart-password-text-box[right-to-left] .smart-password-icon {
  left: 0;
  right: initial;
}