Move Project.vue scoped style into 2.blocks.project.css
This commit is contained in:
parent
3c78293656
commit
9167519388
3 changed files with 177 additions and 177 deletions
|
|
@ -21,6 +21,7 @@
|
||||||
@import 'src/2.blocks.header.css';
|
@import 'src/2.blocks.header.css';
|
||||||
@import 'src/2.blocks.pill.css';
|
@import 'src/2.blocks.pill.css';
|
||||||
@import 'src/2.blocks.pdf-viewer.css';
|
@import 'src/2.blocks.pdf-viewer.css';
|
||||||
|
@import 'src/2.blocks.project.css';
|
||||||
@import 'src/2.blocks.skip-link.css';
|
@import 'src/2.blocks.skip-link.css';
|
||||||
|
|
||||||
/* UTILITY CLASSES */
|
/* UTILITY CLASSES */
|
||||||
|
|
|
||||||
176
src/assets/css/src/2.blocks.project.css
Normal file
176
src/assets/css/src/2.blocks.project.css
Normal file
|
|
@ -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%);
|
||||||
|
}
|
||||||
|
|
@ -41,180 +41,3 @@ const frenchFormattedModified = dayjs(project.modified).format(
|
||||||
|
|
||||||
const { stepsLabels, setStatus } = useProjectStore();
|
const { stepsLabels, setStatus } = useProjectStore();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.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%);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue