generated from gitea_admin/default
75 lines
2.3 KiB
Vue
75 lines
2.3 KiB
Vue
<!--
|
|
La section par défaut fait la largeur de la page.
|
|
On peut mettre de la couleur ou pas.
|
|
C'est le contenu de la section (PageSectionInner) qui aura une marge.
|
|
Et avec "content" à "false" on peut dire aussi qu'on n'utilise pas le PageSectionInner, au cas où...
|
|
-->
|
|
<template>
|
|
<section
|
|
class="page-section"
|
|
:class="[
|
|
`page-section--overflow--${overflow}`,
|
|
`page-section--${tone}`,
|
|
`page-section--padded--${padded_size}`
|
|
]"
|
|
>
|
|
<!-- Si content == true -->
|
|
<PageSectionInner v-if="content" :size="contentSize" :padt="padt" :padb="padb" :position="position" :overflow="overflow">
|
|
<slot />
|
|
</PageSectionInner>
|
|
|
|
<!-- Si content == false -->
|
|
<template v-else>
|
|
<slot />
|
|
</template>
|
|
|
|
</section>
|
|
</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
|
|
contentSize: { type: String, default: 'default'}, // narrow/default/wide
|
|
content: { type: Boolean, default: true }, // contenu contraint ou full
|
|
padb : { type: String, default: '' }, // props pour PageSectionInner
|
|
padt : { type: String, default: '' }, // props pour PageSectionInner
|
|
position : { type: String, default: '' },
|
|
overflow : { type: String, default: '' }
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.page-section {
|
|
position: relative;
|
|
width: 100%;
|
|
//min-height: var(--sp-200);
|
|
&--overflow--hidden {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* tons = arrière-plan section */
|
|
&--default { background: transparent; }
|
|
&--brand { background: var(--c-brand_rouge);}
|
|
&--dark { background: var(--c-backgroud-black); }
|
|
&--brandreverse { background: var(--c-backgroud-brandreverse); }
|
|
|
|
// padding en haut et en bas
|
|
&--padded {
|
|
&--md {
|
|
padding-top: 30px;
|
|
padding-bottom: 50px;
|
|
}
|
|
&--lg {
|
|
padding-top: 30px;
|
|
padding-bottom: 120px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|