Browse Source

Finish loader sizing

pull/4074/head
Jack Lukic 9 years ago
parent
commit
285aeec1e1
2 changed files with 51 additions and 2 deletions
  1. 50
      src/definitions/elements/loader.less
  2. 3
      src/themes/default/elements/loader.variables

50
src/definitions/elements/loader.less

@ -115,6 +115,12 @@
height: @big;
margin: @bigOffset;
}
.ui.huge.loader:before,
.ui.huge.loader:after {
width: @huge;
height: @huge;
margin: @hugeOffset;
}
.ui.massive.loader:before,
.ui.massive.loader:after {
width: @massive;
@ -205,6 +211,12 @@
height: @mini;
font-size: @miniFontSize;
}
.ui.inverted.dimmer .ui.tiny.loader,
.ui.tiny.loader {
width: @tiny;
height: @tiny;
font-size: @tinyFontSize;
}
.ui.inverted.dimmer .ui.small.loader,
.ui.small.loader {
width: @small;
@ -217,18 +229,40 @@
height: @medium;
font-size: @mediumFontSize;
}
.ui.inverted.dimmer .ui.loader.large,
.ui.loader.large {
.ui.inverted.dimmer .ui.large.loader,
.ui.large.loader {
width: @large;
height: @large;
font-size: @largeFontSize;
}
.ui.inverted.dimmer .ui.big.loader,
.ui.big.loader {
width: @big;
height: @big;
font-size: @bigFontSize;
}
.ui.inverted.dimmer .ui.huge.loader,
.ui.huge.loader {
width: @huge;
height: @huge;
font-size: @hugeFontSize;
}
.ui.inverted.dimmer .ui.massive.loader,
.ui.massive.loader {
width: @massive;
height: @massive;
font-size: @massiveFontSize;
}
/* Text Loader */
.ui.mini.text.loader {
min-width: @mini;
padding-top: (@mini + @textDistance);
}
.ui.tiny.text.loader {
min-width: @tiny;
padding-top: (@tiny + @textDistance);
}
.ui.small.text.loader {
min-width: @small;
padding-top: (@small + @textDistance);
@ -241,6 +275,18 @@
min-width: @large;
padding-top: (@large + @textDistance);
}
.ui.big.text.loader {
min-width: @big;
padding-top: (@big + @textDistance);
}
.ui.huge.text.loader {
min-width: @huge;
padding-top: (@huge + @textDistance);
}
.ui.massive.text.loader {
min-width: @massive;
padding-top: (@massive + @textDistance);
}
/*-------------------

3
src/themes/default/elements/loader.variables

@ -50,6 +50,7 @@
@medium : @32px;
@large : @48px;
@big : @52px;
@huge : @58px;
@massive : @64px;
@miniOffset: 0em 0em 0em -(@mini / 2);
@ -58,6 +59,7 @@
@mediumOffset: 0em 0em 0em -(@medium / 2);
@largeOffset: 0em 0em 0em -(@large / 2);
@bigOffset: 0em 0em 0em -(@big / 2);
@hugeOffset: 0em 0em 0em -(@huge / 2);
@massiveOffset: 0em 0em 0em -(@massive / 2);
@tinyFontSize: @relativeTiny;
@ -66,4 +68,5 @@
@mediumFontSize: @relativeMedium;
@largeFontSize: @relativeLarge;
@bigFontSize: @relativeBig;
@hugeFontSize: @relativeHuge;
@massiveFontSize: @relativeMassive;
Loading…
Cancel
Save