From 5b4ba6c6f200edf1ffc577d8e9b1f1cc5557382d Mon Sep 17 00:00:00 2001
From: goodmice <av.sirotkin@autodrilling.ru>
Date: Wed, 28 Dec 2022 16:55:19 +0500
Subject: [PATCH] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=8B=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=20=D0=B7=D0=B0?=
 =?UTF-8?q?=D0=B3=D1=80=D1=83=D0=B7=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/{loader.css => loader.less}    | 47 ++++++++++---------
 src/styles/pages/App.less                     |  2 +-
 2 files changed, 27 insertions(+), 22 deletions(-)
 rename src/styles/components/{loader.css => loader.less} (63%)

diff --git a/src/styles/components/loader.css b/src/styles/components/loader.less
similarity index 63%
rename from src/styles/components/loader.css
rename to src/styles/components/loader.less
index a707e60..652c784 100644
--- a/src/styles/components/loader.css
+++ b/src/styles/components/loader.less
@@ -1,20 +1,25 @@
 /* original from https://loading.io/css/ */
 
+@loader-bg: rgba(255, 255, 255, 0.1);
+@loader-color: rgb(226, 29, 29);
+
 .lds-ripple {
     display: inline-block;
     position: absolute;
     width: 80px;
     height: 80px;
-}
-.lds-ripple div {
-    position: absolute;
-    border: 4px solid rgb(226, 29, 29);
-    opacity: 1;
-    border-radius: 50%;
-    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-}
-.lds-ripple div:nth-child(2) {
-    animation-delay: -0.5s;
+
+    & div {
+        position: absolute;
+        border: 4px solid @loader-color;
+        opacity: 1;
+        border-radius: 50%;
+        animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+    }
+
+    & div:nth-child(2) {
+        animation-delay: -0.5s;
+    }
 }
 @keyframes lds-ripple {
     0% {
@@ -33,12 +38,12 @@
     }
 }
 
-.loader-container{
+.loader-container {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
 }
 
-.loader-content{
+.loader-content {
     width: 100%;
     height: 100%;
     display: flex;
@@ -46,14 +51,14 @@
     grid-column-start: 1;
     grid-column-end: span 3;
     grid-row-start: 1;
+
+    &.loader-content-fill {
+        height: 100%;
+        width: 100%;
+    }
 }
 
-.loader-content.loader-content-fill {
-    height: 100%;
-    width: 100%;
-}
-
-.loader-overlay{
+.loader-overlay {
     grid-column-start: 1;
     grid-column-end: span 3;
     grid-row-start: 1;
@@ -66,13 +71,13 @@
     border-radius: 40px;
 }
 
-.loader-fade{
+.loader-fade {
     grid-column-start: 1;
     grid-column-end: span 3;
     grid-row-start: 1;
-    background-color: rgba(255, 255, 255, 0.4);
+    background-color: @loader-bg;
     align-self: stretch;
     justify-self: stretch;
     z-index: 1;
-    box-shadow: 0px 0px 6px 5px rgba(255, 254, 254, 0.4);
+    box-shadow: 0px 0px 6px 5px @loader-bg;
 }
diff --git a/src/styles/pages/App.less b/src/styles/pages/App.less
index 28cfdd4..d48a67e 100644
--- a/src/styles/pages/App.less
+++ b/src/styles/pages/App.less
@@ -1,4 +1,4 @@
-@import '../components/loader.css';
+@import '../components/loader.less';
 
 #root, .app{
     min-height:100%;