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

save

Browse source
This commit is contained in:
isUnknown 2025-01-27 20:44:11 +01:00
parent 10052aa9af
commit 7aa0ffb927
4 changed files with 95 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

128
src/assets/css/src/2.blocks.design-to-light.css
View file

@ -28,7 +28,7 @@
max-height: calc(100vh - var(--gutter) * 2); max-height: calc(100vh - var(--gutter) * 2);
} }
#dtl-page::before { #dtl-page::before {
content: ''; content: "";
display: block; display: block;
position: absolute; position: absolute;
inset: 0; inset: 0;
@ -39,7 +39,11 @@
background-position: top center; background-position: top center;
background-attachment: fixed; background-attachment: fixed;
filter: saturate(60%); filter: saturate(60%);
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 50%); mask-image: linear-gradient(
180deg,
rgba(0, 0, 0, 0.4) 0%,
rgba(0, 0, 0, 0) 50%
);
} }
#dtl-page > * { #dtl-page > * {
max-width: 73.25rem; /* 1172px */ max-width: 73.25rem; /* 1172px */
@ -52,7 +56,7 @@
#dtl-page .card ul { #dtl-page .card ul {
list-style: initial; list-style: initial;
padding-left: 1.25em; padding-left: 1.25em;
padding-block: .25rem; padding-block: 0.25rem;
} }
/* Button */ /* Button */
@ -68,14 +72,14 @@
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
position: absolute; position: absolute;
left: .5rem; left: 0.5rem;
top: .5rem; top: 0.5rem;
} }
#dtl-btn[data-grade]::after, #dtl-btn[data-grade]::after,
#dtl-btn .new { #dtl-btn .new {
position: absolute; position: absolute;
right: .25rem; right: 0.25rem;
top: .25rem; top: 0.25rem;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
user-select: none; user-select: none;
@ -89,20 +93,20 @@
background: var(--color-primary-50); background: var(--color-primary-50);
font-weight: 700; font-weight: 700;
font-size: var(--text-xs); font-size: var(--text-xs);
padding: .5rem 0; padding: 0.5rem 0;
z-index: 10; z-index: 10;
} }
#dtl-btn .new::after { #dtl-btn .new::after {
content: ""; content: "";
width: .5rem; width: 0.5rem;
height: .5rem; height: 0.5rem;
border: 2px solid var(--color-black); border: 2px solid var(--color-black);
border-radius: 50%; border-radius: 50%;
background: var(--color-primary); background: var(--color-primary);
display: block; display: block;
position: absolute; position: absolute;
top: -.333rem; top: -0.333rem;
right: -.333rem; right: -0.333rem;
} }
/* Grades */ /* Grades */
@ -115,23 +119,23 @@
} }
[data-grade="A"]::after { [data-grade="A"]::after {
background-image: var(--icon-grade-A); background-image: var(--icon-grade-A);
background-color: rgba(0, 148, 91, .2); background-color: rgba(0, 148, 91, 0.2);
} }
[data-grade="B"]::after { [data-grade="B"]::after {
background-image: var(--icon-grade-B); background-image: var(--icon-grade-B);
background-color: rgba(94, 172, 13, .2); background-color: rgba(94, 172, 13, 0.2);
} }
[data-grade="C"]::after { [data-grade="C"]::after {
background-image: var(--icon-grade-C); background-image: var(--icon-grade-C);
background-color: rgba(238, 175, 16, .2); background-color: rgba(238, 175, 16, 0.2);
} }
[data-grade="D"]::after { [data-grade="D"]::after {
background-image: var(--icon-grade-D); background-image: var(--icon-grade-D);
background-color: rgba(242, 106, 79, .2); background-color: rgba(242, 106, 79, 0.2);
} }
[data-grade="E"]::after { [data-grade="E"]::after {
background-image: var(--icon-grade-E); background-image: var(--icon-grade-E);
background-color: rgba(243, 45, 47, .2); background-color: rgba(243, 45, 47, 0.2);
} }
/* Panel */ /* Panel */
@ -179,7 +183,7 @@
} }
#dtl-panel [role="tab"] { #dtl-panel [role="tab"] {
height: 2.5rem; height: 2.5rem;
padding: var(--space-12) .625rem; padding: var(--space-12) 0.625rem;
color: var(--color-grey-400); color: var(--color-grey-400);
font-weight: 500; font-weight: 500;
white-space: pre; white-space: pre;
@ -210,13 +214,19 @@
#note-globale input[type="range"] { #note-globale input[type="range"] {
width: 100%; width: 100%;
height: .5rem; height: 0.5rem;
background: linear-gradient(to right, background: linear-gradient(
rgba(243, 45, 47, 1) 0%, rgba(243, 45, 47, 1) 20%, to right,
rgba(242, 106, 79, 1) 20%, rgba(242, 106, 79, 1) 40%, rgba(243, 45, 47, 1) 0%,
rgba(238, 175, 16, 1) 40%, rgba(238, 175, 16, 1) 60%, rgba(243, 45, 47, 1) 20%,
rgba(94, 172, 13, 1) 60%, rgba(94, 172, 13, 1) 80%, rgba(242, 106, 79, 1) 20%,
rgba(0, 148, 91, 1) 80%, rgba(0, 148, 91, 1) 100% rgba(242, 106, 79, 1) 40%,
rgba(238, 175, 16, 1) 40%,
rgba(238, 175, 16, 1) 60%,
rgba(94, 172, 13, 1) 60%,
rgba(94, 172, 13, 1) 80%,
rgba(0, 148, 91, 1) 80%,
rgba(0, 148, 91, 1) 100%
); );
transform: scaleX(-1); transform: scaleX(-1);
} }
@ -276,25 +286,25 @@
position: absolute; position: absolute;
} }
#positionnement #design { #positionnement #design {
top: calc(50% - .666em); top: calc(50% - 0.666em);
right: calc(50% + 5rem); right: calc(50% + 5rem);
transform: translateY(-50%); transform: translateY(-50%);
} }
#positionnement #design::after { #positionnement #design::after {
content: 'Complexe'; content: "Complexe";
bottom: -1.333em; bottom: -1.333em;
right: 0; right: 0;
} }
#positionnement #design+dd::before { #positionnement #design + dd::before {
content: 'Design'; content: "Design";
top: calc(50% - .666em); top: calc(50% - 0.666em);
left: calc(50% + 5rem); left: calc(50% + 5rem);
transform: translateY(-50%); transform: translateY(-50%);
color: var(--color-grey-400); color: var(--color-grey-400);
} }
#positionnement #design+dd::after { #positionnement #design + dd::after {
content: 'Sobre'; content: "Sobre";
top: calc(50% + .666em); top: calc(50% + 0.666em);
left: calc(50% + 5rem); left: calc(50% + 5rem);
transform: translateY(-50%); transform: translateY(-50%);
} }
@ -303,18 +313,18 @@
transform: translateX(-50%); transform: translateX(-50%);
} }
#positionnement #poids::after { #positionnement #poids::after {
content: ' Léger'; content: " Léger";
position: static; position: static;
} }
#positionnement #poids+dd::before { #positionnement #poids + dd::before {
content: 'Poids'; content: "Poids";
bottom: 0; bottom: 0;
left: calc(50% - 1.5em); left: calc(50% - 1.5em);
transform: translateX(-50%); transform: translateX(-50%);
color: var(--color-grey-400); color: var(--color-grey-400);
} }
#positionnement #poids+dd::after { #positionnement #poids + dd::after {
content: ' Lourd'; content: " Lourd";
bottom: 0; bottom: 0;
left: calc(50% + 1.5em); left: calc(50% + 1.5em);
transform: translateX(-50%); transform: translateX(-50%);
@ -322,11 +332,11 @@
#positionnement .dot { #positionnement .dot {
position: absolute; position: absolute;
top: calc(50% + 0.6875rem); top: calc(50% + 0.6875rem);
left: calc(50% - .25rem); left: calc(50% - 0.25rem);
width: .5rem; width: 0.5rem;
height: .5rem; height: 0.5rem;
background: var(--color-white); background: var(--color-white);
opacity: .5; opacity: 0.5;
border-radius: 50%; border-radius: 50%;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -348,17 +358,16 @@
width: var(--gauge-outer-size); width: var(--gauge-outer-size);
height: var(--gauge-outer-size); height: var(--gauge-outer-size);
border-radius: 50%; border-radius: 50%;
background-image: background-image: conic-gradient(
conic-gradient( from 0deg at 50% 50%,
from 0deg at 50% 50%, #eeaf10 0deg,
#EEAF10 0deg, #5eac0d 72deg,
#5EAC0D 72deg, #00945b 144deg,
#00945B 144deg, #00945b 180deg,
#00945B 180deg, #f32d2f 180deg,
#F32D2F 180deg, #f26a4f 216deg,
#F26A4F 216deg, #eeaf10 360deg
#EEAF10 360deg );
);
background-size: 100%; background-size: 100%;
background-position: center; background-position: center;
position: relative; position: relative;
@ -371,7 +380,7 @@
.gauge::after { .gauge::after {
content: attr(data-value); content: attr(data-value);
display: block; display: block;
padding: 1.125rem 1.25rem 1.125rem .875rem; padding: 1.125rem 1.25rem 1.125rem 0.875rem;
font-size: var(--text-lg); font-size: var(--text-lg);
width: var(--gauge-inner-size); width: var(--gauge-inner-size);
height: var(--gauge-inner-size); height: var(--gauge-inner-size);
@ -380,14 +389,15 @@
position: absolute; position: absolute;
top: calc((var(--gauge-outer-size) - var(--gauge-inner-size)) / 2); top: calc((var(--gauge-outer-size) - var(--gauge-inner-size)) / 2);
left: calc((var(--gauge-outer-size) - var(--gauge-inner-size)) / 2); left: calc((var(--gauge-outer-size) - var(--gauge-inner-size)) / 2);
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
sans-serif;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
font-weight: 600; font-weight: 600;
line-height: 1; line-height: 1;
z-index: 10; z-index: 10;
} }
.gauge::before { .gauge::before {
content: ''; content: "";
display: block; display: block;
width: calc(var(--gauge-outer-size) / 2); width: calc(var(--gauge-outer-size) / 2);
height: var(--gauge-outer-size); height: var(--gauge-outer-size);
@ -408,7 +418,7 @@
right: unset; right: unset;
} }
.gauge label::before { .gauge label::before {
content: ''; content: "";
display: block; display: block;
width: calc(var(--gauge-outer-size) / 2); width: calc(var(--gauge-outer-size) / 2);
height: var(--gauge-outer-size); height: var(--gauge-outer-size);
@ -427,7 +437,7 @@
transform: rotate(calc(180deg + 30deg * var(--value))) scale(1.03); transform: rotate(calc(180deg + 30deg * var(--value))) scale(1.03);
} }
.gauge label::after { .gauge label::after {
content: ''; content: "";
display: block; display: block;
position: absolute; position: absolute;
top: calc(-1 * var(--gauge-outer-size) - 2px); top: calc(-1 * var(--gauge-outer-size) - 2px);
@ -447,7 +457,7 @@
left: -1rem; left: -1rem;
right: -1rem; right: -1rem;
font-weight: 500; font-weight: 500;
padding: .5rem 0; padding: 0.5rem 0;
} }
.gauge input[type="range"] { .gauge input[type="range"] {
visibility: hidden; visibility: hidden;

22
src/assets/css/src/2.blocks.dialog.css
View file

@ -74,7 +74,7 @@
/* Content */ /* Content */
.dialog__inner { .dialog__inner {
background: var(--dialog-inner-background, #F7F7F7); background: var(--dialog-inner-background, #f7f7f7);
height: 100%; height: 100%;
} }
.dialog__inner > header { .dialog__inner > header {
@ -101,14 +101,14 @@
right: var(--space-8); right: var(--space-8);
} }
.dialog__inner .options-selector + button::before { .dialog__inner .options-selector + button::before {
content: ''; content: "";
display: block; display: block;
position: absolute; position: absolute;
left: calc(-3rem - 1px); left: calc(-3rem - 1px);
top: -1px; top: -1px;
bottom: -1px; bottom: -1px;
width: 3rem; width: 3rem;
background: linear-gradient(to right, transparent, #FBFBFB); background: linear-gradient(to right, transparent, #fbfbfb);
} }
.dialog [data-pc-section="content"] [role="tablist"] { .dialog [data-pc-section="content"] [role="tablist"] {
height: 3.5rem; height: 3.5rem;
@ -168,10 +168,9 @@
color: var(--color-white); color: var(--color-white);
} }
/* Virtual Sample */ /* Virtual Sample */
.dialog#virtual-sample { .dialog#virtual-sample {
--dialog-inner-background: #F7F7F7; --dialog-inner-background: #f7f7f7;
} }
.dialog#virtual-sample [data-pc-section="header"] h2 { .dialog#virtual-sample [data-pc-section="header"] h2 {
left: 22.5rem; left: 22.5rem;
@ -206,7 +205,13 @@
gap: 0; gap: 0;
padding: var(--space-32); padding: var(--space-32);
color: var(--color-white); color: var(--color-white);
background: linear-gradient(90deg, hsla(0, 0%, 10%, .5) 0%, hsla(0, 0%, 10%, .9) 50%, hsla(0, 0%, 10%, .9) 100%), var(--cover), var(--color-black); background: linear-gradient(
90deg,
hsla(0, 0%, 10%, 0.5) 0%,
hsla(0, 0%, 10%, 0.9) 50%,
hsla(0, 0%, 10%, 0.9) 100%
),
var(--cover), var(--color-black);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
border-radius: var(--rounded-xl); border-radius: var(--rounded-xl);
@ -246,9 +251,6 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 0; gap: 0;
}
#optimization-request-dialog [data-pc-section="header"] [data-icon="leaf"] {
} }
#project-request-dialog h2, #project-request-dialog h2,
#optimization-request-dialog h2 { #optimization-request-dialog h2 {
@ -298,5 +300,5 @@
} }
#project-request-dialog [data-icon="leaf"]::before, #project-request-dialog [data-icon="leaf"]::before,
#optimization-request-dialog [data-icon="leaf"]::before { #optimization-request-dialog [data-icon="leaf"]::before {
transform: translateY(.125rem); transform: translateY(0.125rem);
} }

14
src/components/design-to-light/DTLPanel.vue
View file

@ -161,17 +161,20 @@
</template> </template>
</div> </div>
</div> </div>
<footer v-if="proposals.length > 1" class="p-16"> <footer v-if="proposals.length === 1" class="p-16">
<button <button
class="btn btn--white w-full" class="btn btn--white w-full"
@click="isOptimizationDialogOpen = true" @click="handleOptimizationButtonClick"
> >
Demander une expertise d’optimisation Demander une expertise d’optimisation
</button> </button>
</footer> </footer>
</section> </section>
</aside> </aside>
<OptimizationRequestDialog v-if="isOptimizationDialogOpen" /> <OptimizationRequestDialog
v-if="isOptimizationDialogOpen"
@close="isOptimizationDialogOpen = false"
/>
</template> </template>
<script setup> <script setup>
import OptimizationRequestDialog from "./OptimizationRequestDialog.vue"; import OptimizationRequestDialog from "./OptimizationRequestDialog.vue";
@ -180,6 +183,7 @@ import "dayjs/locale/fr";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import { ref, onBeforeUnmount, computed } from "vue"; import { ref, onBeforeUnmount, computed } from "vue";
import { useDialogStore } from "../../stores/dialog"; import { useDialogStore } from "../../stores/dialog";
import { useRoute, useRouter } from "vue-router";
const { proposals } = defineProps({ const { proposals } = defineProps({
proposals: Array, proposals: Array,
@ -225,4 +229,8 @@ function close() {
function preventClose(event) { function preventClose(event) {
event.stopImmediatePropagation(); event.stopImmediatePropagation();
} }
function handleOptimizationButtonClick() {
isOptimizationDialogOpen.value = true;
}
</script> </script>

1
src/components/design-to-light/OptimizationRequestDialog.vue
View file

@ -8,6 +8,7 @@
header="Demander un rendez-vous" header="Demander un rendez-vous"
class="dialog" class="dialog"
:closeOnEscape="true" :closeOnEscape="true"
style="z-index: 9999"
> >
<template #header> <template #header>
<h2 class="font-serif text-lg">Demander un rendez-vous</h2> <h2 class="font-serif text-lg">Demander un rendez-vous</h2>