From 9167519388d23b3db3da483b0c4910781a072008 Mon Sep 17 00:00:00 2001 From: timotheegoguely Date: Thu, 21 Nov 2024 19:36:21 +0100 Subject: [PATCH] Move Project.vue scoped style into 2.blocks.project.css --- src/assets/css/index.css | 1 + src/assets/css/src/2.blocks.project.css | 176 +++++++++++++++++++++++ src/components/project/Project.vue | 177 ------------------------ 3 files changed, 177 insertions(+), 177 deletions(-) create mode 100644 src/assets/css/src/2.blocks.project.css diff --git a/src/assets/css/index.css b/src/assets/css/index.css index 203d828..d232f14 100644 --- a/src/assets/css/index.css +++ b/src/assets/css/index.css @@ -21,6 +21,7 @@ @import 'src/2.blocks.header.css'; @import 'src/2.blocks.pill.css'; @import 'src/2.blocks.pdf-viewer.css'; +@import 'src/2.blocks.project.css'; @import 'src/2.blocks.skip-link.css'; /* UTILITY CLASSES */ diff --git a/src/assets/css/src/2.blocks.project.css b/src/assets/css/src/2.blocks.project.css new file mode 100644 index 0000000..b319503 --- /dev/null +++ b/src/assets/css/src/2.blocks.project.css @@ -0,0 +1,176 @@ +/* PROJECT BLOCK */ + +.project-item { + background: var(--color-background); + row-gap: 2.5rem; +} + +.project-item hgroup { + flex: 1 1 0%; + min-width: 20rem; +} +.project-item h3 { + font-family: var(--font-serif); + font-size: var(--text-lg); + margin-bottom: var(--space-8); +} +.project-item p { + font-size: var(--text-sm); + line-height: var(--leading-sm); +} + +.project-logo { + order: -1; + background: var(--color-grey-50); + color: var(--color-grey-400); + text-align: center; + line-height: 4.5rem; + width: 4.5rem; + height: 4.5rem; +} + +.project-steps { + --color: var(--color-primary-100); + --gap: var(--space-16); + flex: 1 1 0%; + display: flex; + gap: var(--gap); + margin-top: -2.75rem; + position: relative; + min-width: max(55%, 45rem); + width: 100%; + padding: 2rem 0; +} + +.project-step { + --color: var(--color-white); + position: relative; + flex: 1 1 0%; + text-align: center; +} +.project-step:last-child { + text-align: right; +} +.project-step:only-child, +.project-step:first-child { + text-align: left; +} + +.project-step[data-status="in-progress"]:first-child::before { + content: "étapes à venir"; + font-size: var(--text-sm); + font-weight: 500; + width: 8rem; + position: absolute; + text-align: center; + color: var(--color-grey-500); + background: var(--color-white); + bottom: -2rem; + left: calc(100% + var(--gap)); + transform: translate(-50%, -0.2em); + z-index: 10; +} +/* dotted line */ +.project-step[data-status="in-progress"]::after, +.project-step:last-child::before { + content: ""; + display: block; + height: 1rem; + position: absolute; + 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-size: 0.75rem; + left: calc(50% + 1.875rem); + right: calc(var(--gap) / -2); + bottom: -1.875rem; +} +.project-step:last-child::before { + left: calc(var(--gap) / -2); + right: 6.75rem; + background-position: left center; +} +/* solid line */ +.project-step[data-status="done"]:not(:first-child)::before, +.project-step[data-status="in-progress"]:not(:first-child)::before, +.project-step[data-status="done"]::after { + 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 { + content: ""; + display: inline-block; + width: var(--icon-size, 1.25rem); + height: var(--icon-size, 1.25rem); + background-color: var(--icon-color, var(--color-primary-100)); + mask-repeat: no-repeat; + mask-position: center; + mask-size: var(--size, 1.25rem); + mask-image: var(--icon, var(--icon-point)); + position: absolute; + bottom: -2rem; +} +.project-step[data-status="done"] > .pill, +.project-step[data-status="uncompleted"] > .pill { + --background: transparent; + color: transparent; +} + +.project-step[data-status="done"] .pill::after { + 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 { + mask-image: var(--icon-point-active); +} +.project-step[data-status="uncompleted"] .pill::after { + --icon: var(--icon-point); + --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%); +} \ No newline at end of file diff --git a/src/components/project/Project.vue b/src/components/project/Project.vue index 3c3a42e..440bc83 100644 --- a/src/components/project/Project.vue +++ b/src/components/project/Project.vue @@ -41,180 +41,3 @@ const frenchFormattedModified = dayjs(project.modified).format( const { stepsLabels, setStatus } = useProjectStore(); - -