From 675844d8dc2a9667c3e6ebe0024bc48f7c8d4004 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Fri, 1 Apr 2016 10:48:10 -0400 Subject: [PATCH] Add all sizing variations to loader, rail, segment, step --- RELEASE-NOTES.md | 1 + src/definitions/elements/loader.less | 30 ++- src/definitions/elements/rail.less | 22 +- src/definitions/elements/segment.less | 37 +++ src/definitions/elements/step.less | 35 ++- src/themes/default/elements/loader.variables | 19 +- src/themes/default/globals/site.variables | 240 +++++++++++-------- 7 files changed, 269 insertions(+), 115 deletions(-) diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 3af341e33..c316a7779 100644 --- a/RELEASE-NOTES.md +++ b/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 diff --git a/src/definitions/elements/loader.less b/src/definitions/elements/loader.less index f8f41101c..7be05cd46 100755 --- a/src/definitions/elements/loader.less +++ b/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 diff --git a/src/definitions/elements/rail.less b/src/definitions/elements/rail.less index 0d090313d..929eeabd0 100755 --- a/src/definitions/elements/rail.less +++ b/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(); diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less index 3f136fe2f..d1993a571 100755 --- a/src/definitions/elements/segment.less +++ b/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(); diff --git a/src/definitions/elements/step.less b/src/definitions/elements/step.less index f3edd4438..bcb429638 100755 --- a/src/definitions/elements/step.less +++ b/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(); \ No newline at end of file +.loadUIOverrides(); diff --git a/src/themes/default/elements/loader.variables b/src/themes/default/elements/loader.variables index 444a02db3..039cd23f1 100644 --- a/src/themes/default/elements/loader.variables +++ b/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; \ No newline at end of file +@largeFontSize: @relativeLarge; +@bigFontSize: @relativeBig; +@massiveFontSize: @relativeMassive; diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index 69d1bea5c..1bf9ac5a3 100644 --- a/src/themes/default/globals/site.variables +++ b/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%);