add toogle

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;

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;
+}