@roadtrip/css/styles/forms/_time-range-picker.css

CSS framework for Roadtrip Design System

/*
 * Time range picker
 */

.form-group{
  flex: auto;
}

.required-indicator {
  color: var(--road-on-danger-surface);
  content: " *";
}

.time-range-picker-content input{
  margin-bottom: 0;
}

.time-range-picker .messages {
  display: flex;
  flex-direction: column;
}

/* 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;
}

.invalid-feedback {
  font-size: var(--road-helper-medium);
  color: var(--road-on-danger-surface);
  display: flex;
  align-items: center;
  gap: 4px;
}

.invalid-feedback-icon{
  width: 14px;
  height: 14px;
  fill: var(--road-danger-icon);
}