srcdev-nuxt-components 2.5.14 → 2.5.16

package/components/image-galleries/SliderGallery.vue

@@ -14,7 +14,7 @@
             <div v-show="item.stylist !== ''" class="author" :class="item.textBrightness">{{ item.stylist }}</div>
             <div v-show="item.title !== ''" class="title" :class="item.textBrightness">{{ item.title }}</div>
             <div v-show="item.category !== ''" class="topic" :class="item.textBrightness">{{ item.category }}</div>
-            <div v-show="item.description !== ''" class="des" :class="item.textBrightness">{{ item.description }}</div>
+            <div v-show="item.description !== ''" class="description" :class="item.textBrightness">{{ item.description }}</div>
             <div class="buttons" :class="item.textBrightness">
               <button>SEE MORE</button>
             </div>
@@ -270,11 +270,6 @@ onBeforeUnmount(() => {
   --_thumbnailWidth: var(--_thumbnailMobileWidth, 100px);
   --_thumbnailHeight: var(--_thumbnailMobileHeight, 165px);
 
-  @container (width >= 1024px) {
-    --_thumbnailWidth: var(--_thumbnailDesktopWidth, 150px);
-    --_thumbnailHeight: var(--_thumbnailDesktopHeight, 220px);
-  }
-
   height: 100svh;
   width: 100vw;
   overflow: hidden;
@@ -345,7 +340,7 @@ onBeforeUnmount(() => {
           .author,
           .title,
           .topic,
-          .des,
+          .description,
           .buttons {
             transform: translateY(50px);
             filter: blur(20px);
@@ -359,7 +354,7 @@ onBeforeUnmount(() => {
           .topic {
             animation-delay: 1.4s !important;
           }
-          .des {
+          .description {
             animation-delay: 1.6s !important;
           }
           .buttons {
@@ -464,6 +459,11 @@ onBeforeUnmount(() => {
     display: flex;
     gap: 20px;
 
+    @container (width >= 1024px) {
+      --_thumbnailWidth: var(--_thumbnailDesktopWidth, 150px);
+      --_thumbnailHeight: var(--_thumbnailDesktopHeight, 220px);
+    }
+
     .item {
       width: var(--_thumbnailWidth);
       height: var(--_thumbnailHeight);
@@ -473,12 +473,12 @@ onBeforeUnmount(() => {
       border: var(--_thumbnailBorder, 1px solid transparent);
       outline: var(--_thumbnailOutline, 1px solid transparent);
       border-radius: var(--_thumbnailBorderRadius, 20px);
+      overflow: hidden;
 
       .inner {
         position: absolute;
         inset: 0 0 0 0;
         background-color: #0004;
-        border-radius: var(--_thumbnailBorderRadius, 20px);
         z-index: 2;
       }
 
@@ -486,7 +486,6 @@ onBeforeUnmount(() => {
         width: 100%;
         height: 100%;
         object-fit: cover;
-        border-radius: 20px;
       }
 
       .content {
@@ -639,7 +638,7 @@ onBeforeUnmount(() => {
             .author,
             .title,
             .topic,
-            .des,
+            .description,
             .buttons {
               animation: contentOut 1.5s linear 1 forwards !important;
             }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "2.5.14",
+  "version": "2.5.16",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",