Update JSON API

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

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