83 lines
2.4 KiB
Svelte
83 lines
2.4 KiB
Svelte
<script>
|
|
export let step, done, active
|
|
</script>
|
|
|
|
<div class="container" class:active class:done>
|
|
<div class="circle" class:active class:done>
|
|
{#if done}
|
|
<svg
|
|
width="12"
|
|
height="10"
|
|
viewBox="0 0 12 10"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M10.1212 0.319527C10.327 0.115582 10.6047 0.000803464 10.8944
|
|
4.20219e-06C11.1841 -0.00079506 11.4624 0.11245 11.6693
|
|
0.315256C11.8762 0.518062 11.9949 0.794134 11.9998 1.08379C12.0048
|
|
1.37344 11.8955 1.65339 11.6957 1.86313L5.82705 9.19893C5.72619
|
|
9.30757 5.60445 9.39475 5.46913 9.45527C5.3338 9.51578 5.18766 9.54839
|
|
5.03944 9.55113C4.89123 9.55388 4.74398 9.52671 4.60651
|
|
9.47124C4.46903 9.41578 4.34416 9.33316 4.23934 9.22833L0.350925
|
|
5.33845C0.242598 5.23751 0.155712 5.11578 0.0954499 4.98054C0.0351876
|
|
4.84529 0.00278364 4.69929 0.00017159 4.55124C-0.00244046 4.4032
|
|
0.024793 4.25615 0.0802466 4.11886C0.1357 3.98157 0.218238 3.85685
|
|
0.322937 3.75215C0.427636 3.64746 0.55235 3.56492 0.68964
|
|
3.50946C0.82693 3.45401 0.973983 3.42678 1.12203 3.42939C1.27007 3.432
|
|
1.41607 3.46441 1.55132 3.52467C1.68657 3.58493 1.80829 3.67182
|
|
1.90923 3.78014L4.98762 6.85706L10.0933 0.35187C10.1024 0.340482
|
|
10.1122 0.329679 10.1227 0.319527H10.1212Z"
|
|
fill="var(--background)"
|
|
/>
|
|
</svg>
|
|
{:else}{step}{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.container::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -30px;
|
|
width: 1px;
|
|
height: 30px;
|
|
background: var(--grey-5);
|
|
}
|
|
.container:first-child::before {
|
|
display: none;
|
|
}
|
|
.container {
|
|
position: relative;
|
|
height: 45px;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
.container.active {
|
|
box-shadow: inset 3px 0 0 0 var(--blue);
|
|
}
|
|
.circle.active {
|
|
background: var(--blue);
|
|
color: white;
|
|
border: none;
|
|
}
|
|
.circle.done {
|
|
background: var(--grey-5);
|
|
color: white;
|
|
border: none;
|
|
}
|
|
.circle {
|
|
color: var(--grey-5);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--grey-5);
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|