1 files changed, 226 insertions, 0 deletions
diff --git a/source/bower_components/foundation/scss/foundation/components/_switches.scss b/source/bower_components/foundation/scss/foundation/components/_switches.scss
new file mode 100644
index 0000000..51050ce
--- /dev/null
+++ b/source/bower_components/foundation/scss/foundation/components/_switches.scss
@@ -0,0 +1,226 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+//
+// @name
+// @dependencies _global.scss
+//
+
+//
+// @variables
+//
+
+$include-html-form-classes: $include-html-classes !default;
+
+// Controlling background color for the switch container
+$switch-bg: $gainsboro !default;
+
+// We use these to control the switch heights for our default classes
+$switch-height-tny: 1.5rem !default;
+$switch-height-sml: 1.75rem !default;
+$switch-height-med: 2rem !default;
+$switch-height-lrg: 2.5rem !default;
+$switch-bottom-margin: 1.5rem !default;
+
+// We use these to style the switch-paddle
+$switch-paddle-bg: $white !default;
+$switch-paddle-transition-speed: .15s !default;
+$switch-paddle-transition-ease: ease-out !default;
+$switch-active-color: $primary-color !default;
+
+
+//
+// @mixins
+//
+
+// We use this mixin to create the base styles for our switch element.
+//
+// $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed.
+// $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease.
+@mixin switch-base(
+  $transition-speed:$switch-paddle-transition-speed,
+  $transition-ease:$switch-paddle-transition-ease) {
+ 
+
+  // Default label styles for type and transition
+  label {
+    display: block;
+    margin-bottom: $switch-height-med / 2;
+    position: relative;
+    color: transparent;
+    background: $switch-bg;
+    text-indent: 100%;
+    width: $switch-height-med * 2; height: $switch-height-med;
+    cursor: pointer;
+
+    // Transition for the switch label to follow paddle
+    @include single-transition(left, $transition-speed, $transition-ease);
+  }
+
+  // So that we don't need to recreate the form with any JS, we use the
+  // existing checkbox or radio button, but we cleverly position and hide it.
+  input {
+    opacity: 0;
+    position: absolute;
+    top: 9px;
+    left: 10px;
+    padding:0;
+
+    & + label { margin-left: 0; margin-right: 0; }
+  }
+
+  // The paddle for the switch is created from an after psuedoclass
+  // content element. This is sized and positioned, and reacts to
+  // the state of the input.
+
+  label:after {
+    content: "";
+    display: block;
+    background: $switch-paddle-bg;
+    position: absolute; top: .25rem; left: .25rem;
+    width: $switch-height-med - 0.5rem; height: $switch-height-med - 0.5rem;
+
+    -webkit-transition: left $transition-speed $transition-ease;
+    -moz-transition: left $transition-speed $transition-ease;
+    transition: left $transition-speed $transition-ease;
+
+    -webkit-transform: translate3d(0,0,0);
+    -moz-transform: translate3d(0,0,0);
+    transform: translate3d(0,0,0);
+  }
+
+  input:checked + label {
+    background: $switch-active-color;
+  }
+
+  input:checked + label:after {
+    left: $switch-height-med + 0.25rem;
+  }
+}
+
+// We use this mixin to create the size styles for switches.
+//
+// $height - Height (in px) of the switch. Default: $switch-height-med.
+// $font-size - Font size of text in switch. Default: $switch-font-size-med.
+// $line-height - Line height of switch. Default: 2.3rem.
+@mixin switch-size($height: $switch-height-med) {
+
+  label {
+    width: $height * 2; height: $height;
+  }
+
+  label:after {
+    width: $height - 0.5rem; height: $height - 0.5rem;
+  }
+
+  input:checked + label:after {
+    left: $height + 0.25rem;
+  }
+
+}
+
+// We use this mixin to add color and other fanciness to the switches.
+//
+// $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg.
+// $active-color - Background color of positive side of switch. Default: $switch-positive-color.
+// $negative-color - Background color of negative side of switch. Default: $switch-negative-color.
+// $radius - Radius to apply to switch. Default: false.
+// $base-style - Apply base styles? Default: true.
+@mixin switch-style(
+  $paddle-bg:$switch-paddle-bg,
+  $radius:false,
+  $base-style:true) {
+
+  @if $base-style {
+
+    label {
+      color: transparent;
+      background: $switch-bg;
+    }
+
+    label:after {
+      background: $paddle-bg;
+    }
+
+    input:checked + label {
+      background: $switch-active-color;
+    }
+  }
+
+  // Setting up the radius for switches
+  @if $radius == true {
+    label {
+      border-radius: 2rem;
+    }
+    label:after {
+      border-radius: 2rem;
+    }
+  }
+  @else if $radius {
+    label {
+      border-radius: $radius;
+    }
+    label:after {
+      border-radius: $radius;
+    }
+  }
+
+}
+
+// We use this to quickly create switches with a single mixin
+//
+// $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed.
+// $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease.
+// $height - Height (in px) of the switch. Default: $switch-height-med.
+// $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg.
+// $active-color - Background color of an active switch. Default: $switch-active-color.
+// $radius - Radius to apply to switch. Default: false.
+// $base-style - Apply base styles? Default: true.
+@mixin switch(
+  $transition-speed: $switch-paddle-transition-speed,
+  $transition-ease: $switch-paddle-transition-ease,
+  $height: $switch-height-med,
+  $paddle-bg: $switch-paddle-bg,
+  $active-color: $switch-active-color,
+  $radius:false,
+    $base-style:true) {
+    padding: 0;
+    border: none;
+    position: relative;
+    @include switch-base($transition-speed, $transition-ease);
+    @include switch-size($height);
+    @include switch-style($paddle-bg, $radius, $base-style);
+}
+
+@include exports("switch") {
+  @if $include-html-form-classes {
+      .switch {
+        @include switch;
+
+        // Large radio switches
+        &.large { @include switch-size($switch-height-lrg); }
+
+        // Small radio switches
+        &.small { @include switch-size($switch-height-sml); }
+
+        // Tiny radio switches
+        &.tiny { @include switch-size($switch-height-tny); }
+
+        // Add a radius to the switch
+        &.radius { 
+          label { @include radius(4px); }
+          label:after { @include radius(3px); }
+        }
+
+        // Make the switch completely round, like a pill
+        &.round { @include radius(1000px);
+          label { @include radius(2rem); }
+          label:after { @include radius(2rem); }
+        }
+
+      }
+  }
+}