From 3d2fda7dd39e2363682f1fa353c951ab0d44ddfa Mon Sep 17 00:00:00 2001 From: Fulup Ar Foll Date: Tue, 9 Feb 2016 18:40:49 +0100 Subject: Implemented URL query parsing for initial token /opa/?token=abcde --- .../foundation-apps/scss/components/_switch.scss | 130 +++++++++++++++++++++ 1 file changed, 130 insertions(+) create mode 100644 afb-client/bower_components/foundation-apps/scss/components/_switch.scss (limited to '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 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)); } + } +} -- cgit 1.2.3-korg