]> _ Git - spinepro.git/commitdiff
wait #6971 @0:40
authorsoufiane <soufiane@cubedesigners.com>
Wed, 3 Jul 2024 15:59:13 +0000 (17:59 +0200)
committersoufiane <soufiane@cubedesigners.com>
Wed, 3 Jul 2024 15:59:13 +0000 (17:59 +0200)
wp-content/themes/CCV/dist/styles/app.css
wp-content/themes/CCV/resources/assets/styles/widgets/link-carousel.styl
wp-content/themes/CCV/resources/views/widgets/link-carousel.blade.php

index 4f53a69c7317896035deae5c2084d79f627f52f0..8ab0cc01b4a2cd87fdfd43481907dd3ec6801bfb 100644 (file)
@@ -3141,6 +3141,23 @@ h4,
   }
 }
 
+@media only screen and (min-width: 1919px) {
+  .elementor-element-68240c5 {
+    margin-bottom: 50px !important;
+  }
+}
+
+.link-carousel {
+  max-width: 1463px;
+  margin: 0 auto;
+}
+
+@media only screen and (min-width: 1919px) {
+  .link-carousel {
+    padding-bottom: 100px;
+  }
+}
+
 .link-carousel-item {
   height: auto !important;
   display: flex;
@@ -3149,19 +3166,14 @@ h4,
   cursor: pointer;
 }
 
-@media only screen and (min-width: 500px) {
-  .link-carousel-item {
-    border-right: 1px solid rgba(255,255,255,0.2);
-  }
-}
-
 .link-carousel-item-image {
   flex-grow: 1;
-  padding: 2.5em 1em 1em;
+  max-height: 180px;
 }
 
 .link-carousel-item-image img {
-  width: 50%;
+  width: 100%;
+  height: 100%;
   margin: 0 auto;
 }
 
@@ -3178,10 +3190,7 @@ h4,
   font-size: 26px;
   font-size: 1.181818181818182rem;
   transition: background-color 0.2s ease-out;
-}
-
-.link-carousel-item:hover .link-carousel-item-title {
-  background-color: #FFBF29;
+  font-weight: 100;
 }
 
 .link-carousel-prev,
index f83993b2fad1dcdf3ffee46c1853831aa8599e37..e8993a51d0c536c5dca9979858332840d1d7dbfa 100644 (file)
@@ -1,4 +1,12 @@
+.elementor-element-68240c5
+  +above(1919px)
+    margin-bottom: 50px !important
+
 .link-carousel
+  max-width: 1463px;
+  margin: 0 auto;
+  +above(1919px)
+    padding-bottom: 100px
 
   &-item
     height: auto !important // Needed to make equal heights, otherwise Swiper's 100% height breaks this
     cursor: pointer
 
     +above(500px)
-      border-right: 1px solid rgba(#fff, 0.2)
+      //border-right: 1px solid rgba(#fff, 0.2)
 
     &-image
       flex-grow: 1
-      padding: 2.5em 1em 1em
+      //padding: 2.5em 1em 1em
+      max-height: 180px
 
       img
-        width: 50%
+        width: 100%
+        height 100%
         margin: 0 auto
 
     &-title
       padding: 1em
       font-size: 26px
       transition: background-color 0.2s ease-out
-
-      .link-carousel-item:hover &
-        @apply bg-yellow
-
+      font-weight: 100
 
   &-prev, &-next
     position: absolute
index c38736196e2fd38527ed4947d89cfbd644f838cb..ccff660dc9dde52bd2d50acd832f1ee065983245 100644 (file)
@@ -5,14 +5,20 @@
     'loop' => true,
     'breakpoints' => [
         500 => [
+          'spaceBetween' => 0,
           'slidesPerView' => 2 // 500px -> 767px
         ],
         768 => [
+          'spaceBetween' => 0,
           'slidesPerView' => 3 // 768px -> 1199px
         ],
         1200 => [
-          'slidesPerView' => 4 // >= 1200px
+         'slidesPerView' => 3 // >= 1200px
         ],
+        1600 => [
+            'slidesPerView' => 3, // >= 1200px
+            'spaceBetween' => 214 // >= 1600px
+        ]
     ],
     'navigation' => [
       'nextEl' => '.link-carousel-next',
   <div class="swiper-wrapper">
     @foreach ($links as $link)
       @php($linkurl = str_replace('/en','',$link['link']['url']))
-      <a class="link-carousel-item swiper-slide" href="{{ $linkurl }}">
+      @if(!$link['link']['url'])
+        <a class="link-carousel-item swiper-slide" href="{{ $linkurl }}">
+      @else
+        <div class="link-carousel-item swiper-slide" style="cursor: auto">
+      @endif
         <div class="link-carousel-item-image">
           <img src="{{ $link['image']['url'] }}" alt="{{ $link['title'] }}">
         </div>
         <h4 class="link-carousel-item-title">{{ $link['title'] }}</h4>
-      </a>
+      @if(!$link['link']['url'])
+        </a>
+      @else
+        </div>
+      @endif
     @endforeach
   </div>
   <div class="link-carousel-prev">@svg('carousel-prev', 'stroke-current')</div>