maille/components/switch/style.css

Component library for MithrilJS

.maille.maille-switch {
  height: 1em;
}

.maille.maille-switch.disabled .maille-switch-bg {
  opacity: .5;
}

/*********************/
/* Switch background */
/*********************/

.maille.maille-switch .maille-switch-bg {
  display: inline-block;
  margin-right: .5em;
  height: .75em;
  width: 2.5em;
  border-radius: .5em;
  background-color: var(--maille-switch-on-bg, gray);
}

.maille.maille-switch.on .maille-switch-bg {
  background-color: var(--maille-switch-on-bg, lightblue);
}

/***************/
/* Switch knob */
/***************/

.maille.maille-switch .maille-switch-knob {
  margin-top: -.30em;
  height: 1em;
  width: 1em;
  border: .15em solid #555;
  border-radius: 50%;

  transition: .25s;
  transform: translateX(1.5em);

  background-color: var(--maille-switch-off-bg, white);
}

.maille.maille-switch.on .maille-switch-knob {
  transform: translateX(0em);
}