Created by: Psixodelik
Fixes #31639 (closed)
Added state option for utilities. This will generate custom pseudo-classes when generating utilities.
Example
SCSS
$utilities: (
"shadow": (
property: box-shadow,
state: hover focus,
class: shadow,
values: (
null: $box-shadow,
sm: $box-shadow-sm,
lg: $box-shadow-lg,
none: none,
)
)
);
CSS output
.shadow-hover:hover {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.shadow-focus:focus {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.shadow-sm-hover:hover {
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
.shadow-sm-focus:focus {
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
.shadow-lg-hover:hover {
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}
.shadow-lg-focus:focus {
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}
.shadow-none-hover:hover {
box-shadow: none !important;
}
.shadow-none-focus:focus {
box-shadow: none !important;
}