@harvest-profit/npk/src/Switch/Switch.module.css

NPK UI Design System

.Switch {
  --switch-font-size: var(--control-font-size);
  --switch-width: 3rem;
  --switch-height: 1.5rem;
  --switch-slider-margin: 0.2rem;
  --switch-slider-height: calc(var(--switch-height) - (var(--switch-slider-margin) * 2));
  --switch-slider-width: calc(var(--switch-height) - (var(--switch-slider-margin) * 2));
  --switch-bg-color: var(--control-bg-color--active);
  --switch-active-bg-color: var(--control-bg-color--active-element);
  --switch-slider-bg-color: var(--control-fg-color--active-element);
  --switch-slider-active-bg-color: var(--control-fg-color--active-element);
  --switch-border: none;
  --switch-active-border: none;
  --switch-slider-shadow: var(--control-inset-shadow-color) 0 1px 3px, var(--control-inset-shadow-color) 0 1px 2px;
  display: inline-flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  min-width: var(--switch-width);

  > input[type="checkbox"],
  > label > input[type="checkbox"] {
    display: none;
    pointer-events:none
  }

  &[data-variant="flat"] {
    --switch-bg-color: transparent;
    --switch-border: 1px solid var(--color-neutral-70);
    --switch-active-bg-color: var(--control-bg-color--active-element);
    --switch-slider-bg-color: var(--color-neutral-70);
    --switch-slider-active-bg-color: var(--control-fg-color--active-element);
    --switch-active-border: 1px solid var(--control-bg-color--active-element);
    --switch-slider-shadow: none;
  }

  &[data-size="sm"] {
    --switch-width: 2.25rem;
    --switch-height: 1.25rem;
      --switch-slider-margin: 0.15rem;
    --switch-slider-height: calc(var(--switch-height) - (var(--switch-slider-margin) * 2));
    --switch-slider-width: calc(var(--switch-height) - (var(--switch-slider-margin) * 2));
    --switch-font-size: var(--control-small-font-size);
  }

  label {
    font-size: var(--switch-font-size);
    pointer-events:none;
    margin-left: calc(var(--switch-width) + 0.3rem);
  }

  .Slider {
    width: var(--switch-width);
    height: var(--switch-height);
    background-color: var(--switch-bg-color);
    border-radius: 2em;
    outline: var(--switch-border);
    outline-offset: -1px;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto 0;
    transition: .4s;

    &::before {
      background-color: var(--switch-slider-bg-color);
      border-radius: var(--switch-height);
      content: '';
      height: var(--switch-slider-height);
      width: var(--switch-slider-width);
      position: absolute;
      transition: .3s;
      top: 0;
      bottom: 0;
      margin: auto;
      left: var(--switch-slider-margin);
      box-shadow: var(--switch-slider-shadow, none);
    }

    &[data-active="true"] {
      background-color: var(--switch-active-bg-color);
      outline: var(--switch-active-border);

      &::before {
        background-color: var(--switch-slider-active-bg-color);
      }

      &::before {
        transform: translateX(calc(var(--switch-width) - var(--switch-slider-width) - (var(--switch-slider-margin) * 2)));
      }
    }
  }

  &[data-position="trailing"] {
    flex-direction: row-reverse;

    > label {
      margin-left: 0;
      margin-right: calc(var(--switch-width) + 0.3rem);
    }

    .Slider {
      right: 0;
      left: auto;
    }
  }
}