@geoffcox/sterling-svelte-themes/css/sterling/Switch.base.css

A modern theme for the sterling-svelte component library.

.sterling-switch {
  cursor: pointer;
  display: grid;
  position: relative;
}

.sterling-switch input {
  cursor: pointer;
}

.sterling-switch:not(.vertical) {
  align-content: center;
  align-items: center;
  column-gap: 0.5em;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto;
  justify-content: flex-start;
  justify-items: flex-start;
}

.sterling-switch.vertical {
  align-content: flex-start;
  align-items: flex-start;
  grid-template-columns: auto;
  grid-template-rows: auto;
  justify-content: center;
  justify-items: center;
  row-gap: 0.5em;
}

.sterling-switch.vertical .off-label {
  grid-row: 3 / span 1;
}

.sterling-switch.vertical .on-label {
  grid-row: 1 / span 1;
}

/* ----- input hidden ----- */

.sterling-switch input {
  appearance: none;
  font: inherit;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  opacity: 0;
}

/* ----- toggle ----- */

.sterling-switch .toggle {
  background-color: var(--stsv-common__background-color);
  border-color: var(--stsv-input__border-color);
  border-radius: 10000px;
  border-style: solid;
  border-width: var(--stsv-input__border-width);
  box-sizing: border-box;
  color: var(--stsv-input__color);
  font: inherit;
  pointer-events: none;
  position: relative;
  transition:
    background-color 250ms,
    color 250ms,
    border-color 250ms;
  user-select: none;
}

.sterling-switch:hover .toggle {
  border-color: var(--stsv-input__border-color--hover);
  color: var(--stsv-input__color--hover);
}

.sterling-switch input:focus-visible ~ .toggle {
  border-color: var(--stsv-input__border-color--focus);
  color: var(--stsv-common__color--focux);
}

.sterling-switch input:checked ~ .toggle,
.sterling-switch input:checked:hover ~ .toggle,
.sterling-switch input:checked:focus-visible ~ .toggle {
  background-color: var(--stsv-input__background-color--selected);
}

/* ----- switch vertical ----- */

.sterling-switch:not(.vertical) .toggle {
  width: 2em;
  height: 1.25em;
}

.sterling-switch.vertical .toggle {
  width: 1.25em;
  height: 2em;
}

/* ----- labels ----- */

.sterling-switch label {
  color: var(--stsv-common__color);
  transition: color 250ms;
  font: inherit;
}

.sterling-switch .off-label,
.sterling-switch .on-label {
  padding-top: 2px;
}

/* ----- thumb ----- */

.sterling-switch .thumb {
  background-color: var(--stsv-button__background-color);
  border-color: var(--stsv-button__border-color);
  border-radius: 10000px;
  border-style: solid;
  border-width: var(--stsv-button__border-width);
  box-sizing: border-box;
  color: var(--stsv-button__color);
  display: block;
  font: inherit;
  height: 1.25em;
  position: absolute;
  transition:
    background-color 250ms,
    color 250ms,
    border-color 250ms,
    transform 250ms;
  width: 1.25em;
}

.sterling-switch:hover .thumb {
  background-color: var(--stsv-button__background-color--hover);
  border-color: var(--stsv-button__border-color--hover);
  color: var(--stsv-button__color--hover);
}

.sterling-switch:active .thumb {
  background-color: var(--stsv-button__background-color--active);
  border-color: var(--stsv-button__border-color--active);
  color: var(--stsv-button__color--hover);
}

.sterling-switch.using-keyboard:focus-within .thumb {
  outline-color: var(--stsv-common__outline-color);
  outline-offset: 0;
  outline-style: solid;
  outline-width: var(--stsv-common__outline-width);
}

/* ----- thumb vertical ----- */

.sterling-switch:not(.vertical) .thumb {
  top: calc(-1 * 2px);
  transform: translateX(calc(var(--thumb-offset) - 2px));
}

.sterling-switch.vertical .thumb {
  left: calc(-1 * 2px);
  transform: translateY(calc(var(--thumb-offset) - 2px));
}

/* ----- reduced motion ----- */

@media (prefers-reduced-motion) {
  .sterling-switch .toggle,
  .sterling-switch .thumb,
  .sterling-switch .thumb::after,
  .sterling-switch label {
    transition: none;
  }
}