fix(toggles): Fixed checkboxes and radio buttons for firefox and fixe…

…d order of switch control

atoms/toggle/_base.scss

@@ -9,43 +9,40 @@ $include-toggle-base-css: true !default;
  * @param $disabled-border-color Color of toggle border when the toggle is disabled
  */
 @mixin toggle-base($size, $background-color, $border-color, $border-radius, $disabled-border-color) {
-  display: inline-block;
-  vertical-align: middle;
-  position: relative;
-  outline: none;
-  width: $size / 2; // Make real control smaller to don't overflow behind overlays
-  height: $size / 2;
-  margin-left: $size / 4; // Adjust negative margin of overlays
-  cursor: pointer;
-  &:before {
-    content: '';
-    display: block;
-    width: $size;
-    height: $size;
-    margin: ($size / -4) 0 0 ($size / -4);
-    background: $background-color;
-    border: 1px solid $border-color;
-    border-radius: $border-radius;
-    box-sizing: border-box;
-  }
-  &:after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    transform-origin: center;
-    transform: scale(.2);
-    transition: opacity .1s linear .05s, transform .15s linear;
+  display: none;
+  + label {
+    position: relative;
+    margin-right: $space-xs;
+    &:before {
+      content: '';
+      display: inline-block;
+      vertical-align: sub;
+      width: $size;
+      height: $size;
+      background: $background-color;
+      border: 1px solid $border-color;
+      border-radius: $border-radius;
+      box-sizing: border-box;
+      margin-right: $space-xs;
+    }
+    &:after {
+      position: absolute;
+      top: 50%;
+      opacity: 0;
+      transform-origin: center;
+      transform: scale(.2);
+      transition: opacity .1s linear .05s, transform .15s linear;
+    }
   }
-  &:checked:after,
-  &.is-checked:after {
+  &:checked + label:after,
+  &.is-checked + label:after {
     opacity: 1;
     transform: scale(1);
     transition-delay: 0s, 0s;
     transition-timing-function: linear, cubic-bezier(0.69, 1.95, 0.68, 1.44);
   }
-  &:disabled:before,
-  &.is-disabled:before {
+  &:disabled + label:before,
+  &.is-disabled + label:before {
     border-color: $disabled-border-color;
   }
 }
@@ -57,19 +54,6 @@ $include-toggle-base-css: true !default;
     & + label {
       display: inline-block;
       vertical-align: middle;
-      margin: 0 $space-xs; // Remove the space created from font white space
-    }
-  }
-  .mod-toggle-reverse {
-    display: flex;
-    align-items: center;
-    input[type=checkbox],
-    input[type=radio] {
-      order: 2;
-      & + label {
-        order: 1;
-        margin: 0 $space-xs 0 0;
-      }
     }
   }
 }

atoms/toggle/_checkbox.scss

@@ -14,12 +14,13 @@ $checkbox-disabled-border-color: $miroschka !default;
  * @param $disabled-icon-color Color of check mark icon when checkbox is disabled
  */
 @mixin checkbox-toggle($size, $icon-color, $disabled-icon-color) {
-  &:after {
+  + label:after {
     @include icon(checkmark-checkbox, $size, $icon-color);
-    margin: ($size / -4) 0 0 ($size / -4);
+    margin-top: -($size / 2);
+    left: 0;
   }
-  &:disabled:after,
-  &.is-disabled:after {
+  &:disabled + label:after,
+  &.is-disabled + label:after {
     color: $disabled-icon-color;
   }
 }

atoms/toggle/_radio.scss

@@ -15,15 +15,17 @@ $radio-disabled-border-color: $miroschka !default;
  * @param $disabled-icon-color Color of check mark icon when radio is disabled
  */
 @mixin radio-toggle($size, $border-radius, $icon-color, $disabled-icon-color) {
-  &:after {
+  + label:after {
     content: '';
     background-color: $icon-color;
+    border-radius: $border-radius;
     width: $size / 2;
     height: $size / 2;
-    border-radius: $border-radius;
+    margin-top: -($size / 4);
+    left: $size / 4; // The icon got half of the size so the other half / 2 is aligning to center
   }
-  &:disabled:after,
-  &.is-disabled:after {
+  &:disabled + label:after,
+  &.is-disabled + label:after {
     background-color: $disabled-icon-color;
   }
 }

atoms/toggle/_switch.scss

@@ -20,38 +20,34 @@ $switch-knob-color-disabled-checked: $madang !default;
  * @param $knob-shadow The box shadow of the knob element
  */
 @mixin switch-toggle($track-width, $track-height, $knob-size, $knob-shadow) {
-  // We made the real input 1/2 of switch size and align it vertical and horizontal centered to don't overflow behind the layers
-  // This causes the :before and :after containers to have a wrong positioning which will be 1/4 from top and left
-  // We calculate here the negative margin to adjust the position to the correct one
-  $top-alignment: $track-height / 4;
-  $left-alignment: $track-width / 4;
   // Additionally to the general top alignment of the :after container we have to adjust the height to position the
   // knob centered on the track.
   $knob-top-alignment: (($knob-size - $track-height) / 2);
   display: inline-block;
   vertical-align: middle;
   position: relative;
   outline: none;
-  margin-left: $left-alignment; // Align real control centered behind layers above
   cursor: pointer;
+  margin-right: $space-xs + $track-width;
   &:before {
-    top: $knob-top-alignment;
-    left: 0rem;
+    top: 50%;
+    right: -($space-xs + $track-width);
+    margin-top: -($track-height / 2);
     content: '';
     position: absolute;
     display: block;
     width: $track-width;
     height: $track-height;
-    margin: 0 0 0 (-$left-alignment);
     border-radius: $track-height;
     box-sizing: border-box;
     transition: background .1s linear;
   }
   &:after {
     content: '';
     position: absolute;
-    top: 0;
-    left: -$left-alignment;
+    top: 50%;
+    right: -($knob-size + $space-xs);
+    margin-top: -($knob-size / 2);
     width: $knob-size;
     height: $knob-size;
     box-shadow: $knob-shadow;
@@ -79,7 +75,6 @@ $switch-knob-color-disabled-checked: $madang !default;
     display: none;
     & + label {
       overflow: visible;
-      padding-left: 2rem;
       @include switch-toggle($switch-track-width, $switch-track-height, $switch-knob-size, $switch-knob-shadow);
       @include switch-color($switch-track-color, $switch-knob-color);
     }
@@ -106,4 +101,4 @@ $switch-knob-color-disabled-checked: $madang !default;
       }
     }
   }
-}
+}

doc/atoms/controls.md

@@ -71,18 +71,3 @@
 
 ![Default](src/style/assets/con-ex12.jpg)
 <p>If there is no clear way to enable element - hide it.</p>
-
-
-## Revers Order
-**Reverse order** of input and label, so the label is on the right side of the toggle, can be done by wrapping the toggle and label with the class *.mod-toggle-reverse*.
-
-<div class="mod-toggle-reverse">
-	<input type="checkbox" class="mod-switch" id="switch2"/>
-	<label for="switch2">Off/On</label>
-</div>
-```html
-<div class="mod-toggle-reverse">
-	<input type="checkbox" class="mod-switch" id="switch2"/>
-	<label for="switch2">Off/On</label>
-</div>
-```