refactor: improve css (#2375)

sbb-design-systems · Jan 30, 2024 · 0237ae7 · 0237ae7
1 parent 8db9a8b
commit 0237ae7
Showing 1 changed file with 19 additions and 21 deletions.
diff --git a/src/components/container/sticky-bar/sticky-bar.scss b/src/components/container/sticky-bar/sticky-bar.scss
@@ -6,33 +6,32 @@
   --sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xxxs);
   --sbb-sticky-bar-animation-duration: var(--sbb-animation-duration-5x);
   --sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);
-  --sbb-sticky-bar-background-color: var(
+
+  display: contents;
+}
+
+:host([data-sticking]) {
+  --sbb-sticky-bar-sticky-background-color: var(
     --sbb-container-background-color,
     var(--sbb-color-white-default)
   );
-
-  display: contents;
 }
 
-:host([color='white']) {
-  --sbb-sticky-bar-background-color: var(--sbb-color-white-default);
+:host([data-sticking][color='white']) {
+  --sbb-sticky-bar-sticky-background-color: var(--sbb-color-white-default);
 }
 
-:host([color='milk']) {
-  --sbb-sticky-bar-background-color: var(--sbb-color-milk-default);
+:host([data-sticking][color='milk']) {
+  --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([data-sticking][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 {
   position: sticky;
   inset-block-end: 0;
@@ -41,11 +40,11 @@
 }
 
 .sbb-sticky-bar__wrapper::before {
-  position: absolute;
   content: '';
-  background-color: var(--sbb-sticky-bar-background-color);
-  z-index: -1;
+  position: absolute;
   inset: 0;
+  z-index: -1;
+  background-color: var(--sbb-sticky-bar-sticky-background-color, transparent);
   transition-property: background-color, box-shadow;
   transition-duration: var(--sbb-sticky-bar-animation-duration);
   transition-timing-function: var(--sbb-sticky-bar-animation-easing);
@@ -62,7 +61,10 @@
 .sbb-sticky-bar {
   display: flex;
   padding-block: var(--sbb-sticky-bar-padding-block);
-  background-color: var(--sbb-sticky-bar-background-color);
+  background-color: var(
+    --sbb-sticky-bar-sticky-background-color,
+    var(--sbb-container-background-color)
+  );
   transition-property: background-color;
   transition-duration: var(--sbb-sticky-bar-animation-duration);
   transition-timing-function: var(--sbb-sticky-bar-animation-easing);
@@ -74,10 +76,6 @@
   :host([data-expanded]) & {
     @include sbb.page-spacing-expanded;
   }
-
-  :host(:not([data-sticking])) & {
-    background-color: var(--sbb-container-background-color, var(--sbb-color-white-default));
-  }
 }
 
 .sbb-sticky-bar__intersector {