Add all sizing variations to loader, rail, segment, step

RELEASE-NOTES.md

@@ -5,6 +5,7 @@
 **Major Enhancements**
 - **Popup** - Added new settings `autoRemove`, which is enabled by default. This will add special event listeners to auto hide a popup if the triggering element is removed from the DOM. This is useful in controlled DOM environments like Meteor/Ember/React to ensure a popup auto-hides itself when a page navigation or other DOM change occurs.
 - **Dropdown** - Added new setting for search selection `hideAdditions` this will remove showing user additions inside the menu, making for a more intuitive adding process. Dropdowns now have a new state `empty` which will format an active dropdown with empty results. #3791
+- **All UI** - All UI now include _all_ sizing variations, `mini`, `tiny`, `small`, `large`, `big`, `huge`, `massive`
 - **Icons** -  50+ new icons+ are included. Icons now use the latest Font Awesome `4.5.0` Icons. Thanks @BreadMaker for the PR and @davegandy for the font!
 - **Progress** - Progress now uses a polling interval for updates. Rapidly updating the progress bar over a period quicker than the animation duration (for example with xhr `onprogress` events say every 50ms) will now appear smooth as butter.
 - **Modules** - Added new setting `silent` to all modules which allows you to disable **all** console output including errors. This can be useful for preventing known errors, like a popup which cannot place itself on screen, or `sticky` content which initializes before it is visible #3713

src/definitions/elements/loader.less

@@ -79,30 +79,48 @@
 }
 
 /* Sizes */
-.ui.loader:before,
-.ui.loader:after {
-  width: @medium;
-  height: @medium;
-  margin: @mediumOffset;
-}
 .ui.mini.loader:before,
 .ui.mini.loader:after {
   width: @mini;
   height: @mini;
   margin: @miniOffset;
 }
+.ui.tiny.loader:before,
+.ui.tiny.loader:after {
+  width: @tiny;
+  height: @tiny;
+  margin: @tinyOffset;
+}
 .ui.small.loader:before,
 .ui.small.loader:after {
   width: @small;
   height: @small;
   margin: @smallOffset;
 }
+.ui.loader:before,
+.ui.loader:after {
+  width: @medium;
+  height: @medium;
+  margin: @mediumOffset;
+}
 .ui.large.loader:before,
 .ui.large.loader:after {
   width: @large;
   height: @large;
   margin: @largeOffset;
 }
+.ui.big.loader:before,
+.ui.big.loader:after {
+  width: @big;
+  height: @big;
+  margin: @bigOffset;
+}
+.ui.massive.loader:before,
+.ui.massive.loader:after {
+  width: @massive;
+  height: @massive;
+  margin: @massiveOffset;
+}
 
 /*-------------------
       Coupling

src/definitions/elements/rail.less

@@ -126,10 +126,30 @@
      Sizing
 ---------------*/
 
+.ui.mini.rail {
+  font-size: @mini;
+}
+.ui.tiny.rail {
+  font-size: @tiny;
+}
+.ui.small.rail {
+  font-size: @small;
+}
 .ui.rail {
   font-size: @medium;
 }
-
+.ui.large.rail {
+  font-size: @large;
+}
+.ui.big.rail {
+  font-size: @big;
+}
+.ui.huge.rail {
+  font-size: @huge;
+}
+.ui.massive.rail {
+  font-size: @massive;
+}
 
 
 .loadUIOverrides();

src/definitions/elements/segment.less

@@ -729,4 +729,41 @@
   margin-bottom: 0em;
 }
 
+/*-------------------
+        Size
+--------------------*/
+
+.ui.mini.segments .segment,
+.ui.mini.segment {
+  font-size: @mini;
+}
+.ui.tiny.segments .segment,
+.ui.tiny.segment {
+  font-size: @tiny;
+}
+.ui.small.segments .segment,
+.ui.small.segment {
+  font-size: @small;
+}
+.ui.segments .segment,
+.ui.segment {
+  font-size: @medium;
+}
+.ui.large.segments .segment,
+.ui.large.segment {
+  font-size: @large;
+}
+.ui.big.segments .segment,
+.ui.big.segment {
+  font-size: @big;
+}
+.ui.huge.segments .segment,
+.ui.huge.segment {
+  font-size: @huge;
+}
+.ui.massive.segments .segment,
+.ui.massive.segment {
+  font-size: @massive;
+}
+
 .loadUIOverrides();

src/definitions/elements/step.less

@@ -526,17 +526,38 @@
 --------------------*/
 
 
-.ui.small.step,
-.ui.small.steps .step {
+.ui.mini.steps .step,
+.ui.mini.step {
+  font-size: @mini;
+}
+.ui.tiny.steps .step,
+.ui.tiny.step {
+  font-size: @tiny;
+}
+.ui.small.steps .step,
+.ui.small.step {
   font-size: @small;
 }
-.ui.step,
-.ui.steps .step {
+.ui.steps .step,
+.ui.step {
   font-size: @medium;
 }
-.ui.large.step,
-.ui.large.steps .step {
+.ui.large.steps .step,
+.ui.large.step {
   font-size: @large;
 }
+.ui.big.steps .step,
+.ui.big.step {
+  font-size: @big;
+}
+.ui.huge.steps .step,
+.ui.huge.step {
+  font-size: @huge;
+}
+.ui.massive.steps .step,
+.ui.massive.step {
+  font-size: @massive;
+}
+
 
-.loadUIOverrides();
+.loadUIOverrides();

src/themes/default/elements/loader.variables

@@ -44,17 +44,26 @@
 @inlineMargin: 0em;
 
 /* Exact Sizes (Avoids Rounding Errors) */
-@mini: 1.2857em;   /* 18px */
-@small: 1.7142em;  /* 24px */
-@medium: 2.2585em; /* 32px */
-@large: 4.5714em;  /* 64px */
+@mini    : @14px;
+@tiny    : @16px;
+@small   : @24px;
+@medium  : @32px;
+@large   : @48px;
+@big     : @52px;
+@massive : @64px;
 
 @miniOffset: 0em 0em 0em -(@mini / 2);
+@tinyOffset: 0em 0em 0em -(@tiny / 2);
 @smallOffset: 0em 0em 0em -(@small / 2);
 @mediumOffset: 0em 0em 0em -(@medium / 2);
 @largeOffset: 0em 0em 0em -(@large / 2);
+@bigOffset: 0em 0em 0em -(@big / 2);
+@massiveOffset: 0em 0em 0em -(@massive / 2);
 
+@tinyFontSize: @relativeTiny;
 @miniFontSize: @relativeMini;
 @smallFontSize: @relativeSmall;
 @mediumFontSize: @relativeMedium;
-@largeFontSize: @relativeLarge;
+@largeFontSize: @relativeLarge;
+@bigFontSize: @relativeBig;
+@massiveFontSize: @relativeMassive;

src/themes/default/globals/site.variables

@@ -372,102 +372,6 @@
 @absoluteHuge    : unit( round(@hugeSize * @emSize) / @emSize, rem);
 @absoluteMassive : unit( round(@massiveSize * @emSize) / @emSize, rem);
 
-
-/*-------------------
-  Exact Pixel Values
---------------------*/
-/*
-  These are used to specify exact pixel values in em
-  for things like borders that remain constantly
-  sized as emSize adjusts
-
-  Since there are many more sizes than names for sizes,
-  these are named by their original pixel values.
-
-*/
-
-@1px          : unit( (1 / @emSize), rem);
-@2px          : unit( (2 / @emSize), rem);
-@3px          : unit( (3 / @emSize), rem);
-@4px          : unit( (4 / @emSize), rem);
-@5px          : unit( (5 / @emSize), rem);
-@6px          : unit( (6 / @emSize), rem);
-@7px          : unit( (7 / @emSize), rem);
-@8px          : unit( (8 / @emSize), rem);
-@9px          : unit( (9 / @emSize), rem);
-@10px         : unit( (10 / @emSize), rem);
-@11px         : unit( (11 / @emSize), rem);
-@12px         : unit( (12 / @emSize), rem);
-@13px         : unit( (13 / @emSize), rem);
-@14px         : unit( (14 / @emSize), rem);
-@15px         : unit( (15 / @emSize), rem);
-@16px         : unit( (16 / @emSize), rem);
-@17px         : unit( (17 / @emSize), rem);
-@18px         : unit( (18 / @emSize), rem);
-@19px         : unit( (19 / @emSize), rem);
-@20px         : unit( (20 / @emSize), rem);
-@21px         : unit( (21 / @emSize), rem);
-@22px         : unit( (22 / @emSize), rem);
-@23px         : unit( (23 / @emSize), rem);
-@24px         : unit( (24 / @emSize), rem);
-@25px         : unit( (25 / @emSize), rem);
-@26px         : unit( (26 / @emSize), rem);
-@27px         : unit( (27 / @emSize), rem);
-@28px         : unit( (28 / @emSize), rem);
-@29px         : unit( (29 / @emSize), rem);
-@30px         : unit( (30 / @emSize), rem);
-@31px         : unit( (31 / @emSize), rem);
-@32px         : unit( (32 / @emSize), rem);
-@33px         : unit( (33 / @emSize), rem);
-@34px         : unit( (34 / @emSize), rem);
-@35px         : unit( (35 / @emSize), rem);
-@36px         : unit( (36 / @emSize), rem);
-@37px         : unit( (37 / @emSize), rem);
-@38px         : unit( (38 / @emSize), rem);
-@39px         : unit( (39 / @emSize), rem);
-@40px         : unit( (40 / @emSize), rem);
-
-@relative1px  : unit( (1 / @emSize), em);
-@relative2px  : unit( (2 / @emSize), em);
-@relative3px  : unit( (3 / @emSize), em);
-@relative4px  : unit( (4 / @emSize), em);
-@relative5px  : unit( (5 / @emSize), em);
-@relative6px  : unit( (6 / @emSize), em);
-@relative7px  : unit( (7 / @emSize), em);
-@relative8px  : unit( (8 / @emSize), em);
-@relative9px  : unit( (9 / @emSize), em);
-@relative10px : unit( (10 / @emSize), em);
-@relative11px : unit( (11 / @emSize), em);
-@relative12px : unit( (12 / @emSize), em);
-@relative13px : unit( (13 / @emSize), em);
-@relative14px : unit( (14 / @emSize), em);
-@relative15px : unit( (15 / @emSize), em);
-@relative16px : unit( (16 / @emSize), em);
-@relative17px : unit( (17 / @emSize), em);
-@relative18px : unit( (18 / @emSize), em);
-@relative19px : unit( (19 / @emSize), em);
-@relative20px : unit( (20 / @emSize), em);
-@relative21px : unit( (21 / @emSize), em);
-@relative22px : unit( (22 / @emSize), em);
-@relative23px : unit( (23 / @emSize), em);
-@relative24px : unit( (24 / @emSize), em);
-@relative25px : unit( (25 / @emSize), em);
-@relative26px : unit( (26 / @emSize), em);
-@relative27px : unit( (27 / @emSize), em);
-@relative28px : unit( (28 / @emSize), em);
-@relative29px : unit( (29 / @emSize), em);
-@relative30px : unit( (30 / @emSize), em);
-@relative31px : unit( (31 / @emSize), em);
-@relative32px : unit( (32 / @emSize), em);
-@relative33px : unit( (33 / @emSize), em);
-@relative34px : unit( (34 / @emSize), em);
-@relative35px : unit( (35 / @emSize), em);
-@relative36px : unit( (36 / @emSize), em);
-@relative37px : unit( (37 / @emSize), em);
-@relative38px : unit( (38 / @emSize), em);
-@relative39px : unit( (39 / @emSize), em);
-@relative40px : unit( (40 / @emSize), em);
-
 /*-------------------
        Icons
 --------------------*/
@@ -581,6 +485,150 @@
 @largestSmallMonitor : (@largeMonitorBreakpoint - 1px);
 @largestLargeMonitor : (@widescreenMonitorBreakpoint - 1px);
 
+
+/*-------------------
+  Exact Pixel Values
+--------------------*/
+/*
+  These are used to specify exact pixel values in em
+  for things like borders that remain constantly
+  sized as emSize adjusts
+
+  Since there are many more sizes than names for sizes,
+  these are named by their original pixel values.
+
+*/
+
+@1px  : unit( (1 / @emSize), rem);
+@2px  : unit( (2 / @emSize), rem);
+@3px  : unit( (3 / @emSize), rem);
+@4px  : unit( (4 / @emSize), rem);
+@5px  : unit( (5 / @emSize), rem);
+@6px  : unit( (6 / @emSize), rem);
+@7px  : unit( (7 / @emSize), rem);
+@8px  : unit( (8 / @emSize), rem);
+@9px  : unit( (9 / @emSize), rem);
+@10px : unit( (10 / @emSize), rem);
+@11px : unit( (11 / @emSize), rem);
+@12px : unit( (12 / @emSize), rem);
+@13px : unit( (13 / @emSize), rem);
+@14px : unit( (14 / @emSize), rem);
+@15px : unit( (15 / @emSize), rem);
+@16px : unit( (16 / @emSize), rem);
+@17px : unit( (17 / @emSize), rem);
+@18px : unit( (18 / @emSize), rem);
+@19px : unit( (19 / @emSize), rem);
+@20px : unit( (20 / @emSize), rem);
+@21px : unit( (21 / @emSize), rem);
+@22px : unit( (22 / @emSize), rem);
+@23px : unit( (23 / @emSize), rem);
+@24px : unit( (24 / @emSize), rem);
+@25px : unit( (25 / @emSize), rem);
+@26px : unit( (26 / @emSize), rem);
+@27px : unit( (27 / @emSize), rem);
+@28px : unit( (28 / @emSize), rem);
+@29px : unit( (29 / @emSize), rem);
+@30px : unit( (30 / @emSize), rem);
+@31px : unit( (31 / @emSize), rem);
+@32px : unit( (32 / @emSize), rem);
+@33px : unit( (33 / @emSize), rem);
+@34px : unit( (34 / @emSize), rem);
+@35px : unit( (35 / @emSize), rem);
+@36px : unit( (36 / @emSize), rem);
+@37px : unit( (37 / @emSize), rem);
+@38px : unit( (38 / @emSize), rem);
+@39px : unit( (39 / @emSize), rem);
+@40px : unit( (40 / @emSize), rem);
+@41px : unit( (41 / @emSize), rem);
+@42px : unit( (42 / @emSize), rem);
+@43px : unit( (43 / @emSize), rem);
+@44px : unit( (44 / @emSize), rem);
+@45px : unit( (45 / @emSize), rem);
+@46px : unit( (46 / @emSize), rem);
+@47px : unit( (47 / @emSize), rem);
+@48px : unit( (48 / @emSize), rem);
+@49px : unit( (49 / @emSize), rem);
+@50px : unit( (50 / @emSize), rem);
+@51px : unit( (51 / @emSize), rem);
+@52px : unit( (52 / @emSize), rem);
+@53px : unit( (53 / @emSize), rem);
+@54px : unit( (54 / @emSize), rem);
+@55px : unit( (55 / @emSize), rem);
+@56px : unit( (56 / @emSize), rem);
+@57px : unit( (57 / @emSize), rem);
+@58px : unit( (58 / @emSize), rem);
+@59px : unit( (59 / @emSize), rem);
+@60px : unit( (60 / @emSize), rem);
+@61px : unit( (61 / @emSize), rem);
+@62px : unit( (62 / @emSize), rem);
+@63px : unit( (63 / @emSize), rem);
+@64px : unit( (64 / @emSize), rem);
+
+@relative1px  : unit( (1 / @emSize), em);
+@relative2px  : unit( (2 / @emSize), em);
+@relative3px  : unit( (3 / @emSize), em);
+@relative4px  : unit( (4 / @emSize), em);
+@relative5px  : unit( (5 / @emSize), em);
+@relative6px  : unit( (6 / @emSize), em);
+@relative7px  : unit( (7 / @emSize), em);
+@relative8px  : unit( (8 / @emSize), em);
+@relative9px  : unit( (9 / @emSize), em);
+@relative10px : unit( (10 / @emSize), em);
+@relative11px : unit( (11 / @emSize), em);
+@relative12px : unit( (12 / @emSize), em);
+@relative13px : unit( (13 / @emSize), em);
+@relative14px : unit( (14 / @emSize), em);
+@relative15px : unit( (15 / @emSize), em);
+@relative16px : unit( (16 / @emSize), em);
+@relative17px : unit( (17 / @emSize), em);
+@relative18px : unit( (18 / @emSize), em);
+@relative19px : unit( (19 / @emSize), em);
+@relative20px : unit( (20 / @emSize), em);
+@relative21px : unit( (21 / @emSize), em);
+@relative22px : unit( (22 / @emSize), em);
+@relative23px : unit( (23 / @emSize), em);
+@relative24px : unit( (24 / @emSize), em);
+@relative25px : unit( (25 / @emSize), em);
+@relative26px : unit( (26 / @emSize), em);
+@relative27px : unit( (27 / @emSize), em);
+@relative28px : unit( (28 / @emSize), em);
+@relative29px : unit( (29 / @emSize), em);
+@relative30px : unit( (30 / @emSize), em);
+@relative31px : unit( (31 / @emSize), em);
+@relative32px : unit( (32 / @emSize), em);
+@relative33px : unit( (33 / @emSize), em);
+@relative34px : unit( (34 / @emSize), em);
+@relative35px : unit( (35 / @emSize), em);
+@relative36px : unit( (36 / @emSize), em);
+@relative37px : unit( (37 / @emSize), em);
+@relative38px : unit( (38 / @emSize), em);
+@relative39px : unit( (39 / @emSize), em);
+@relative40px : unit( (40 / @emSize), em);
+@relative41px : unit( (41 / @emSize), em);
+@relative42px : unit( (42 / @emSize), em);
+@relative43px : unit( (43 / @emSize), em);
+@relative44px : unit( (44 / @emSize), em);
+@relative45px : unit( (45 / @emSize), em);
+@relative46px : unit( (46 / @emSize), em);
+@relative47px : unit( (47 / @emSize), em);
+@relative48px : unit( (48 / @emSize), em);
+@relative49px : unit( (49 / @emSize), em);
+@relative50px : unit( (50 / @emSize), em);
+@relative51px : unit( (51 / @emSize), em);
+@relative52px : unit( (52 / @emSize), em);
+@relative53px : unit( (53 / @emSize), em);
+@relative54px : unit( (54 / @emSize), em);
+@relative55px : unit( (55 / @emSize), em);
+@relative56px : unit( (56 / @emSize), em);
+@relative57px : unit( (57 / @emSize), em);
+@relative58px : unit( (58 / @emSize), em);
+@relative59px : unit( (59 / @emSize), em);
+@relative60px : unit( (60 / @emSize), em);
+@relative61px : unit( (61 / @emSize), em);
+@relative62px : unit( (62 / @emSize), em);
+@relative63px : unit( (63 / @emSize), em);
+@relative64px : unit( (64 / @emSize), em);
+
 /* Columns */
 @oneWide        : (1 / @columnCount * 100%);
 @twoWide        : (2 / @columnCount * 100%);