dss_tech_docs 0.1.0

data/lib/assets/stylesheets/modules/_govuk-logo.scss

@@ -0,0 +1,47 @@
+/**
+ * GOV.UK Logo Component
+ *
+ * Based on the existing GOV.UK logo from the header in GOV.UK Template.
+ *
+ * Notes:
+ *
+ * - The printable-crown element is an image that is included when the page is
+ *   printed. It's hidden for the screen media type, where the background image
+ *   is used instead.
+ *
+ * Example Usage:
+ *
+ * <span class="govuk-logo">
+ *   <img class="govuk-logo__printable-crown" src="/images/gov.uk_logotype_crown_invert_trans.png" height="32" width="36">
+ *   GOV.UK
+ * </span>
+ */
+
+.govuk-logo {
+  font-weight: bold;
+  display: inline-block;
+
+  @include screen {
+    background-image: file-url('/images/gov.uk_logotype_crown.png');
+    background-repeat: no-repeat;
+
+    @include device-pixel-ratio {
+      background-image: file-url('/images/gov.uk_logotype_crown-2x.png');
+      background-size: 36px 32px;
+    }
+
+    @include media(tablet) {
+      margin-right: 8px;
+      background-position: 0 1px;
+    }
+  }
+}
+
+.govuk-logo__printable-crown {
+  vertical-align: middle;
+  margin-right: 1px;
+
+  @include screen {
+    visibility: hidden;
+  }
+}

data/lib/assets/stylesheets/modules/_header.scss

@@ -0,0 +1,290 @@
+/**
+ * Header Component
+ *
+ * Based on the existing GOV.UK header in GOV.UK Template, with an 'inline'
+ * product name and hopefully improved mobile behaviour
+ *
+ * Notes:
+ *
+ * - Make sure you include header.js in your application. This will update
+ *   the aria-expanded and aria-hidden attributes on the toggle and the nav
+ *   respectively so that screen readers know what's happening.
+ * - Link the current page to the same place as your skip link (e.g. #main) –
+ *   this means that it is included by screen readers but is referred to as a
+ *   'same page' link, and clicking it does not reload the page.
+ *
+ * Example Usage:
+ *
+ * <header class="header">
+ *   <div class="header__container">
+ *     <div class="header__brand">
+ *       <a href="/">
+ *         <span class="header__title">My Product Page</span>
+ *       </a>
+ *     </div>
+ *
+ *     <div data-module="navigation">
+ *       <button type="button" class="header__navigation-toggle js-nav-toggle" aria-controls="navigation" aria-label="Show or hide top level navigation">
+ *         Menu
+ *       </button>
+ *
+ *       <nav id="navigation" class="header__navigation" aria-label="Top Level Navigation" aria-hidden="true">
+ *         <ul>
+ *           <li class="active"><a href="#main">Active Page</a></li>
+ *           <li><a href="/other.html">Other Page</a></li>
+ *         </ul>
+ *       </nav>
+ *     </div>
+ *   </div>
+ * </header>
+ */
+
+$active-nav-color: darken($dss-blue, 20%);
+$nav-border: lighten(grey, 20%);
+
+.header {
+  @extend %contain-floats;
+
+  @include screen {
+    background: $dss-blue;
+    color: $white;
+    border-bottom: 10px solid $nav-border;
+  }
+}
+
+.header__container {
+  @extend %site-width-container;
+  @extend %contain-floats;
+  zoom: 1;
+
+  padding: 9px 0 6px;
+
+  @include screen {
+    border-bottom: 10px solid $nav-border;
+    margin-bottom: -10px;
+  }
+}
+
+.header.header--full-width {
+  margin-bottom: 0;
+
+  @include screen {
+    border-bottom: 10px solid $nav-border;
+  }
+
+  .header__container {
+    border-bottom: none;
+    width: auto;
+    max-width: none;
+    margin: 0 $gutter-half;
+
+    @include media(tablet) {
+      margin: 0 $gutter;
+    }
+  }
+}
+
+.header--without-border {
+  border-bottom: none;
+  margin-bottom: 0;
+
+  .header__container {
+    border-bottom: none;
+    margin-bottom: 0;
+  }
+}
+
+.header__brand {
+  font-size: 30px;
+
+  // Give brand focus outline on mobile
+  &:after {
+    content: ".";
+    height: 0;
+    clear: both;
+    visibility: hidden;
+  }
+
+  a:link, a:visited {
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  .govuk-logo {
+    float: left;
+  }
+
+  @include screen {
+    a:link, a:visited {
+      color: $white;
+    }
+
+    a:focus {
+      background-color: inherit;
+    }
+
+    @include media(tablet) {
+      float: left;
+
+      .govuk-logo {
+        float: none;
+      }
+
+      a:hover {
+        text-decoration: none;
+        border-bottom: 1px solid $white;
+      }
+    }
+  }
+
+  @include print {
+    a:link, a:visited {
+      color: $black;
+    }
+  }
+}
+
+.header__title {
+  @include core-24;
+  display: block;
+  float: left;
+  clear: left;
+
+  @include media(tablet) {
+    display: inherit;
+    float: none;
+    clear: none;
+  }
+
+  .phase-banner {
+    margin-left: 5px;
+  }
+}
+
+.header__navigation {
+  @include screen {
+
+    // We want the same font size on mobile as tablet, so we can't use bold-16.
+    @include _core-font-generator(
+      $font-size: 16px,
+      $font-size-640: 16px,
+      $font-size-print: 12pt,
+      $line-height: (20 / 16),
+      $line-height-640: (20 / 16),
+      $font-weight: 700
+    );
+
+    clear: both;
+
+    padding-top: 10px;
+
+    a:link, a:visited {
+      color: $white;
+      text-decoration: none;
+      padding: 8px 0;
+      display: inline-block;
+    }
+
+    .active a:link, .active a:visited {
+      color: $active-nav-color;
+    }
+
+    a:focus, .active a:focus {
+      color: $black;
+    }
+
+    a:hover, a:active {
+      text-decoration: underline;
+    }
+
+    ul {
+      border-top: 1px solid $grey-1;
+      margin: 0;
+      padding: 8px 0 0;
+    }
+
+    li {
+      list-style: none;
+      margin: 2px 0;
+    }
+
+    @include media(tablet) {
+      display: block;
+      clear: none;
+      padding-top: 2px;
+      border-top: none;
+      float: right;
+
+      a:link, a:visited {
+        padding: 0;
+      }
+
+      ul {
+        border-top: none;
+        padding: 0;
+      }
+
+      li {
+        float: left;
+        margin: 12px 0 0 $gutter-half;
+      }
+    }
+  }
+
+  @include print {
+    display: none;
+  }
+}
+
+.header__navigation-toggle {
+  display: none;
+}
+
+.js {
+  .header__navigation {
+    display: none;
+
+    @include media(tablet) {
+      display: block;
+    }
+  }
+
+  .header__navigation-toggle {
+    display: block;
+    float: right;
+    color: $white;
+    background: transparent;
+    border: 1px solid $grey-1;
+    border-radius: 3px;
+    padding: 2px 6px 1px;
+    font-size: 80%;
+    font-weight: bold;
+
+    input {
+      display: none;
+    }
+
+    @include media(tablet) {
+      display: none;
+    }
+
+    &:after {
+      display: inline-block;
+      font-size: 8px;
+      padding-left: 5px;
+      vertical-align: middle;
+      content: " \25BC";
+    }
+  }
+
+  &.nav-open .header__navigation-toggle:after {
+    content: "\25B2";
+  }
+
+  &.nav-open .header__navigation {
+    display: block;
+  }
+}

data/lib/assets/stylesheets/modules/_page-review.scss

@@ -0,0 +1,35 @@
+.page-expiry--not-expired,
+.page-expiry--default {
+  padding: $gutter-half;
+  margin-top: $gutter;
+  margin-bottom: $gutter;
+  background-color: $govuk-blue;
+  color: $page-colour;
+
+  @include media(tablet) {
+    padding: $gutter;
+  }
+
+  a:link,
+  a:visited {
+    color: inherit;
+  }
+
+  a:hover {
+    color: $link-hover-colour;
+  }
+
+  a:active {
+    color: $link-active-colour;
+  }
+}
+
+.page-expiry--expired {
+  display: none;
+
+  padding: $gutter-half;
+  margin-top: $gutter * 2;
+  background-color: $error-background;
+  border: 1px solid $error-colour;
+  color: $error-colour;
+}

data/lib/assets/stylesheets/modules/_phase-banner.scss

@@ -0,0 +1,22 @@
+/**
+ * Phase Banner Component
+ *
+ * Example Usage:
+ *
+ * <span class="header__title">
+ *   My Product <span class="phase-banner">Beta</span>
+ * </span>
+ */
+
+.phase-banner {
+  @include bold-14;
+  padding: 2px 5px 0;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  vertical-align: middle;
+
+  @include screen {
+    background: darken($govuk-blue, 30%);
+    color: $white;
+  }
+}

data/lib/assets/stylesheets/modules/_search.scss

@@ -0,0 +1,137 @@
+@include screen {
+  .page-title + .search {
+    margin-top: $gutter;
+  }
+
+  .search {
+    @include core-16;
+    margin-bottom: $gutter-half;
+    height: 40px;
+    .search__label {
+      position: absolute;
+      left: -9999em;
+      top: auto;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+    }
+    .form-control {
+      @include box-sizing(border-box);
+      @include core-19;
+      width: 100%;
+      padding: 5px 4px 2px;
+      border: 2px solid $text-colour;
+      appearance: none;
+
+      &:focus {
+        outline: 3px solid $focus-colour;
+        outline-offset: 0;
+      }
+    }
+  }
+}
+
+@include print {
+  .search {
+    display: none;
+  }
+}
+
+html.has-search-results-open {
+  overflow: hidden;
+  .app-pane__content {
+    overflow: hidden;
+  }
+}
+.search-results {
+  display: none;
+  &.is-open {
+    display: block;
+  }
+}
+
+.search-results {
+    position: absolute;
+    top: 60px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 600;
+    overflow-x: scroll;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: none;
+    @include media(tablet) {
+      padding: 22px 20px 0 30px;
+      top: 0;
+      // The width of the sidebar
+      left: 330px;
+    }
+  }
+.search-results__inner {
+  position: relative;
+  background: $white;
+  border-top: 1px solid $grey-2;
+  max-width: 40rem;
+  padding: 15px;
+  @include media(tablet) {
+    padding: 15px 200px 50px 40px;
+    border: 1px solid $grey-2;
+    &::after {
+      content: '';
+      position: absolute;
+      top: 10px;
+      left: -9px;
+      width: 10px;
+      height: 20px;
+      background: no-repeat file-url('search-result-caret.svg') center right;
+      background-size: contain;
+    }
+  }
+}
+.search-results__title {
+  @include bold-27;
+  margin-bottom: $gutter;
+}
+.search-results__close {
+  @include core-16;
+  position: absolute;
+  top: 18px;
+  right: 20px;
+  appearance: none;
+  background: none;
+  border: 0;
+  padding: 0;
+  &:focus {
+    outline: 3px solid $focus-colour;;
+    outline-offset: 0;
+  }
+  &::after {
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+    padding-left: 8px;
+    height: 18px;
+    width: 18px;
+    background: no-repeat file-url('govuk-icn-close.png') center right;
+    @include device-pixel-ratio {
+      background-image: file-url('govuk-icn-close@2x.png');
+    }
+    background-size: contain;
+  }
+}
+.search-results__close-label {
+  position: absolute;
+  left: -9999em;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+.search-result {
+  margin-bottom: $gutter;
+}
+.search-result mark {
+  background-color: transparent;
+  color: inherit;
+  font-weight: bold;
+}