studio-variable/designtopack
4
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

14
src/assets/css/src/3.utilities.icons.css
View file

@ -74,16 +74,22 @@
[data-icon="chevron-single-left"] { [data-icon="chevron-single-left"] {
--icon: var(--icon-chevron-single-left) --icon: var(--icon-chevron-single-left)
} }
[data-icon="votre-brief"] { [data-icon="votre-brief"],
[data-icon="clientBrief"] {
--icon: var(--icon-votre-brief) --icon: var(--icon-votre-brief)
} }
[data-icon="offre-commerciale"] { [data-icon="offre-commerciale"],
[data-icon="proposal"] {
--icon: var(--icon-offre-commerciale) --icon: var(--icon-offre-commerciale)
} }
[data-icon="brief-enrichi"] { [data-icon="brief-enrichi"],
[data-icon="extendedBrief"],
[data-icon="industrialIdeation"] {
--icon: var(--icon-brief-enrichi) --icon: var(--icon-brief-enrichi)
} }
[data-icon="echantillon-virtuel"] { [data-icon="echantillon-virtuel"],
[data-icon="virtualSample"],
[data-icon="physicalSample"] {
--icon: var(--icon-echantillon-virtuel) --icon: var(--icon-echantillon-virtuel)
} }
[data-icon="upload"] { [data-icon="upload"] {

9
src/components/Projects.vue
View file

@ -65,4 +65,11 @@ function changeTab(newValue) {
} }
</script> </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" /> <img :src="project.logo" alt="Logo" class="project-logo | rounded-sm" />
<ol class="project-steps" data-steps="1"> <ol class="project-steps" data-steps="1">
<li class="project-step" data-status="in-progress"> <li class="project-step" data-status="in-progress">
<span class="pill" data-icon="search">{{ <span class="pill" data-icon="clientBrief">{{
stepsLabels[project.currentStep] stepsLabels[project.currentStep]
}}</span> }}</span>
</li> </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> </ol>
</article> </article>
</router-link> </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::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: ""; content: "";
display: inline-block; display: inline-block;
height: 1.25rem; height: 1.25rem;
@ -112,7 +121,8 @@ const { stepsLabels } = useProjectStore();
right: 3.75rem; right: 3.75rem;
bottom: -2rem; 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; height: 1rem;
background-repeat: repeat; background-repeat: repeat;
background-position: left center; background-position: left center;
@ -158,6 +168,7 @@ const { stepsLabels } = useProjectStore();
mask-image: var(--icon-point-active); mask-image: var(--icon-point-active);
} }
.project-step[data-status="uncompleted"] .pill::after { .project-step[data-status="uncompleted"] .pill::after {
--icon: var(--icon-point);
--icon-color: var(--color-grey-300); --icon-color: var(--color-grey-300);
} }
</style> </style>