gitea_admin/wondif_vue
1
0
Fork 0
generated from gitea_admin/default
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

front end

Browse Source
This commit is contained in:
Julie
2026-03-18 12:00:19 +01:00
parent b0352c963c
commit bc6ad43ea5
31 changed files with 832 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
app/components/section/Decalage.vue
View File

@@ -2,7 +2,7 @@
<div class="decalage_cont"
:class="[
`decalage_cont--${position}`
]""
]"
>
<div class="decalage"
:class="[
@@ -11,7 +11,7 @@
]"
>
<div class="decalage_inner">
<DsHeading v-if="$slots.title" :tone=titleTone as="h2" textcase="uppercase">
<DsHeading v-if="$slots.title" :tone="titleTone" as="h2" textcase="uppercase">
<slot name="title" />
</DsHeading>
<slot />
@@ -19,7 +19,7 @@
<slot name="button" />
</div>
<div v-if="ensavoirplusTarget" class="decalage_button">
<DsButton :textColor=buttonTone :borderColor="buttonTone" @click="toggleTarget(ensavoirplusTarget)">En savoir +</DsButton>
<DsButton :textColor="buttonTone" :borderColor="buttonTone" @click="toggleTarget(ensavoirplusTarget)">En savoir +</DsButton>
</div>
</div>
</div>
@@ -72,7 +72,7 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
width: 67vw;
}
@media (min-width: 800px) {
width: 50vw;
width: 60vw;
}
/* tons = arrière-plan section */
@@ -86,23 +86,26 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
&--right {
.decalage_inner {
padding-left: 50px;
padding-right: 20px;
padding-left: 50px;
@media (max-width: 599px) {
padding-left: 40px;
padding-right: 15px;
padding-left: 40px;
}
}
}
&--left {
justify-content: flex-end;
justify-content: flex-end;
.decalage_inner {
padding-right: 50px;
padding-left: 20px;
@media (max-width: 599px) {
padding-right: 40px;
padding-left: 15px;
}
}
@@ -113,38 +116,38 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
.decalage_inner {
@media (min-width: 0px) {
width: 100%;
}
@media (min-width: 600px) {
width: calc(290px + 39vw);
}
@media (min-width: 700px) {
width: calc(330px + 17vw);
}
@media (min-width: 800px) {
width: 390px;
}
@media (min-width: 900px) {
width: 430px;
}
@media (min-width: 1000px) {
width: 475px;
}
@media (min-width: 1100px) {
width: 510px;
}
@media (min-width: 1200px) {
width: 550px;
}
@media (min-width: 1300px) {
width: 600px;
}
@media (min-width: 1400px) {
width: 650px;
}
@media (min-width: 1500px) {
width: 700px;
}
width: 100%;
}
@media (min-width: 600px) {
width: calc(290px + 39vw);
}
@media (min-width: 700px) {
width: calc(330px + 17vw);
}
@media (min-width: 800px) {
width: calc(330px + 17vw);
}
@media (min-width: 900px) {
width: 600px;
}
@media (min-width: 1000px) {
width: 600px;
}
@media (min-width: 1100px) {
width: 600px;
}
@media (min-width: 1200px) {
width: 600px;
}
@media (min-width: 1300px) {
width: 600px;
}
@media (min-width: 1400px) {
width: 600px;
}
@media (min-width: 1500px) {
width: 600px;
}
}
.decalage_button {
@@ -155,4 +158,4 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
.decalage_ensavoirplus--hidden {
display: none;
}
</style>
</style>