From 83e69dc61dd2782a53122b8be945ff80ce5ed043 Mon Sep 17 00:00:00 2001
From: Alexander Skvortsov <38059171+askvortsov1@users.noreply.github.com>
Date: Fri, 10 Apr 2020 16:51:58 -0400
Subject: [PATCH] Improved UI of Switch with loading indicator (#2039)

* Moved loading indicator outside of checkboxes to improve ui
* Made loading indicator more visible, fade label when switch is loading
---
 framework/core/less/common/Checkbox.less | 25 ++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/framework/core/less/common/Checkbox.less b/framework/core/less/common/Checkbox.less
index 42b8576d7..1b1b29613 100644
--- a/framework/core/less/common/Checkbox.less
+++ b/framework/core/less/common/Checkbox.less
@@ -3,7 +3,7 @@
   cursor: pointer;
   margin: 0;
 
-  & input[type=checkbox] {
+  & input[type="checkbox"] {
     display: none;
   }
 }
@@ -18,7 +18,7 @@
 
     .LoadingIndicator {
       display: inline-block;
-      margin-left: 10px;
+      margin-left: 20px;
     }
   }
 }
@@ -32,7 +32,7 @@
   .transition(background-color 0.2s);
 
   .on& {
-    background: #58A400;
+    background: #58a400;
   }
 
   &:before {
@@ -48,7 +48,7 @@
     }
   }
   &:before {
-    content: ' ';
+    content: " ";
     background: @body-bg;
     border-radius: 11px;
     box-shadow: 0 2px 4px @shadow-color;
@@ -58,12 +58,25 @@
   font-size: 14px;
 
   .on & {
-    color: #58A400;
+    color: #58a400;
   }
   .off & {
-    color: #D0021B;
+    color: #d0021b;
   }
   .disabled & {
     color: @muted-more-color !important;
   }
 }
+.Checkbox--switch.loading {
+  color: @muted-more-color !important;
+
+  &.on .Checkbox-display {
+    background: fade(#58a400, 0.5);
+  }
+  &.off .Checkbox-display {
+    background: fade(@control-bg, 0.5);
+  }
+  .LoadingIndicator {
+    color: darken(@muted-color, 50%);
+  }
+}