1 files changed, 32 insertions, 32 deletions
diff --git a/addons/web/static/src/scss/webclient.scss b/addons/web/static/src/scss/webclient.scss
index 7b7162d986a..3c8df0c912b 100644
--- a/addons/web/static/src/scss/webclient.scss
+++ b/addons/web/static/src/scss/webclient.scss
@@ -73,43 +73,43 @@
 }
 
 // Boolean Toggle widget
-div.o_boolean_toggle {
-    position: relative;
-    display: inline-block;
-    width: 32px !important;
-    height: 18px;
+div.o_boolean_toggle.custom-control.custom-checkbox {
+    $line-height-computed: $line-height-base * $font-size-base;
+    $slider-width: $line-height-computed * 1.5;
+    $circle-width: $line-height-computed * 0.6;
 
-    > input {
-            display: none;
-        }
+    display: inline-block;
+    padding-left: $slider-width + 0.25rem;
 
-    .slider {
-        position: absolute;
-        cursor: pointer;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: #a0a0a0;
-        border-radius: 24px;
-
-        &:before {
-            position: absolute;
+    > label.custom-control-label {
+        &::before, &::after {
             content: "";
-            height: 12px;
-            width: 12px;
-            left: 3px;
-            bottom: 3px;
-            background-color: white;
-            border-radius: 50%;
+            top: 0;
+            left: -($slider-width + 0.25rem);
+        }
+        &::before {
+            width: $slider-width;
+            height: 100%;
+            background-color: #a0a0a0 !important;
+            border-radius: 100px;
+            outline: none !important;
+        }
+        &::after {
+            transform: translate($line-height-computed * 0.2, $line-height-computed * 0.2);
+            width: ceil($circle-width / 1rem * $o-root-font-size);
+            height: ceil($circle-width / 1rem * $o-root-font-size);
+            border-radius: 100px;
+            background-color: $white;
+            cursor: pointer;
         }
     }
-
-    > input:checked + .slider {
-        background-color: $o-brand-primary;
-
-        &:before {
-            transform: translate(14px, 0px);
+    > input.custom-control-input:checked + label.custom-control-label {
+        &::before {
+            background-color: $o-brand-primary !important;
+        }
+        &::after {
+            transform: translate($slider-width - $circle-width - $line-height-computed * 0.2, $line-height-computed * 0.2);
+            background-image: none;
         }
     }
 }