From db912274b24255d7f49fc6af48151f00383d6b98 Mon Sep 17 00:00:00 2001
From: Marco 'Lubber' Wienkoop <c64@lubber.de>
Date: Thu, 10 Sep 2020 14:17:13 +0200
Subject: [PATCH] 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
---
 src/definitions/modules/checkbox.less         | 50 ++++++++++++++++++-
 .../default/globals/variation.variables       |  1 +
 src/themes/default/modules/checkbox.variables |  5 ++
 3 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/src/definitions/modules/checkbox.less b/src/definitions/modules/checkbox.less
index 32974deeef..cf9d61f961 100755
--- a/src/definitions/modules/checkbox.less
+++ b/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;
+    }
+  }
 }
 
 /*******************************
diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
index fcef751a59..c386c45676 100644
--- a/src/themes/default/globals/variation.variables
+++ b/src/themes/default/globals/variation.variables
@@ -379,6 +379,7 @@
 @variationCheckboxToggle: true;
 @variationCheckboxIndeterminate: true;
 @variationCheckboxFitted: true;
+@variationCheckboxRightAligned: true;
 @variationCheckboxSizes: @variationAllSizes;
 
 /* Dimmer */
diff --git a/src/themes/default/modules/checkbox.variables b/src/themes/default/modules/checkbox.variables
index cf441e69a8..1a6f5f9110 100644
--- a/src/themes/default/modules/checkbox.variables
+++ b/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;