@kabbage/sprout 0.13.2

Form Input Component

A CSS implementation of the Sprout Form input component.

Example

html 
<div class="spr-stack-container-md">
  <div class="spr-form-input-container">
    <input class="spr-form-input" placeholder="Content">
  </div>
  <div class="spr-form-input-container">
    <input class="spr-form-input error" placeholder="Content">
  </div>
  <div class="spr-form-input-container">
    <input class="spr-form-input" disabled="disabled" placeholder="Content">
  </div>
  <div class="spr-form-input-container">
    <input class="spr-form-input error" disabled="disabled" placeholder="Content">
  </div>
  <div class="spr-form-input-container">
    <label class="spr-form-input-label" for="labeled-input">Label</label>
    <input class="spr-form-input" id="labeled-input" placeholder="Content">
  </div>
  <div class="spr-form-input-container">
    <label class="spr-form-input-label" for="labeled-input">Label</label>
    <input class="spr-form-input" id="labeled-input" placeholder="Content">
    <div class="spr-form-input-helper-text">Helper text goes here.</div>
  </div>
  <div class="spr-form-input-container">
    <label class="spr-form-input-label error" for="labeled-input">Label</label>
    <input class="spr-form-input error" id="labeled-input" placeholder="Content">
    <div class="spr-form-input-helper-text spr-helper-text-error">Helper text goes here.</div>
  </div>
  <div class="spr-form-input-container">
    <label class="spr-form-input-label" for="labeled-input">Label</label>
    <input class="spr-form-input" disabled="disabled" id="labeled-input" placeholder="Content">
    <div class="spr-form-input-helper-text disabled">Helper text goes here.</div>
  </div>
  <div class="spr-form-input-container">
    <label class="spr-form-input-label disabled" for="labeled-input">Label</label>
    <input class="spr-form-input" id="labeled-input" disabled="disabled" placeholder="Content">
    <div class="spr-form-input-helper-text disabled">Helper text goes here.</div>
  </div>
  <div class="spr-form-input-container">
    <div class="spr-form-input spr-select">
      <div style="display:flex;flex-direction:row;justify-content:space-between;">
        <div>Sprout</div>
        <i class="spr-icon spr-icon-carat-down"></i>
      </div>
    </div>
  </div>
  <div class="spr-form-input-container">
    <div class="spr-form-input spr-select error">
      <div style="display:flex;flex-direction:row;justify-content:space-between;">
        <div>Sprout</div>
        <i class="spr-icon spr-icon-carat-down error"></i>
      </div>
    </div>
  </div>
  <div class="spr-form-input-container">
    <div class="spr-form-input spr-select disabled">
      <div style="display:flex;flex-direction:row;justify-content:space-between;">
        <div>Sprout</div>
        <i class="spr-icon spr-icon-carat-down"></i>
      </div>
    </div>
  </div>
  <div class="spr-form-input-container">
    <label class="spr-form-input-label" for="labeled-input">Label</label>
    <div class="spr-form-input spr-select">
      <div style="display:flex;flex-direction:row;justify-content:space-between;">
        <div>Sprout</div>
        <i class="spr-icon spr-icon-carat-down"></i>
      </div>
    </div>
    <div class="spr-form-input-helper-text">Helper text goes here.</div>
  </div>
  <div class="spr-form-input-container">
    <label class="spr-form-input-label" for="labeled-input">Label</label>
    <div class="spr-form-input spr-select">
      <div style="display:flex;flex-direction:row;justify-content:space-between;">
        <div>Sprout</div>
        <i class="spr-icon spr-icon-carat-down"></i>
      </div>
    </div>
  </div>
  <div class="spr-form-input-container">
    <label class="spr-form-input-label" for="labeled-input">Label</label>
    <div class="spr-form-input spr-select focus">
      <div style="display:flex;flex-direction:row;justify-content:space-between;">
        <div>Sprout</div>
        <i class="spr-icon spr-icon-carat-down"></i>
      </div>
    </div>
    <div class="spr-popover-container">
      <div class="spr-popover">
        <div class="spr-select-menu">
          <div class="spr-select-option selected">Selected Option</div>
          <div class="spr-select-option">Not Selected Option</div>
          <div class="spr-select-option disabled">Disabled Option</div>
        </div>
      </div>
    </div>
  </div>
  <div class="spr-form-input-container">
    <div class="spr-form-input-icon-wrap">
      <i class="spr-icon spr-icon-check spr-form-input-leading-icon"></i>
      <input class="spr-form-input with-leading-icon" id="labeled-input" placeholder="Content">
    </div>
  </div>
  <div class="spr-form-input-container">
    <div class="spr-form-input-icon-wrap">
      <i class="spr-icon spr-icon-visibility-on spr-form-input-trailing-icon"></i>
      <input class="spr-form-input with-trailing-icon" id="labeled-input" placeholder="Content">
    </div>
  </div>
  <div class="spr-form-input-container">
    <div class="spr-form-input-icon-wrap">
      <i class="spr-icon spr-icon-check spr-form-input-leading-icon"></i>
      <i class="spr-icon spr-icon-visibility-on spr-form-input-trailing-icon"></i>
      <input class="spr-form-input with-leading-icon with-trailing-icon" id="labeled-input" placeholder="Content">
    </div>
  </div>
  <div class="spr-form-input-container">
    <div class="spr-form-input-icon-wrap">
      <i class="spr-icon spr-icon-visibility-on spr-form-input-trailing-icon error"></i>
      <input class="spr-form-input with-trailing-icon error" id="labeled-input" placeholder="Content">
    </div>
  </div>
  <div class="spr-form-input-container">
    <div class="spr-form-input-icon-wrap">
      <i class="spr-icon spr-icon-visibility-on spr-form-input-trailing-icon disabled"></i>
      <input class="spr-form-input with-trailing-icon" disabled id="labeled-input" placeholder="Content">
    </div>
  </div>
</div>

Compiled CSS

Example

scss 
@import 'components/form-input';
css compiled 
@keyframes openPopover {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}

.spr-select {
  cursor: pointer;
}

.spr-select-menu {
  max-height: 23.4375rem;
  overflow: auto;
}

.spr-select-option {
  padding: 0.875rem 0.875rem;
  transition-property: background-color, color;
  transition-duration: 0.11s;
  transition-timing-function: ease-in-out;
  background-color: #fff;
  cursor: pointer;
}

.spr-select-option.selected {
  font-weight: 600;
}

.spr-select-option.disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.5;
  background-color: #fff !important;
}

.spr-select-option.active, .spr-select-option:hover {
  background-color: #e4e5e7;
}

@keyframes openDropdown {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}

.spr-form-input {
  font-family: "AvenirNext", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.375rem;
  letter-spacing: 0;
  font-weight: 400;
  padding: 0.5rem 1rem;
  box-sizing: border-box;
  border: 1px solid #6b6f7b;
  border-radius: 0.25rem;
  transition-property: border-color, color;
  transition-duration: 0.11s;
  transition-timing-function: ease-in-out;
  display: inline-block;
  background-color: #fff;
  width: 100%;
  margin: 1px;
}

.spr-form-input::placeholder,
.spr-form-input .placeholder {
  color: #bbbdc4;
  transition-property: color;
  transition-duration: 0.11s;
  transition-timing-function: ease-in-out;
}

.spr-form-input.error {
  box-sizing: border-box;
  border: 1px solid #dd1d33;
  border-radius: 0.25rem;
  color: #dd1d33;
}

.spr-form-input.error::placeholder {
  color: #dd1d33;
}

.spr-form-input:hover, .spr-form-input.hover {
  box-sizing: border-box;
  border: 2px solid #2ba148;
  border-radius: 0.25rem;
  box-shadow: none;
  margin: 0;
}

.spr-form-input:hover.error, .spr-form-input.hover.error {
  box-sizing: border-box;
  border: 2px solid #dd1d33;
  border-radius: 0.25rem;
}

.spr-form-input:hover .spr-icon-carat-down, .spr-form-input.hover .spr-icon-carat-down {
  margin-right: -2px;
}

.spr-form-input:focus, .spr-form-input.focus {
  outline: none;
}

.spr-form-input:focus:not(.spr-focus-disabled), .spr-form-input.focus:not(.spr-focus-disabled) {
  transition-property: box-shadow, color;
  transition-duration: 0.11s;
  transition-timing-function: ease-in-out;
  box-sizing: border-box;
  border: 2px solid #2ba148;
  border-radius: 0.25rem;
  box-shadow: 0 0 0 0.125rem rgba(43, 161, 72, 0.35);
  margin: 0;
}

.spr-form-input:focus:not(.spr-focus-disabled)::placeholder, .spr-form-input.focus:not(.spr-focus-disabled)::placeholder {
  color: transparent;
}

.spr-form-input:focus:not(.spr-focus-disabled).error, .spr-form-input.focus:not(.spr-focus-disabled).error {
  box-sizing: border-box;
  border: 2px solid #dd1d33;
  border-radius: 0.25rem;
  box-shadow: 0 0 0 0.125rem rgba(221, 29, 51, 0.35);
}

.spr-form-input:disabled, .spr-form-input.disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.5;
  box-sizing: border-box;
  border: 1px solid #6b6f7b;
  border-radius: 0.25rem;
  box-shadow: none;
  margin: 1px;
}

.spr-form-input:disabled.error, .spr-form-input.disabled.error {
  box-sizing: border-box;
  border: 1px solid #dd1d33;
  border-radius: 0.25rem;
  box-shadow: none !important;
}

.spr-form-input-icon-wrap {
  position: relative;
}

.spr-form-input-icon-wrap .spr-form-input-leading-icon,
.spr-form-input-icon-wrap .spr-form-input-trailing-icon {
  position: absolute;
  top: 0.5rem;
  pointer-events: none;
}

.spr-form-input-icon-wrap .spr-form-input-leading-icon.error,
.spr-form-input-icon-wrap .spr-form-input-trailing-icon.error {
  background-color: #dd1d33;
}

.spr-form-input-icon-wrap .spr-form-input-leading-icon.disabled,
.spr-form-input-icon-wrap .spr-form-input-trailing-icon.disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.5;
  background-color: #6b6f7b;
}

.spr-form-input-icon-wrap .spr-form-input-leading-icon {
  left: 0.75rem;
}

.spr-form-input-icon-wrap .spr-form-input-trailing-icon {
  right: 0.75rem;
}

.spr-form-input-icon-wrap .spr-form-input.with-leading-icon {
  padding-left: 2.75rem;
}

.spr-form-input-icon-wrap .spr-form-input.with-trailing-icon {
  padding-right: 2.75rem;
}

.spr-form-input-container {
  display: inline-block;
  vertical-align: top;
  width: 100%;
}

.spr-form-input-label {
  font-family: "AvenirNext", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 400;
  margin-right: 1rem;
  display: block;
  font-weight: 600 !important;
}

.spr-form-input-label.disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.5;
}

.spr-form-input-label.error {
  color: #dd1d33;
}

.spr-form-input-helper-text {
  font-family: "AvenirNext", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0;
  font-weight: 400;
  margin-right: 1rem;
  margin-top: 0.25rem;
  display: block;
  color: #6b6f7b;
}

.spr-form-input-helper-text.disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.5;
}

.spr-helper-text-error {
  color: #dd1d33;
}