39 lines
808 B
Svelte
39 lines
808 B
Svelte
<script lang="ts">
|
|
|
|
</script>
|
|
|
|
<button class="fab" on:click>
|
|
<slot />
|
|
</button>
|
|
|
|
<style>
|
|
.fab {
|
|
position: absolute;
|
|
left: var(--left, calc(100% - 2 * var(--size, 48px)));
|
|
top: var(--top, calc(100% - 2 * var(--size, 48px)));
|
|
border-radius: 9999px;
|
|
width: var(--size, 48px);
|
|
height: var(--size, 48px);
|
|
background: var(--background, white);
|
|
border: none;
|
|
z-index: 200;
|
|
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.fab > * { z-index: 202; }
|
|
|
|
.fab:active::before {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 201;
|
|
background: rgba(0,0,0, 0.1);
|
|
left: 0;
|
|
top: 0;
|
|
border-radius: 9999px;
|
|
}
|
|
</style>
|