Fix project steps layout

This commit is contained in:
Timothée Goguely 2024-11-21 19:11:16 +01:00
parent 129b60f0b8
commit fc8bda1667

View file

@ -45,11 +45,12 @@ const { stepsLabels, setStatus } = useProjectStore();
<style scoped> <style scoped>
.project-item { .project-item {
background: var(--color-background); background: var(--color-background);
row-gap: 2.5rem;
} }
.project-item hgroup { .project-item hgroup {
flex: 1 1 0%; flex: 1 1 0%;
min-width: 15rem; min-width: 20rem;
} }
.project-item h3 { .project-item h3 {
font-family: var(--font-serif); font-family: var(--font-serif);
@ -74,12 +75,14 @@ const { stepsLabels, setStatus } = useProjectStore();
.project-steps { .project-steps {
--color: var(--color-primary-100); --color: var(--color-primary-100);
--gap: var(--space-16); --gap: var(--space-16);
flex: 0 1 0%; flex: 1 1 0%;
display: flex; display: flex;
gap: var(--gap); gap: var(--gap);
margin-top: -2.75rem; margin-top: -2.75rem;
position: relative; position: relative;
min-width: max(55%, 45rem); min-width: max(55%, 45rem);
width: 100%;
padding: 2rem 0;
} }
.project-step { .project-step {
@ -184,6 +187,7 @@ const { stepsLabels, setStatus } = useProjectStore();
--background: transparent; --background: transparent;
color: transparent; color: transparent;
} }
.project-step[data-status="done"] .pill::after { .project-step[data-status="done"] .pill::after {
mask-image: var(--icon-check-3); mask-image: var(--icon-check-3);
} }