]> _ Git - sycomore-fondation.git/commitdiff
wip #5812 @1:30
authorsoufiane <soufiane@cubedesigners.com>
Mon, 22 May 2023 10:07:08 +0000 (12:07 +0200)
committersoufiane <soufiane@cubedesigners.com>
Mon, 22 May 2023 10:07:08 +0000 (12:07 +0200)
12 files changed:
wp-content/mu-plugins/cube/Widgets/CarouselHome.php
wp-content/themes/sycomore-fondation/resources/styles/common/global.sass
wp-content/themes/sycomore-fondation/resources/styles/partials/footer.sass
wp-content/themes/sycomore-fondation/resources/styles/partials/header.sass
wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass
wp-content/themes/sycomore-fondation/resources/styles/partials/page.sass
wp-content/themes/sycomore-fondation/resources/styles/widgets/CarouselSelection.sass
wp-content/themes/sycomore-fondation/resources/styles/widgets/blockAssociation.sass
wp-content/themes/sycomore-fondation/resources/styles/widgets/blockText.sass
wp-content/themes/sycomore-fondation/resources/styles/widgets/blocktextbtn.sass
wp-content/themes/sycomore-fondation/resources/styles/widgets/highlightTitle.sass
wp-content/themes/sycomore-fondation/resources/views/widgets/carousel-home.blade.php

index af65da067db05d71b84dd7de5e2061e6e9ab020a..55ee81f1c424210b90d5bd24fbd5492b5e612fee 100644 (file)
@@ -153,7 +153,7 @@ class CarouselHome extends _Base {
                 ],
                 'separator' => 'after',
                 'selectors' => [
-                    '{{WRAPPER}} {{CURRENT_ITEM}} .thumbnail' => '--top: {{SIZE}}px'
+                    '{{WRAPPER}} {{CURRENT_ITEM}} .thumbnail' => '--bottom: -{{SIZE}}px'
                 ],
             ]
         );
index 6c7124b7c0e12b8082f650788db1462e13344ce7..595afe61f7b42e95329ba114f0a0cd4bba6744da 100644 (file)
@@ -67,8 +67,9 @@ p
 .grid-constrain-fluid
   margin: 0 auto
 
-.z-1
-  z-index: 1
+@for $i from 1 through 10
+  .z-#{$i}
+    z-index: #{$i}
 
 .elementor-widget-wrap
   //display: grid !important
@@ -103,4 +104,3 @@ body,p,a
 body.nous-contacter
   .elementor-section:last-child > .elementor-container
     padding-bottom: var(--space-xl-2xl)
-    border-bottom: 1px solid #D8D8D8
index 20c5d00c4f558a16055e9aac9aeeeb6d7ac4e5c8..f6a2827a7a2b93cdeba00c8d3d53bf73e500e2ee 100644 (file)
@@ -1,7 +1,15 @@
+.vos-projets,
+.la-fondation
+  footer.content-info
+    .container
+      border: 0
+
 footer.content-info
-  padding: 51px 0
   .container
+    padding: 51px 0
+    border-top: 1px solid #D8D8D8
     +screen-size("small-desktop", "max")
+      padding: 36px 0 20px
       flex-direction: column
 
   .brand
index 001941bf5ab67900752825406b4e21214b7d36b0..933eb0df430f9332e241eb6a0b74932e8a7abc35 100644 (file)
@@ -4,6 +4,8 @@ header.banner
   z-index: 99
   transition: all .3s
   top: 0
+  +screen-size(small-desktop, 'max')
+    padding-top: 18px !important
   img
     width: 100%
     transition: all .3s
index d34cef7d82eaa0a24cc3cde4e0b09201c0a601e8..c4822326b2bd8f15e3b3ddf22b11d4407fbc32d5 100644 (file)
       left: 50%
       display: flex
       transform: translateX(-50%)
-      &.active
+      &.prev
+        .leftside
+          height: 0
+      &.next
         z-index: 1
+      &.active
+        height: 100%
+        z-index: 2
         [class*="side"]
           .overlay,
           .thumbnail
 
           .thumbnail
             position: relative
-            transition: height .4s cubic-bezier(.7, 0, .2, 1)
-            img.bg
-              height: 0
-              bottom: 0
-            img:not(.bg)
-              bottom: 0
 
           .text
             opacity: 1
             transition: opacity 750ms cubic-bezier(0.77, 0, 0.175, 1) 0s, top 1s
             top: 0
 
-        .leftside
-          .overlay
-            z-index: 2
-          .thumbnail
-            z-index: 3
-
-      &:not(.active)
-        [class*="side"]
-          .overlay,
-          .thumbnail
-            height: 0
-            margin-top: auto
-
       .leftside,
       .rightside
         width: 50%
       .leftside
         display: flex
         flex-direction: column
+        margin-top: auto
+        transition: all .9s cubic-bezier(.7, 0, .2, 1)
+        height: 100%
+        *
+          height: 100%
         .overlay
           background-position: center
           background-size: cover
           overflow: hidden
           position: relative
 
+          img
+            position: absolute
+            width: max-content
+            height: max-content
+            bottom: var(--bottom)
+            left: var(--left)
+            transition: all 1s
 
-        img
-          position: absolute
-          //top: 100%
-          //bottom: calc(var(--bottom) + 30px)
-          //transition: bottom 1s
-        img.bg
-          width: 100%
-          height: 100%
-          top: 0
-          transition: bottom .9s cubic-bezier(.7, 0, .2, 1)
+        &.active
+          .thumbnail
+            img
 
-        img:not(.bg)
-          width: max-content
-          height: max-content
-          bottom: 0
-          left: var(--left)
+              transition: all 1s
+              bottom: calc(var(--bottom) - 39px)
 
       .rightside
         display: flex
           margin-top: initial
           .overlay
             top: 0
-
-          img.bg
-            bottom: 0
         .rightside
           margin-top: auto
           .overlay
             bottom: 0
 
-          img.bg
-            top: 0
-
 
       &:not(.active)
-        .overlay
-          height: 0
-          transition: height 0s
-          transition-delay: 1s
         .text
           animation-name: anime
           animation-duration: .8s
   100%
     top: 1.25vw
 
+@keyframes anime-thumb
+  0%
+    bottom: calc(var(--bottom) + 39px)
+  100%
+    bottom: var(--bottom)
+
 .home-carousel-mobile
   overflow: hidden
   .thumbnail,
index 511aa2a4118fd422a726c839e8bee0722e95eca7..178ad1ffb47922c4512a50f013b011ce73113eb3 100644 (file)
@@ -1,6 +1,10 @@
 .politique-de-confidentialite,
 .mentions-legales
-
+  .elementor-section:not(:first-child)
+    .elementor-widget-container
+      +screen-size(small-desktop)
+        width: 50%
+        margin: 0 auto
   *
     color: map-get($colors, 'grey', 'dark')
   h2
index 4bf3719cee36c541b04981984ccbc786cf714d51..df94c0f75937821eccdd29d7e78814d39d2761b0 100644 (file)
@@ -10,7 +10,6 @@
     margin-bottom: 84px
     font-size: 39px
 
-
   .swiper
 
     &-container
index b62d00004a344bed0202f0a8b35464dd8525639b..e15e4e86dfe09ee8386e2d2ebf90f914d12065d2 100644 (file)
@@ -1,7 +1,6 @@
 .assoc
   &-block
     padding-bottom: 86px
-    border-bottom: 1px solid #D8D8D8
     h3,h2
       width: 100%
       z-index: 1
index 696f911de8403268d743dfec11386cdee2edcc96..e4d057fe70ca943d3304bf1ed61d2227996c3073 100644 (file)
 
   &-image
     align-self: flex-start
+    +screen-size(small-desktop)
+      height: 100%
     +screen-size(small-desktop, 'max')
       margin-bottom: 18px
 
+    img
+      +screen-size(small-desktop)
+        height: 100%
+        object-fit: cover
+
+
   &-subtitle
     font-size: 20px
 
index 571ef86d42200110aebc9aa17c886abc72458d40..badf6d46cbb67e1030aa418f79406bde6813c43c 100644 (file)
@@ -1,11 +1,20 @@
 .text-blockbtn
-  display: grid
-  +special-gap(0)
   +screen-size(small-desktop)
+    display: grid
+    +special-gap(0)
     grid-template-columns: repeat(12, 1fr)
     grid-template-rows: 1fr auto auto 1fr
     align-items: flex-start
     height: fit-content
+  &-gallery:not(.gallery-columns-2)
+    +screen-size(small-desktop)
+      height: 100%
+      *
+        height: 100%
+      img
+        height: 100%
+        object-fit: cover
+
   &.gallery-left
     +screen-size(small-desktop)
       .text-blockbtn
index f1673a097251da3a69298ae5ed2712ef74ae993b..57b54741fb814fdf3a6a0a4417513182c9d0807d 100644 (file)
@@ -5,9 +5,14 @@
     &:not(.text-blockbtn-above-title)
       font-size: 27px
   &-bar
-    width: 100%
+    width: 0
     height: 38.8%
     position: absolute
     bottom: 0
     left: 0
     z-index: 0
+    transition: width .9s ease-in-out
+
+  &.active
+    .highlight-bar
+      width: 100%
index a91f97fdf8ed7ce1a4aec1f9891546f441d4d89c..ad76029437fee193a77e34e7a1669a388f609b2e 100644 (file)
@@ -3,13 +3,12 @@
     @php
       $key += 1;
     @endphp
-    <div class="elementor-repeater-item-{{$slide['_id']}} carousel-slide container {{ $key === 1 ? 'active' : '' }}">
-      <div class="leftside">
+    <div class="elementor-repeater-item-{{$slide['_id']}} carousel-slide container {{ $key === 2 ? 'next' : '' }} {{ $key === 1 ? 'active' : '' }}">
+      <div class="leftside {{ $key === 1 ? 'active' : '' }}">
         <div class="overlay overlayside" style="background-image: url({{$slide['background_image']['url']}})"></div>
         @if(array_key_exists('image',$slide))
           <div class="thumbnail">
             <img src="{{ $slide['image']['url'] }})" />
-            <img class="bg" src="{{ $slide['background_image']['url']}} " />
           </div>
         @endif
       </div>