@dialpad/dialtone-css/lib/build/less/components/toggle.less

Dialpad's design system

//
//  DIALTONE
//  COMPONENTS: TOGGLE
//
//  These are toggle classes for Dialpad's design system Dialtone.
//  For further documentation of these and other classes,
//  visit https://dialtone.dialpad.com/components/toggle
//
//  TABLE OF CONTENTS
//  • BASE STYLE
//  • TOGGLE VARIANTS
//  • CHECKED TOGGLE
//  • INDETERMINATE TOGGLE
//  • FOCUSED TOGGLE
//  • DISABLED TOGGLE
//  • TOGGLE WRAPPER
//
//
//  ============================================================================
//  $   BASE STYLE
//  ----------------------------------------------------------------------------
.d-toggle {
  //  Component specific CSS Vars
  //  ------------------------------------------------------------------------
  --toggle-transition-timing-function: var(--ttf-out-quint);
  --toggle-transition-speed: var(--td300);
  --toggle-color-background: hsl(var(--dt-color-surface-bold-h), var(--dt-color-surface-bold-s), 66.6666%);
  --toggle-size-height: var(--dt-size-550); // 24
  --toggle-size-width: var(--dt-size-650); // 48
  --toggle-size-icon: var(--dt-size-500); // 16

  //  $$  BASE STYLE
  //  ----------------------------------------------------------------------------
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: var(--toggle-size-width);
  min-width: var(--toggle-size-width);
  height: var(--toggle-size-height);
  padding: 0;
  line-height: var(--lh4);
  vertical-align: middle;
  background-color: var(--toggle-color-background);
  border: var(--dt-size-100) solid var(--toggle-color-background);
  border-radius: var(--toggle-size-width);
  cursor: pointer;
  transition-timing-function: var(--ttf-out-quint);
  transition-duration: var(--td200);
  transition-property: background-color, border, color, box-shadow;

  &__inner {
    position: absolute;
    top: calc(var(--dt-space-300) - var(--dt-space-100)); // 3
    left: var(--dt-space-550); // 24
    width: var(--toggle-size-icon);
    height: var(--toggle-size-icon);

    .d-toggle--small & {
      top: var(--dt-space-100); // 1
      left: calc(var(--dt-space-500) + var(--dt-space-100)); // 17
    }

    .d-toggle--indeterminate & {
      display: none;
    }

    background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M3.05806 3.05806C3.30214 2.81398 3.69786 2.81398 3.94194 3.05806L7 6.11612L10.0581 3.05806C10.3021 2.81398 10.6979 2.81398 10.9419 3.05806C11.186 3.30214 11.186 3.69786 10.9419 3.94194L7.88388 7L10.9419 10.0581C11.186 10.3021 11.186 10.6979 10.9419 10.9419C10.6979 11.186 10.3021 11.186 10.0581 10.9419L7 7.88388L3.94194 10.9419C3.69786 11.186 3.30214 11.186 3.05806 10.9419C2.81398 10.6979 2.81398 10.3021 3.05806 10.0581L6.11612 7L3.05806 3.94194C2.81398 3.69786 2.81398 3.30214 3.05806 3.05806Z' fill='white'/> </svg>");
    background-repeat: no-repeat;
    background-size: cover;

    [data-dt-theme="dark"] & {
      background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M3.05806 3.05806C3.30214 2.81398 3.69786 2.81398 3.94194 3.05806L7 6.11612L10.0581 3.05806C10.3021 2.81398 10.6979 2.81398 10.9419 3.05806C11.186 3.30214 11.186 3.69786 10.9419 3.94194L7.88388 7L10.9419 10.0581C11.186 10.3021 11.186 10.6979 10.9419 10.9419C10.6979 11.186 10.3021 11.186 10.0581 10.9419L7 7.88388L3.94194 10.9419C3.69786 11.186 3.30214 11.186 3.05806 10.9419C2.81398 10.6979 2.81398 10.3021 3.05806 10.0581L6.11612 7L3.05806 3.94194C2.81398 3.69786 2.81398 3.30214 3.05806 3.05806Z' fill='black'/> </svg>");
    }
  }

  &::after {
    position: absolute;
    top: var(--dt-space-100); // 1
    left: var(--dt-space-100); // 1
    width: calc(var(--toggle-size-icon) + var(--dt-size-300));
    height: calc(var(--toggle-size-icon) + var(--dt-size-300));
    background-color: var(--dt-color-surface-primary);
    border-radius: var(--dt-size-radius-circle);
    cursor: pointer;
    transition: left var(--toggle-transition-speed) var(--toggle-transition-timing-function);
    content: ' ';
  }

  //  $$  TOGGLE VARIANTS
  //  ----------------------------------------------------------------------------
  &--small {
    --toggle-size-height: calc(var(--dt-size-500) + var(--dt-size-200)); // 18
    --toggle-size-width: calc(var(--dt-size-600) + var(--dt-size-300)); // 36
    --toggle-size-icon: calc(var(--dt-size-500) - var(--dt-size-200)); // 14

    &::before {
      position: absolute;
      inset: var(--dt-space-300-negative) 0 var(--dt-space-300-negative) 0; // -4 // -4
      content: '';
    }
  }

  &--small::after {
    width: var(--toggle-size-icon);
    height: var(--toggle-size-icon);
  }

  //  $$  CHECKED TOGGLE
  //  ----------------------------------------------------------------------------
  &--checked {
    --toggle-color-background: var(--dt-checkbox-color-background-checked);

    .d-toggle__inner {
      left: var(--dt-space-350); // 6
      background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M12.1083 3.05806C12.3524 3.30214 12.3524 3.69786 12.1083 3.94194L5.69162 10.3586C5.44754 10.6027 5.05181 10.6027 4.80773 10.3586L1.89107 7.44194C1.64699 7.19786 1.64699 6.80214 1.89107 6.55806C2.13514 6.31398 2.53087 6.31398 2.77495 6.55806L5.24967 9.03278L11.2244 3.05806C11.4685 2.81398 11.8642 2.81398 12.1083 3.05806Z' fill='white'/> </svg>");

      [data-dt-theme="dark"] & {
        background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M12.1083 3.05806C12.3524 3.30214 12.3524 3.69786 12.1083 3.94194L5.69162 10.3586C5.44754 10.6027 5.05181 10.6027 4.80773 10.3586L1.89107 7.44194C1.64699 7.19786 1.64699 6.80214 1.89107 6.55806C2.13514 6.31398 2.53087 6.31398 2.77495 6.55806L5.24967 9.03278L11.2244 3.05806C11.4685 2.81398 11.8642 2.81398 12.1083 3.05806Z' fill='black'/> </svg>");
      }
    }

    &.d-toggle--small .d-toggle__inner {
      left: calc(var(--dt-space-100) + var(--dt-space-200)); // 3
    }

    &::after {
      left: calc(var(--dt-space-550) + var(--dt-space-100)); // 25
    }

    &.d-toggle--small::after {
      right: var(--dt-space-100); // 1
      left: calc(calc(var(--dt-space-300) * 5) - var(--dt-space-100)); // 19
    }
  }

  //  $$  INDETERMINATE TOGGLE
  //  ----------------------------------------------------------------------------
  &--indeterminate {
    &__inner {
      display: none;
    }

    &::after {
      left: 50%;
      transform: translate(-50%, 0);
    }
  }

  //  $$  FOCUSED TOGGLE
  //  ----------------------------------------------------------------------------
  &:focus-visible {
    outline: none;
    box-shadow: var(--dt-shadow-focus);
  }

  //  $$  DISABLED TOGGLE
  //  ----------------------------------------------------------------------------
  &--disabled,
  &[disabled] {
    cursor: not-allowed;
    opacity: 0.5;

    &::after {
      cursor: not-allowed;
      transition-property: none;
    }
  }
}

.d-toggle-group {
  gap: var(--dt-space-400); // 8
}

//  ============================================================================
//  $   TOGGLE WRAPPER
//  ----------------------------------------------------------------------------
.d-toggle-wrapper {
  display: flex;
  align-items: center;
}