diff --git a/src/definitions/elements/loader.less b/src/definitions/elements/loader.less index 6cf8ff8e2..dfb0df4da 100755 --- a/src/definitions/elements/loader.less +++ b/src/definitions/elements/loader.less @@ -63,7 +63,7 @@ border-radius: @circularRadius; - border-color: @loaderLineColor transparent transparent; + border-color: @shapeBorderColor; border-style: solid; border-width: @loaderLineWidth; @@ -123,7 +123,7 @@ border-color: @invertedLoaderFillColor; } .ui.dimmer .ui.loader:after { - border-top-color: @invertedLoaderLineColor; + border-color: @invertedShapeBorderColor; } /* White Dimmer (Inverted) */ @@ -134,7 +134,7 @@ border-color: @loaderFillColor; } .ui.inverted.dimmer .ui.loader:after { - border-top-color: @loaderLineColor; + border-color: @shapeBorderColor; } /******************************* diff --git a/src/themes/default/elements/loader.variables b/src/themes/default/elements/loader.variables index 421235ed2..68922f849 100644 --- a/src/themes/default/elements/loader.variables +++ b/src/themes/default/elements/loader.variables @@ -3,6 +3,12 @@ *******************************/ /* Some global loader styles defined in site.variables */ +// @loaderSpeed +// @loaderLineWidth +// @loaderFillColor +// @loaderLineColor +// @invertedLoaderFillColor +// @invertedLoaderLineColor /*------------------- Standard @@ -11,30 +17,15 @@ @loaderTopOffset: 50%; @loaderLeftOffset: 50%; +@shapeBorderColor: @loaderLineColor transparent transparent; +@invertedShapeBorderColor: @invertedLoaderLineColor transparent transparent; + /*------------------- Types --------------------*/ -/* Exact Sizes (Avoids Rounding Errors) */ -@mini: 1.2857em; -@small: 1.7142em; -@medium: 2.2585em; -@large: 4.5714em; - -@miniOffset: 0em 0em 0em -(@mini / 2); -@smallOffset: 0em 0em 0em -(@small / 2); -@mediumOffset: 0em 0em 0em -(@medium / 2); -@largeOffset: 0em 0em 0em -(@large / 2); - -@textDistance: 0.7em; - -@miniFontSize: 0.7857em; -@smallFontSize: 0.9285em; -@mediumFontSize: 1em; -@largeFontSize: 1.1428em; - - /* Text */ +@textDistance: 0.7em; @loaderTextColor: @textColor; @invertedLoaderTextColor: @invertedTextColor; @@ -49,4 +40,21 @@ --------------------*/ @inlineVerticalAlign: middle; -@inlineMargin: 0em; \ No newline at end of file +@inlineMargin: 0em; + +/* Exact Sizes (Avoids Rounding Errors) */ +@mini: 1.2857em; +@small: 1.7142em; +@medium: 2.2585em; +@large: 4.5714em; + +@miniOffset: 0em 0em 0em -(@mini / 2); +@smallOffset: 0em 0em 0em -(@small / 2); +@mediumOffset: 0em 0em 0em -(@medium / 2); +@largeOffset: 0em 0em 0em -(@large / 2); + + +@miniFontSize: 0.7857em; +@smallFontSize: 0.9285em; +@mediumFontSize: 1em; +@largeFontSize: 1.1428em; \ No newline at end of file diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index afdafb64c..5e3afeb1b 100644 --- a/src/themes/default/globals/site.variables +++ b/src/themes/default/globals/site.variables @@ -33,6 +33,8 @@ @white : #FFFFFF; /*--- Light Colors ---*/ + +@lightBlack: : #CCCCCC; @lightBlue : #54C8FF; @lightGreen : #2ECC40; @lightOrange : #FF851B; @@ -42,8 +44,12 @@ @lightTeal : #6DFFFF; @lightYellow : #FFE21F; -@primaryColor : @blue; -@secondaryColor : @black; +/*--- Brand Colors ---*/ +@primaryColor : @blue; +@secondaryColor : @black; + +@lightPrimaryColor : @lightBlue; +@lightSecondaryColor : @lightBlack; /*------------------- Page @@ -82,7 +88,7 @@ Loader --------------------*/ -@loaderSpeed: 0.75s; +@loaderSpeed: 0.6s; @loaderLineWidth: 0.3em; @loaderFillColor: rgba(0, 0, 0, 0.1); @loaderLineColor: @darkGrey; diff --git a/src/themes/duo/elements/loader.overrides b/src/themes/duo/elements/loader.overrides new file mode 100644 index 000000000..14fb0da12 --- /dev/null +++ b/src/themes/duo/elements/loader.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/themes/duo/elements/loader.variables b/src/themes/duo/elements/loader.variables new file mode 100644 index 000000000..0608cfd52 --- /dev/null +++ b/src/themes/duo/elements/loader.variables @@ -0,0 +1,6 @@ +/******************************* + Loader +*******************************/ + +@shapeBorderColor: @primaryColor @primaryColor @secondaryColor @secondaryColor; +@invertedShapeBorderColor: @lightPrimaryColor @lightPrimaryColor @lightSecondaryColor @lightSecondaryColor; \ No newline at end of file diff --git a/src/themes/pulsar/elements/loader.overrides b/src/themes/pulsar/elements/loader.overrides new file mode 100644 index 000000000..f01a21671 --- /dev/null +++ b/src/themes/pulsar/elements/loader.overrides @@ -0,0 +1,28 @@ +/******************************* + Theme Overrides +*******************************/ + +@keyframes loader-spin { + 0% { + transform: rotate(0deg); + opacity: 0.3; + } + 20% { + transform: rotate(360deg); + } + 40% { + transform: rotate(740deg); + opacity: 1; + } + 60% { + transform: rotate(1120deg); + opacity: 1; + } + 80% { + transform: rotate(1440deg); + } + 100% { + transform: rotate(1800deg); + opacity: 0.3; + } +} \ No newline at end of file diff --git a/src/themes/pulsar/elements/loader.variables b/src/themes/pulsar/elements/loader.variables new file mode 100644 index 000000000..29ab5cf41 --- /dev/null +++ b/src/themes/pulsar/elements/loader.variables @@ -0,0 +1,7 @@ +/******************************* + Loader +*******************************/ + +@loaderSpeed: 2s; +@loaderLineColor: @primaryColor; +@invertedLoaderLineColor: @lightPrimaryColor;