fix: timeline nav tweaks and sticky behavior

chanzuckerberg · Jun 23, 2022 · 7d999ac · 7d999ac
1 parent f950232
commit 7d999ac
Showing 1 changed file with 13 additions and 10 deletions.
diff --git a/src/components/TimelineNav/TimelineNav.module.css b/src/components/TimelineNav/TimelineNav.module.css
@@ -9,23 +9,24 @@
  */
 .timeline-nav {
   display: flex;
+  gap: var(--eds-size-2);
   width: 100%;
   overflow: hidden;
   transition: var(--eds-anim-fade-long) var(--eds-anim-ease);
   background: var(--eds-theme-color-background-neutral-default);
-  border-width: var(--eds-theme-border-width);
-  border-style: solid;
-  border-color: var(--eds-theme-color-border-neutral-subtle);
-  border-radius: var(--eds-border-radius-md);
 
   @media all and (min-width: $eds-bp-lg) {
     transition: unset;
-    gap: var(--eds-size-2);
+    border-width: var(--eds-theme-border-width);
+    border-style: solid;
+    border-color: var(--eds-theme-color-border-neutral-subtle);
+    border-radius: var(--eds-border-radius-md);
+    overflow: visible;
   }
 }
 
 .timeline-nav.eds-is-active {
-  transform: translateX(-100%);
+  transform: translateX(calc(-100% - 1rem));
   overflow: visible;
 
   @media all and (min-width: $eds-bp-lg) {
@@ -43,8 +44,9 @@
   width: 100%;
   flex-shrink: 0;
   padding: var(--eds-size-4) 0;
-  
+
   @media all and (min-width: $eds-bp-lg) {
+    position: relative;
     padding: var(--eds-size-5);
     width: 33.33%;
     flex-shrink: initial;
@@ -63,17 +65,17 @@
   position: absolute;
   height: 0;
   width: 0;
-  overflow: hidden; 
+  overflow: hidden;
   flex-shrink: 0;
   padding: var(--eds-size-2) 0;
 
   @media all and (min-width: $eds-bp-lg) {
     display: block;
     position: static;
     z-index: var(--eds-z-index-0);
-    flex-shrink: 1;
+    flex: 1;
     width: 100%;
-    height: 100%;
+    height: auto;
     overflow: visible;
     visibility: visible;
     transform: translateX(0);
@@ -92,6 +94,7 @@
 
   @media all and (min-width: $eds-bp-lg) {
     transform: unset;
+    height: auto;
   }
 }