mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-14 13:27:13 +00:00
Miguel Ángel
cf7db37697
Port Remocn UI primitives into installable HyperFrames snippets. Add a first transitions.dev-inspired primitive set for agent-friendly motion patterns.
90 lines
2.4 KiB
HTML
Vendored
90 lines
2.4 KiB
HTML
Vendored
<!--
|
|
Dropdown Menu - compact menu primitive.
|
|
|
|
Animate --hf-dropdown-open from 0 to 1 on .hf-ui-dropdown.
|
|
Use --hf-dropdown-item-stagger on each item for staged reveals.
|
|
-->
|
|
|
|
<div class="hf-ui-dropdown">
|
|
<button class="hf-ui-dropdown-trigger" type="button">Actions</button>
|
|
<div class="hf-ui-dropdown-menu" role="menu">
|
|
<button class="hf-ui-dropdown-item" style="--hf-dropdown-item-stagger: 0" type="button">
|
|
Duplicate
|
|
</button>
|
|
<button class="hf-ui-dropdown-item" style="--hf-dropdown-item-stagger: 1" type="button">
|
|
Export
|
|
</button>
|
|
<button class="hf-ui-dropdown-item" style="--hf-dropdown-item-stagger: 2" type="button">
|
|
Archive
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.hf-ui-dropdown {
|
|
--hf-dropdown-open: 0;
|
|
position: relative;
|
|
display: inline-block;
|
|
font-family: Inter, system-ui, sans-serif;
|
|
color: #18181b;
|
|
}
|
|
.hf-ui-dropdown-trigger {
|
|
height: 42px;
|
|
padding: 0 18px;
|
|
border: 1px solid #e4e4e7;
|
|
border-radius: 11px;
|
|
background: #ffffff;
|
|
color: inherit;
|
|
font:
|
|
750 14px/1 Inter,
|
|
system-ui,
|
|
sans-serif;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
|
transform: translateY(calc(var(--hf-dropdown-open) * 1px));
|
|
}
|
|
.hf-ui-dropdown-menu {
|
|
position: absolute;
|
|
top: calc(100% + 10px);
|
|
right: 0;
|
|
width: 184px;
|
|
padding: 7px;
|
|
border: 1px solid #e4e4e7;
|
|
border-radius: 14px;
|
|
background: #ffffff;
|
|
opacity: var(--hf-dropdown-open);
|
|
transform: translateY(calc((1 - var(--hf-dropdown-open)) * -8px))
|
|
scale(calc(0.96 + var(--hf-dropdown-open) * 0.04));
|
|
transform-origin: top right;
|
|
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
|
|
pointer-events: none;
|
|
will-change: transform, opacity;
|
|
}
|
|
.hf-ui-dropdown-item {
|
|
display: block;
|
|
width: 100%;
|
|
height: 34px;
|
|
padding: 0 10px;
|
|
border: 0;
|
|
border-radius: 9px;
|
|
background: transparent;
|
|
color: #27272a;
|
|
font:
|
|
650 14px/1 Inter,
|
|
system-ui,
|
|
sans-serif;
|
|
text-align: left;
|
|
opacity: var(--hf-dropdown-open);
|
|
transform: translateY(
|
|
calc((1 - var(--hf-dropdown-open)) * (6px + var(--hf-dropdown-item-stagger) * 2px))
|
|
);
|
|
}
|
|
.hf-ui-dropdown-item:first-child {
|
|
background: #f4f4f5;
|
|
}
|
|
</style>
|
|
|
|
<!--
|
|
Timeline integration:
|
|
tl.to('.hf-ui-dropdown', { '--hf-dropdown-open': 1, duration: 0.26, ease: 'power3.out' }, startTime);
|
|
-->
|