From de87492cf89dfaa37834b982a6d143d83f3fddf9 Mon Sep 17 00:00:00 2001
From: xarcode <52316115+xarcode@users.noreply.github.com>
Date: Mon, 27 Feb 2023 22:42:31 +0530
Subject: [PATCH] refactor(client): togglebutton's layout from float to flex
 (#49510)

* Refactor the togglebutton from float to flex

* Update toggle-button.css
---
 .../src/components/helpers/toggle-button.css  | 42 +------------------
 1 file changed, 1 insertion(+), 41 deletions(-)

diff --git a/client/src/components/helpers/toggle-button.css b/client/src/components/helpers/toggle-button.css
index 50cf69f9f31..512b308090f 100644
--- a/client/src/components/helpers/toggle-button.css
+++ b/client/src/components/helpers/toggle-button.css
@@ -41,6 +41,7 @@
 .btn-group .btn.toggle-active {
   border-color: var(--tertiary-color);
   padding-inline: 30px;
+  display: flex;
 }
 
 .btn-group .btn-primary,
@@ -48,44 +49,3 @@
 .btn-group .btn-primary:hover {
   border-color: var(--secondary-color);
 }
-
-.btn.toggle-active > .tick,
-.btn.toggle-not-active > .tick {
-  position: absolute;
-}
-
-.btn:first-child > .tick {
-  left: 9px;
-  top: calc(50% - 8pt);
-}
-
-.btn:last-child > .tick {
-  right: 6px;
-  top: calc(50% - 8pt);
-}
-
-.btn-group .btn + .btn {
-  margin-inline-start: -2px;
-}
-
-label.toggle-label {
-  display: flex;
-  flex-direction: column;
-}
-
-@media (max-width: 550px) {
-  .btn:first-child > .tick {
-    left: 6px;
-  }
-
-  .btn:last-child > .tick {
-    right: 5px;
-  }
-}
-
-@media (max-width: 440px) {
-  .btn:first-child > .tick {
-    left: auto;
-    right: 5px;
-  }
-}