richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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

pull/4074/head
Jack Lukic 9 years ago
parent
fc8d3efdc6
commit
675844d8dc
7 changed files with 269 additions and 115 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      RELEASE-NOTES.md
  2. 30
      src/definitions/elements/loader.less
  3. 22
      src/definitions/elements/rail.less
  4. 37
      src/definitions/elements/segment.less
  5. 35
      src/definitions/elements/step.less
  6. 19
      src/themes/default/elements/loader.variables
  7. 240
      src/themes/default/globals/site.variables

1
RELEASE-NOTES.md
View File

@ -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

30
src/definitions/elements/loader.less
View File

@ -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

22
src/definitions/elements/rail.less
View File

@ -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();

37
src/definitions/elements/segment.less
View File

@ -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();

35
src/definitions/elements/step.less
View File

@ -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();

19
src/themes/default/elements/loader.variables
View File

@ -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;

240
src/themes/default/globals/site.variables
View File

@ -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%);

Write Preview
Loading…
Cancel
Save