From 99f3a5dbccc28be41aa7872d7a1a2442ddbe5e17 Mon Sep 17 00:00:00 2001 From: Cadence Ember Date: Fri, 27 Mar 2020 17:02:55 +1300 Subject: [PATCH] Fixes: - Top bar uses flex until it's wide enough, then grid - Fix button active style when top bar has colour --- src/renderer/components/top-nav/top-nav.sass | 23 +++++++++++--------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/src/renderer/components/top-nav/top-nav.sass b/src/renderer/components/top-nav/top-nav.sass index f53229e7..d3aa374a 100644 --- a/src/renderer/components/top-nav/top-nav.sass +++ b/src/renderer/components/top-nav/top-nav.sass @@ -13,17 +13,17 @@ line-height: 60px background-color: var(--card-bg-color) -webkit-box-shadow: 0px 2px 1px 0px var(--primary-shadow-color) - display: grid - grid-template-columns: 1fr auto 1fr + display: flex align-items: center + align-content: center + + @media only screen and (min-width: 901px) + display: grid + grid-template-columns: 1fr 440px 1fr @include top-nav-is-colored background-color: var(--primary-color) -.menuIcon // the hamburger menu button - @include top-nav-is-colored - background-color: var(--primary-color-active) - @media only screen and (max-width: 680px) display: none @@ -51,6 +51,9 @@ background-color: var(--tertiary-text-color) transition: background 0.2s ease-in + @include top-nav-is-colored + background-color: var(--primary-color-active) + .side // parts of the top nav either side of the search bar display: flex align-items: center @@ -93,6 +96,9 @@ background-image: var(--logo-text-bar-color) .middle // the middle part of the top nav which contains the search bar + max-width: 440px + flex: 1 + .searchContainer display: flex align-items: center @@ -105,10 +111,7 @@ background-color: var(--side-nav-color) .searchInput - width: 420px - - @media only screen and (max-width: 680px) - flex: 1 + flex: 1 .searchFilters position: absolute