Colored Switches

By Harry Manchanda

F6
#
switch control mixin
How do I use This?

This Colored Switches Sass mixin will help you add state coloring to switches when active. Using this CSS will give you the ability to add coloring classes from the Foundation color pallette.

HTML
<!-- default color is also the primary color -->
<div class="switch">
  <input class="switch-input" id="defaultSwitch" type="checkbox" name="defaultSwitch">
  <label class="switch-paddle" for="defaultSwitch">
    <span class="show-for-sr">Default Switch</span>
  </label>
</div>

<!-- primary color is also the default color -->
<div class="switch primary">
  <input class="switch-input" id="primarySwitch" type="checkbox" name="primarySwitch">
  <label class="switch-paddle" for="primarySwitch">
    <span class="show-for-sr">Primary Switch</span>
  </label>
</div>

<!-- seconday color -->
<div class="switch secondary">
  <input class="switch-input" id="secondarySwitch" type="checkbox" name="secondarySwitch">
  <label class="switch-paddle" for="secondarySwitch">
    <span class="show-for-sr">Secondary Switch</span>
  </label>
</div>

<!-- success color -->
<div class="switch success">
  <input class="switch-input" id="successSwitch" type="checkbox" name="successSwitch">
  <label class="switch-paddle" for="successSwitch">
    <span class="show-for-sr">Success Switch</span>
  </label>
</div>

<!-- alert color -->
<div class="switch alert">
  <input class="switch-input" id="alertSwitch" type="checkbox" name="alertSwitch">
  <label class="switch-paddle" for="alertSwitch">
    <span class="show-for-sr">Alert Switch</span>
  </label>
</div>

<!-- warning color -->
<div class="switch warning">
  <input class="switch-input" id="warningSwitch" type="checkbox" name="warningSwitch">
  <label class="switch-paddle" for="warningSwitch">
    <span class="show-for-sr">Warning Switch</span>
  </label>
</div>


@mixin colored-switches ($switch-background-active) {
  input:checked ~ .switch-paddle {
    background: $switch-background-active;
  }
}

.switch {
  &,

  &.primary {
    @include colored-switches($primary-color)
  }

  &.secondary {
    @include colored-switches($secondary-color)
  }

  &.success {
    @include colored-switches($success-color)
  }

  &.alert {
    @include colored-switches($alert-color)
  }

  &.warning {
    @include colored-switches($warning-color)
  }
}



.switch input:checked ~ .switch-paddle, .switch.primary input:checked ~ .switch-paddle {
  background: #1779ba;
}

.switch.secondary input:checked ~ .switch-paddle {
  background: #767676;
}

.switch.success input:checked ~ .switch-paddle {
  background: #3adb76;
}

.switch.alert input:checked ~ .switch-paddle {
  background: #cc4b37;
}

.switch.warning input:checked ~ .switch-paddle {
  background: #ffae00;
}
JS

Similar Building Blocks

control

Shopping Cart Button

F6
by Christine Siu
control

Social Icon Buttons

F6
by Rafi
control

Rounded Social buttons

F6
by Harry Manchanda