From 94e2c58d7febabdce4e32f2be05305a912b59fc5 Mon Sep 17 00:00:00 2001 From: Steven Evans Date: Mon, 16 Jul 2018 13:30:54 -0400 Subject: [PATCH] [refactor] Refactored the loader; inlined the customizations --- css/_mixins.scss | 43 ++++++++++ css/loader.scss | 216 ++++++++++++++++++++--------------------------- 2 files changed, 133 insertions(+), 126 deletions(-) diff --git a/css/_mixins.scss b/css/_mixins.scss index 43eb5762a..f953defec 100644 --- a/css/_mixins.scss +++ b/css/_mixins.scss @@ -1,3 +1,11 @@ +@mixin animation($property) { + -webkit-animation: $property; + -moz-animation: $property; + -ms-animation: $property; + -o-animation: $property; + animation: $property; +} + @mixin borderRadius($property) { -webkit-border-radius: $property; -moz-border-radius: $property; @@ -9,3 +17,38 @@ -moz-box-shadow: $value; box-shadow: $value; } + +@mixin keyframes($animationName) { + @-webkit-keyframes #{$animationName} { + $browser: '-webkit-' !global; + @content; + } + + @-moz-keyframes #{$animationName} { + $browser: '-moz-' !global; + @content; + } + + @-ms-keyframes #{$animationName} { + $browser: '-ms-' !global; + @content; + } + + @-o-keyframes #{$animationName} { + $browser: '-o-' !global; + @content; + } + + @keyframes #{$animationName} { + $browser: '' !global; + @content; + } +} + +@mixin transform($property) { + -webkit-transform: $property; + -moz-transform: $property; + -ms-transform: $property; + -o-transform: $property; + transform: $property; +} diff --git a/css/loader.scss b/css/loader.scss index 3c3681e6d..1dda09b90 100644 --- a/css/loader.scss +++ b/css/loader.scss @@ -1,53 +1,31 @@ -@-webkit-keyframes LOADERSPINNER { - 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); } - 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); } -} -@-moz-keyframes LOADERSPINNER { - 0% { -moz-transform: translate(-50%, -50%) rotate(0deg); } - 100% { -moz-transform: translate(-50%, -50%) rotate(360deg); } -} -@-ms-keyframes LOADERSPINNER { - 0% { -ms-transform: translate(-50%, -50%) rotate(0deg); } - 100% { -ms-transform: translate(-50%, -50%) rotate(360deg); } -} -@-o-keyframes LOADERSPINNER { - 0% { -o-transform: translate(-50%, -50%) rotate(0deg); } - 100% { -o-transform: translate(-50%, -50%) rotate(360deg); } -} -@keyframes LOADERSPINNER { - 0% { transform: translate(-50%, -50%) rotate(0deg); } - 100% { transform: translate(-50%, -50%) rotate(360deg); } +@import "mixins"; + +@include keyframes(LOADERSPINNER) { + 0% { + #{$browser}transform: translate(-50%, -50%) rotate(0deg); + } + 100% { + #{$browser}transform: translate(-50%, -50%) rotate(360deg); + } } -@-webkit-keyframes LOADERLABEL { - 0% { opacity: 1.0; -webkit-transform: translate(-50%, -50%) scale(1.0); } - 5% { opacity: 0.5; -webkit-transform: translate(-50%, -50%) scale(0.5); } - 95% { opacity: 0.5; -webkit-transform: translate(-50%, -50%) scale(0.5); } - 100% { opacity: 1.0; -webkit-transform: translate(-50%, -50%) scale(1.0); } -} -@-moz-keyframes LOADERLABEL { - 0% { opacity: 1.0; -moz-transform: translate(-50%, -50%) scale(1.0); } - 5% { opacity: 0.5; -moz-transform: translate(-50%, -50%) scale(0.5); } - 95% { opacity: 0.5; -moz-transform: translate(-50%, -50%) scale(0.5); } - 100% { opacity: 1.0; -moz-transform: translate(-50%, -50%) scale(1.0); } -} -@-ms-keyframes LOADERLABEL { - 0% { opacity: 1.0; -ms-transform: translate(-50%, -50%) scale(1.0); } - 5% { opacity: 0.5; -ms-transform: translate(-50%, -50%) scale(0.5); } - 95% { opacity: 0.5; -ms-transform: translate(-50%, -50%) scale(0.5); } - 100% { opacity: 1.0; -ms-transform: translate(-50%, -50%) scale(1.0); } -} -@-o-keyframes LOADERLABEL { - 0% { opacity: 1.0; -o-transform: translate(-50%, -50%) scale(1.0); } - 5% { opacity: 0.5; -o-transform: translate(-50%, -50%) scale(0.5); } - 95% { opacity: 0.5; -o-transform: translate(-50%, -50%) scale(0.5); } - 100% { opacity: 1.0; -o-transform: translate(-50%, -50%) scale(1.0); } -} -@keyframes LOADERLABEL { - 0% { opacity: 1.0; transform: translate(-50%, -50%) scale(1.0); } - 5% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.5); } - 95% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.5); } - 100% { opacity: 1.0; transform: translate(-50%, -50%) scale(1.0); } +@include keyframes(LOADERLABEL) { + 0% { + opacity: 1.0; + #{$browser}transform: translate(-50%, -50%) scale(1.0); + } + 5% { + opacity: 0.5; + #{$browser}transform: translate(-50%, -50%) scale(0.5); + } + 95% { + opacity: 0.5; + #{$browser}transform: translate(-50%, -50%) scale(0.5); + } + 100% { + opacity: 1.0; + #{$browser}transform: translate(-50%, -50%) scale(1.0); + } } *, *:before, *:after { @@ -56,93 +34,79 @@ box-sizing: border-box; vertical-align: top; } + .loaderoverlay { + $spinnerBoxSize: 200px; + $themeColor: #6f3; + position: absolute; width: 100%; height: 100%; - background: rgba(255, 255, 255, 1.0); -} -.loaderoverlay .loaderspinner, -.loaderoverlay .loaderspinner:before, -.loaderoverlay .loaderspinner:after { - border: 20px solid rgba(0, 0, 0, 0); - border-top: 20px solid #ccc; - border-bottom: 20px solid #ccc; - border-radius: 1000px; - position: absolute; - top: 50%; - left: 50%; -} -.loaderoverlay .loaderspinner:before, -.loaderoverlay .loaderspinner:after { - content: ""; -} -.loaderoverlay .loaderspinner { - width: 200px; - height: 200px; - -webkit-animation: LOADERSPINNER 5s linear infinite; - -moz-animation: LOADERSPINNER 5s linear infinite; - -ms-animation: LOADERSPINNER 5s linear infinite; - -o-animation: LOADERSPINNER 5s linear infinite; - animation: LOADERSPINNER 5s linear infinite; -} -.loaderoverlay .loaderspinner:before { - width: 160px; - height: 160px; - -webkit-animation: LOADERSPINNER 10s linear infinite; - -moz-animation: LOADERSPINNER 10s linear infinite; - -ms-animation: LOADERSPINNER 10s linear infinite; - -o-animation: LOADERSPINNER 10s linear infinite; - animation: LOADERSPINNER 10s linear infinite; -} -.loaderoverlay .loaderspinner:after { - width: 120px; - height: 120px; - -webkit-animation: LOADERSPINNER 5s linear infinite; - -moz-animation: LOADERSPINNER 5s linear infinite; - -ms-animation: LOADERSPINNER 5s linear infinite; - -o-animation: LOADERSPINNER 5s linear infinite; - animation: LOADERSPINNER 5s linear infinite; -} -.loaderoverlay .loaderlabel { - color: #6f3; - text-transform: uppercase; - font-family: sans-serif; - font-size: 22px; - font-weight: 700; - letter-spacing: 2px; - position: absolute; - top: 50%; - left: 50%; - -webkit-animation: LOADERLABEL 5s linear infinite; - -moz-animation: LOADERLABEL 5s linear infinite; - -ms-animation: LOADERLABEL 5s linear infinite; - -o-animation: LOADERLABEL 5s linear infinite; - animation: LOADERLABEL 5s linear infinite; + background: #000; + color: $themeColor; + + %spinnerBox { + border: 20px solid rgba(0, 0, 0, 0); + border-top-color: $themeColor; + border-bottom-color: $themeColor; + border-radius: 1000px; + position: absolute; + top: 50%; + left: 50%; + } + + .loaderspinner:before, + .loaderspinner:after { + content: ""; + } + + .loaderspinner { + @include animation(LOADERSPINNER 5s linear infinite); + + width: $spinnerBoxSize; + height: $spinnerBoxSize; + + @extend %spinnerBox; + } + + .loaderspinner:before { + @include animation(LOADERSPINNER 10s linear infinite); + + width: $spinnerBoxSize * 0.8; + height: $spinnerBoxSize * 0.8; + + @extend %spinnerBox; + } + + .loaderspinner:after { + @include animation(LOADERSPINNER 5s linear infinite); + + width: $spinnerBoxSize * 0.6; + height: $spinnerBoxSize * 0.6; + + @extend %spinnerBox; + } + + .loaderlabel { + @include animation(LOADERLABEL 5s linear infinite); + + text-transform: uppercase; + font-family: sans-serif; + font-size: 22px; + font-weight: 700; + letter-spacing: 2px; + position: absolute; + top: 50%; + left: 50%; + } } + button[type="button"] { + @include transform(translateX(-50%)); + padding: 0.5rem 1rem; position: absolute; z-index: 1; bottom: 10px; left: 50%; - -webkit-transform: translateX(-50%); - -moz-transform: translateX(-50%); - -ms-transform: translateX(-50%); - -o-transform: translateX(-50%); - transform: translateX(-50%); -} - -/* Customize */ -.loaderoverlay { - background: #000; -} -.loaderoverlay .loaderspinner, -.loaderoverlay .loaderspinner:before, -.loaderoverlay .loaderspinner:after { - border-top-color: #6f3 !important; - border-bottom-color: #6f3 !important; -} -.loaderoverlay .loaderlabel { - color: #6f3; }