[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:
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user