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>

7
app/components/section/PageSection.vue
View File

@@ -27,8 +27,6 @@
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
tone: { type: String, default: 'default' }, // default / brand / muted / dark…
padded_size: { type: String, default: '' }, // none | sm | md | lg
@@ -39,7 +37,6 @@
position : { type: String, default: '' },
overflow : { type: String, default: '' }
})
</script>
<style lang="scss">
@@ -57,6 +54,9 @@
&--dark { background: var(--c-backgroud-black); }
&--brandreverse { background: var(--c-backgroud-brandreverse); }
&--jaune { background: var(--c-background-jaune); }
&--bleu { background: var(--c-background-bleu); }
&--rouge45 { background: var(--c-brand_rouge45); }
&--rouge-weak { background: var(--c-brand_rouge-weak); }
// padding en haut et en bas
&--padded {
@@ -69,7 +69,6 @@
padding-bottom: 120px;
}
}
}
</style>

1
app/components/section/PageSectionInner.vue
View File

@@ -43,7 +43,6 @@
@media (min-width: 0px) {
max-width: 100%;
}
@media (min-width: 600px) {
max-width: 580px;