AzuTear
70 lines
1.5 KiB
Vue
70 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { X } from '@lucide/vue'
|
|
import type { OperationResultDto } from '../../api/contracts'
|
|
import OperationResultCard from './OperationResultCard.vue'
|
|
|
|
defineProps<{
|
|
result: OperationResultDto
|
|
title: string
|
|
}>()
|
|
|
|
defineEmits<{
|
|
close: []
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<aside class="operation-tray" aria-label="Letztes Operationsergebnis">
|
|
<button
|
|
type="button"
|
|
class="operation-tray__close"
|
|
aria-label="Operationsergebnis schließen"
|
|
@click="$emit('close')"
|
|
>
|
|
<X :size="15" aria-hidden="true" />
|
|
</button>
|
|
<OperationResultCard :result="result" :title="title" />
|
|
</aside>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.operation-tray {
|
|
position: fixed;
|
|
z-index: 120;
|
|
right: 18px;
|
|
bottom: 18px;
|
|
width: min(430px, calc(100vw - 28px));
|
|
filter: drop-shadow(0 18px 36px color-mix(in srgb, var(--space-0) 68%, transparent));
|
|
}
|
|
|
|
.operation-tray__close {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 8px;
|
|
right: 8px;
|
|
display: grid;
|
|
width: 28px;
|
|
height: 28px;
|
|
place-items: center;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
background: color-mix(in srgb, var(--space-2) 82%, transparent);
|
|
color: var(--tx-2);
|
|
}
|
|
|
|
.operation-tray__close:hover,
|
|
.operation-tray__close:focus-visible {
|
|
border-color: var(--line-2);
|
|
color: var(--tx);
|
|
outline: 2px solid color-mix(in srgb, var(--a-blue) 45%, transparent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.operation-tray {
|
|
right: 14px;
|
|
bottom: 14px;
|
|
}
|
|
}
|
|
</style>
|