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
fomantic · Sep 10, 2020 · db91227 · db91227
1 parent 59d9b40
commit db91227
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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;