[BANES] Updated header/footer/navigation.

11 files changed, 543 insertions, 90 deletions

diff --git a/web/cobrands/bathnes/_colours.scss b/web/cobrands/bathnes/_colours.scss
index a5d58da01..18497f45b 100644
--- a/web/cobrands/bathnes/_colours.scss
+++ b/web/cobrands/bathnes/_colours.scss
@@ -1,33 +1,43 @@
-/* LAYOUT */
-
-// If you are wanting a right-to-left layout, uncomment the following line.
-// $direction: right;
+$mappage-header-height: 9.6em;
+
+/* GOV.UK frontend toolkit bits, adapted */
+$site-width: 60em;
+@mixin media($size: false) {
+    @if $size == desktop {
+      @media (min-width: 48em) {
+        @content;
+      }
+    } @else {
+      @media (min-width: $size){
+        @content
+      }
+    }
+}
 
 /* COLOURS */
 
-$bath_green: #25a445;
-$bath_blue: #0095C9;
+@import "pattern-lib/colours";
 
-$primary: gray;
-$primary_b: #000000;
-$primary_text: #222222;
+$primary: #00728F;
+$primary_b: #0b0b0c;
+$primary_text: #0b0c0c;
 
 $base_bg: white;
-$base_fg: #000;
+$base_fg: #0b0c0c;
 
-$map_nav_bg: #eee;
+$map_nav_bg: #fff;
 $nav_fg: #000;
-$nav_fg_hover: $primary;
+$nav_fg_hover: #eee;
 
 // Colour used for front page 'how to report a problem' steps
-$col_big_numbers: $bath_blue;
+$col_big_numbers: $bathnes-primary;
 
-$col_click_map: $bath_green;
+$col_click_map: $bathnes-secondary;
 
-$col_fixed_label: #00BD08;
-$col_fixed_label_dark: #4B8304;
+$col_fixed_label: $bathnes-secondary;
+$col_fixed_label_dark: $button-colour;
 
-$front_main_background: $bath_blue;
+$front_main_background: $bathnes-primary;
 
 $menu-image: 'menu-black';
 $header-top-border: false;
diff --git a/web/cobrands/bathnes/base.scss b/web/cobrands/bathnes/base.scss
index 6f949dd49..934d9ffdd 100644
--- a/web/cobrands/bathnes/base.scss
+++ b/web/cobrands/bathnes/base.scss
@@ -4,22 +4,75 @@
 
 @import "../sass/base";
 
-.nav-menu--mysoc {
-  display: none;
+a { color: $link-colour; }
+a:visited { color: $link-visited-colour; }
+a:active, a:hover { color: $link-hover-colour; }
+
+@import "pattern-lib/header";
+@import "pattern-lib/navigation";
+@import "pattern-lib/footer";
+
+// Header
+
+#site-header {
+    // Performs same function as #global-header-bar
+    border-bottom: solid 5px $bathnes-primary;
+}
+
+.header-logo img {
+    vertical-align: baseline;
+}
+
+#report-cta {
+    right: 7em;
+    top: 1.65em;
+    transform: none;
+    background-color: #f4f4f4;
+    border-color: #d8d8d8 #d1d1d1 #bababa;
+}
+
+.navigation-trigger {
+    // Style guide has a button, we have a link
+    border-color: #d8d8d8 #d1d1d1 #bababa;
+    border-style: solid;
+    border-width: 1px;
+    line-height: normal;
+    &:visited {
+        color: #000;
+    }
+    &:hover, &:active {
+        text-decoration: none;
+    }
+}
+
+.navigation-primary-list {
+    // Navigation at bottom on mobile
+    display: none;
+}
+
+// Footer
+
+.footer-list {
+    // Cancel out default styling
+    margin-left: 0;
+    margin-bottom: 0;
 }
 
+// Front page
 
-body.frontpage #site-logo,
-#site-logo
-{
-    background: url("/cobrands/bathnes/logo.png") 0 0 no-repeat;
-    background-size: contain;
-    width: 82px;
-    height: 40px;
-    top: 8px;
-    left: 4px;
+#front-main {
+    h1 {
+        font-size: 1.7em;
+    }
+    h2 {
+        margin: 0;
+        font-size: 1.1em;
+    }
 }
 
-h1, h2, h3, h4 {
-  color: $bath_green;
+#front-main #postcodeForm {
+    margin-top: 1em;
+    label {
+        color: #fff;
+    }
 }
diff --git a/web/cobrands/bathnes/bathnes-logo-colour.png b/web/cobrands/bathnes/bathnes-logo-colour.png
new file mode 100644
index 000000000..b3e9f090c
--- /dev/null
+++ b/web/cobrands/bathnes/bathnes-logo-colour.png
diff --git a/web/cobrands/bathnes/bathnes-logo-mono.png b/web/cobrands/bathnes/bathnes-logo-mono.png
new file mode 100644
index 000000000..6a2925305
--- /dev/null
+++ b/web/cobrands/bathnes/bathnes-logo-mono.png
diff --git a/web/cobrands/bathnes/images/icon-search-2x.png b/web/cobrands/bathnes/images/icon-search-2x.png
new file mode 100644
index 000000000..12d330c01
--- /dev/null
+++ b/web/cobrands/bathnes/images/icon-search-2x.png
diff --git a/web/cobrands/bathnes/layout.scss b/web/cobrands/bathnes/layout.scss
index f4064f79f..a7f2a4661 100644
--- a/web/cobrands/bathnes/layout.scss
+++ b/web/cobrands/bathnes/layout.scss
@@ -1,81 +1,73 @@
 @import "_colours";
 @import "../sass/layout";
 
-.big-green-banner {
-  text-transform: none;
+// Header
+
+.header-search .site-search .form-control {
+    // overrides from default .form-control
+    @include border-radius(0);
+    box-shadow: none;
+    border: solid 1px #bfc1c3;
+    display: inline-block;
 }
 
-body.frontpage {
-  #site-header {
-    height: 5em;
-    background-color: $map_nav_bg;
-  }
+.header-search .site-search .button {
+    background-color: $button-colour;
+    border: none;
+}
 
-  #site-logo {
-    top: 11px;
-  }
+// Navigation
+// Style guide has navigation at top-of-HTML, not bottom
 
-  .nav-menu {
-    line-height: 3.25em;
-  }
+.nav-wrapper {
+    display: none;
 }
 
-body.mappage {
-  .nav-menu--main a.report-a-problem-btn {
-    color: white;
-  }
+.navigation-primary-list {
+    display: block;
 }
 
-#front-main {
-  background-color: $front_main_background;
+.navigation-primary-list__item {
+    margin-bottom: 0; // cancel default
+    span { // display same as links
+        display: block;
+        padding: 0.75em 1em;
+    }
+    &:first-child span {
+        padding-left: 0;
+    }
+}
 
-  h1, h2, label {
-      color: white;
-  }
+// Front page
 
-  h1 {
-      font-size: 1.7em;
-  }
-  h2 {
-      font-size: 1.1em;
-  }
+#front-main {
+    background-color: $front_main_background;
+    h1, h2 {
+        color: #fff;
+    }
+    #postcodeForm {
+        margin-top: 0;
+    }
 }
 
-#site-logo,
-body.frontpage #site-logo,
-body.twothirdswidthpage #site-logo
-{
-        position: relative;
-        top: 6px;
-        left: 20px;
-        margin: 0;
-        padding: 0;
-        background: url("/cobrands/bathnes/logo.png") 0 0 no-repeat;
-        background-size: contain;
-        width: 160px;
-        height: 65px;
-        display: inline-block;
+// Map page
+
+.big-green-banner {
+    text-transform: none;
 }
 
 body.mappage {
-  #site-logo {
-    height: 54px;
-    width: 127px;
-    top: 7px;
-    left: 7px;
-  }
-
-  #site-header {
-      color: white;
-      background-color: $bath_blue;
-  }
-
-    .nav-menu a {
-        color: white;
+    #site-header {
+        // So border bottom doesn't overlap map
+        box-sizing: border-box;
+    }
+    .global-footer {
+        display: none;
     }
-
 }
 
-.nav-wrapper .nav-wrapper-2 {
-    border-top-color: transparent;
-}
\ No newline at end of file
+// Help
+
+body.twothirdswidthpage .content .sticky-sidebar aside {
+    top: 12em;
+}
diff --git a/web/cobrands/bathnes/logo.png b/web/cobrands/bathnes/logo.png
deleted file mode 100644
index 189af0f38..000000000
--- a/web/cobrands/bathnes/logo.png
+++ /dev/null
diff --git a/web/cobrands/bathnes/pattern-lib/_colours.scss b/web/cobrands/bathnes/pattern-lib/_colours.scss
new file mode 100644
index 000000000..3bd58a896
--- /dev/null
+++ b/web/cobrands/bathnes/pattern-lib/_colours.scss
@@ -0,0 +1,97 @@
+/* NOTE: mySociety commented out unused swatches */
+
+// Brand colours
+$bathnes-primary: #00aeef;
+$bathnes-primary-ally: #00728F;
+$bathnes-secondary: #00b259;
+$bathnes-secondary-ally: #00663D;
+$mainstream-brand: $bathnes-primary;
+
+
+// Standard palette, colours
+$bathnes-purple: #5261AC;
+$bathnes-yellow: #ffdd00;
+$bathnes-red: #AF122A;
+
+// Standard palette, greys
+$bathnes-black: #0b0c0c;
+$bathnes-grey-1: #6f777b;
+$bathnes-grey-2: #bfc1c3;
+$bathnes-grey-3: #dee0e2;
+$bathnes-grey-4: #f8f8f8;
+$bathnes-white: #fff;
+
+// Gov UK overrides where they didn't use their own variables
+$white: $bathnes-white;
+$black: $bathnes-black;
+$govuk-blue: $bathnes-secondary-ally;
+$turquoise: $bathnes-primary-ally;
+
+// Semantic colour names
+$link-colour: $bathnes-primary-ally;
+$link-active-colour: $bathnes-purple;
+$link-hover-colour: lighten($bathnes-primary-ally, 10%);
+$link-visited-colour: $bathnes-purple;
+$button-colour: $bathnes-secondary-ally;
+$button-hover-colour: darken($bathnes-secondary-ally, 5%);
+$focus-colour: $bathnes-yellow;
+$text-colour: $bathnes-black;             // Standard text colour
+$secondary-text-colour: $bathnes-grey-1;  // Section headers, help text etc.
+$border-colour: $bathnes-grey-2;          // Borders, seperators, rules, keylines etc.
+$panel-colour: $bathnes-grey-3;           // Related links panel, page footer etc.
+$canvas-colour: $bathnes-grey-4;          // Page background
+$highlight-colour: $bathnes-grey-4;       // Table stripes etc.
+$page-colour: $bathnes-white;             // The page
+$discovery-colour: $bathnes-primary-ally;   // Discovery badges and banners
+$alpha-colour: $bathnes-primary-ally;       // Alpha badges and banners
+$beta-colour: $bathnes-primary-ally;        // Beta badges and banners
+$live-colour: $bathnes-secondary-ally;       // Live badges and banners
+$banner-text-colour: $text-colour;        // Text colour for Alpha & Beta banners
+$error-colour: $bathnes-red;              // Error text and border colour
+$error-background: #fef7f7;       // Error background colour
+
+// ------------------------------------------------------------
+// Colours and fills
+// Add more to the array to populate consistent names across
+// colors, fills (aka background) and rules (aka borders)
+// ------------------------------------------------------------
+
+@each $name, $color in
+	('bathnes-primary', $bathnes-primary),
+	('bathnes-secondary', $bathnes-secondary),
+	('bathnes-purple', $bathnes-purple),
+	('bathnes-yellow', $bathnes-yellow),
+	('bathnes-red', $bathnes-red),
+	('bathnes-grey-1', $bathnes-grey-1),
+	('bathnes-grey-2', $bathnes-grey-2),
+	('bathnes-grey-3', $bathnes-grey-3),
+	('bathnes-grey-4', $bathnes-grey-4),
+
+	('text-colour', $text-colour),
+	('secondary-text-colour', $secondary-text-colour),
+	('page-colour', $page-colour),
+	('link-colour', $link-colour),
+	('link-hover-colour', $link-hover-colour),
+	('link-visited-colour', $link-visited-colour),
+	('border-colour', $border-colour),
+	('panel-colour', $panel-colour),
+	('highlight-colour', $highlight-colour),
+	('button-colour', $button-colour),
+    ('button-hover-colour', $button-hover-colour),
+	('focus-colour', $focus-colour),
+	('error-colour', $error-colour),
+	('mainstream-brand', $mainstream-brand)
+{
+/*
+	.swatch-#{$name} {
+		background-color: $color;
+		.swatch-color {
+			display: block;
+			&:after {
+				content: "#{$color}";
+				display: block;
+			}
+		}
+	}
+*/
+}
diff --git a/web/cobrands/bathnes/pattern-lib/_footer.scss b/web/cobrands/bathnes/pattern-lib/_footer.scss
new file mode 100644
index 000000000..b196bbe93
--- /dev/null
+++ b/web/cobrands/bathnes/pattern-lib/_footer.scss
@@ -0,0 +1,55 @@
+//-----------
+// Footer
+//-----------
+
+.global-footer {
+    background-color: $bathnes-grey-4;
+    border-top: 5px solid $bathnes-primary;
+}
+
+.footer-wrapper {
+    position: relative;
+    max-width: $site-width;
+    margin: 0 auto;
+    padding-top: 2em;
+    padding-bottom: 2em;
+    padding-left: 15px;
+    padding-right: 15px;
+    @include media($site-width) {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+
+.footer-marque {
+    position: absolute;
+    top: -35px;
+    right: 0;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 35px 0 0 35px;
+    border-color: transparent transparent transparent $bathnes-primary;
+}
+
+.footer-logo {
+    width: (321px/2.5);
+    height: auto;
+    img {
+        max-width: 100%;
+    }
+}
+
+.footer-list {
+    margin-top: 1.5em;
+    font-size: 16px;
+    li {
+        display: inline-block;
+        border-left: 1px solid $border-colour;
+        padding: 0 10px;
+        &:first-child {
+            border-left: none;
+            padding-left: 0;
+        }
+    }
+}
diff --git a/web/cobrands/bathnes/pattern-lib/_header.scss b/web/cobrands/bathnes/pattern-lib/_header.scss
new file mode 100644
index 000000000..8a4e52059
--- /dev/null
+++ b/web/cobrands/bathnes/pattern-lib/_header.scss
@@ -0,0 +1,154 @@
+// mySociety: fixed image path
+
+//-----------
+// Header
+//-----------
+
+#global-header {
+    background-color: $bathnes-white;
+    position: relative;
+}
+
+.header-wrapper {
+    position: relative;
+    max-width: $site-width;
+    margin: 0 auto;
+    padding-top: 1em;
+    padding-bottom: 1em;
+    padding-left: 15px;
+    padding-right: 15px;
+    @include media($site-width) {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+
+.header-global {
+    overflow: hidden;
+}
+
+.header-logo {
+    width: (321px/2.5);
+    height: auto;
+    img {
+        max-width: 100%;
+    }
+    @include media(desktop) {
+        width: (321px/2);
+        float: left;
+    }
+}
+
+.header-search {
+    margin-top: 10px;
+    margin-bottom: 20px;
+    @include media(desktop) {
+      margin-top: 1em;
+        float: right;
+        width: 50%;
+        text-align: right;
+        margin-top: 12px;
+        margin-bottom: 0;
+    }
+    .site-search {
+        position: relative;
+        .form-control {
+            width: calc(100% - 80px);
+            //width: calc(100% - 35px);
+            border-width: 1px;
+            border-color: $border-colour;
+            font-size: 16px;
+            height: 36px;
+            @include media(desktop) {
+                width: calc(100% - 100px);
+            }
+        }
+        .button {
+            position: absolute;
+            top: 0;
+            right: 45px;
+            //right: 0;
+            text-indent: -9999px;
+            background-image: url(images/icon-search-2x.png);
+            background-repeat: no-repeat;
+            background-position: 55% 50%;
+            background-size: 52.5% 40%;
+            box-shadow: none;
+            width: 36px;
+            height: 36px;
+            @include media(desktop) {
+                right: 0;
+            }
+        }
+    }
+}
+
+.header-search--desktop{
+  display: none;
+  @include media(desktop) {
+    display: block;
+  }
+}
+
+.header-search--mobile{
+  @include media(desktop) {
+    display: none;
+  }
+}
+
+#global-header-bar {
+    position: relative;
+    background-color: $bathnes-primary;
+    height: 5px;
+}
+
+.header-marque {
+    position: absolute;
+    bottom: 0;
+    right: 15px;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 25px 0 0 25px;
+    border-color: transparent transparent transparent $bathnes-primary;
+}
+
+// ----------
+// Commercial header
+// ----------
+
+.header-commercial {
+    position: relative;
+    overflow: hidden;
+    background-color: $bathnes-black;
+    .header-wrapper {
+        padding-top: 0.75em;
+        padding-bottom: 0.5em;
+    }
+}
+
+.header-commercial__logo {
+    width: (320px/3.5);
+    height: auto;
+    display: block;
+    img {
+        max-width: 100%;
+    }
+    @include media(desktop) {
+        width: (320px/3);
+    }
+}
+
+.header-commercial__marque {
+    position: absolute;
+    bottom: 0;
+    right: 15px;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 30px 0 0 30px;
+    border-color: transparent transparent transparent #fff;
+    @include media($site-width) {
+        right: 0;
+    }
+}
diff --git a/web/cobrands/bathnes/pattern-lib/_navigation.scss b/web/cobrands/bathnes/pattern-lib/_navigation.scss
new file mode 100644
index 000000000..64124ce01
--- /dev/null
+++ b/web/cobrands/bathnes/pattern-lib/_navigation.scss
@@ -0,0 +1,92 @@
+//-----------
+// Navigation
+//-----------
+
+.navigation-primary {
+    position: relative;
+    overflow: hidden;
+    body.js-enabled & {
+      transition: max-height ease-out 0.35s;
+		  max-height: 0;
+    }
+    border-top: 5px solid #fff;
+    &--active {
+      border-top: 5px solid $bathnes-primary;
+  		body.js-enabled & {
+  			transition: max-height ease-out 0.5s;
+  			max-height: 1000px;
+  		}
+  	}
+    @include media(desktop) {
+        display: block;
+        border-top: 1px solid $border-colour;
+        body.js-enabled & {
+            max-height: 100%;
+        }
+    }
+}
+
+.navigation-primary-list {
+    overflow: hidden;
+    list-style: none;
+    max-width: $site-width;
+    margin: 0 auto;
+    padding-left: 15px;
+    padding-right: 15px;
+    @include media($site-width) {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+
+.navigation-primary-list__item {
+    display: block;
+    a {
+        display: block;
+        padding: 0.5em 0;
+        text-decoration: none;
+        color: $text-colour;
+        font-size: 16px;
+        &:hover, &:active {
+            text-decoration: underline;
+        }
+    }
+    @include media(desktop) {
+        display: inline-block;
+        a {
+            padding: 0.75em 1em;
+        }
+        &:first-child a {
+            padding-left: 0;
+        }
+    }
+}
+
+.navigation-trigger {
+    position: absolute;
+    top: 1.65em;
+    right: 15px;
+    text-decoration: none;
+    color: $text-colour;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border-radius: 5px;
+    font-size: 14px;
+    padding: 5px 10px;
+    background-color: #f4f4f4;
+    &:hover, &:active {
+        background-color: #eee;
+    }
+    &:after {
+        display: inline-block;
+        font-size: 8px;
+        height: 8px;
+        padding-left: 5px;
+        vertical-align: middle;
+        content: " \25BC";
+    }
+    @include media(desktop) {
+        display: none;
+    }
+}