wondif_vue/app/components/section/Decalage.vue

<template>
    <div class="decalage_cont"
         :class="[
            `decalage_cont--${position}`
        ]""
    >
        <div class="decalage"
             :class="[
                 `decalage--${tone}`,
                 `decalage--${position}`
             ]"
             >
            <div class="decalage_inner">
                <DsHeading v-if="$slots.title" :tone=titleTone as="h2" textcase="uppercase">
                  <slot name="title" />
                </DsHeading>
                <slot />
                <div v-if="$slots.button" class="decalage_button">
                    <slot name="button" />
                </div>
                <div v-if="ensavoirplusTarget" class="decalage_button">
                    <DsButton :textColor=buttonTone :borderColor="buttonTone" @click="toggleTarget(ensavoirplusTarget)">En savoir +</DsButton>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
import DsText from '@root/design-system/primitives/DsText.vue'
import DsButton from '@root/design-system/primitives/DsButton.vue'
  
    defineProps({
        tone: { type: String, default: 'default' },
        titleTone: { type: String, default: 'default' },
        buttonTone: { type: String, default: 'default' },
        position: { type: String, default: 'left' },
        ensavoirplusTarget: { type: String, default: '' }
    })
    
    function toggleTarget(ensavoirplusTarget) {
        document.getElementById(ensavoirplusTarget).classList.toggle("decalage_ensavoirplus--hidden");
    }
</script>

<style lang="scss">
    
    .decalage_cont {
        margin-bottom: 70px;
        display: flex;
        
        &--left {
            justify-content: flex-start;
        }
        
        &--right {
            justify-content: flex-end;
        }       
        
    }

    .decalage {
        padding-top: 50px;
        padding-bottom: 50px;
        display: flex;
        
        @media (min-width: 0px) and (max-width: 700px) {
            width: 89vw;
        }
        @media (min-width: 700px) {
          width: 67vw;
        }
        @media (min-width: 800px) {
          width: 50vw;
        }
        
        /* 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); }
        &--jaune { background: var(--c-background-jaune); }
        
        /* position = arrière-plan section */
        &--right {
            
            .decalage_inner {
                
                padding-left: 50px;                
                
                @media (max-width: 599px) {
                  padding-left: 40px;
                }
            }
        }
        
        &--left {
            justify-content: flex-end;            
           
            .decalage_inner {
                padding-right: 50px;
                
                @media (max-width: 599px) {
                    padding-right: 40px;
                  }
            }
            
        }

    }
    
    .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;
            }
    }
    
    .decalage_button {
        margin-top: 10px;
        text-align: right;
    }
    
    .decalage_ensavoirplus--hidden {
        display: none;
    }
</style>