Add govuk-template-flask-skeleton

assets/stylesheets/govuk_template/_header.scss

@@ -0,0 +1,273 @@
+/* @import '_shims'; */
+/* @import '_conditionals'; */
+/* @import '_measurements'; */
+
+#global-header {
+  background-color: $black;
+  width: 100%;
+
+  .header-wrapper {
+    background-color: $black;
+    max-width: 990px;
+    margin: 0 auto;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    @extend %contain-floats;
+    @include media(tablet){
+      padding-left: $gutter-half;
+      padding-right: $gutter-half;
+    }
+    @include ie-lte(8) {
+      width: 990px;
+    }
+
+    .header-global {
+      @extend %contain-floats;
+      .header-logo {
+        @extend %contain-floats;
+        float: left;
+
+        @include media(desktop){
+          width: 33.33%;
+        }
+        @media screen and (max-width: 379px) {
+          width: auto;
+          float: none;
+        }
+
+        .content {
+          margin: 0 15px;
+        }
+      }
+      .header-logo {
+        margin: 5px 0 2px;
+      }
+    }
+  }
+  &.with-proposition {
+    .header-wrapper {
+      .header-global {
+        @include media(desktop){
+          float: left;
+          width: 33.33%;
+
+          .header-logo,
+          .site-search {
+            width: 100%;
+          }
+        }
+      }
+      .header-proposition {
+        @include media(desktop){
+          width: 66.66%;
+          float: left;
+        }
+        .content {
+          margin: 0 15px;
+        }
+      }
+    }
+  }
+
+  #logo {
+    float: left;
+    position: relative;
+    top: -1px;
+
+    height: 30px;
+    overflow: visible;
+    vertical-align: baseline;
+
+    color: $white;
+    font-weight: bold;
+    font-size: 30px;
+    line-height: 1em;
+    text-decoration: none;
+    text-rendering: optimizeLegibility;
+    margin-bottom: -3px;
+    padding-top: 2px;
+    border-bottom: 1px solid transparent;
+
+    background: image-url('/static/images/gov.uk_logotype_crown.png') no-repeat;
+    background-size: 35px 31px;
+    background-position: 0 0;
+    @include ie-lte(8) {
+      background-image: image-url('/static/images/gov.uk_logotype_crown-1x.png');
+    }
+
+    img {
+      position: relative;
+      top: -2px;
+
+      width: 35px;
+      height: 31px;
+
+      padding-right: 6px;
+
+      float: left;
+      display: inline;
+      line-height: inherit;
+      border: none;
+
+      /* visibility: hidden; */
+    }
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      border-bottom-color: $white;
+    }
+
+    &:active {
+      color: $light-blue;
+    }
+  }
+  .header-proposition {
+    padding-top: 10px;
+    @include media(desktop){
+      padding-top: 0;
+    }
+    #proposition-name {
+      @include core-24;
+      font-weight: bold;
+      color: $white;
+      text-decoration: none;
+    }
+    a#proposition-name:hover {
+      text-decoration: underline;
+    }
+    a.menu {
+      @include core-16;
+      color: $white;
+      display: block;
+      float: right;
+      text-decoration: none;
+      padding-top: 6px;
+      @include media(desktop){
+        display: none;
+      }
+      &:hover {
+        text-decoration: underline;
+      }
+      &:after {
+        display: inline-block;
+        font-size: 8px;
+        height: 8px;
+        padding-left: 5px;
+        vertical-align: middle;
+        content: " \25BC";
+      }
+      &.js-hidden:after {
+        content: " \25B2";
+      }
+    }
+    #proposition-menu {
+      margin-top: 5px;
+
+      // Some headers (Whitehall) don't have a propsition name, offset as if they did.
+      &.no-proposition-name {
+        @include media(desktop){
+          margin-top: 37px;
+          // 37px is the amount of margin required to line up the nav list with the top of the search box
+        }
+      }
+    }
+    #proposition-link,
+    #proposition-links {
+      clear: both;
+      @extend %contain-floats;
+      margin: 2px 0 0 0;
+      padding: 0;
+
+      .js-enabled & {
+        display: none;
+        @include media(desktop){
+          display: block;
+        }
+        &.js-visible {
+          display: block;
+        }
+      }
+
+      li {
+        float: left;
+        width: 50%;
+        padding: 3px 0;
+        border-bottom: 1px solid $grey-2;
+
+        @include media(desktop){
+          display: block;
+          width: auto;
+          padding: 0 15px 0 0;
+          border-bottom: 0;
+
+          &.clear-child {
+            clear: left;
+          }
+        }
+      }
+
+      a {
+        color: $white;
+        text-decoration: none;
+        @include bold-14;
+
+        @include media(desktop) {
+          @include bold-16;
+          line-height: 23px;
+        }
+
+        &:hover {
+          text-decoration: underline;
+        }
+        &.active {
+          color: $proposition-active-nav;
+        }
+        &:focus {
+          color: $black;
+        }
+      }
+    }
+
+    #proposition-link {
+      float: right;
+      line-height: 22px;
+      .js-enabled & {
+        display:block;
+      }
+      @include media(desktop) {
+        float:none;
+      }
+    }
+  }
+}
+
+/* Global header bar */
+
+#global-header-bar {
+  @extend %site-width-container;
+  height: 10px;
+  background-color: $govuk-blue;
+  @include ie-lte(8) {
+    font-size: 0;
+  }
+}
+
+/* Global cookie message */
+
+.js-enabled #global-cookie-message {
+  display: none; /* shown with JS, always on for non-JS */
+}
+
+#global-cookie-message {
+  width: 100%;
+  background-color: $light-blue-25;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  p {
+    @extend %site-width-container;
+    @include core-16;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}