@roadtrip/css/styles/forms/_plate-number.css

CSS framework for Roadtrip Design System

/*
 * Plate Number
 *
 * Index
 * - Plate Number
 * - Input
 * - Motorbike
 *
 */

/* PLATE NUMBER
 -------------------- */

.plate-number-start,
.plate-number-end {
  width: 1.75rem;
  height: calc(3rem - 0.25rem);
  background: var(--road-info-50);
}

.plate-number-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-right: 0;
  margin-left: 1px;
  color: var(--road-icon-inverse);
  border-radius: 0.125rem 0 0 0.125rem;
}

.plate-number-end {
  margin-right: 1px;
  border-radius: 0 0.125rem 0.125rem 0;
}

.plate-number.input-group > .input-group-prepend > .input-group-text {
  margin-right: 0;
}

.plate-number-icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: #f3db53;
}

.plate-number-location {
  font-size: var(--road-button-medium);
  font-weight: 700;
}

.plate-number-be .plate-number-input {
  color: var(--road-on-danger-surface);
}

.plate-number-be .plate-number-input,
.plate-number-be .input-group-prepend .input-group-text,
.plate-number-be .input-group-append .input-group-text {
  border-color: var(--road-danger-outline);
}

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

.plate-number-input {
  position: relative;
  display: block;
  flex: 1 1 auto;
  width: 1%;
  height: 3rem;
  margin: 0;
  font-family: var(--road-font);
  font-size: var(--road-heading-04);
  font-weight: 700;
  color: var(--road-on-surface);
  text-align: center;
  background: var(--road-surface);
  border: 1px solid var(--road-input-outline);
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  appearance: none;
}

.plate-number-input::placeholder {
  color: var(--road-on-surface-extra-weak);
  opacity: 1;
}

/**
 * Disabled state
 */

.plate-number-input:disabled {
  color: var(--road-on-surface-disabled);
  cursor: not-allowed;
  background: var(--road-surface-disabled);
  opacity: 1;
}

.plate-number-input:disabled ~ .input-group-prepend .input-group-text,
.plate-number-input:disabled ~ .input-group-append .input-group-text {
  cursor: not-allowed;
  background: var(--road-surface-disabled);
}


.plate-number-input:disabled ~ .input-group-prepend .plate-number-start,
.plate-number-input:disabled ~ .input-group-append .plate-number-end {
  background: var(--road-surface-disabled);
}

/**
 * Hover state
 */

@media (hover: hover) {

  .plate-number-input:not(:disabled):not([readonly]):hover {
    border-color: var(--road-input-outline-variant);
  }

  .plate-number-input:not(:disabled):not([readonly]):hover ~ .input-group-prepend .input-group-text {
    border-color: var(--road-input-outline-variant);
    border-right-color: transparent;
  }

  .plate-number-input:not(:disabled):not([readonly]):hover ~ .input-group-append .input-group-text {
    border-color: var(--road-input-outline-variant);
    border-left-color: transparent;
  }
}

/**
 * Focus state
 */

.plate-number-input:not([readonly]):focus {
  border-color: var(--road-input-outline-variant);
  outline: 0;
}

.plate-number-input:not([readonly]):focus ~ .input-group-prepend .input-group-text {
  border-color: var(--road-input-outline-variant);
  border-right-color: transparent;
}

.plate-number-input:not([readonly]):focus ~ .input-group-append .input-group-text {
  border-color: var(--road-input-outline-variant);
  border-left-color: transparent;
}

/* MOTORBIKE
 -------------------- */

.motorbike-plate .plate-number-input {
  height: 6rem;
  resize: none;
  border-left: 0;
}

.motorbike-plate > .input-group-prepend > .input-group-text {
  margin: 0;
}

.motorbike-plate .input-group-text {
  align-items: flex-start;
  padding: 0;
}

.motorbike-plate .plate-number-start {
  margin-top: 1px;
  border-radius: 0.125rem 0 0;
}

.motorbike-plate .plate-number-end {
  margin-top: 1px;
  border-radius: 0 0.125rem 0 0;
}