décalage

app/components/section/Decalage.vue

@@ -0,0 +1,158 @@
+<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>