Merge pull request #653 from fedspendingtransparency/staging

Promote staging to prod

src/_scss/layouts/default/footer/_footerLinks.scss

@@ -14,7 +14,7 @@
 
     .link-group {
         display: block;
-        margin-bottom: rem(15);
+        margin-bottom: rem(35);
         &:first-child {
             margin-top: rem(15);
         }

src/_scss/layouts/default/footer/_footerLogo.scss

@@ -12,7 +12,7 @@
     }
 
     img {
-        height: rem(20);
+        height: rem(30);
         margin-bottom: rem(10);
         @include media($tablet-screen) {
             height: auto;

src/_scss/layouts/default/footer/footer.scss

@@ -5,22 +5,22 @@
     background-color: #333;
     color: $color-white;
     font-size: $base-font-size;
-    padding-top: 1.5rem;
+    padding-top: rem(65);
+
+    @include media($tablet-screen) {
+        padding-top: rem(40);
+    }
+
     width: 100%;
     .footer-container {
         @include outer-container;
-        @include pad(1rem 2rem);
+        @include pad(0 0 rem(30));
         max-width: $site-max-width;
         @include media($tablet-screen) {
-            @include pad(1rem 2rem 3rem 2rem);
+            @include pad(0 rem(60) rem(60));
             @include display(flex);
             @include align-items(flex-start);
         }
-        @include media($x-large-screen) {
-            margin: 0 auto;
-            max-width: $site-max-width;
-            padding: 1rem 0;
-        }
 
         @import "./_footerLogo";
         @import "./_footerLinks";

src/_scss/layouts/default/header/_officialSite.scss

@@ -0,0 +1,25 @@
+.official-banner {
+    .official-banner__wrapper {
+        padding: rem(5) rem(15);
+        background-color: #F9F9F9;
+
+        @include display(flex);
+        @include justify-content(flex-end);
+        @include align-items(flex-end);
+    }
+
+    .official-banner__text {
+        @include flex(0 0 auto);
+        margin-right: rem(10);
+
+        font-size: rem(10);
+        line-height: rem(13);
+        color: $color-base;
+    }
+
+    .official-banner__flag {
+        @include flex(0 0 auto)
+        width: rem(16);
+        height: rem(11);
+    }
+}

src/_scss/layouts/default/header/header.scss

@@ -1,8 +1,7 @@
 .site-header {
     @import "./_warning";
-    @import "./_positioning";
     @import "./nav/headerNav";
-    @import "./_logo";
+    @import "./_officialSite";
 
     .skip-nav {
         @include skipNav;

src/_scss/layouts/default/header/nav/_comingSoon.scss

@@ -0,0 +1,34 @@
+.nav-coming-soon {
+    @include display(flex);
+    @include align-items(center);
+    @include justify-content(center);
+    position: relative;
+
+    .nav-coming-soon__icon {
+        @include flex(0 0 auto);
+        svg {
+            height: rem(16);
+            width: rem(16);
+            fill: $nav-coming-soon;
+
+            @include media($medium-screen) {
+                height: rem(10);
+                width: rem(10);
+            }
+        }
+    }
+
+    .nav-coming-soon__label {
+        @include flex(1 1 auto);
+        margin-left: rem(5);
+        font-size: rem(16);
+        line-height: 1.2;
+        font-weight: $font-normal;
+        color: $nav-coming-soon;
+
+        @include media($medium-screen) {
+            font-size: rem(11);
+            line-height: rem(14);
+        }
+    }
+}

src/_scss/layouts/default/header/nav/_dropdownMenu.scss

@@ -0,0 +1,90 @@
+.nav-dropdown {
+    $dropdown-hover: #EEEEEE;
+    $dropdown-border: #DCDCDC;
+    @import "./_comingSoon";
+
+    .nav-dropdown__parent {
+        @include button-unstyled;
+        @include display(flex);
+        @include align-items(center);
+        @include justify-content(center);
+        position: relative;
+        padding: rem(18) rem(20);
+
+        &:hover, &:active, &.nav-dropdown__parent_active {
+            box-shadow: 0 2px 6px 0 rgba(78,78,78,0.5);
+        }
+    }
+    .nav-dropdown__parent-label {
+        @include flex(1 1 auto);
+        color: $nav-color;
+        font-weight: $font-semibold;
+        font-size: rem(15);
+        line-height: rem(19);
+    }
+    .nav-dropdown__parent-icon {
+        @include flex(0 0 auto);
+        margin-left: rem(10);
+
+        svg {
+            width: rem(10);
+            height: rem(10);
+            fill: $nav-color;
+            margin-top: rem(3);
+        }
+    }
+
+    .nav-children {
+        display: none;
+        position: relative;
+        z-index: $z-header + 1;
+
+        &.nav-children_active {
+            display: block;
+        }
+
+        ul.nav-children__list {
+            @include unstyled-list;
+            position: absolute;
+            left: 0;
+            width: rem(200);
+            background-color: $color-white;
+            box-shadow: 0 4px 5px 0 rgba(0,0,0,0.5);
+
+            border-top: 1px solid $dropdown-border;
+        }
+
+        hr.nav-children__list-separator {
+            border: none;
+            border-bottom: 1px solid $dropdown-border;
+            margin: 0 rem(13);
+
+            &.nav-children__list-separator_hidden {
+                display: none;
+            }
+        }
+
+        a.nav-children__link {
+            display: block;
+
+            font-size: rem(15);
+            line-height: rem(19);
+            color: $nav-color;
+            font-weight: $font-semibold;
+
+            padding: rem(15) rem(20);
+
+            &:hover, &:active {
+                text-decoration: none;
+                background-color: $dropdown-hover;
+            }
+
+            &.nav-children__link_disabled {
+                pointer-events: none;
+                cursor: not-allowed;
+                font-weight: $font-normal;
+                color: $nav-coming-soon;
+            }
+        }
+    }
+}

src/_scss/layouts/default/header/nav/_fullMenu.scss

@@ -0,0 +1,43 @@
+.full-menu {
+    ul.full-menu__list {
+        @include unstyled-list;
+        @include display(flex);
+        @include flex-direction(row);
+        @include align-items(center);
+        @include justify-content(flex-end);
+        position: relative;
+
+        li.full-menu__item {
+            @include flex(0 0 auto);
+            @include display(flex);
+            @include align-items(center);
+            @include justify-content(center);
+            position: relative;
+
+            a.full-menu__link {
+                @include flex(1 1 auto);
+
+                font-weight: $font-semibold;
+                font-size: rem(15);
+                line-height: rem(19);
+                text-align: center;
+                padding: rem(18) rem(20);
+
+                color: $nav-color;
+                text-decoration: none;
+
+                &:hover, &:active {
+                    text-decoration: none;
+                    box-shadow: 0 2px 6px 0 rgba(78,78,78,0.5);
+                }
+
+            }
+
+            .full-menu__dropdown {
+                @include flex(1 1 auto);
+            }
+        }
+        @import "./_dropdownMenu";
+        @import "./_glossaryLink";
+    }
+}

src/_scss/layouts/default/header/nav/_glossaryLink.scss

@@ -0,0 +1,34 @@
+// style the glossary button
+.glossary-nav {
+    @include button-unstyled;
+    @include display(flex);
+    @include justify-content(center);
+    @include align-items(center);
+    padding: rem(15) rem(20);
+
+    &:hover, &:active {
+        box-shadow: 0 2px 6px 0 rgba(78,78,78,0.5);
+    }
+
+    .glossary-nav__icon {
+        @include flex(0 0 auto)
+        width: rem(15);
+        height: rem(15);
+        margin-right: rem(10);
+
+        svg {
+            margin-top: rem(2);
+            height: rem(15);
+            width: rem(15);
+            fill: $nav-color;
+        }
+    }
+
+    .glossary-nav__label {
+        @include flex(1 1 auto);
+        color: $nav-color;
+        font-weight: $font-semibold;
+        font-size: rem(15);
+        line-height: rem(19);
+    }
+}