feat(checkbox): add sizes and form size inheritance

Closes #666
fomantic · Jul 25, 2019 · 58fdc6a · 58fdc6a
1 parent b7ad310
commit 58fdc6a
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 25 deletions.
diff --git a/src/definitions/modules/checkbox.less b/src/definitions/modules/checkbox.less
@@ -35,7 +35,7 @@
   font-style: normal;
 
   min-height: @checkboxSize;
-  font-size: @medium;
+  font-size: @relativeMedium;
   line-height: @checkboxLineHeight;
   min-width: @checkboxSize;
 }
@@ -688,4 +688,50 @@
   background-color: @toggleOnFocusLaneColor !important;
 }
 
+/*--------------------
+        Size
+---------------------*/
+
+each(@variationCheckboxSizes, {
+  @raw: @{value}Raw;
+  @size: @{value}CheckboxSize;
+  @circleScale: @{value}CheckboxCircleScale;
+  @circleLeft: @{value}CheckboxCircleLeft;
+
+  .ui.@{value}.checkbox {
+    font-size: @@size;
+  }
+
+  & when (@@raw > 1) {
+    .ui.@{value}.form .checkbox,
+    .ui.@{value}.checkbox {
+      &:not(.slider):not(.toggle):not(.radio) {
+        &
+        .box:after,
+        .box:before,
+        label:after,
+        label:before {
+          transform: scale(@@raw);
+          transform-origin:left;
+        }
+      }
+      &.radio {
+        &
+        .box:before,
+        label:before {
+          transform: scale(@@raw);
+          transform-origin:left;
+        }
+        &
+        .box:after,
+        label:after {
+          transform:scale(@@circleScale);
+          transform-origin:left;
+          left: @@circleLeft;
+        }
+      }
+    }
+  }
+})
+
 .loadUIOverrides();
diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables
@@ -641,34 +641,43 @@
   This rounds @size values to the closest pixel then expresses that value in (r)em.
   This ensures all size values round to exact pixels
 */
-@mini            : unit( round(@miniSize * @emSize) / @emSize, rem);
-@tiny            : unit( round(@tinySize * @emSize) / @emSize, rem);
-@small           : unit( round(@smallSize * @emSize) / @emSize, rem);
-@medium          : unit( round(@mediumSize * @emSize) / @emSize, rem);
-@large           : unit( round(@largeSize * @emSize) / @emSize, rem);
-@big             : unit( round(@bigSize * @emSize) / @emSize, rem);
-@huge            : unit( round(@hugeSize * @emSize) / @emSize, rem);
-@massive         : unit( round(@massiveSize * @emSize) / @emSize, rem);
+@miniRaw         : unit( round(@miniSize * @emSize) / @emSize );
+@tinyRaw         : unit( round(@tinySize * @emSize) / @emSize );
+@smallRaw        : unit( round(@smallSize * @emSize) / @emSize );
+@mediumRaw       : unit( round(@mediumSize * @emSize) / @emSize );
+@largeRaw        : unit( round(@largeSize * @emSize) / @emSize );
+@bigRaw          : unit( round(@bigSize * @emSize) / @emSize );
+@hugeRaw         : unit( round(@hugeSize * @emSize) / @emSize );
+@massiveRaw      : unit( round(@massiveSize * @emSize) / @emSize );
+
+@mini            : unit( @miniRaw, rem);
+@tiny            : unit( @tinyRaw, rem);
+@small           : unit( @smallRaw, rem);
+@medium          : unit( @mediumRaw, rem);
+@large           : unit( @largeRaw, rem);
+@big             : unit( @bigRaw, rem);
+@huge            : unit( @hugeRaw, rem);
+@massive         : unit( @massiveRaw, rem);
 
 /* em */
-@relativeMini    : unit( round(@miniSize * @emSize) / @emSize, em);
-@relativeTiny    : unit( round(@tinySize * @emSize) / @emSize, em);
-@relativeSmall   : unit( round(@smallSize * @emSize) / @emSize, em);
-@relativeMedium  : unit( round(@mediumSize * @emSize) / @emSize, em);
-@relativeLarge   : unit( round(@largeSize * @emSize) / @emSize, em);
-@relativeBig     : unit( round(@bigSize * @emSize) / @emSize, em);
-@relativeHuge    : unit( round(@hugeSize * @emSize) / @emSize, em);
-@relativeMassive : unit( round(@massiveSize * @emSize) / @emSize, em);
+@relativeMini    : unit( @miniRaw, em);
+@relativeTiny    : unit( @tinyRaw, em);
+@relativeSmall   : unit( @smallRaw, em);
+@relativeMedium  : unit( @mediumRaw, em);
+@relativeLarge   : unit( @largeRaw, em);
+@relativeBig     : unit( @bigRaw, em);
+@relativeHuge    : unit( @hugeRaw, em);
+@relativeMassive : unit( @massiveRaw, em);
 
 /* rem */
-@absoluteMini    : unit( round(@miniSize * @emSize) / @emSize, rem);
-@absoluteTiny    : unit( round(@tinySize * @emSize) / @emSize, rem);
-@absoluteSmall   : unit( round(@smallSize * @emSize) / @emSize, rem);
-@absoluteMedium  : unit( round(@mediumSize * @emSize) / @emSize, rem);
-@absoluteLarge   : unit( round(@largeSize * @emSize) / @emSize, rem);
-@absoluteBig     : unit( round(@bigSize * @emSize) / @emSize, rem);
-@absoluteHuge    : unit( round(@hugeSize * @emSize) / @emSize, rem);
-@absoluteMassive : unit( round(@massiveSize * @emSize) / @emSize, rem);
+@absoluteMini    : @mini;
+@absoluteTiny    : @tiny;
+@absoluteSmall   : @small;
+@absoluteMedium  : @medium;
+@absoluteLarge   : @large;
+@absoluteBig     : @big;
+@absoluteHuge    : @huge;
+@absoluteMassive : @massive;
 
 /*-------------------
        Icons

diff --git a/src/themes/default/modules/checkbox.variables b/src/themes/default/modules/checkbox.variables
@@ -196,3 +196,28 @@
 
 /* Inverted */
 @checkboxInvertedHoverBackground: @black;
+
+/* Size */
+@variationCheckboxSizes: mini, tiny, small, large, big, huge, massive;
+
+@miniCheckboxSize: @relativeMini;
+@miniCheckboxCircleScale: @miniRaw / 2;
+@miniCheckboxCircleLeft: unit((@miniRaw - @miniCheckboxCircleScale) / 2 + 0.05 , em);
+@tinyCheckboxSize: @relativeTiny;
+@tinyCheckboxCircleScale: @tinyRaw / 2;
+@tinyCheckboxCircleLeft: unit((@tinyRaw - @tinyCheckboxCircleScale) / 2 + 0.05 , em);
+@smallCheckboxSize: @relativeSmall;
+@smallCheckboxCircleScale: @smallRaw / 2;
+@smallCheckboxCircleLeft: unit((@smallRaw - @smallCheckboxCircleScale) / 2 + 0.05 , em);
+@largeCheckboxSize: @relativeLarge;
+@largeCheckboxCircleScale: @largeRaw / 2;
+@largeCheckboxCircleLeft: unit((@largeRaw - @largeCheckboxCircleScale) / 2 + 0.05 , em);
+@bigCheckboxSize: @relativeBig;
+@bigCheckboxCircleScale: @bigRaw / 2;
+@bigCheckboxCircleLeft: unit((@bigRaw - @bigCheckboxCircleScale) / 2 + 0.05 , em);
+@hugeCheckboxSize: @relativeHuge;
+@hugeCheckboxCircleScale: @hugeRaw / 2;
+@hugeCheckboxCircleLeft: unit((@hugeRaw - @hugeCheckboxCircleScale) / 2 + 0.05 , em);
+@massiveCheckboxSize: @relativeMassive;
+@massiveCheckboxCircleScale: @massiveRaw / 2;
+@massiveCheckboxCircleLeft: unit((@massiveRaw - @massiveCheckboxCircleScale) / 2 + 0.05 , em);