feat(checkbox): support right aligned position of checkbox variants

It was not supported to have any kind of checkbox positioned to the right of the label.
This PR now introduces right aligned checkbox variants

Author: lubber-de

src/definitions/modules/checkbox.less

@@ -217,7 +217,17 @@
   color: @checkboxColor;
   transition: @checkboxTransition;
 }
-
+& when (@variationCheckboxRightAligned) {
+  .ui.right.aligned.checkbox label {
+    padding-left: 0;
+    padding-right: @labelDistance;
+    &:after,
+    &:before {
+      right: 0;
+      left: auto;
+    }
+  }
+}
 /*--------------
       Label
 ---------------*/
@@ -317,6 +327,12 @@
       left: @toggleCenterOffset;
     }
   }
+  & when (@variationCheckboxRightAligned) {
+    .ui.right.aligned.indeterminate.toggle.checkbox input:not([type=radio]) ~ label:after {
+      left: auto;
+      right: @toggleCenterOffset;
+    }
+  }
 }
 
 /*--------------
@@ -542,6 +558,22 @@
   .ui.slider.checkbox input:focus:checked ~ label:before {
     background-color: @sliderOnFocusLineColor !important;
   }
+
+  & when (@variationCheckboxRightAligned) {
+    .ui.right.aligned.slider.checkbox label {
+      padding-left: 0;
+      padding-right: @sliderLabelDistance;
+    }
+    .ui.right.aligned.slider.checkbox label:after {
+      left: auto;
+      right: @sliderTravelDistance;
+      transition: @sliderHandleTransitionRightAligned;
+    }
+    .ui.right.aligned.slider.checkbox input:checked ~ label:after {
+      left: auto;
+      right: 0;
+    }
+  }
 }
 
 & when (@variationCheckboxToggle) {
@@ -643,6 +675,22 @@
   .ui.toggle.checkbox input:focus:checked ~ label:before {
     background-color: @toggleOnFocusLaneColor !important;
   }
+
+  & when (@variationCheckboxRightAligned) {
+    .ui.right.aligned.toggle.checkbox label {
+      padding-left: 0;
+      padding-right: @toggleLabelDistance;
+    }
+    .ui.right.aligned.toggle.checkbox input ~ label:after {
+      left: auto;
+      right: @toggleOnOffset;
+      transition: @toggleHandleTransitionRightAligned;
+    }
+    .ui.right.aligned.toggle.checkbox input:checked ~ label:after {
+      left: auto;
+      right: @toggleOffOffset;
+    }
+  }
 }
 
 /*******************************

src/themes/default/globals/variation.variables

@@ -379,6 +379,7 @@
 @variationCheckboxToggle: true;
 @variationCheckboxIndeterminate: true;
 @variationCheckboxFitted: true;
+@variationCheckboxRightAligned: true;
 @variationCheckboxSizes: @variationAllSizes;
 
 /* Dimmer */

src/themes/default/modules/checkbox.variables

@@ -116,6 +116,7 @@
 
 @sliderHandleOffset: (1rem - @sliderHandleSize) / 2;
 @sliderHandleTransition: left @sliderTransitionDuration @defaultEasing;
+@sliderHandleTransitionRightAligned: right @sliderTransitionDuration @defaultEasing;
 
 @sliderWidth: @sliderLineWidth;
 @sliderHeight: (@sliderHandleSize + @sliderHandleOffset);
@@ -159,6 +160,10 @@
   background @sliderTransitionDuration @defaultEasing,
   left @sliderTransitionDuration @defaultEasing
 ;
+@toggleHandleTransitionRightAligned:
+  background @sliderTransitionDuration @defaultEasing,
+  right @sliderTransitionDuration @defaultEasing
+;
 
 @toggleLaneBackground: @transparentBlack;
 @toggleLaneHeight: @toggleHandleSize;