From 9e5816bd73a0ef0b77fd0d4b884bdee176fde394 Mon Sep 17 00:00:00 2001 From: jlukic Date: Tue, 21 Oct 2014 19:21:35 -0400 Subject: [PATCH] Redo ui loader to use css only --- src/definitions/elements/loader.less | 255 +++++++++---------- src/themes/default/elements/loader.variables | 34 +-- src/themes/default/globals/site.variables | 4 +- 3 files changed, 144 insertions(+), 149 deletions(-) diff --git a/src/definitions/elements/loader.less b/src/definitions/elements/loader.less index 3c5c71df3..6cf8ff8e2 100755 --- a/src/definitions/elements/loader.less +++ b/src/definitions/elements/loader.less @@ -36,90 +36,110 @@ transform: translateX(-50%) translateY(-50%); } -.ui.dimmer .loader { - display: block; -} +/* Static Shape */ +.ui.loader:before { + position: absolute; + content: ''; + top: 0%; + left: 50%; + width: 100%; + height: 100%; -.ui.dimmer .ui.loader, -.ui.inverted.loader { - color: @loaderTextColor + border-radius: @circularRadius; + border: @loaderLineWidth solid @loaderFillColor; } -/******************************* - Types -*******************************/ +/* Active Shape */ +.ui.loader:after { + position: absolute; + content: ''; + top: 0%; + left: 50%; + width: 100%; + height: 100%; + + animation: loader-spin @loaderSpeed linear; + animation-iteration-count: infinite; + + border-radius: @circularRadius; -/*-------------- - CSS ----------------*/ + border-color: @loaderLineColor transparent transparent; + border-style: solid; + border-width: @loaderLineWidth; -/* Flipping */ -.ui.flipping.loader { - width: auto; - height: auto; - background-image: none !important; + box-shadow: 0px 0px 0px 1px transparent; } -.ui.flipping.loader .shape { - position: relative; - margin: 0em auto 1em; - color: transparent; - box-shadow: 0px 0px 0px 1px; - animation: loaderFlipping 1s infinite ease; - margin-bottom: 1em; - transform-style: preserve-3d; + +/* Active Animation */ +@keyframes loader-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } } -.ui.flipping.loader .shape:before, -.ui.flipping.loader .shape:after { - position: absolute; - content: ''; - top: 0px; - left: 0px; - box-shadow: 0px 0px 0px 1px; - backface-visibility: hidden; + +/* 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.flipping.loader .shape:before { - background-color: @primaryColor; - transform: rotateY(0deg); - z-index: 2; +.ui.small.loader:before, +.ui.small.loader:after { + width: @small; + height: @small; + margin: @smallOffset; } -.ui.flipping.loader .shape:after { - background-color: @secondaryColor; - transform: rotateY(180deg); +.ui.large.loader:before, +.ui.large.loader:after { + width: @large; + height: @large; + margin: @largeOffset; } -/* Circular */ -.ui.flipping.circular.loader .shape, -.ui.flipping.circular.loader .shape:before, -.ui.flipping.circular.loader .shape:after { - border-radius: @circularRadius; +/*------------------- + Coupling +--------------------*/ + +/* Show inside active dimmer */ +.ui.dimmer .loader { + display: block; } -/* Sizes */ -.ui.mini.flipping.loader .shape, -.ui.mini.flipping.loader .shape:before, -.ui.mini.flipping.loader .shape:after { - width: @miniSize; - height: @miniSize; +/* Black Dimmer */ +.ui.dimmer .ui.loader { + color: @invertedLoaderTextColor; } -.ui.flipping.loader .shape, -.ui.flipping.loader .shape:before, -.ui.flipping.loader .shape:after { - width: @mediumSize; - height: @mediumSize; +.ui.dimmer .ui.loader:before { + border-color: @invertedLoaderFillColor; +} +.ui.dimmer .ui.loader:after { + border-top-color: @invertedLoaderLineColor; } - -@keyframes loaderFlipping { - 0% { - transform: perspective(6em) rotateX(0deg) rotateY(0deg); - } - 50% { - transform: perspective(6em) rotateX(0deg) rotateY(-180deg); - } - 100% { - transform: perspective(6em) rotateX(0deg) rotateY(-360deg); - } +/* White Dimmer (Inverted) */ +.ui.inverted.dimmer .ui.loader { + color: @loaderTextColor; } +.ui.inverted.dimmer .ui.loader:before { + border-color: @loaderFillColor; +} +.ui.inverted.dimmer .ui.loader:after { + border-top-color: @loaderLineColor; +} + +/******************************* + Types +*******************************/ /*------------------- @@ -133,22 +153,6 @@ font-style: normal; } -.ui.mini.text.loader { - min-width: @miniSize; - padding-top: (@miniSize + @textDistance); -} -.ui.small.text.loader { - min-width: @smallSize; - padding-top: (@smallSize + @textDistance); -} -.ui.text.loader { - min-width: @mediumSize; - padding-top: (@mediumSize + @textDistance); -} -.ui.large.text.loader { - min-width: @largeSize; - padding-top: (@largeSize + @textDistance); -} /******************************* States @@ -172,40 +176,49 @@ Sizes --------------------*/ -/* Tiny Size */ + +/* Loader */ .ui.inverted.dimmer .ui.mini.loader, .ui.mini.loader { - width: @miniSize; - height: @miniSize; + width: @mini; + height: @mini; font-size: @miniFontSize; - background-image: url(@miniLoaderPath); } - -/* Small Size */ .ui.inverted.dimmer .ui.small.loader, .ui.small.loader { - width: @smallSize; - height: @smallSize; + width: @small; + height: @small; font-size: @smallFontSize; - background-image: url(@smallLoaderPath); } - .ui.inverted.dimmer .ui.loader, .ui.loader { - width: @mediumSize; - height: @mediumSize; + width: @medium; + height: @medium; font-size: @mediumFontSize; - background: url(@mediumLoaderPath) no-repeat; - background-position: 50% 0px; } - -/* Large Size */ .ui.inverted.dimmer .ui.loader.large, .ui.loader.large { - width: @largeSize; - height: @largeSize; + width: @large; + height: @large; font-size: @largeFontSize; - background-image: url(@largeLoaderPath); +} + +/* Text Loader */ +.ui.mini.text.loader { + min-width: @mini; + padding-top: (@mini + @textDistance); +} +.ui.small.text.loader { + min-width: @small; + padding-top: (@small + @textDistance); +} +.ui.text.loader { + min-width: @medium; + padding-top: (@medium + @textDistance); +} +.ui.large.text.loader { + min-width: @large; + padding-top: (@large + @textDistance); } @@ -213,32 +226,14 @@ Inverted --------------------*/ -.ui.inverted.dimmer .ui.loader { - color: @invertedLoaderTextColor; +.ui.inverted.loader { + color: @invertedLoaderTextColor } - -/* Tiny Size */ -.ui.dimmer .mini.ui.loader, -.ui.inverted .mini.ui.loader { - background-image: url(@miniInvertedLoaderPath); +.ui.inverted.loader:before { + border-color: @invertedLoaderFillColor; } - -/* Small Size */ -.ui.dimmer .small.ui.loader, -.ui.inverted .small.ui.loader { - background-image: url(@smallInvertedLoaderPath); -} - -/* Standard Size */ -.ui.dimmer .ui.loader, -.ui.inverted.loader { - background-image: url(@mediumInvertedLoaderPath); -} - -/* Large Size */ -.ui.dimmer .large.ui.loader, -.ui.inverted .large.ui.loader { - background-image: url(@largeInvertedLoaderPath); +.ui.inverted.loader:after { + border-top-color: @invertedLoaderLineColor; } /*------------------- @@ -246,9 +241,11 @@ --------------------*/ .ui.inline.loader { - position: static; - vertical-align: middle; - margin: 0em; + position: relative; + vertical-align: @inlineVerticalAlign; + margin: @inlineMargin; + left: 0em; + top: 0em; transform: none; } diff --git a/src/themes/default/elements/loader.variables b/src/themes/default/elements/loader.variables index 772057de7..b59b7ad17 100644 --- a/src/themes/default/elements/loader.variables +++ b/src/themes/default/elements/loader.variables @@ -2,6 +2,8 @@ Loader *******************************/ +/* Some global loader styles defined in site.variables */ + /*------------------- Standard --------------------*/ @@ -14,32 +16,27 @@ --------------------*/ /* Image */ -@miniSize: 16px; -@smallSize: 24px; -@mediumSize: 32px; -@largeSize: 64px; +@mini: 1.5em; +@small: 2em; +@medium: 3em; +@large: 4em; + +@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: 15px; +@textDistance: 0.7em; @miniFontSize: 0.8em; @smallFontSize: 0.875em; @mediumFontSize: 1em; @largeFontSize: 1.2em; -@miniLoaderPath: "@{imagePath}/loader-mini.gif"; -@smallLoaderPath: "@{imagePath}/loader-small.gif"; -@mediumLoaderPath: "@{imagePath}/loader-medium.gif"; -@largeLoaderPath: "@{imagePath}/loader-large.gif"; - -@miniInvertedLoaderPath: "@{imagePath}/loader-mini-inverted.gif"; -@smallInvertedLoaderPath: "@{imagePath}/loader-small-inverted.gif"; -@mediumInvertedLoaderPath: "@{imagePath}/loader-medium-inverted.gif"; -@largeInvertedLoaderPath: "@{imagePath}/loader-large-inverted.gif"; /* Text */ -@loaderTextColor: @invertedTextColor; -@invertedLoaderTextColor: @textColor; - +@loaderTextColor: @textColor; +@invertedLoaderTextColor: @invertedTextColor; /*------------------- States @@ -50,3 +47,6 @@ /*------------------- Variations --------------------*/ + +@inlineVerticalAlign: middle; +@inlineMargin: 0em; \ No newline at end of file diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index 3f1e4fa58..4c27c7417 100644 --- a/src/themes/default/globals/site.variables +++ b/src/themes/default/globals/site.variables @@ -83,9 +83,7 @@ --------------------*/ @loaderSpeed: 0.75s; - -@loaderLineWidth: 3px; - +@loaderLineWidth: 0.3em; @loaderFillColor: rgba(0, 0, 0, 0.1); @loaderLineColor: rgba(0, 0, 0, 0.3); @invertedLoaderFillColor: rgba(255, 255, 255, 0.15);