From a2367bcab84bbcfba92d1750cc8f2e636a8e67a3 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Thu, 10 Oct 2019 12:05:53 +0100
Subject: [PATCH] Make header & footer components look like Notify

Notify has 4 columns of links in the footer and
its header navigation aligns to the right on
desktop.
---
 app/assets/stylesheets/govuk-frontend/_all.scss      |  6 ++++++
 .../stylesheets/govuk-frontend/extensions.scss       |  9 +++++++++
 app/assets/stylesheets/govuk-frontend/overrides.scss | 12 ++++++++++++
 3 files changed, 27 insertions(+)
 create mode 100644 app/assets/stylesheets/govuk-frontend/extensions.scss
 create mode 100644 app/assets/stylesheets/govuk-frontend/overrides.scss

diff --git a/app/assets/stylesheets/govuk-frontend/_all.scss b/app/assets/stylesheets/govuk-frontend/_all.scss
index 0b103ce49..56cc5fa0f 100644
--- a/app/assets/stylesheets/govuk-frontend/_all.scss
+++ b/app/assets/stylesheets/govuk-frontend/_all.scss
@@ -19,3 +19,9 @@ $govuk-assets-path: "/static/";
 
 @import "utilities/all";
 @import "overrides/all";
+
+// Styles extending those from GOV.UK Frontend
+@import './extensions';
+
+// Styles for GOV.UK Frontend components specific to this application
+@import './overrides';
diff --git a/app/assets/stylesheets/govuk-frontend/extensions.scss b/app/assets/stylesheets/govuk-frontend/extensions.scss
new file mode 100644
index 000000000..e28474b05
--- /dev/null
+++ b/app/assets/stylesheets/govuk-frontend/extensions.scss
@@ -0,0 +1,9 @@
+// Extends footer column styles to allow 4 columns
+@include mq ($from: desktop) {
+  .govuk-footer__list--columns-4 {
+    // TODO: Move support for legacy properties to something like Post-CSS's auto-prefixer
+    -webkit-column-count: 4;
+    -moz-column-count: 4;
+    column-count: 4;
+  }
+}
diff --git a/app/assets/stylesheets/govuk-frontend/overrides.scss b/app/assets/stylesheets/govuk-frontend/overrides.scss
new file mode 100644
index 000000000..aef057799
--- /dev/null
+++ b/app/assets/stylesheets/govuk-frontend/overrides.scss
@@ -0,0 +1,12 @@
+// Overrides for certain GOV.UK Frontend styles to make its components match this application's design
+
+// Notify's header navigation aligns to the right
+.govuk-header__navigation {
+  text-align: right;
+
+  // reset the alignment of each item to left-to-right
+  .govuk-header__navigation-item {
+    text-align: left;
+  }
+
+}