generated from gitea_admin/default
102 lines
2.9 KiB
Vue
102 lines
2.9 KiB
Vue
<!-- Pour gérer tous les types de main dans les différents templates de page
|
||
Des templates peuvent avoir toutes la même marge de page et d'autres, par ex, être full page -->
|
||
|
||
<template>
|
||
<div class="page-section--inner" :class="[`page-section--inner--${size}`,`page-section--inner--padb--${padb}`,`page-section--inner--padt--${padt}`,`page-section--inner--position--${position}`]">
|
||
<slot />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
defineProps({
|
||
size: { type: String, default: 'default' }, // default / wide / narrow
|
||
padb : { type: String, default: '' },
|
||
padt : { type: String, default: '' },
|
||
position : { type: String, dafault : ''}
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.page-section--inner {
|
||
// ne dépasse jamais l’écran
|
||
width: 100%;
|
||
|
||
// centre le bloc horizontalement, crée des marges externes fluides, fonctionne dans toutes les largeurs d’écran
|
||
margin-inline: auto;
|
||
|
||
// respiration sur les côtés avec marges minimale ( surtout utile pour mobiles)
|
||
|
||
&--position--relative {
|
||
position: relative;
|
||
}
|
||
|
||
// limite de largeur quand on veut une largeur plus petit (pour les articles par exemple)
|
||
&--narrow {
|
||
max-width: var(--container-narrow);
|
||
}
|
||
|
||
// limite de largeur (par défaut)
|
||
&--default {
|
||
/* mobile / small screens */
|
||
|
||
@media (max-width: 700px) {
|
||
//padding-inline: var(--page-padding-mobile);
|
||
}
|
||
|
||
@media (min-width: 0px) {
|
||
max-width: 100%;
|
||
|
||
}
|
||
@media (min-width: 600px) {
|
||
max-width: 580px;
|
||
}
|
||
@media (min-width: 700px) {
|
||
max-width: 660px;
|
||
}
|
||
@media (min-width: 800px) {
|
||
max-width: 780px;
|
||
}
|
||
@media (min-width: 900px) {
|
||
max-width: 860px;
|
||
}
|
||
@media (min-width: 1000px) {
|
||
max-width: 950px;
|
||
}
|
||
@media (min-width: 1100px) {
|
||
max-width: 1020px;
|
||
}
|
||
@media (min-width: 1200px) {
|
||
max-width: 1100px;
|
||
}
|
||
@media (min-width: 1300px) {
|
||
max-width: 1200px;
|
||
}
|
||
@media (min-width: 1400px) {
|
||
max-width: 1300px;
|
||
}
|
||
@media (min-width: 1500px) {
|
||
max-width: 1400px;
|
||
}
|
||
}
|
||
// limite de largeur un peu plus grande que par défaut
|
||
&--wide {
|
||
max-width: var(--container-wide);
|
||
}
|
||
|
||
// Padding
|
||
&--padt--xs {
|
||
padding-top: 30px;
|
||
}
|
||
&--padt--sm {
|
||
padding-top: 45px;
|
||
}
|
||
&--padb--xs {
|
||
padding-bottom: 17px;
|
||
}
|
||
&--padb--sm {
|
||
padding-bottom: 30px;
|
||
}
|
||
|
||
|
||
}
|
||
</style> |