Adds fitted checkbox variation

src/definitions/elements/header.less

@@ -441,6 +441,34 @@ a.ui.inverted.yellow.header:hover {
 }
 
 
+/*-------------------
+        Block
+--------------------*/
+
+.ui.block.header {
+  background: @blockBackground;
+  padding: @blockVerticalPadding @blockHorizontalPadding;
+  box-shadow: @blockBoxShadow;
+  border: @blockBorder;
+  border-radius: @blockBorderRadius;
+}
+
+.ui.tiny.block.header {
+  font-size: @tinyBlock;
+}
+.ui.small.block.header {
+  font-size: @smallBlock;
+}
+.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
+  font-size: @mediumBlock;
+}
+.ui.large.block.header {
+  font-size: @largeBlock;
+}
+.ui.huge.block.header {
+  font-size: @hugeBlock;
+}
+
 /*-------------------
        Attached
 --------------------*/
@@ -491,34 +519,6 @@ a.ui.inverted.yellow.header:hover {
   font-size: @hugeAttached;
 }
 
-/*-------------------
-        Block
---------------------*/
-
-.ui.block.header {
-  background: @blockBackground;
-  padding: @blockVerticalPadding @blockHorizontalPadding;
-  box-shadow: @blockBoxShadow;
-  border: @blockBorder;
-  border-radius: @blockBorderRadius;
-}
-
-.ui.tiny.block.header {
-  font-size: @tinyBlock;
-}
-.ui.small.block.header {
-  font-size: @smallBlock;
-}
-.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
-  font-size: @mediumBlock;
-}
-.ui.large.block.header {
-  font-size: @largeBlock;
-}
-.ui.huge.block.header {
-  font-size: @hugeBlock;
-}
-
 /*-------------------
         Sizing
 --------------------*/

src/definitions/modules/checkbox.less

@@ -349,12 +349,12 @@
 
 .ui.toggle.checkbox {
   cursor: pointer;
-  height: @toggleSize;
+  height: @toggleHeight;
 }
 
 .ui.toggle.checkbox .box,
 .ui.toggle.checkbox label {
-  height: @toggleSize;
+  height: @toggleHandleSize;
   padding-left: @toggleLabelDistance;
   line-height: @toggleLabelLineHeight;
   color: @toggleOffLabelColor;
@@ -435,5 +435,27 @@
   left: @toggleOnOffset;
 }
 
+/*******************************
+            Variations
+*******************************/
+
+/*--------------
+     Fitted
+---------------*/
+
+.ui.fitted.checkbox .box,
+.ui.fitted.checkbox label {
+  padding-left: 0em !important;
+}
+
+.ui.fitted.toggle.checkbox,
+.ui.fitted.toggle.checkbox {
+  width: @toggleWidth;
+}
+
+.ui.fitted.slider.checkbox,
+.ui.fitted.slider.checkbox {
+  width: @sliderWidth;
+}
 
 .loadUIOverrides();

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

@@ -77,11 +77,12 @@
 ;
 
 /* Slider */
+@sliderHandleSize: 1.5rem;
+@sliderLineWidth: 3.5rem;
+
+@sliderWidth: @sliderLineWidth;
 @sliderHeight: 1rem;
-@sliderSize: 1.5rem;
-@sliderHandleSize: @sliderSize;
 
-@sliderLineWidth: 3.5rem;
 @sliderLineHeight: 0.25rem;
 @sliderLineVerticalOffset: 0.4rem;
 @sliderLineColor: @neutralCheckbox;
@@ -102,8 +103,12 @@
 
 
 /* Toggle */
-@toggleSize: 1.5rem;
-@toggleHandleSize: @toggleSize;
+@toggleLaneWidth: 3.5rem;
+@toggleHandleSize: 1.5rem;
+
+@toggleWidth: @toggleLaneWidth;
+@toggleHeight: @toggleHandleSize;
+
 @toggleHandleRadius: @circularRadius;
 @toggleHandleOffset: 0rem;
 @toggleHandleTransition:
@@ -111,8 +116,7 @@
   left 0.3s ease 0s
 ;
 
-@toggleLaneWidth: 3.5rem;
-@toggleLaneHeight: @toggleSize;
+@toggleLaneHeight: @toggleHandleSize;
 @toggleLaneVerticalOffset: 0rem;
 @toggleOffOffset: -0.05rem;
 @toggleOnOffset: (@toggleLaneWidth - @toggleHandleSize) + 0.05rem;