Fixes finally checkbox/radio alignment, swaps to using transform for radio checkbox circle

src/definitions/modules/checkbox.less

@@ -92,15 +92,16 @@
 .ui.checkbox .box:after,
 .ui.checkbox label:after {
   position: absolute;
-  top: @checkboxCheckOffset;
-  left: 0px;
-  line-height: 1;
+  top: @checkboxCheckTop;
+  left: @checkboxCheckLeft;
+  line-height: @checkboxSize;
   width: @checkboxSize;
+  height: @checkboxSize;
   text-align: center;
 
   opacity: 0;
   color: @checkboxColor;
-  transition: opacity 0.1s ease;
+  transition: all 0.1s ease;
 }
 
 /*--------------
@@ -199,9 +200,15 @@
      Radio
 ---------------*/
 
+.ui.radio.checkbox {
+  height: @checkboxRadioSize;
+}
+
 /* Box */
 .ui.radio.checkbox .box:before,
 .ui.radio.checkbox label:before {
+  width: @checkboxRadioSize;
+  height: @checkboxRadioSize;
   border-radius: @circularRadius;
   transform: none;
 }
@@ -210,8 +217,11 @@
 .ui.radio.checkbox .box:after,
 .ui.radio.checkbox label:after {
   border: none;
-  top: @checkboxRadioOffset;
-  left: 0em;
+  width: @checkboxRadioSize;
+  height: @checkboxRadioSize;
+  line-height: @checkboxRadioSize;
+  top: @checkboxRadioTop;
+  left: @checkboxRadioLeft;
   font-size: @checkboxRadioCircleSize;
 }
 
@@ -270,6 +280,7 @@
   height: @sliderHandleSize;
   top: @sliderHandleOffset;
   left: 0em;
+  transform: none;
 
   border-radius: @circularRadius;
   transition:

src/themes/packages/default/modules/checkbox.overrides

@@ -21,13 +21,12 @@
 /* Radio Checkbox */
 .ui.radio.checkbox .box:after,
 .ui.radio.checkbox label:after {
-  content: '\e801'; /* '' */
-}
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-  .ui.radio.checkbox .box:after,
-  .ui.radio.checkbox label:after {
-    top: @checkboxRadioOffset + 1px;
-  }
+  content: ''; /* '' */
+  transform: scale(0.5);
+  width: @checkboxRadioSize;
+  height: @checkboxRadioSize;
+  border-radius: @circularRadius;
+  background-color: @checkboxColor;
 }
 
 .icon-check:before { content: '\e800'; }

src/themes/packages/default/modules/checkbox.variables

@@ -14,7 +14,7 @@
 @negativeCheckbox: @negativeColor;
 
 /* Checkbox */
-@checkboxSize: 16px;
+@checkboxSize: 17px;
 @checkboxBackground: @white;
 @checkboxBorder: 1px solid @borderColor;
 @checkboxBorderRadius: 0.25em;
@@ -25,7 +25,9 @@
 ;
 
 /* Checkmark */
-@checkboxCheckOffset: 2px;
+@checkboxCheckTop: 0px;
+@checkboxCheckLeft: 0px;
+
 
 /*-------------------
       Coupling
@@ -58,8 +60,10 @@
 --------------------*/
 
 /* Radio */
-@checkboxRadioOffset: 3px;
+@checkboxRadioSize: 16px;
 @checkboxRadioCircleSize: 9px;
+@checkboxRadioTop: 0px;
+@checkboxRadioLeft: 0px;
 
 /* Slider & Toggle Handle */
 @handleBackground: @white @subtleGradient;