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.pill.css';
|
||||
@import 'src/2.blocks.pdf-viewer.css';
|
||||
@import 'src/2.blocks.project.css';
|
||||
@import 'src/2.blocks.skip-link.css';
|
||||
|
||||
/* 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();
|
||||
</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