Changeset View
Changeset View
Standalone View
Standalone View
landing/mobile-nav.css
nav.mobileNav { | nav.mobileNav { | ||||
position: absolute; | position: absolute; | ||||
top: -110vh; | top: -110vh; | ||||
bottom: auto; | bottom: auto; | ||||
left: 0; | left: 0; | ||||
right: 0; | right: 0; | ||||
height: 100vh; | height: 100vh; | ||||
z-index: 1; | z-index: 1; | ||||
background-color: var(--comparison-cards); | background-color: transparent; | ||||
padding: 8px 16px 0; | padding: 8px 16px 0; | ||||
transition: 500ms; | transition: top 500ms, background-color 0ms 500ms; | ||||
atul: Hm, so if I understand correctly it looks like we transition the `background-color` all at once… | |||||
ginsuAuthorUnsubmitted Done Inline ActionsYes so immediately after the top transition finishes (the mobile nav bar slides out) we change the background-color back to transparent ginsu: Yes so immediately after the top transition finishes (the mobile nav bar slides out) we change… | |||||
transition-property: top; | |||||
} | } | ||||
nav.activeMobileNav { | nav.activeMobileNav { | ||||
top: 0; | top: 0; | ||||
transition: 500ms; | transition: top 500ms; | ||||
transition-property: top; | background-color: var(--comparison-cards); | ||||
} | } | ||||
div.tabContainer { | div.tabContainer { | ||||
border-bottom: 1px solid var(--black-90); | border-bottom: 1px solid var(--black-90); | ||||
-webkit-tap-highlight-color: transparent; | -webkit-tap-highlight-color: transparent; | ||||
} | } | ||||
.tab { | .tab { | ||||
color: var(--white-60); | color: var(--white-60); | ||||
transition: 150ms; | transition: color 150ms; | ||||
ginsuAuthorUnsubmitted Done Inline ActionsNot a super related change, but thought it would be good to make all the transitions consistent in this file ginsu: Not a super related change, but thought it would be good to make all the transitions consistent… | |||||
transition-property: color; | |||||
} | } | ||||
.activeTab { | .activeTab { | ||||
color: var(--white-100); | color: var(--white-100); | ||||
} | } | ||||
.tabContent { | .tabContent { | ||||
padding: 16px 0; | padding: 16px 0; | ||||
Show All 15 Lines |
Hm, so if I understand correctly it looks like we transition the background-color all at once (0ms duration) AFTER a 500ms delay.