From b50bd54227a143517ce9a97441cbe0db908aad12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 30 May 2023 16:01:29 +0300
Subject: [PATCH] RED-5875: Material upgrade - slide toggle

---
 src/assets/styles/common-toggle.scss | 80 +++++++++++++++++-----------
 1 file changed, 48 insertions(+), 32 deletions(-)

diff --git a/src/assets/styles/common-toggle.scss b/src/assets/styles/common-toggle.scss
index fafb414..7743202 100644
--- a/src/assets/styles/common-toggle.scss
+++ b/src/assets/styles/common-toggle.scss
@@ -1,41 +1,57 @@
-.mat-slide-toggle {
-    .mat-slide-toggle-bar {
-        height: 16px !important;
-        width: 30px !important;
-        border-radius: 16px !important;
-        background-color: var(--iqser-toggle-bg);
+.mat-mdc-slide-toggle {
+    --mdc-switch-handle-elevation: none;
+
+    --mdc-switch-selected-track-color: var(--iqser-primary);
+    --mdc-switch-selected-hover-track-color: var(--iqser-primary);
+    --mdc-switch-selected-pressed-track-color: var(--iqser-primary);
+    --mdc-switch-selected-focus-track-color: var(--iqser-primary);
+    --mdc-switch-disabled-selected-track-color: var(--iqser-primary);
+
+    --mdc-switch-unselected-track-color: var(--iqser-toggle-bg);
+    --mdc-switch-unselected-hover-track-color: var(--iqser-toggle-bg);
+    --mdc-switch-unselected-pressed-track-color: var(--iqser-toggle-bg);
+    --mdc-switch-unselected-focus-track-color: var(--iqser-toggle-bg);
+    --mdc-switch-disabled-unselected-track-color: var(--iqser-toggle-bg);
+
+    --mdc-switch-selected-handle-color: var(--iqser-background);
+    --mdc-switch-selected-pressed-handle-color: var(--iqser-background);
+    --mdc-switch-selected-hover-handle-color: var(--iqser-background);
+    --mdc-switch-selected-focus-handle-color: var(--iqser-background);
+    --mdc-switch-disabled-selected-handle-color: var(--iqser-background);
+
+    --mdc-switch-unselected-handle-color: var(--iqser-alt-background);
+    --mdc-switch-unselected-pressed-handle-color: var(--iqser-alt-background);
+    --mdc-switch-unselected-hover-handle-color: var(--iqser-alt-background);
+    --mdc-switch-unselected-focus-handle-color: var(--iqser-alt-background);
+    --mdc-switch-disabled-unselected-handle-color: var(--iqser-alt-background);
+
+    --mdc-switch-disabled-track-opacity: 0.38;
+
+    --mdc-switch-track-width: 30px;
+    --mdc-switch-track-height: 16px;
+    --mdc-switch-track-shape: 8px;
+    --mdc-switch-handle-width: 12px;
+    --mdc-switch-handle-height: 12px;
+    --mdc-switch-handle-shape: 6px;
+
+    .mdc-form-field > label {
+        margin: 0;
+        padding-left: 0;
     }
 
-    .mat-slide-toggle-thumb-container {
-        top: 2px !important;
-        left: 2px !important;
-        height: 12px !important;
-        width: 12px !important;
+    .mdc-switch__handle {
+        right: 8px;
+        left: unset;
     }
 
-    .mat-slide-toggle-thumb {
-        height: 12px !important;
-        width: 12px !important;
-        box-shadow: none;
-        background-color: var(--iqser-alt-background);
+    .mdc-switch--unselected {
+        .mdc-switch__handle {
+            right: 4px;
+        }
     }
 
-    .mat-ripple {
+    .mdc-switch__icons,
+    .mdc-switch__ripple {
         display: none;
     }
-
-    &.mat-primary.mat-checked {
-        .mat-slide-toggle-bar {
-            background-color: var(--iqser-primary);
-            border: 1px solid var(--iqser-background);
-        }
-
-        .mat-slide-toggle-thumb {
-            background-color: var(--iqser-background);
-        }
-
-        .mat-slide-toggle-thumb-container {
-            transform: translate3d(14px, 0, 0);
-        }
-    }
 }