Add Sass variable for header top border.

This makes it easier to change/remove the default top border, with
subsequent measurements adjusting accordingly.

2 files changed, 16 insertions, 3 deletions

diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 1a6051ae1..1c87bf95e 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -11,6 +11,8 @@ $itemlist_item_background_hover: #e6e6e6 !default;
 $col_big_numbers: #ccc !default;
 
 $form-control-border-color: #aaaaaa !default;
+$header-top-border-width: 0.25em !default;
+$header-top-border: $header-top-border-width solid $primary !default;
 
 @import "_mixins";
 @import "_report_list";
@@ -469,7 +471,9 @@ ul.error {
 
 // #site-header creates grey bar in mobile
 #site-header {
-  border-top: 0.25em solid $primary;
+  @if ($header-top-border) {
+    border-top: $header-top-border;
+  }
   @include linear-gradient(#000, #222 10%, #222 90%, #000);
   position: relative;
 }
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index cedcc6ed0..6da7c6aba 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -9,6 +9,8 @@ $mappage-notes-width: 15em;
 $mappage-actions-width: 25em;
 $mappage-sidebar-width--medium: 24em;
 $mappage-actions-width--medium: 20em;
+$header-top-border-width: 0.25em !default;
+$header-top-border: $header-top-border-width solid $primary !default;
 
 .internal-link-fixed-header {
     display: block;
@@ -65,11 +67,14 @@ h1 {
 }
 
 #main-nav {
-  min-height: 60px; // set this to height of #site-logo + any vertical padding
+  min-height: $mappage-header-height; // defaults to map header height; should be height of #site-header (eg: #site-logo + any vertical padding)
   @include flex-container();
   @include flex-align(center);
   float: $right; // we could use justify-content here, but float degrades better for non-flexbox browsers
   margin: 0;
+  @if ($header-top-border) {
+    margin-top: $header-top-border-width * -1; // visually compensate for border on #site-header
+  }
 }
 
 #site-logo {
@@ -90,7 +95,11 @@ h1 {
 
 .nav-wrapper {
   position: absolute;
-  top: 0.25em; // set this to whatever border-top #site-header has
+  @if ($header-top-border) {
+    top: $header-top-border-width;
+  } @else {
+    top: 0;
+  }
   left: 0;
   right: 0;
 }