[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
This commit is contained in:
stefanorigano (SRI)
2022-08-04 13:54:11 +02:00
committed by Pierre Paridans
parent a8e84d33c9
commit fe5a3a89fb
@@ -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;
}
}
}