From fe5a3a89fbdc6865a65e96a7d20e037f23a9c1d2 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Thu, 28 Jul 2022 19:46:52 +0000
Subject: [PATCH] [IMP] web: `opacity-x` utility classes

This commits adds the '$o-opacity-disabled' value in the opacity
utility class generation list,  allowing to use the 'opacity-disabled'
class to style on the fly elements that don't support disabled states by
default (eg. generic divs)

The commit introduces also a new '.opacity-trigger-hover' class.
It can be applied on parent elements in order to trigger their children
opacity states. Eg:

   <div class="opacity-trigger-hover">
       <span>Always visible</span>

       <span class="opacity-0 opacity-100-hover">
           Visible when parent is :hover
       </span>
   </div>

Part of the overall v16 SCSS optimization/restyle, task-2704984.

task-2918463

Part-of: odoo/odoo#97051
---
 .../src/libs/bootstrap/utilities_custom.scss  | 37 ++++++++++++++-----
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/addons/web/static/src/libs/bootstrap/utilities_custom.scss b/addons/web/static/src/libs/bootstrap/utilities_custom.scss
index aae1f51c633..22b58921ea0 100644
--- a/addons/web/static/src/libs/bootstrap/utilities_custom.scss
+++ b/addons/web/static/src/libs/bootstrap/utilities_custom.scss
@@ -14,20 +14,26 @@ $rounded-sizes: map-merge(
     )
 );
 
+$utilities-opacity: () !default;
+$utilities-opacity: map-merge(
+    $utilities-opacity,
+    (
+        0: 0,
+        25: .25,
+        50: .5,
+        75: .75,
+        100: 1,
+        disabled: $o-opacity-disabled,
+    )
+);
 $utilities: () !default;
 $utilities: map-merge(
     $utilities,
     (
-        "opacity": (
-            property: opacity,
-            class: opacity,
-            state: hover,
-            values: (
-                0: 0,
-                25: .25,
-                50: .5,
-                75: .75,
-                100: 1,
+        "opacity": map-merge(
+            map-get($utilities, "opacity"),
+            (
+                values: $utilities-opacity,
             ),
         ),
         "rounded-top": (
@@ -90,3 +96,14 @@ $utilities: map-merge(
         ),
     )
 );
+
+// Define opacity:hover classes while defining the triggerer behavior.
+// Use'.opacity-trigger-hover' class to allow hovered parents to
+// trigger their children ':hover' opacity state.
+@each $-opacity-key, $-opacity-level in $utilities-opacity {
+    .opacity-#{$-opacity-key}-hover {
+        &:hover, .opacity-trigger-hover:hover & {
+            opacity: $-opacity-level!important;
+        }
+    }
+}