From 059e373a4a083c98037bad0369404f163472b89c Mon Sep 17 00:00:00 2001 From: timotheegoguely Date: Wed, 27 Nov 2024 12:39:26 +0100 Subject: [PATCH] Move ProjectStep style into 2.blocks.kanban.css and fix card footer link z-index #21 --- src/assets/css/src/2.blocks.card.css | 5 + src/assets/css/src/2.blocks.kanban.css | 123 ++++++++++++++++++++++++ src/components/project/ProjectStep.vue | 128 ------------------------- 3 files changed, 128 insertions(+), 128 deletions(-) diff --git a/src/assets/css/src/2.blocks.card.css b/src/assets/css/src/2.blocks.card.css index 1b9a2b9..5ac76ba 100644 --- a/src/assets/css/src/2.blocks.card.css +++ b/src/assets/css/src/2.blocks.card.css @@ -95,3 +95,8 @@ .card--cta:hover .text-lg { color: var(--color-primary-100); } + +.card > footer a { + position: relative; + z-index: 2; +} diff --git a/src/assets/css/src/2.blocks.kanban.css b/src/assets/css/src/2.blocks.kanban.css index 032f24a..2dca0ee 100644 --- a/src/assets/css/src/2.blocks.kanban.css +++ b/src/assets/css/src/2.blocks.kanban.css @@ -13,3 +13,126 @@ padding: 0 var(--gutter); height: calc(100vh - var(--gutter) * 2 - var(--header-height) - 3.25rem); } + +.kanban > section { + min-width: 20rem; + position: relative; +} + +.kanban .cards { + padding-top: var(--space-16); + max-height: calc(100% - var(--header-height)); + overflow-y: auto; +} +.kanban .card { + row-gap: 0; +} + +.kanban > section h2 { + position: relative; + background-color: var(--header-bg-color); + border-radius: var(--rounded-md); + font-size: var(--text-sm); + height: var(--header-height); +} +.kanban > section h2 > span { + display: flex; + justify-content: center; + align-items: center; + gap: var(--space-8); + background-color: var(--header-title-bg-color); + color: var(--color-white); + height: 100%; + width: fit-content; + padding: 0 var(--space-12); + border-top-left-radius: inherit; + border-bottom-left-radius: inherit; + font-weight: 500; +} +.kanban > section + section h2::before { + content: ""; + display: inline-block; + position: absolute; + top: calc(var(--header-height) / 2 - 1.5px); + right: 100%; + width: var(--gap); + height: 3px; + background-color: var(--color-grey-200); + z-index: -1; +} + +.kanban [data-status="done"] h2::after { + content: ""; + position: absolute; + top: 0; + right: var(--space-4); + bottom: 0; + display: inline-block; + width: var(--icon-size, var(--header-height)); + height: var(--icon-size, var(--header-height)); + background: var(--icon-color, currentColor); + mask-repeat: no-repeat; + mask-position: center; + mask-size: var(--icon-size, 1rem); + mask-image: var(--icon, var(--icon-check)); +} + +.kanban [data-status="in-progress"] { + --header-bg-color: var(--color-primary-20); + --header-title-bg-color: var(--color-primary); +} +.kanban [data-status="in-progress"] h2::after { + content: ""; + color: var(--color-primary); + position: absolute; + top: 0; + right: var(--space-4); + bottom: 0; + display: inline-block; + width: var(--icon-size, var(--header-height)); + height: var(--icon-size, var(--header-height)); + background: var(--icon-color, currentColor); + mask-repeat: no-repeat; + mask-position: center; + mask-size: var(--icon-size, 1rem); + mask-image: var(--icon-point-active); +} +.kanban [data-status="in-progress"]::after { + content: "En cours"; + position: absolute; + top: 0; + right: calc(var(--icon-size, var(--header-height)) + var(--space-4)); + color: var(--color-primary); + font-weight: 500; + font-size: var(--text-sm); + line-height: 2.125rem; +} + +.kanban [data-status="uncompleted"] h2 { + background: none; +} +.kanban [data-status="uncompleted"] h2::before { + background-color: transparent; + background-repeat: repeat-x; + background-position: left center; + background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%' cy='50%' r='2' opacity='0.15' fill='black'/%3E%3C/svg%3E%0A"); + background-size: 0.5rem; + right: calc(-1 * var(--gap)); + left: calc(-1 * var(--gap)); + width: auto; +} +.kanban [data-status="uncompleted"] h2 > span { + border-radius: inherit; +} +.kanban [data-status="uncompleted"]::after { + content: "En attente"; + position: absolute; + top: 0; + right: 0; + background-color: var(--color-grey-50); + color: var(--color-grey-700); + font-weight: 500; + font-size: var(--text-sm); + line-height: 2.125rem; + padding: 0 var(--space-12); +} \ No newline at end of file diff --git a/src/components/project/ProjectStep.vue b/src/components/project/ProjectStep.vue index 2d5718b..8e91d1d 100644 --- a/src/components/project/ProjectStep.vue +++ b/src/components/project/ProjectStep.vue @@ -191,131 +191,3 @@ const mergedFiles = computed(() => { return [...staticFiles, ...dynamicFiles]; }); - -