studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Start to fix missing project-steps styles

Browse source
This commit is contained in:
Timothée Goguely 2024-11-06 16:33:03 +01:00
parent 75d3abfec8
commit c0a29c0d18
3 changed files with 32 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/Projects.vue
View file

@ -65,4 +65,11 @@ function changeTab(newValue) {
}
</script>
<style scoped></style>
<style scoped>
section {
--flow-space: var(--space-16);
}
section > * {
display: block;
}
</style>

17
src/components/project/Project.vue
View file

@ -13,10 +13,18 @@
<img :src="project.logo" alt="Logo" class="project-logo | rounded-sm" />
<ol class="project-steps" data-steps="1">
<li class="project-step" data-status="in-progress">
<span class="pill" data-icon="search">{{
<span class="pill" data-icon="clientBrief">{{
stepsLabels[project.currentStep]
}}</span>
</li>
<!--
<li class="project-step" data-status="in-progress">
<span class="pill" data-icon="extendedBrief">Brief enrichi</span>
</li>
<li class="project-step" data-status="uncompleted">
<span class="pill" data-icon="proposal">Proposition commerciales</span>
</li>
-->
</ol>
</article>
</router-link>
@ -104,7 +112,8 @@ const { stepsLabels } = useProjectStore();
}
.project-step[data-status="in-progress"]:only-child::before,
.project-step[data-status="in-progress"]:only-child::after {
.project-step[data-status="in-progress"]:only-child::after,
.project-step[data-status="done"] + [data-status="in-progress"]::before {
content: "";
display: inline-block;
height: 1.25rem;
@ -112,7 +121,8 @@ const { stepsLabels } = useProjectStore();
right: 3.75rem;
bottom: -2rem;
}
.project-step[data-status="in-progress"]:only-child::before {
.project-step[data-status="in-progress"]:only-child::before,
.project-step[data-status="done"] + [data-status="in-progress"]::before {
height: 1rem;
background-repeat: repeat;
background-position: left center;
@ -158,6 +168,7 @@ const { stepsLabels } = useProjectStore();
mask-image: var(--icon-point-active);
}
.project-step[data-status="uncompleted"] .pill::after {
--icon: var(--icon-point);
--icon-color: var(--color-grey-300);
}
</style>