From 40546d777ba83efebd537a17f67528b4cd1d6183 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Wed, 19 May 2021 17:19:19 +0000
Subject: [PATCH] [IMP] web: checkbox design

---
 .../static/src/core/checkbox/checkbox.scss    | 29 +++++++++++++++++++
 .../src/legacy/scss/bootstrap_overridden.scss | 12 ++++++++
 .../src/legacy/scss/primary_variables.scss    |  5 ++++
 addons/web/static/src/legacy/scss/ui.scss     | 18 ------------
 4 files changed, 46 insertions(+), 18 deletions(-)
 create mode 100644 addons/web/static/src/core/checkbox/checkbox.scss

diff --git a/addons/web/static/src/core/checkbox/checkbox.scss b/addons/web/static/src/core/checkbox/checkbox.scss
new file mode 100644
index 00000000000..49e574a57b8
--- /dev/null
+++ b/addons/web/static/src/core/checkbox/checkbox.scss
@@ -0,0 +1,29 @@
+// = Checkbox
+// ============================================================================
+
+.custom-control.custom-checkbox .custom-control-input {
+  // Force default bts default border color
+  &:not(:checked):not(:indeterminate):not(:disabled) ~ .custom-control-label:before {
+    border-color: $custom-control-indicator-border-color;
+  }
+
+  &:disabled {
+    ~ .custom-control-label {
+      cursor: not-allowed;
+
+      &:before {
+        border-color: $custom-control-indicator-checked-disabled-bg;
+      }
+    }
+
+    &:checked ~ .custom-control-label:after {
+      // Use odoo custom muted icon
+      background-image: $o-custom-checkbox-indicator-icon-checked-disabled;
+    }
+  }
+
+  @media print {
+    -webkit-print-color-adjust: exact !important;
+    color-adjust: exact !important;
+  }
+}
diff --git a/addons/web/static/src/legacy/scss/bootstrap_overridden.scss b/addons/web/static/src/legacy/scss/bootstrap_overridden.scss
index 07c04c57757..481bee03055 100644
--- a/addons/web/static/src/legacy/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/legacy/scss/bootstrap_overridden.scss
@@ -115,6 +115,18 @@ $dropdown-link-disabled-color: $o-main-color-muted !default;
 $dropdown-item-padding-y: $o-dropdown-vpadding !default;
 $dropdown-item-padding-x: $o-dropdown-hpadding !default;
 
+
+// Forms
+$custom-control-indicator-border-color: $gray-500 !default;
+$custom-control-label-disabled-color: $o-main-color-muted !default;
+
+$custom-control-indicator-checked-color: $white !default;
+$custom-control-indicator-checked-bg: $primary !default;
+$custom-control-indicator-checked-border-color: $primary !default;
+
+$custom-control-indicator-disabled-bg: $gray-200 !default;
+$custom-control-indicator-checked-disabled-bg: $gray-200 !default;
+
 // Z-index master list
 
 // Change the z-index of the modal-backdrop elements to be equal to the
diff --git a/addons/web/static/src/legacy/scss/primary_variables.scss b/addons/web/static/src/legacy/scss/primary_variables.scss
index d61769cfbae..61f1efe154f 100644
--- a/addons/web/static/src/legacy/scss/primary_variables.scss
+++ b/addons/web/static/src/legacy/scss/primary_variables.scss
@@ -65,6 +65,11 @@ $o-tooltip-text-color: #777777 !default;
 $o-tooltip-title-text-color: black !default;
 $o-tooltip-title-background-color: #F7F7F7 !default;
 
+// Forms
+
+// Bootstrap clone, we just change the icon color
+$o-custom-checkbox-indicator-icon-checked-disabled: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$o-main-color-muted}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>") !default;
+
 // Layout
 //
 // Extension of BS4. This is not redefining the BS4 variable directly as we only
diff --git a/addons/web/static/src/legacy/scss/ui.scss b/addons/web/static/src/legacy/scss/ui.scss
index fac691a0028..6f875ed5cbd 100644
--- a/addons/web/static/src/legacy/scss/ui.scss
+++ b/addons/web/static/src/legacy/scss/ui.scss
@@ -56,24 +56,6 @@ $bs-datetimepicker-secondary-border-color-rgba: $border-color;
     }
 }
 
-// Overwrite bts4 custom-checkbox design (un-checked state only)
-.custom-control.custom-checkbox {
-    .custom-control-input:not(:checked):not(:indeterminate) {
-        ~ .custom-control-label:before {
-            background: none;
-            outline: 1px solid $o-main-text-color;
-        }
-        &:disabled ~ .custom-control-label:before {
-            background: $o-brand-lightsecondary;
-            opacity: 0.25;
-        }
-    }
-    @media print {
-        -webkit-print-color-adjust: exact !important;
-        color-adjust: exact !important;
-    }
-}
-
 .o_catch_attention {
     position: relative;
     z-index: 1;