summaryrefslogtreecommitdiffstats
path: root/afb-client/bower_components/foundation-apps/scss/components/_switch.scss
diff options
context:
space:
mode:
authorStephane Desneux <stephane.desneux@iot.bzh>2016-05-31 18:16:48 +0200
committerStephane Desneux <stephane.desneux@iot.bzh>2016-05-31 18:16:48 +0200
commit5b1e6cc132f44262a873fa8296a2a3e1017b0278 (patch)
tree43b2cd54e2e300b399ff3f2af4458a2c4ed8a144 /afb-client/bower_components/foundation-apps/scss/components/_switch.scss
parentf7d2f9ac4168ee5064580c666d508667a73cefc0 (diff)
parent85ace9c1ce9a98e9b8a22f045c7dd752b38d9129 (diff)
Merge afb-client
Diffstat (limited to 'afb-client/bower_components/foundation-apps/scss/components/_switch.scss')
-rw-r--r--afb-client/bower_components/foundation-apps/scss/components/_switch.scss130
1 files changed, 130 insertions, 0 deletions
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
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)); }
+ }
+}