Ehrenamt/ff-admin
2
0
Fork 0
Code Issues 13 Pull requests Projects Releases 30 Packages Wiki Activity Actions

main layout

Browse source
This commit is contained in:
Julian Krauser 2024-08-23 14:42:32 +02:00
parent 62990170de
commit f1e6e8b8d3
38 changed files with 1353 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/components/FailureXMark.vue Normal file
View file

@ -0,0 +1,61 @@
<template>
<svg class="checkmark min-w-fit min-h-fit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
<path class="checkmark__check" fill="none" d="M 11 11 l 30 30 M 11 41 l 30 -30" />
<!-- <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" /> -->
</svg>
</template>
<style scoped>
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: #ff0000;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark {
width: 20px;
height: 20px;
border-radius: 50%;
display: block;
stroke-width: 5;
stroke: #fff;
stroke-miterlimit: 10;
margin: auto 0;
box-shadow: inset 0px 0px 0px #ff0000;
animation:
fill 0.4s ease-in-out 0.4s forwards,
scale 0.3s ease-in-out 0.9s both;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
@keyframes scale {
0%,
100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
@keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #ff0000;
}
}
</style>