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

Fix project-steps style

Browse source
This commit is contained in:
Timothée Goguely 2024-11-21 17:53:00 +01:00
parent b76c62fa70
commit d5df45cb55
2 changed files with 90 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/assets/css/src/0.2.variables.css
View file

@ -20,6 +20,7 @@
--color-grey-200: hsla(0, 0%, 89%, 1); /* Grey - 01 */ --color-grey-200: hsla(0, 0%, 89%, 1); /* Grey - 01 */
--color-grey-300: hsla(0, 0%, 74%, 1); --color-grey-300: hsla(0, 0%, 74%, 1);
--color-grey-400: hsla(180, 2%, 62%, 1); /* Grey - 02 */ --color-grey-400: hsla(180, 2%, 62%, 1); /* Grey - 02 */
--color-grey-500: hsla(180, 1%, 51%, 1);
--color-grey-700: hsla(180, 1%, 37%, 1); /* Grey - 03 */ --color-grey-700: hsla(180, 1%, 37%, 1); /* Grey - 03 */
--color-grey-800: hsla(180, 2%, 22%, 1); /* Grey - 04 */ --color-grey-800: hsla(180, 2%, 22%, 1); /* Grey - 04 */
--color-black-10: hsla(0, 0%, 10%, .1); /* Black 10 */ --color-black-10: hsla(0, 0%, 10%, .1); /* Black 10 */

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

@ -11,15 +11,15 @@
</p> </p>
</hgroup> </hgroup>
<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="project.steps.length"> <ol class="project-steps" :data-steps="project.steps.length" :style="'--steps:'+project.steps.length">
<li <li
v-for="step in project.steps" v-for="step in project.steps"
class="project-step" class="project-step"
:data-status="setStatus(project.steps, project.currentStep, step)" :data-status="setStatus(project.steps, project.currentStep, step)"
> >
<span class="pill" :data-icon="step.id">{{ <span class="pill" :data-icon="step.id">
stepsLabels[project.currentStep] <span>{{ step.label }}</span>
}}</span> </span>
</li> </li>
</ol> </ol>
</article> </article>
@ -44,12 +44,12 @@ const { stepsLabels, setStatus } = useProjectStore();
<style scoped> <style scoped>
.project-item { .project-item {
--wrap: no-wrap;
background: var(--color-background); background: var(--color-background);
} }
.project-item hgroup { .project-item hgroup {
flex: 1 1 0%; flex: 1 1 0%;
min-width: 15rem;
} }
.project-item h3 { .project-item h3 {
font-family: var(--font-serif); font-family: var(--font-serif);
@ -73,24 +73,13 @@ const { stepsLabels, setStatus } = useProjectStore();
.project-steps { .project-steps {
--color: var(--color-primary-100); --color: var(--color-primary-100);
flex: 1 1 0%; --gap: var(--space-16);
flex: 0 1 0%;
display: flex; display: flex;
gap: var(--space-16); gap: var(--gap);
margin-top: -2.75rem; margin-top: -2.75rem;
position: relative; position: relative;
} min-width: max(55%, 45rem);
.project-steps[data-steps="1"]::after {
content: "étapes à venir";
font-size: var(--text-sm);
font-weight: 500;
width: 8rem;
position: absolute;
text-align: center;
color: var(--color-grey-700);
background: var(--color-background);
bottom: -2rem;
left: 50%;
transform: translate(-50%, -0.2em);
} }
.project-step { .project-step {
@ -107,39 +96,76 @@ const { stepsLabels, setStatus } = useProjectStore();
text-align: left; text-align: left;
} }
.project-step[data-status="in-progress"]:only-child::before, .project-step[data-status="in-progress"]:first-child::before {
.project-step[data-status="in-progress"]:only-child::after, content: "étapes à venir";
.project-step[data-status="done"] + [data-status="in-progress"]::before { font-size: var(--text-sm);
content: ""; font-weight: 500;
display: inline-block; width: 8rem;
height: 1.25rem;
position: absolute; position: absolute;
right: 3.75rem; text-align: center;
color: var(--color-grey-500);
background: var(--color-white);
bottom: -2rem; bottom: -2rem;
left: calc(100% + var(--gap));
transform: translate(-50%, -0.2em);
z-index: 10;
} }
.project-step[data-status="in-progress"]:only-child::before, /* dotted line */
.project-step[data-status="done"] + [data-status="in-progress"]::before { .project-step[data-status="in-progress"]::after,
.project-step:last-child::before {
content: "";
display: block;
height: 1rem; height: 1rem;
background-repeat: repeat; position: absolute;
background-position: left center; background-repeat: repeat-x;
background-position: right center;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%' cy='50%' r='4' opacity='0.15' fill='black'/%3E%3C/svg%3E%0A"); background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%' cy='50%' r='4' opacity='0.15' fill='black'/%3E%3C/svg%3E%0A");
background-size: 0.75rem; background-size: 0.75rem;
left: 5.5rem; left: calc(50% + 1.875rem);
right: 5.5rem; right: calc(var(--gap) / -2);
bottom: -1.875rem; bottom: -1.875rem;
} }
.project-step[data-status="in-progress"]:only-child::after { .project-step:last-child::before {
--icon-size: 1.25rem; left: calc(var(--gap) / -2);
width: var(--icon-size); right: 6.75rem;
background: var(--color-grey-300); background-position: left center;
mask-repeat: no-repeat; }
mask-position: center; /* solid line */
mask-size: var(--icon-size); .project-step[data-status="done"]:not(:first-child)::before,
mask-image: var(--icon-point); .project-step[data-status="in-progress"]:not(:first-child)::before,
right: 3.75rem; .project-step[data-status="done"]::after {
bottom: -2rem; content: '';
display: block;
height: 4px;
background: var(--color-primary-10);
position: absolute;
bottom: -1.5rem;
}
.project-step[data-status="done"]:not(:first-child)::before,
.project-step[data-status="in-progress"]:not(:first-child)::before {
border-radius: 0 2px 2px 0;
left: calc(var(--gap) / -2);
right: calc(50% + 1.875rem);
}
.project-step[data-status="done"]::after {
border-radius: 2px 0 0 2px;
right: calc(var(--gap) / -2);
left: calc(50% + 1.875rem);
}
.project-step:first-child::after {
left: 5.5rem;
} }
/* Hide all steps between in-progress and last step */
.project-step[data-status="in-progress"] ~ .project-step:not(:last-child) {
display: none;
}
.project-step .pill {
border-radius: var(--rounded-md);
padding-inline: var(--space-12);
}
.project-step .pill::after { .project-step .pill::after {
content: ""; content: "";
display: inline-block; display: inline-block;
@ -156,10 +182,14 @@ const { stepsLabels, setStatus } = useProjectStore();
.project-step[data-status="done"] > .pill, .project-step[data-status="done"] > .pill,
.project-step[data-status="uncompleted"] > .pill { .project-step[data-status="uncompleted"] > .pill {
--background: transparent; --background: 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);
} }
/*.project-step[data-status="done"]:first-child .pill::after {
left: calc(50% + .625rem);
}*/
.project-step[data-status="in-progress"] .pill::after { .project-step[data-status="in-progress"] .pill::after {
mask-image: var(--icon-point-active); mask-image: var(--icon-point-active);
} }
@ -167,4 +197,20 @@ const { stepsLabels, setStatus } = useProjectStore();
--icon: var(--icon-point); --icon: var(--icon-point);
--icon-color: var(--color-grey-300); --icon-color: var(--color-grey-300);
} }
.project-step .pill > span {
margin-top: -.1em;
}
/* in-progress vertical stroke */
.project-step[data-status="in-progress"] .pill > span::after {
content: '';
display: block;
position: absolute;
width: 4px;
height: 1.5rem;
background: var(--color-primary-10);
bottom: -1.5rem;
left: 50%;
transform: translateX(-50%);
}
</style> </style>