michalspeckle
3c7a652e98
* feat(fe): render different CardImportFileArea variants based on context * feat(fe): remove default emptyStateVariant * refactor(fe): use container classes * feat(fe): remove click from full card upload area. Only on buttons * chore(fe): updates to empty states, clean up. * feat(fe): new empty state illustrations refactor * chore(fe): removing nested selectors and clean up * chore(fe): removed default variant * feat(fe): empty state illustration slot added and styling changes * feat(fe): new empty state illustrations and styling changes * chore(fe): copy change * chore(fe): refactor --------- Co-authored-by: andrewwallacespeckle <andrew@speckle.systems>
174 lines
5.9 KiB
Vue
174 lines
5.9 KiB
Vue
<template>
|
|
<svg
|
|
width="259"
|
|
height="231"
|
|
viewBox="0 0 259 231"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M7.49495 103.869L166.728 50.7911C170.436 49.5552 175.387 51.0542 177.786 54.1393L253.207 151.108C255.606 154.193 254.546 157.696 250.838 158.932L91.6048 212.01C87.897 213.246 82.946 211.747 80.5464 208.662L5.12605 111.693C2.72652 108.608 3.78711 105.105 7.49495 103.869Z"
|
|
stroke="currentColor"
|
|
class="stroke-outline-3 fade-in-y fade-in-y-delay"
|
|
/>
|
|
<path
|
|
d="M7.49495 79.8688L166.728 26.7911C170.436 25.5552 175.387 27.0542 177.786 30.1393L253.207 127.108C255.606 130.193 254.546 133.696 250.838 134.932L91.6048 188.01C87.897 189.246 82.946 187.747 80.5464 184.662L5.12605 87.6928C2.72652 84.6077 3.78711 81.1047 7.49495 79.8688Z"
|
|
fill="currentColor"
|
|
class="fill-foundation-page"
|
|
/>
|
|
<path
|
|
d="M7.49495 79.8688L166.728 26.7911C170.436 25.5552 175.387 27.0542 177.786 30.1393L253.207 127.108C255.606 130.193 254.546 133.696 250.838 134.932L91.6048 188.01C87.897 189.246 82.946 187.747 80.5464 184.662L5.12605 87.6928C2.72652 84.6077 3.78711 81.1047 7.49495 79.8688Z"
|
|
stroke="currentColor"
|
|
class="stroke-outline-2 fade-in-y"
|
|
/>
|
|
<path
|
|
d="M5.12605 63.6928C2.72652 60.6077 3.78711 57.1047 7.49495 55.8688L166.728 2.7911C170.436 1.55516 175.387 3.0542 177.786 6.1393L253.207 103.108C255.606 106.193 254.546 109.696 250.838 110.932L91.6048 164.01C87.897 165.246 82.946 163.747 80.5464 160.662L5.12605 63.6928Z"
|
|
fill="currentColor"
|
|
class="fill-foundation-page"
|
|
/>
|
|
<path
|
|
d="M5.12605 63.6928C2.72652 60.6077 3.78711 57.1047 7.49495 55.8688L166.728 2.7911C170.436 1.55516 175.387 3.0542 177.786 6.1393L253.207 103.108C255.606 106.193 254.546 109.696 250.838 110.932L91.6048 164.01C87.897 165.246 82.946 163.747 80.5464 160.662L5.12605 63.6928Z"
|
|
stroke="currentColor"
|
|
class="stroke-outline-5"
|
|
/>
|
|
<g clip-path="url(#clip0_2756_30947)">
|
|
<rect
|
|
width="167"
|
|
height="90"
|
|
rx="8"
|
|
transform="matrix(0.948683 -0.316228 0.613941 0.789352 22.3242 74.2852)"
|
|
fill="currentColor"
|
|
class="fill-foundation-2"
|
|
/>
|
|
<g clip-path="url(#clip1_2756_30947)">
|
|
<path
|
|
d="M101.22 114.809L140.11 109.324L122.02 86.0658L88.6736 98.6774L101.22 114.809Z"
|
|
fill="currentColor"
|
|
stroke="currentColor"
|
|
class="stroke-outline-5 fill-foundation-page"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M182.269 84.635L140.11 109.325L122.02 86.0664L172.064 71.5134L182.269 84.635Z"
|
|
fill="currentColor"
|
|
stroke="currentColor"
|
|
class="stroke-outline-5 fill-foundation-2"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M104.422 71.1033L133.433 53.254L149.158 73.4714L116.35 86.4403L104.422 71.1033Z"
|
|
fill="currentColor"
|
|
stroke="currentColor"
|
|
class="stroke-outline-5 fill-foundation-page"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M177.531 82.4527L139.875 101.358L131.213 90.221L172.233 75.6399L177.531 82.4527Z"
|
|
fill="currentColor"
|
|
stroke="currentColor"
|
|
class="stroke-outline-5 fill-foundation-page"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M93.6025 96.8154L106.966 113.998"
|
|
stroke="currentColor"
|
|
class="stroke-outline-5"
|
|
stroke-miterlimit="10"
|
|
/>
|
|
<path
|
|
d="M99.2197 94.6914L113.518 113.075"
|
|
stroke="currentColor"
|
|
class="stroke-outline-5"
|
|
stroke-miterlimit="10"
|
|
/>
|
|
<path
|
|
d="M105.677 92.249L121.049 112.013"
|
|
stroke="currentColor"
|
|
class="stroke-outline-5"
|
|
stroke-miterlimit="10"
|
|
/>
|
|
<path
|
|
d="M113.186 89.4092L129.806 110.778"
|
|
stroke="currentColor"
|
|
class="stroke-outline-5"
|
|
stroke-miterlimit="10"
|
|
/>
|
|
<path
|
|
d="M123.992 88.6017L173.992 72.6842L170.376 68.0345L117.498 80.252L123.992 88.6017Z"
|
|
fill="currentColor"
|
|
stroke="currentColor"
|
|
class="stroke-outline-5 fill-foundation-2"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M123.992 88.6018L88.9523 100.816L84.5128 95.1082L117.498 80.252L123.992 88.6018Z"
|
|
fill="currentColor"
|
|
stroke="currentColor"
|
|
class="stroke-outline-5 fill-foundation-page"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M166.935 68.8295L148.805 73.0177L133.434 53.2539L154.727 53.1339L166.935 68.8295Z"
|
|
fill="currentColor"
|
|
stroke="currentColor"
|
|
class="stroke-outline-5 fill-foundation-2"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</g>
|
|
</g>
|
|
<rect
|
|
x="0.781312"
|
|
y="0.236562"
|
|
width="166"
|
|
height="89"
|
|
rx="7.5"
|
|
transform="matrix(0.948683 -0.316228 0.613941 0.789352 22.2191 74.5821)"
|
|
stroke="currentColorr"
|
|
class="stroke-outline-5"
|
|
/>
|
|
<defs>
|
|
<clipPath id="clip0_2756_30947">
|
|
<rect
|
|
width="167"
|
|
height="90"
|
|
rx="8"
|
|
transform="matrix(0.948683 -0.316228 0.613941 0.789352 22.3242 74.2852)"
|
|
fill="currentColor"
|
|
class="fill-foundation"
|
|
/>
|
|
</clipPath>
|
|
<clipPath id="clip1_2756_30947">
|
|
<rect
|
|
width="89.5004"
|
|
height="58.6479"
|
|
fill="currentColor"
|
|
transform="matrix(0.948683 -0.316228 0.613941 0.789352 68.7334 74.8203)"
|
|
class="fill-foundation"
|
|
/>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</template>
|
|
<style scoped>
|
|
.fade-in-y {
|
|
opacity: 0;
|
|
animation: fade-in-y 1s ease-in-out forwards;
|
|
}
|
|
|
|
.fade-in-y-delay {
|
|
animation-delay: 0.25s;
|
|
}
|
|
|
|
@keyframes fade-in-y {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|