From 0410b0b6caefb874a2257df5032c23e14958b33f Mon Sep 17 00:00:00 2001
From: ConquerorDopy <89474203+ConquerorDopy@users.noreply.github.com>
Date: Sat, 11 Sep 2021 12:25:40 +0200
Subject: [PATCH] client: fix loading indicator bar alignment (#396)

---
 .../sass/components/_loading-indicator.scss   | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/client/src/sass/components/_loading-indicator.scss b/client/src/sass/components/_loading-indicator.scss
index 53dc0260..5cd73c0f 100644
--- a/client/src/sass/components/_loading-indicator.scss
+++ b/client/src/sass/components/_loading-indicator.scss
@@ -20,9 +20,12 @@ $loading-indicator--tick--background--inverse: rgba(colors.$blue, 0.75);
 }
 
 .loading-indicator {
-  height: 18px;
-  position: relative;
   width: 32px;
+  height: 19px; // 3 * 3px bar height + 2 * 5px margin
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 
   &.is-inverse {
     .loading-indicator {
@@ -40,10 +43,7 @@ $loading-indicator--tick--background--inverse: rgba(colors.$blue, 0.75);
     background: $loading-indicator--bar--background;
     border-radius: 10px;
     height: 3px;
-    left: 0;
     overflow: hidden;
-    position: absolute;
-    transform: translateY(0);
     width: 100%;
 
     &:after {
@@ -57,22 +57,13 @@ $loading-indicator--tick--background--inverse: rgba(colors.$blue, 0.75);
       width: 25%;
     }
 
-    &--1 {
-      top: 0;
-    }
-
     &--2 {
-      top: 50%;
-      transform: translateY(-50%);
-
       &:after {
         animation-delay: 0.5s;
       }
     }
 
     &--3 {
-      bottom: 0;
-
       &:after {
         animation-delay: 1s;
       }