mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-09-27 15:37:57 +00:00
28 lines
1019 B
SCSS
28 lines
1019 B
SCSS
// The icon motion contract. Imported before the per-icon stylesheets.
|
|
|
|
$bds-icon-duration: 150ms;
|
|
$bds-icon-easing: cubic-bezier(0.98, 0.12, 0.12, 0.98);
|
|
|
|
// Icons with built-in motion will advance based on the --bds-icon-engaged variable.
|
|
// The rule that sets it must select the icon itself, not just the container.
|
|
|
|
// Direct child only, so it reaches the icons you own and stops there.
|
|
// Include it on whatever element the icon actually sits in, which is not always
|
|
// the element carrying the state:
|
|
//
|
|
// .card:hover { @include bds-icon-engaged; } // direct child icon
|
|
// .btn:hover .btn__icon { @include bds-icon-engaged; } // wrapped icon
|
|
|
|
@mixin bds-icon-engaged($value: 1) {
|
|
> .bds-icon {
|
|
--bds-icon-engaged: #{$value};
|
|
}
|
|
}
|
|
|
|
// Block inherited engagement from ancestors. Without this, a container that
|
|
// incorrectly sets the property directly instead of using the mixin would engage
|
|
// every icon beneath it, including the arrow in any descendant button.
|
|
.bds-icon {
|
|
--bds-icon-engaged: 0;
|
|
}
|