73 lines
1.4 KiB
Svelte
73 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import Icon from "../utils/Icon.svelte";
|
|
|
|
export let open: boolean = false;
|
|
let hovered = false;
|
|
|
|
function onMouseEnter() {
|
|
hovered = true;
|
|
}
|
|
|
|
function onMouseLeave() {
|
|
hovered = false;
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "../../scss/helpers";
|
|
|
|
ul {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
@include large-ge() {
|
|
ul:not(.open) {
|
|
display: none;
|
|
}
|
|
|
|
ul {
|
|
position: absolute;
|
|
top: calc(100% - 3px);
|
|
right: 0;
|
|
z-index: 1;
|
|
|
|
@include surface(3);
|
|
padding: 16px;
|
|
border-top: 3px solid #ffffff1c;
|
|
border-radius: 0 0 3px 3px;
|
|
}
|
|
}
|
|
|
|
.icon-container {
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 50%;
|
|
top: calc(100% - 8px);
|
|
|
|
transition: transform 50ms linear;
|
|
transform: translateX(-50%);
|
|
|
|
&.open {
|
|
transform: translateX(-50%) translateY(8px) rotateX(180deg);
|
|
}
|
|
}
|
|
|
|
@include medium-le {
|
|
.icon-container {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="icon-container" class:open={open || hovered}>
|
|
<Icon name="chevron-down"/>
|
|
</div>
|
|
<ul class:open={open || hovered} on:mouseenter={onMouseEnter} on:mouseleave={onMouseLeave}>
|
|
<slot/>
|
|
</ul>
|