foundation-sites/scss/components/_switch.scss

// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

////
/// @group switch
////

/// Background color of a switch.
/// @type Color
$switch-background: $medium-gray !default;

/// Background active color of a switch.
/// @type Color
$switch-background-active: $primary-color !default;

/// Height of a switch, with no class applied.
/// @type Number
$switch-height: 2rem !default;

/// Height of a switch with .tiny class.
/// @type Number
$switch-height-tiny: 1.5rem !default;

/// Height of a switch with .small class.
/// @type Number
$switch-height-small: 1.75rem !default;

/// Height of a switch with .large class.
/// @type Number
$switch-height-large: 2.5rem !default;

/// Border radius of the switch
/// @type Number
$switch-radius: $global-radius !default;

/// border around a modal.
/// @type Number
$switch-margin: $global-margin !default;

/// Background color for the switch container and paddle.
/// @type Color
$switch-paddle-background: $white !default;

/// Spacing between a switch paddle and the edge of the body.
/// @type Number
$switch-paddle-offset: 0.25rem !default;

/// border radius of the switch paddle
/// @type Number
$switch-paddle-radius: $global-radius !default;

/// switch transition.
/// @type Number
$switch-paddle-transition: all 0.25s ease-out !default;

// make them variables
// ask about accessibility on label
// change class name for text

/// Adds styles for a switch container. Apply this to a container class.
@mixin switch-container {
  position: relative;
  margin-bottom: $switch-margin;
  outline: 0;

  // These properties cascade down to the switch text
  font-size: rem-calc(14);
  font-weight: bold;
  color: $white;

  user-select: none;
}

/// Adds styles for a switch input. Apply this to an `<input>` within a switch.
@mixin switch-input {
  position: absolute;
  margin-bottom: 0;
  opacity: 0;
}

/// Adds styles for the background and paddle of a switch. Apply this to a `<label>` within a switch.
@mixin switch-paddle {
  $switch-width: $switch-height * 2;
  $paddle-height: $switch-height - ($switch-paddle-offset * 2);
  $paddle-width: $switch-height - ($switch-paddle-offset * 2);
  $paddle-active-offest: $switch-width - $paddle-width - $switch-paddle-offset;

  position: relative;
  display: block;
  width: $switch-width;
  height: $switch-height;

  border-radius: $switch-radius;
  background: $switch-background;
  transition: $switch-paddle-transition;

  // Resetting these <label> presets so type styles cascade down
  font-weight: inherit;
  color: inherit;

  cursor: pointer;

  // Needed to override specificity
  input + & {
    margin: 0;
  }

  // The paddle itself
  &::after {
    position: absolute;
    top: $switch-paddle-offset;
    #{$global-left}: $switch-paddle-offset;

    display: block;
    width: $paddle-width;
    height: $paddle-height;

    transform: translate3d(0, 0, 0);
    border-radius: $switch-paddle-radius;
    background: $switch-paddle-background;
    transition: $switch-paddle-transition;
    content: '';
  }

  // Change the visual style when the switch is active
  input:checked ~ & {
    background: $switch-background-active;

    &::after {
      #{$global-left}: $paddle-active-offest;
    }
  }

  input:focus ~ & {
    @include disable-mouse-outline;
  }
}

/// Adds base styles for active/inactive text inside a switch. Apply this to text elements inside the switch `<label>`.
@mixin switch-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/// Adds styles for the active state text within a switch.
@mixin switch-text-active {
  #{$global-left}: 8%;
  display: none;

  input:checked + label > & {
    display: block;
  }
}

/// Adds styles for the inactive state text within a switch.
@mixin switch-text-inactive {
  #{$global-right}: 15%;

  input:checked + label > & {
    display: none;
  }
}

/// Changes the size of a switch by modifying the size of the body and paddle. Apply this to a switch container.
/// @param {Number} $font-size [1rem] - Font size of label text within the switch.
/// @param {Number} $switch-height [2rem] - Height of the switch body.
/// @param {Number} $paddle-offset [0.25rem] - Spacing between the switch paddle and the edge of the switch body.
@mixin switch-size(
  $font-size: 1rem,
  $switch-height: 2rem,
  $paddle-offset: 0.25rem
) {

  $switch-width: $switch-height * 2;
  $paddle-width: $switch-height - ($paddle-offset * 2);
  $paddle-height: $switch-height - ($paddle-offset * 2);
  $paddle-active-offest: $switch-width - $paddle-width - $paddle-offset;

  height: $switch-height;

  .switch-paddle {
    width: $switch-width;
    height: $switch-height;
    font-size: $font-size;
  }

  .switch-paddle::after {
    top: $paddle-offset;
    #{$global-left}: $paddle-offset;
    width: $paddle-width;
    height: $paddle-height;
  }

  input:checked ~ .switch-paddle::after {
    #{$global-left}: $paddle-active-offest;
  }
}

@mixin foundation-switch {
  // Container class
  .switch {
    height: $switch-height;
    @include switch-container;
  }

  // <input> element
  .switch-input {
    @include switch-input;
  }

  // <label> element
  .switch-paddle {
    @include switch-paddle;
  }

  // Base label text styles
  %switch-text {
    @include switch-text;
  }

  // Active label text styles
  .switch-active {
    @extend %switch-text;
    @include switch-text-active;
  }

  // Inactive label text styles
  .switch-inactive {
    @extend %switch-text;
    @include switch-text-inactive;
  }

  // Switch sizes
  .switch.tiny {
    @include switch-size(rem-calc(10), $switch-height-tiny, $switch-paddle-offset);
  }

  .switch.small {
    @include switch-size(rem-calc(12), $switch-height-small, $switch-paddle-offset);
  }

  .switch.large {
    @include switch-size(rem-calc(16), $switch-height-large, $switch-paddle-offset);
  }
}