@roadtrip/css/styles/forms/_checkbox.css

CSS framework for Roadtrip Design System

/*
 * Checkbox
 *
 * For accessibility, we provide a style for focus only on Tab,
 * for that add the javascript polyfill for focus-visible
 * (https://github.com/WICG/focus-visible).
 *
 * Index
 * - Checkbox
 * - Checkbox label
 * - Checkbox error
 *
 */


/* CHECKBOX
 -------------------- */

.form-check {
  position: relative;
  display: block;
  margin-bottom: 1.5rem;
  font-family: var(--road-font);
  font-size: var(--road-font-size-16);
  line-height: 1.5;
  color: var(--road-on-surface);
}

/**
 * Hide input
 */

.form-check-input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

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

.form-check-label {
  position: relative;
  display: inline-flex;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.form-check-label-span {
  margin-left: var(--road-spacing-02);
  color: var(--road-on-surface-weak);
}

.form-check-label::before {
  box-sizing: border-box;
  display: block;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 0.75rem 0 0;
  content: "";
  background: var(--road-surface);
  border: 1px solid var(--road-input-outline);
  border-radius: 0.25rem;
  transition: border 0.2s ease-in-out, background 0.2s ease-in-out;
}

.form-check-label::after {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  box-sizing: border-box;
  display: block;
  width: 0.375rem;
  height: 0.75rem;
  content: "";
  border-top: 0.0625rem solid transparent;
  border-right: 0.0625rem solid var(--road-surface);
  border-bottom: 0.0625rem solid var(--road-surface);
  border-left: 0.0625rem solid transparent;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  transform: rotateZ(45deg);
  transform-origin: 100% 100%;
}

/**
 * Hover state
 */

@media (hover: hover) {

  .form-check-input:not(:disabled) ~ .form-check-label:hover::before {
    border-color: var(--road-input-surface-variant);
  }

  .form-check-input:checked ~ .form-check-label:hover::before,
  .form-check-input:indeterminate ~ .form-check-label:hover::before {
    background: var(--road-input-surface-variant);
  }
}

/**
 * Checked state
 */

.form-check-input:checked ~ .form-check-label::after {
  opacity: 1;
}

.form-check-input:checked ~ .form-check-label::before {
  background: var(--road-input-surface);
  border-color: var(--road-input-surface);
}

/**
 * Indeterminate state
 */

.form-check-input:indeterminate ~ .form-check-label::after {
  top: 0.5rem;
  left: 0.25rem;
  width: 0.75rem;
  height: 0;
  border-width: 1.25px;
  border-right: 0;
  border-left: 0;
  opacity: 1;
  transform: none;
}

.form-check-input:indeterminate ~ .form-check-label::before {
  background: var(--road-input-surface);
  border-color: var(--road-input-surface);
}

/**
 * Focus on Tab
 */

.form-check-input.focus-visible ~ .form-check-label::before {
  box-shadow: 0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700);
}

.form-check-input.focus-visible:checked ~ .form-check-label::before,
.form-check-input.focus-visible:indeterminate ~ .form-check-label::before {
  background: var(--road-input-surface-variant);
  border-color: var(--road-input-surface-variant);
}

/**
 * Disabled state
 */

.form-check-input:disabled ~ .form-check-label,
.form-check-input[readonly] ~ .form-check-label {
  cursor: not-allowed;
}

.form-check-input:disabled ~ .form-check-label::before,
.form-check-input[readonly] ~ .form-check-label::before {
  background: var(--road-surface-disabled);
  border: none;
}

.form-check-input:disabled ~ .form-check-label::after,
.form-check-input[readonly] ~ .form-check-label::after {
  border-right: 0.0625rem solid var(--road-on-surface-disabled);
  border-bottom: 0.0625rem solid var(--road-on-surface-disabled);
}

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

.form-check .invalid-feedback {
  display: none;
  flex: 0 0 100%;
  width: 100%;
  margin-top: 0.5rem;
  margin-left: var(--road-spacing-07);
  font-size: var(--road-font-size-12);
  color: var(--road-on-danger-default-surface);
}

.form-check-input.is-invalid ~ .form-check-label::before,
.was-validated .form-check-input:invalid ~ .form-check-label::before {
  border-color: var(--road-danger-outline);
}

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

/* POSITION
 -------------------- */

.form-checkbox-inverse {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.form-checkbox-inverse::before {
  margin: 0 0 0 1rem;
}

.form-checkbox-inverse::after {
  right: 0.75rem;
  left: auto;
}