From abbe4b0c50909b787ca386defe2a2281d146cd72 Mon Sep 17 00:00:00 2001 From: Peter Schmidt Date: Fri, 11 Aug 2017 12:15:16 +1000 Subject: [PATCH] [Backport 1.9] COMPASS 1417 Remove loading animation scrollbars (#1195) * Temporarily disable hiding the loading animation So it's easier to inspect its state. * Remove default 8px margin * Use standard top/left pattern from .sq CSS class * Go back to width: 100% removing margin/padding No flexbox needed in this context. * Remove duplicate text-align * Abstract towards a reusable loading animation component CSS animation appears to be special enough I don't know how to handle it in this context, perhaps it needs another wrapper? * Revert "Temporarily disable hiding the loading animation" --- src/app/loading/loading.html | 8 +++++--- src/app/loading/style.css | 21 +++++++++++---------- 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/src/app/loading/loading.html b/src/app/loading/loading.html index fb2b7e3a75e..47dc3f3473d 100644 --- a/src/app/loading/loading.html +++ b/src/app/loading/loading.html @@ -4,8 +4,10 @@ -
-
- loading… +
+
+
+ loading… +
diff --git a/src/app/loading/style.css b/src/app/loading/style.css index e62b505d660..dfb5269da0f 100644 --- a/src/app/loading/style.css +++ b/src/app/loading/style.css @@ -9,22 +9,28 @@ } html, body { - height: 100%; - width: 100%; font-family: "Akzidenz", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; font-weight: bold; -webkit-font-smoothing: antialiased; + margin: 0; position: relative; } +.loading-animation { + align-items: center; + display: flex; + height: 100vh; + justify-content: center; + width: 100vw; +} + .sq { background: #43B1E5; position: absolute; - top: 50%; - left: 50%; height: 12px; width: 12px; + /* So animation does not overlap with loading text */ margin-top: -36px; } @@ -58,14 +64,9 @@ html, body { } span { - position: absolute; - top: 50%; - width: 100%; - padding-left: 6px; text-align: center; font-size: 11px; line-height: 1; text-transform: uppercase; - text-align: center; - -moz-osx-font-smoothing: grayscale; + width: 100%; }