From 0e3e65387fdb36f265644ec58d8d5dc631299106 Mon Sep 17 00:00:00 2001
From: piensaenpixel <piensaenpixel@gmail.com>
Date: Tue, 26 Jan 2016 17:28:48 +0100
Subject: [PATCH] add toogle

---
 src/scss/cdb-components/forms/sliders.scss |  3 +-
 src/scss/cdb-components/forms/toogle.scss  | 50 ++++++++++++++++++++++
 2 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 src/scss/cdb-components/forms/toogle.scss

diff --git a/src/scss/cdb-components/forms/sliders.scss b/src/scss/cdb-components/forms/sliders.scss
index a33198f..fbae886 100644
--- a/src/scss/cdb-components/forms/sliders.scss
+++ b/src/scss/cdb-components/forms/sliders.scss
@@ -51,9 +51,8 @@
 
 .CDB-Range::-webkit-slider-thumb::after {
   position: absolute;
-  top: -5px;
+  top: -6px;
   right: -6px;
-  bottom: -6px;
   left: -6px;
   width: $baseSize + 4;
   height: $baseSize + 4;
diff --git a/src/scss/cdb-components/forms/toogle.scss b/src/scss/cdb-components/forms/toogle.scss
new file mode 100644
index 0000000..58933e3
--- /dev/null
+++ b/src/scss/cdb-components/forms/toogle.scss
@@ -0,0 +1,50 @@
+// Radio Button styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Toogle
+
+
+```
+  <label class="Text Size-small is-semibold u-rSpace--xl">
+    <span class="u-iBlock">TOOLS</span>
+    <input class="CDB-Toogle u-iBlock" type="checkbox" name="Analysis">
+    <span class="u-iBlock">SQL</span>
+  </label>
+```
+*/
+
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+@import '../../cdb-utilities/mixins';
+
+.CDB-Toogle {
+  @include transition(background, 300ms);
+  position: relative;
+  width: $baseSize * 4;
+  height: $baseSize * 2;
+  margin: 0 2px;
+  border-radius: 50px;
+  background: $cTypo4;
+}
+
+.CDB-Toogle:before {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: $baseSize + 4;
+  height: $baseSize + 4;
+  border-radius: 50%;
+  background: $cWhite;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48);
+  content: '';
+}
+
+.CDB-Toogle:checked {
+  background: $cMainDark;
+}
+
+.CDB-Toogle:checked:before {
+  right: 2px;
+  left: auto;
+}