Merge afb-client

[src/app-framework-demo.git] / afb-client / bower_components / foundation-apps / scss / components / _switch.scss

diff --git a/afb-client/bower_components/foundation-apps/scss/components/_switch.scss b/afb-client/bower_components/foundation-apps/scss/components/_switch.scss
new file mode 100644 (file)
index 0000000..7710ad4
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_switch.scss
@@ -0,0 +1,130 @@
+/*
+  SWITCH
+  ------
+*/
+
+/// @Foundation.settings
+// Switch
+$switch-width: rem-calc(50) !default;
+$switch-height: rem-calc(32) !default;
+$switch-background: #ccc !default;
+$switch-background-active: $primary-color !default;
+$switch-border: 0 !default;
+$switch-radius: 9999px !default;
+$switch-animation-speed: 0.15s !default;
+
+$switch-paddle-color: white !default;
+$switch-paddle-offset: 4px !default;
+///
+
+%switch {
+  position: relative;
+  overflow: hidden;
+  display: inline-block;
+
+  > input {
+    position: absolute;
+    left: -9999px;
+    outline: none;
+  }
+
+  > label {
+    -ms-touch-action: manipulation;
+        touch-action: manipulation;
+    display: block;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    margin: 0;
+
+    // Paddle
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+}
+
+/*
+  Defines the dimmensions of the switch.
+
+  $width - width of the switch.
+  $height - height of the switch.
+*/
+@mixin switch-layout(
+  $width: $switch-width,
+  $height: $switch-height
+) {
+  width: $width;
+  height: $height;
+
+  > label {
+    &::after {
+      width: $height;
+      height: $height;
+    }
+  }
+  input:checked + label {
+    &::after {
+      left: $width - $height;
+    }
+  }
+}
+
+@mixin switch-style(
+  $background: $switch-background,
+  $background-active: $switch-background-active,
+  $border: $switch-border,
+  $radius: $switch-radius,
+  $paddle-color: $switch-paddle-color,
+  $paddle-offset: $switch-paddle-offset,
+  $animation-speed: $switch-animation-speed
+) {
+  @if hasvalue($border) {
+    border: $border;
+  }
+  border-radius: $radius;
+
+  > label {
+    background: $background;
+
+    &::after {
+      background: $paddle-color;
+      border-radius: $radius;
+      transition: left $animation-speed ease-out;
+
+      @if hasvalue($paddle-offset) {
+        border: $paddle-offset solid $background
+      }
+    }
+  }
+
+  input:checked + label {
+    background: $background-active;
+    margin: 0;
+
+    &::after {
+      @if hasvalue($paddle-offset) {
+        border-color: $background-active;
+      }
+    }
+  }
+}
+
+@mixin switch() {
+  @extend %switch;
+  @include switch-layout;
+  @include switch-style;
+}
+
+@include exports(switch) {
+  .switch {
+    @include switch;
+
+    &.small { @include switch-layout(rem-calc(40), rem-calc(26)); }
+    &.large { @include switch-layout(rem-calc(60), rem-calc(38)); }
+  }
+}