From 7a826d42f11368cc2bca9533b796ed86f3779381 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa=20Checa?= <mariajecheca@gmail.com>
Date: Fri, 29 Jan 2016 16:54:52 +0100
Subject: [PATCH] Toggle optimized for Firefox

---
 src/scss/cdb-components/forms/toggle.scss | 92 +++++++++++++++++++++++
 src/scss/cdb-components/forms/toogle.scss | 50 ------------
 2 files changed, 92 insertions(+), 50 deletions(-)
 create mode 100644 src/scss/cdb-components/forms/toggle.scss
 delete mode 100644 src/scss/cdb-components/forms/toogle.scss

diff --git a/src/scss/cdb-components/forms/toggle.scss b/src/scss/cdb-components/forms/toggle.scss
new file mode 100644
index 0000000..76a85e4
--- /dev/null
+++ b/src/scss/cdb-components/forms/toggle.scss
@@ -0,0 +1,92 @@
+// Radio Button styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Toggle
+
+
+```
+<div class="CDB-Text CDB-Size-small is-semibold u-rSpace--xl">
+  <label class="u-iBlock">TOOLS</label>
+  <input class="CDB-Toggle u-iBlock" type="checkbox" name="analysis">
+  <span class="u-iBlock CDB-ToggleFace"></span>
+  <label class="u-iBlock">SQL</label>
+</div>
+```
+*/
+
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+@import '../../cdb-utilities/mixins';
+
+.CDB-Toggle {
+  width: $baseSize * 4;
+  height: $baseSize * 2;
+  opacity: 0;
+  position: absolute;
+  z-index: 1;
+
+  ~ .CDB-ToggleFace {
+    @include transition(background, 300ms);
+    position: relative;
+    width: $baseSize * 4;
+    height: $baseSize * 2;
+    margin: 0 2px;
+    border-radius: 50px;
+    background: $cTypo4;
+
+    &::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: '';
+    }
+  }
+
+  &:checked ~ .CDB-ToggleFace {
+    background: $cMainDark;
+
+    &::before {
+      right: 2px;
+      left: auto;
+    }
+  }
+}
+
+
+
+// .CDB-Toggle {
+//   @include transition(background, 300ms);
+//   position: relative;
+//   width: $baseSize * 4;
+//   height: $baseSize * 2;
+//   margin: 0 2px;
+//   border-radius: 50px;
+//   background: $cTypo4;
+// }
+
+// .CDB-Toggle: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-Toggle:checked {
+//   background: $cMainDark;
+// }
+
+// .CDB-Toggle:checked:before {
+//   right: 2px;
+//   left: auto;
+// }
diff --git a/src/scss/cdb-components/forms/toogle.scss b/src/scss/cdb-components/forms/toogle.scss
deleted file mode 100644
index 9bd0078..0000000
--- a/src/scss/cdb-components/forms/toogle.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-// Radio Button styles
-// ----------------------------------------------
-
-/* SG
-# Forms/Toogle
-
-
-```
-<label class="CDB-Text CDB-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;
-}