@roadtrip/css/styles/forms/_toggle.css

CSS framework for Roadtrip Design System

/*
 * Toggle
 *
 * 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
 * - Toggle
 * - Label
 * - Lever
 * - Feedback
 * - Position
 *
 */


/* TOGGLE
 -------------------- */

.form-toggle {
  position: relative;
  display: block;
  margin-bottom: 1rem;
  font-family: var(--road-font);
  font-size: var(--road-label-medium);
  color: var(--road-on-surface);
}

/**
 * Hide input
 */

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

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

.form-toggle-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.form-toggle-label.disabled {
  cursor: not-allowed;
}

/* LEVER
 -------------------- */

.form-toggle-lever {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  width: 3.63rem;
  height: 2rem;
  padding: 0.5rem 0.625rem;
  margin-right: 0.75rem;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.6;
  content: "";
  background: var(--road-on-surface-extra-weak);
  border: 0.125rem solid transparent;
  border-radius: 1.125rem;
  transition: background 0.2s ease-in-out;
}

/**
 * Text in the toggle widget
 */

.form-toggle-lever::before {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--road-surface);
  text-transform: uppercase;
  content: attr(data-off);
}

/**
 * Round lever in the widget
 */

.form-toggle-lever::after {
  position: absolute;
  top: 0.0625rem;
  left: 0.0625rem;
  display: block;
  width: 1.625rem;
  height: 1.625rem;
  content: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2064%2064%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22%236d7488%22%20d%3D%22m45.91%2020.91-2.82-2.82L32%2029.17%2020.91%2018.09l-2.82%202.82L29.17%2032%2018.09%2043.09l2.82%202.82L32%2034.83l11.09%2011.08%202.82-2.82L34.83%2032l11.08-11.09Z%22/%3E%3C/svg%3E");
  background: var(--road-on-success-surface-inverse);
  border-radius: 50%;
  box-shadow: var(--road-elevation-low);
  transition: transform 0.2s ease-in-out;
}

/**
 * Checked state
 */

.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever {
  justify-content: flex-start;
  background: var(--road-success-surface-inverse);
}

.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::before {
  color: var(--road-surface);
  content: attr(data-on);
}

.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::after {
  content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23428544%22%20d%3D%22m28.091%2036.529-6.9-6.9-2.84%202.82%209.74%209.74%2017.558-17.558-2.82-2.82Z%22/%3E%3C/svg%3E");
  transform: translateX(1.6rem);
}

/**
 * Focus on Tab
 */

.form-toggle-input.focus-visible ~ .form-toggle-label .form-toggle-lever {
  box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary);
}

/* FEEDBACK
 -------------------- */

/**
 * Information
 */

.form-toggle-info .form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever {
  background: var(--road-info-surface-inverse);
}

.form-toggle-info .form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::before {
  color: var(--road-surface);
}

/**
 * Success
 */

.form-toggle-success .form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever {
  background: var(--road-success-surface-inverse);
}

.form-toggle-success .form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::before {
  color: var(--road-surface);
}

/**
 * Warning
 */

.form-toggle-warning .form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever {
  background: var(--road-warning-surface-inverse);
}

.form-toggle-warning .form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::before {
  color: var(--road-on-warning-surface-inverse);
}

/**
 * Danger
 */

.form-toggle-danger .form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever {
  background: var(--road-danger-surface-inverse);
}

.form-toggle-danger .form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::before {
  color: var(--road-surface);
}

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

.form-toggle-right .form-toggle-lever {
  margin-right: 0;
  margin-left: 0.75rem;
}

.form-toggle-spaced {
  display: flex;
  justify-content: space-between;
}