refactor: improve transitions

sbb-design-systems · Jan 29, 2024 · 1701fc3 · 1701fc3
1 parent bd7e1f7
commit 1701fc3
Showing 1 changed file with 23 additions and 17 deletions.
diff --git a/src/components/container/sticky-bar/sticky-bar.scss b/src/components/container/sticky-bar/sticky-bar.scss
@@ -7,45 +7,45 @@
   --sbb-sticky-bar-animation-duration: var(--sbb-animation-duration-5x);
   --sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);
   --sbb-sticky-bar-intersector-height: #{sbb.px-to-rem-build(1)};
-  --sbb-sticky-bar-background-color: var(
-    --sbb-container-background-color,
+  --sbb-sticky-bar-background-color: var(--sbb-container-background-color);
+  --sbb-sticky-bar-sticky-background-color: var(
+    --sbb-sticky-bar-background-color,
     var(--sbb-color-white-default)
   );
 
   display: contents;
 }
 
 :host([color='white']) {
-  --sbb-sticky-bar-background-color: var(--sbb-color-white-default);
+  --sbb-sticky-bar-sticky-background-color: var(--sbb-color-white-default);
 }
 
 :host([color='milk']) {
-  --sbb-sticky-bar-background-color: var(--sbb-color-milk-default);
+  --sbb-sticky-bar-sticky-background-color: var(--sbb-color-milk-default);
 }
 
-:host([color='midnight'][data-sticking]) {
-  --sbb-sticky-bar-background-color: var(--sbb-color-midnight-default);
+:host([color='midnight']) {
+  --sbb-sticky-bar-sticky-background-color: var(--sbb-color-midnight-default);
   --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
 
   color: var(--sbb-color-white-default);
 }
 
-:host(:not([data-sticking])) {
-  --sbb-sticky-bar-background-color: transparent;
-}
-
 .sbb-sticky-bar__wrapper {
   box-shadow: none;
   position: sticky;
   inset-block-end: 0;
   display: block;
   width: 100%;
-  background-color: var(--sbb-sticky-bar-background-color);
-  transition: box-shadow var(--sbb-sticky-bar-animation-duration) var(--sbb-sticky-bar-animation-easing) 0, background-color var(--sbb-sticky-bar-animation-duration) var(--sbb-sticky-bar-animation-easing) 0;
+  transition-property: box-shadow, background-color;
+  transition-duration: var(--sbb-sticky-bar-animation-duration);
+  transition-timing-function: var(--sbb-sticky-bar-animation-easing);
 
   :host([data-sticking]) & {
     @include sbb.shadow-level-5-hard;
 
+    background-color: var(--sbb-sticky-bar-sticky-background-color);
+
     @include sbb.if-forced-colors {
       border-block-start: var(--sbb-border-width-1x) solid CanvasText;
     }
@@ -55,8 +55,7 @@
 .sbb-sticky-bar {
   display: flex;
   padding-block: var(--sbb-sticky-bar-padding-block);
-  transition-property: background-color;
-  transition-delay: var(--sbb-sticky-bar-animation-duration);
+  background-color: var(--sbb-sticky-bar-background-color, transparent);
 
   :host(:not([data-expanded])) & {
     @include sbb.page-spacing;
@@ -66,9 +65,16 @@
     @include sbb.page-spacing-expanded;
   }
 
-  :host(:not([data-sticking])) & {
-    background-color: var(--sbb-container-background-color, var(--sbb-color-white-default));
-    transition-delay: 0;
+  // Should only be animated if there is an override color in sticky bar when becoming settled.
+  :host(:not([data-sticking])[color]) & {
+    transition-property: background-color;
+    transition-duration: var(--sbb-sticky-bar-animation-duration);
+    transition-timing-function: var(--sbb-sticky-bar-animation-easing);
+  }
+
+  // When having a color defined, transparent background should always be chosen as the wrapper is now dominating the color.
+  :host([data-sticking][color]) & {
+    background-color: transparent;
   }
 }