Slider optimized for Firefox

src/scss/cdb-components/forms/sliders.scss

@@ -13,6 +13,8 @@
 @import '../../cdb-variables/colors';
 
 .CDB-Range {
+  -webkit-appearance: none;
+  -moz-appearance: none;
   position: relative;
   width: 100%;
   margin: -4px 0 0;
@@ -21,13 +23,11 @@
   cursor: pointer;
   overflow: hidden;
   vertical-align: middle;
-}
+  border: 0;
 
-.CDB-Range::-webkit-slider-thumb {
-  position: relative;
-  width: $baseSize / 2;
-  height: 100%;
-  border-radius: $baseSize / 2;
+  &:focus {
+    outline: 0;
+  }
 }
 
 .CDB-Range::-webkit-slider-runnable-track {
@@ -37,19 +37,63 @@
   background: $cMainLine;
 }
 
-.CDB-Range::-webkit-slider-thumb::before {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: -3000px;
-  height: $baseSize / 4;
+.CDB-Range::-webkit-slider-thumb {
+  position: relative;
+  width: $baseSize / 2;
+  height: 100%;
   border-radius: $baseSize / 2;
-  background: $cBlue;
-  content: '';
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: -3000px;
+    height: $baseSize / 4;
+    border-radius: $baseSize / 2;
+    background: $cBlue;
+    content: '';
+  }
+
+  &::after {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    left: -6px;
+    width: $baseSize + 4;
+    height: $baseSize + 4;
+    border: 1px solid $cBlue;
+    border-radius: 50%;
+    background: $cWhite;
+    content: '';
+    z-index: 1;
+  }
+
+  &:focus,
+  &:hover {
+    &::after {
+      cursor: pointer;
+    }
+  }
+
+  &:disabled {
+    &::before,
+    &::after {
+      opacity: 0.2;
+    }
+  }
 }
 
-.CDB-Range::-webkit-slider-thumb::after {
+.CDB-Range::-moz-range-track {
+  height: $baseSize / 4;
+  margin: $baseSize 0;
+  border-radius: $baseSize / 2;
+  background: $cMainLine;
+  border: 0;
+  outline: none;
+}
+
+.CDB-Range::-moz-range-thumb {
   position: absolute;
   top: -6px;
   right: -6px;
@@ -60,22 +104,17 @@
   border-radius: 50%;
   background: $cWhite;
   content: '';
-  z-index: 10;
+  z-index: 1;
 }
 
-.CDB-Range:focus {
-  outline: none;
-}
-
-.CDB-Range:hover::-webkit-slider-thumb::after,
-.CDB-Range:focus::-webkit-slider-thumb::after {
-  cursor: pointer;
-}
-
-.CDB-Range:disabled::-webkit-slider-thumb::before {
-  opacity: 0.2;
-}
-
-.CDB-Range:disabled::-webkit-slider-thumb::after {
-  opacity: 0.2;
-}
+.CDB-Range::-moz-range-progress {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: -3000px;
+  height: $baseSize / 4;
+  border-radius: $baseSize / 2;
+  background: $cBlue;
+  content: '';
+}

src/scss/cdb-components/forms/toggle.scss

@@ -57,36 +57,3 @@
     }
   }
 }
-
-
-
-// .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;
-// }