From 8b3601248deb7f45d5bb5cb2d35d9a7ebaac1ab1 Mon Sep 17 00:00:00 2001
From: guillaume <guillaume.cassou@orange.fr>
Date: Wed, 24 Apr 2019 12:28:11 +0200
Subject: Loading authentication page

---
 client/components/main/layouts.styl | 104 +++++++++++++++++++++++++++++++++++-
 1 file changed, 102 insertions(+), 2 deletions(-)

(limited to 'client/components/main/layouts.styl')

diff --git a/client/components/main/layouts.styl b/client/components/main/layouts.styl
index edbf759b..46ee720c 100644
--- a/client/components/main/layouts.styl
+++ b/client/components/main/layouts.styl
@@ -61,7 +61,7 @@ body
       display: block
       float: right
       font-size: 24px
-  
+
   .modal-content-wide
     width: 800px
     min-height: 0px
@@ -290,7 +290,7 @@ kbd
 // Implement a thiner close icon as suggested in
 // https://github.com/FortAwesome/Font-Awesome/issues/1540#issuecomment-68689950
 .fa.fa-times-thin:before
-  content: '\00d7';
+  content: '\00d7'
 
 .fa.fa-globe.colorful, .fa.fa-bell.colorful
   color: #4caf50
@@ -399,3 +399,103 @@ a
   height: 37px
   margin: 8px 10px 0 0
   width: 50px
+
+.select-authentication
+  width: 100%
+
+.auth-layout
+  display: flex
+  flex-direction: column
+  align-items: center
+  justify-content: center
+  height: 100%
+
+  .auth-dialog
+    margin: 0 !important
+
+.loadingText
+  text-align: center
+
+.lds-roller
+  display: block
+  margin: auto
+  position: relative
+  width: 64px
+  height: 64px
+
+  div
+    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite
+    transform-origin: 32px 32px
+
+  div:after
+    content: " "
+    display: block
+    position: absolute
+    width: 6px
+    height: 6px
+    border-radius: 50%
+    background: #dedede
+    margin: -3px 0 0 -3px
+
+  div:nth-child(1)
+    animation-delay: -0.036s
+
+  div:nth-child(1):after
+    top: 50px
+    left: 50px
+
+  div:nth-child(2)
+    animation-delay: -0.072s
+
+  div:nth-child(2):after
+    top: 54px
+    left: 45px
+
+  div:nth-child(3)
+    animation-delay: -0.108s
+
+  div:nth-child(3):after
+    top: 57px
+    left: 39px
+
+  div:nth-child(4)
+    animation-delay: -0.144s
+
+  div:nth-child(4):after
+    top: 58px
+    left: 32px
+
+  div:nth-child(5)
+    animation-delay: -0.18s
+
+  div:nth-child(5):after
+    top: 57px
+    left: 25px
+
+  div:nth-child(6)
+    animation-delay: -0.216s
+
+  div:nth-child(6):after
+    top: 54px
+    left: 19px
+
+  div:nth-child(7)
+    animation-delay: -0.252s
+
+  div:nth-child(7):after
+    top: 50px
+    left: 14px
+
+  div:nth-child(8)
+    animation-delay: -0.288s
+
+  div:nth-child(8):after
+    top: 45px
+    left: 10px
+
+@keyframes lds-roller
+  0%
+    transform: rotate(0deg)
+
+  100%
+    transform: rotate(360deg)
-- 
cgit v1.2.3-1-g7c22