feat: gdh-1258 | caption animation UX feedback

nl-design-system · Aug 3, 2023 · d7d1486 · d7d1486
1 parent c793beb
commit d7d1486
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 14 deletions.
diff --git a/components/InlineCarousel/src/index.scss b/components/InlineCarousel/src/index.scss
@@ -15,9 +15,9 @@
   border-color: var(--denhaag-inline-carousel-slide-border-color);
 
   &.swiper-slide-active {
-    .denhaag-inline-carousel__content {
-      opacity: var(--denhaag-inline-carousel-content-active-opacity);
-      transition-delay: var(--denhaag-inline-carousel-content-active-transition-delay);
+    .denhaag-inline-carousel__content-caption {
+      opacity: var(--denhaag-inline-carousel-content-caption-active-opacity);
+      transition-delay: var(--denhaag-inline-carousel-content-caption-active-transition-delay);
     }
   }
 }
@@ -66,10 +66,8 @@
   margin-block-end: var(--denhaag-inline-carousel-content-margin-block);
   display: var(--denhaag-inline-carousel-content-display);
   justify-content: var(--denhaag-inline-carousel-content-justify-content);
-  align-items: var(--denhaag-inline-carousel-content-align-items);
-  max-width: var(--denhaag-inline-carousel-content-max-width);
-  opacity: var(--denhaag-inline-carousel-content-opacity);
-  transition: var(--denhaag-inline-carousel-content-transition);
+  align-items: var(--denhaag-inline-carousel-content-caption-align-items);
+  max-width: var(--denhaag-inline-carousel-content-caption-max-width);
 }
 
 .denhaag-inline-carousel__content-caption {
@@ -81,6 +79,8 @@
   color: var(--denhaag-inline-carousel-content-caption-color);
   margin-block-start: var(--denhaag-inline-carousel-content-caption-margin-block);
   margin-block-end: var(--denhaag-inline-carousel-content-caption-margin-block);
+  opacity: var(--denhaag-inline-carousel-content-caption-opacity);
+  transition: var(--denhaag-inline-carousel-content-caption-transition);
 }
 
 .denhaag-inline-carousel__content-download {

diff --git a/proprietary/Components/src/denhaag/inline-carousel.tokens.json b/proprietary/Components/src/denhaag/inline-carousel.tokens.json
@@ -51,20 +51,20 @@
         "justify-content": { "value": "space-between" },
         "align-items": { "value": "center" },
         "max-width": { "value": "100%" },
-        "opacity": { "value": "0" },
-        "transition": { "value": "opacity 350ms ease" },
-        "active": {
-          "opacity": { "value": "1" },
-          "transition-delay": { "value": "800ms" }
-        },
         "caption": {
           "display": { "value": "flex" },
           "color": { "value": "{denhaag.color.grey.4}" },
           "align-items": { "value": "center" },
           "font-family": { "value": "{denhaag.typography.sans-serif.font-family}" },
           "font-size": { "value": "{denhaag.typography.scale.base.font-size}" },
           "font-weight": { "value": "{denhaag.typography.weight.regular}" },
-          "margin-block": { "value": "0px" }
+          "margin-block": { "value": "0px" },
+          "opacity": { "value": "0" },
+          "transition": { "value": "opacity 350ms ease" },
+          "active": {
+            "opacity": { "value": "1" },
+            "transition-delay": { "value": "800ms" }
+          }
         },
         "download": {
           "width": { "value": "24px" },