govuk_tech_docs 1.0.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,289 @@
+/**
+ * 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: #1d8feb;
+
+.header {
+  @extend %contain-floats;
+
+  @include screen {
+    background: $black;
+    color: $white;
+    border-bottom: 10px solid $white;
+  }
+}
+
+.header__container {
+  @extend %site-width-container;
+  @extend %contain-floats;
+  zoom: 1;
+
+  padding: 9px 0 6px;
+
+  @include screen {
+    border-bottom: 10px solid $mainstream-brand;
+    margin-bottom: -10px;
+  }
+}
+
+.header.header--full-width {
+  margin-bottom: 0;
+
+  @include screen {
+    border-bottom: 10px solid $mainstream-brand;
+  }
+
+  .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/_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: $govuk-blue;
+    color: $white;
+  }
+}

data/lib/assets/stylesheets/modules/_skip-link.scss

@@ -0,0 +1,31 @@
+/**
+ * Skip Link Component
+ *
+ * Notes:
+ *
+ * - Should be the first element in your <body>
+ * - Ensure the target (e.g. #main) exists within your pages.
+ *
+ * Example Usage:
+ *
+ * <a href="#main" class="skip-link">Skip to main content</a>
+ */
+
+.skip-link {
+  display: block;
+  position: absolute;
+  left: -9999em;
+
+  &:focus {
+    position: relative;
+    left: inherit;
+    background: $yellow;
+    color: $black;
+    text-decoration: none;
+    padding: 5px $gutter-half;
+    
+    @include media(tablet) {
+      padding: 5px $gutter;
+    }
+  }
+}

data/lib/assets/stylesheets/modules/_technical-documentation.scss

@@ -0,0 +1,236 @@
+// Adds combination of margin and padding to headings to make them appear
+// correctly when they're linked to as anchors, and scale them on mobile
+@mixin heading-offset($tabletTopMargin) {
+  // Scale margins with font size on mobile (16/19ths)
+  $mobileTopMargin: ceil($tabletTopMargin * (16 / 19));
+  
+  // Offset headings down on mobile so that linking to anchors they appear after
+  // the sticky 'table of contents' element
+  $stickyTocOffset: 20px + $gutter-half + 10px + 1px;
+  
+  // Pad the heading so that when linking to an anchor there is at most a
+  // $gutter-half (mobile) or $gutter (tablet and above) sized gap between the
+  // top of the viewport and the heading.
+  padding-top: min($mobileTopMargin, $gutter-half) + $stickyTocOffset;
+  margin-top: max(0, $mobileTopMargin - $gutter-half) - $stickyTocOffset;
+
+  @include media(tablet) {
+    padding-top: min($tabletTopMargin, $gutter);
+    margin-top: max(0, $tabletTopMargin - $gutter);
+  }
+}
+
+.technical-documentation {
+  // Required for IE11 to render <main> correctly
+  display: block;
+  margin: 0 $gutter-half 10px;
+  max-width: 40em;
+  
+  line-height: 1.4;
+  
+  color: $text-colour;
+
+  @include media(tablet) {
+    // We add 2 pixels to the gutter here to ensure there's sufficient spacing between
+    // an anchor link (see _anchored-heading.scss) on a heading and the left-hand pane.
+    margin: 0 ($gutter + 2px) $gutter;
+  }
+
+  // Headings
+  h1 {
+    @include bold-48;
+    @include heading-offset($gutter * 2);
+    border-top: 5px solid $text-colour;
+    
+    &:first-of-type {
+      @include heading-offset($gutter);
+      border-top: none;
+    }
+  }
+
+  h2 {    
+    @include bold-36;
+    @include heading-offset($gutter * 1.5);
+  }
+
+  h3, h4, h5, h6 {
+    @include heading-offset($gutter);
+  }
+
+  h3 {
+    @include bold-24;
+  }
+
+  h4 {
+    @include bold-19;
+  }
+
+  h5 {
+    @include bold-19;
+    color: $secondary-text-colour;
+  }
+
+  h6 {
+    @include core-19;
+    color: $secondary-text-colour;
+  }
+
+  // Expand margin when h1 followed directly by paragraph
+  h1 + p {
+    @include media(tablet) {
+      margin-top: $gutter * 1.5;
+    }
+  }
+
+  // Tighten up margins where headings follow each other
+  h1 + h2 {
+    @include heading-offset($gutter);
+  }
+
+  h2 + h3, h3 + h4, h4 + h5, h5 + h6 {
+    @include heading-offset(20px);
+  }
+
+  p {
+    margin-top: ceil($gutter-half * (16 / 19));
+    margin-bottom: 0;
+
+    @include media(tablet) {
+      margin-top: $gutter-half;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    width: auto;
+    height: auto;
+  }
+
+  ol, ul {
+    margin: $gutter-half 0 0;
+    padding-left: 20px;
+  }
+
+  ol ol, ul ul, ol ul, ul ol {
+    margin-top: 0;
+  }
+
+  li {
+    margin-top: 5px;
+  }
+
+  ol + p, ul + p, .table-container + p {
+    margin-top: ceil($gutter * (16 / 19));
+    
+    @include media(tablet) {
+      margin-top: $gutter;
+    }
+  }
+
+  blockquote {
+    background: $grey-4;
+    padding: $gutter-half;
+    margin: $gutter-half;
+    border-left: 5px solid $grey-3;
+  }
+
+  pre {
+    background: $code-00;
+    padding: 15px;
+    overflow: auto;
+    position: relative;
+    border: 1px solid $code-02;
+  }
+
+  pre code {
+    background: none;
+    color: inherit;
+    padding: 0;
+  }
+
+  code {
+    background: $code-01;
+    padding: 3px 5px;
+    border-radius: 1px;
+    
+    font-family: monaco, Consolas, "Lucida Console", monospace;
+    font-size: 15px;
+    color: $code-0E;
+    
+    @include media(tablet) {
+      font-size: 16px;
+    }
+
+    // Handle long strings (URLs, long variable names, etc) by allowing them
+    // to break anywhere if required.
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+
+    -ms-word-break: break-all;
+    /* This is the dangerous one in WebKit, as it breaks things wherever */
+    word-break: break-all;
+    /* Instead use this non-standard one: */
+    word-break: break-word;
+  }
+
+  // Support monospace headings for e.g. listing API endpoints
+  h1, h2, h3, h4, h5, h6 {
+    code {
+      font-size: inherit;
+      color: $text-colour;
+      background: none;
+      padding: 0;
+    }
+  }
+
+  .table-container {
+    display: block;
+    max-width: 100%;
+    overflow-x: auto;
+    
+    margin-top: $gutter-half;
+  }
+
+  table {    
+    width: 100%;
+
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  th, td {
+    padding: $gutter-one-third $gutter-two-thirds $gutter-one-third 0;
+
+    background-color: transparent;
+    border-bottom: 1px solid $border-colour;
+    border-width: 0 0 1px 0;
+
+    @include core-16;
+    vertical-align: top;
+    text-align: left;
+  }
+
+  th {
+    font-weight: bold;
+  }
+
+  td {
+    p, ul, ol {
+      margin: 0;
+    }
+    p+p, p+ul, p+ol,
+    ul+p, ul+ol,
+    ol+p {
+      margin-top: $gutter-one-third;
+    }
+  }
+
+  hr {
+    height: 1px;
+    border: none;
+    margin-top: $gutter - 1px;
+    margin-bottom: $gutter;
+    background-color: $border-colour;
+    color: $border-colour;
+  }
+}