@roadtrip/css/styles/forms/_input.css

CSS framework for Roadtrip Design System

/*
 * Input
 *
 * Index
 * - Input
 * - Textarea
 * - Label
 * - Sizes
 * - Error
 *
 */


.form-group {
  position: relative;
  display: block;
  margin-bottom: 1rem;
  font-family: var(--road-font);
  color: var(--road-grey-10);
}

/* INPUT
 -------------------- */

.form-control {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 3rem;
  padding: 0.75rem 1rem 0;
  margin: 0;
  font-size: var(--road-body-medium);
  color: var(--road-on-surface);
  background: var(--road-surface);
  border: 1px solid var(--road-input-outline);
  border-radius: 0.25rem;
  box-shadow: none;
  appearance: none;
}

/**
 * Fix position of chrome native icon on type date and time
 */

.form-control::-webkit-calendar-picker-indicator {
  margin-top: -0.75rem;
}

/**
 * Fix position of iOS date and time value
 */

.form-control::-webkit-date-and-time-value {
  padding-top: 0.625rem;
}

/**
 * Placeholder
 */

.form-control::placeholder {
  color: var(--road-on-surface-extra-weak);
  opacity: 1;
}

/**
 * Hover state
 */

@media (hover: hover) {

  .form-control:not(:disabled):hover {
    border-color: var(--road-input-outline-variant);
  }
}

/**
 * Focus state
 */

.form-control:focus ~ .form-label,
.form-control[required]:valid ~ .form-label,
.form-control.has-value ~ .form-label,
.form-control[type="date"] ~ .form-label,
.form-control[type="time"] ~ .form-label {
  transform: scale(0.625) translateY(-0.625rem);
}

.form-control:placeholder-shown ~ .form-label {
  transform: scale(0.625) translateY(-0.625rem);
}

/* stylelint-disable */

/* IE FIX */

.form-control:-ms-input-placeholder ~ .form-label {
  transform: scale(0.625) translateY(-0.625rem);
}
/* stylelint-enable */

.form-control:focus {
  border-color: var(--road-input-outline-variant);
}

/**
 * Disabled state
 */

.form-control:disabled,
.form-control[readonly] {
  cursor: not-allowed;
  background: var(--road-surface-disabled);
  opacity: 1;
}

/* TEXTAREA
 -------------------- */

.textarea-control {
  height: auto;
  padding-top: 1rem;
  line-height: 1.5;
}

.textarea-control.form-control-xl {
  height: auto;
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
}

.textarea-control.no-resize {
  resize: none;
}

/* LABEL
 -------------------- */

.form-label {
  position: absolute;
  top: 0.75rem;
  left: 1rem;
  display: block;
  font-size: var(--road-body-medium);
  line-height: 1.5;
  color: var(--road-on-surface-extra-weak);
  pointer-events: none;
  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  transform-origin: 0 0;
}

.form-control:required ~ .form-label::after{
  color: var(--road-danger-default);
  content: " *";
}

/* SIZES
 -------------------- */

/**
 * Extra Large
 */

.form-control-xl {
  height: 3.5rem;
  padding: 1rem 1rem 0;
}

.form-control-xl + .form-label,
.input-xl .form-label {
  top: 1rem;
}

.form-control-xl:focus ~ .form-label,
.form-control-xl[required]:valid ~ .form-label,
.form-control-xl.has-value ~ .form-label,
.form-control-xl[type="date"] ~ .form-label,
.form-control-xl[type="time"] ~ .form-label {
  transform: scale(0.75) translateY(-0.625rem);
}

.form-control-xl:placeholder-shown ~ .form-label {
  transform: scale(0.75) translateY(-0.625rem);
}

/**
 * Medium
 */

.form-control-md {
  height: 2.5rem;
}

.form-control-md + .form-label {
  top: 0.5rem;
}

/**
 * Small
 */

.form-control-sm {
  height: 2rem;
}

.form-control-sm + .form-label {
  top: 0.25rem;
}

/* ERROR
 -------------------- */

.form-control .invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.5rem;
  margin-left: 0;
  font-size: var(--road-helper-medium);
  color: var(--road-on-danger-surface);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--road-danger-outline);
}

.form-control.is-invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-feedback {
  display: block;
}