govuk_tech_docs 1.0.0

data/lib/assets/stylesheets/govuk_frontend_toolkit/_device-pixels.scss

@@ -0,0 +1,10 @@
+@mixin device-pixel-ratio($ratio: 2) {
+  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
+  only screen and (min--moz-device-pixel-ratio: $ratio),
+  only screen and (  -o-min-device-pixel-ratio: #{($ratio*10)}/10),
+  only screen and (     min-device-pixel-ratio: $ratio),
+  only screen and (             min-resolution: #{($ratio*96)}dpi),
+  only screen and (             min-resolution: #{$ratio}dppx) {
+    @content;
+  }
+}

data/lib/assets/stylesheets/govuk_frontend_toolkit/_font_stack.scss

@@ -0,0 +1,19 @@
+//  GOV.UK font stacks, referred to in typography.scss
+
+// Allow uppercase letters in font stack variable names
+// scss-lint:disable NameFormat
+
+// New Transport Light
+$NTA-Light: "nta", Arial, sans-serif;
+$NTA-Light-Tabular: "ntatabularnumbers", $NTA-Light;
+
+// Helvetica Regular
+$Helvetica-Regular: "HelveticaNeue", "Helvetica Neue", "Arial", "Helvetica", sans-serif;
+
+// Allow font stack to be overridden
+// Not all apps using toolkit use New Transport
+$toolkit-font-stack: $NTA-Light !default;
+$toolkit-font-stack-tabular: $NTA-Light-Tabular !default;
+
+// Font reset for print
+$Print-reset: sans-serif;

data/lib/assets/stylesheets/govuk_frontend_toolkit/_grid_layout.scss

@@ -0,0 +1,136 @@
+@import 'conditionals';
+@import 'css3';
+@import 'measurements';
+@import 'shims';
+
+$site-width: 960px;
+
+// An extendable selector to wrap your entire site content block
+// It limits the sites width to be 960px wide and maintains consistent margins
+// on the site of the page and shrinks the margins for mobile.
+//
+// Usage:
+//
+// #page-container {
+//   @extend %site-width-container;
+// }
+
+%site-width-container {
+  max-width: $site-width;
+
+  @include ie-lte(8) {
+    width: $site-width;
+  }
+
+  margin: 0 $gutter-half;
+
+  @include media(tablet) {
+    margin: 0 $gutter;
+  }
+
+  @include media($min-width: ($site-width + $gutter * 2)) {
+    margin: 0 auto;
+  }
+}
+
+// An extendable selector to outdent to the full page-width
+// So that you can create elements that take up the gutters on the side of the
+// page and butt up to the edge of the browser on smaller screens (rather than
+// leaving a gutter at the edge of the page).
+//
+// Usage:
+//
+// .hero-image-container {
+//   @extend %outdent-to-full-width;
+// }
+%outdent-to-full-width {
+  margin-left: -$gutter-half;
+  margin-right: -$gutter-half;
+
+  @include media(tablet) {
+    margin-left: -$gutter;
+    margin-right: -$gutter;
+  }
+}
+
+// An extendable selector to define a row for grid columns to sit in
+//
+// Usage:
+//
+// .grid-row {
+//   @extend %grid-row;
+// }
+
+%grid-row {
+  @extend %contain-floats;
+  margin: 0 (-$gutter-half);
+}
+
+// A mixin for a grid column
+// Creates a cross browser grid column with a standardised gutter between the
+// columns. Widths should be defined as fractions of the full desktop width
+// they want to fill. By default they break to become full width at tablet size
+// but that can be configured to be desktop using the `$full-width` argument.
+//
+// Usage:
+//
+//   .column-quarter {
+//     @include grid-column( 1/4 );
+//   }
+//   .column-half {
+//     @include grid-column( 1/2 );
+//   }
+//   .column-third {
+//     @include grid-column( 1/3 );
+//   }
+//   .column-two-thirds {
+//     @include grid-column( 2/3 );
+//   }
+//   .column-desktop-third {
+//     @include grid-column( 1/3, $full-width: desktop );
+//   }
+
+@mixin grid-column($width, $full-width: tablet, $float: left) {
+
+  @include media($full-width) {
+    float: $float;
+    width: percentage($width);
+  }
+
+  @include ie-lte(7) {
+    width: (($site-width + $gutter) * $width) - $gutter;
+  }
+
+  padding: 0 $gutter-half;
+  @include box-sizing(border-box);
+}
+
+
+// OLD deprecated grid mixins
+// You should migrate to the mixins above in the future
+
+// Outer block sets a max width
+@mixin outer-block {
+  @warn "The @mixin outer-block is deprecated and should be updated to use new grid helpers";
+  margin: 0 auto;
+  width: auto;
+  max-width: 960 + $gutter * 2;
+  @extend %contain-floats;
+
+  @include ie-lte(8) {
+    width: 1020px;
+  }
+}
+
+// Inner block sets either margin or padding
+// to align content with header and footer
+@mixin inner-block($margin-or-padding: padding) {
+  @warn "The @mixin inner-block is deprecated and should be updated to use new grid helpers";
+  #{$margin-or-padding}-left: $gutter-half;
+  #{$margin-or-padding}-right: $gutter-half;
+
+  @include media(tablet) {
+    #{$margin-or-padding}-left: $gutter;
+    #{$margin-or-padding}-right: $gutter;
+  }
+}

data/lib/assets/stylesheets/govuk_frontend_toolkit/_helpers.scss

@@ -0,0 +1,16 @@
+// Base font size in pixels
+$base-font-size: 16;
+
+// Convert pixels to em
+@function pem($px, $base: $base-font-size) {
+
+  @if (unitless($px)) {
+    $px: $px * 1px;
+  }
+
+  @if (unitless($base)) {
+    $base: $base * 1px;
+  }
+
+  @return $px / $base * 1em;
+}

data/lib/assets/stylesheets/govuk_frontend_toolkit/_measurements.scss

@@ -0,0 +1,14 @@
+// Measurements used across GOV.UK
+
+$full-width: 100%;
+$one-quarter: $full-width / 4;
+$one-third: $full-width / 3;
+$half: $full-width / 2;
+$two-thirds: ($full-width) - ($one-third);
+$three-quarters: ($full-width) - ($one-quarter);
+
+$gutter: 30px;
+$gutter-one-quarter: $gutter / 4;
+$gutter-one-third: $gutter / 3;
+$gutter-half: $gutter / 2;
+$gutter-two-thirds: $gutter - $gutter-one-third;

data/lib/assets/stylesheets/govuk_frontend_toolkit/_shims.scss

@@ -0,0 +1,55 @@
+// Cross-browser shims
+// Ways of normalising properties across browsers.
+
+@import "conditionals";
+
+// From: https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/
+
+// Usage:
+//
+// @include inline-block
+// or
+// @include inline-block("250px")
+//
+// which gives a min-height to the inline-block elements.
+
+
+@mixin inline-block($min-height: "") {
+  display: -moz-inline-stack;
+  display: inline-block;
+
+  @if $min-height != "" {
+    min-height: $min-height;
+  }
+
+  @include ie-lte(7) {
+    zoom: 1;
+    display: inline;
+  }
+
+  @include ie(6) {
+    @if $min-height != "" {
+      height: $min-height;
+    }
+  }
+}
+
+
+// Contain floats usage:
+//
+// .this-has-floated-children {
+//  @extend %contain-floats;
+// }
+
+
+%contain-floats {
+  &:after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+
+  @include ie-lte(7) {
+    zoom: 1;
+  }
+}

data/lib/assets/stylesheets/govuk_frontend_toolkit/_typography.scss

@@ -0,0 +1,249 @@
+@import 'font_stack';
+@import 'conditionals';
+@import 'device-pixels';
+@import 'url-helpers';
+
+//  GOV.UK typography palettes
+
+//  ANATOMY OF A TYPE STYLE
+//  -----------------------
+//  These are a collection of graphic styles. They are deliberately
+//  abstracted from semantic HTML context to enable flexible re-use.
+//  Although there is a lot of duplication within this file, as long
+//  as you GZIP your CSS it shouldnt cause any bloat.
+
+
+// CORE FONTS - NEW TRANSPORT
+
+// Allow uppercase letters in font stack variable names
+// scss-lint:disable NameFormat
+
+$is-print: false !default;
+
+@mixin _core-font-generator($font-size: 19px, $font-size-640: 16px, $font-size-print: 14pt, $line-height: (25 / 19), $line-height-640: (20 / 16), $tabular-numbers: false, $font-weight: 400) {
+  @if $tabular-numbers == true {
+    font-family: $toolkit-font-stack-tabular;
+  } @else if $is-print {
+    font-family: $Print-reset;
+  } @else {
+    font-family: $toolkit-font-stack;
+    @if $toolkit-font-stack == "$NTA-Light" {
+      @if $font-weight > 400 {
+        font-size-adjust: 0.525;
+      } @else {
+        font-size-adjust: 0.5;
+      }
+    }
+  }
+  font-weight: $font-weight;
+  text-transform: none;
+
+  @if $is-print {
+    font-size: $font-size-print;
+    line-height: $line-height;
+
+  } @else {
+    font-size: $font-size-640;
+    line-height: $line-height-640;
+
+    @include media(tablet) {
+      font-size: $font-size;
+      line-height: $line-height;
+    }
+  }
+}
+// scss-lint:enable NameFormat
+
+@mixin core-80($line-height: (80 / 80), $line-height-640: (55 / 53), $tabular-numbers: false, $font-weight: 400) {
+  $font-size: 80px;
+  $font-size-640: 53px;
+  $font-size-print: 28pt;
+  @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
+}
+
+@mixin core-48($line-height: (50 / 48), $line-height-640: (35 / 32), $tabular-numbers: false, $font-weight: 400) {
+  $font-size: 48px;
+  $font-size-640: 32px;
+  $font-size-print: 18pt;
+  @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
+}
+
+@mixin core-36($line-height: (40 / 36), $line-height-640: (25 / 24), $tabular-numbers: false, $font-weight: 400) {
+  $font-size: 36px;
+  $font-size-640: 24px;
+  $font-size-print: 18pt;
+  @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
+}
+
+@mixin core-27($line-height: (30 / 27), $line-height-640: (20 / 18), $tabular-numbers: false, $font-weight: 400) {
+  $font-size: 27px;
+  $font-size-640: 20px;
+  $font-size-print: 16pt;
+  @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
+}
+
+@mixin core-24($line-height: (30 / 24), $line-height-640: (24 / 20), $tabular-numbers: false, $font-weight: 400) {
+  $font-size: 24px;
+  $font-size-640: 18px;
+  $font-size-print: 16pt;
+  @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
+}
+
+@mixin core-19($line-height: (25 / 19), $line-height-640: (20 / 16), $tabular-numbers: false, $font-weight: 400) {
+  $font-size: 19px;
+  $font-size-640: 16px;
+  $font-size-print: 14pt;
+  @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
+}
+
+@mixin core-16($line-height: (20 / 16), $line-height-640: (16 / 14), $tabular-numbers: false, $font-weight: 400) {
+  $font-size: 16px;
+  $font-size-640: 14px;
+  $font-size-print: 12pt;
+  @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
+}
+
+@mixin core-14($line-height: (20 / 14), $line-height-640: (15 / 12), $tabular-numbers: false, $font-weight: 400) {
+  $font-size: 14px;
+  $font-size-640: 12px;
+  $font-size-print: 11pt;
+  @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
+}
+
+@mixin bold-80($line-height: (80 / 80), $line-height-640: (55 / 53), $tabular-numbers: false) {
+  @include core-80($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
+}
+
+@mixin bold-48($line-height: (50 / 48), $line-height-640: (35 / 32), $tabular-numbers: false) {
+  @include core-48($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
+}
+
+@mixin bold-36($line-height: (40 / 36), $line-height-640: (25 / 24), $tabular-numbers: false) {
+  @include core-36($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
+}
+
+@mixin bold-27($line-height: (30 / 27), $line-height-640: (20 / 18), $tabular-numbers: false) {
+  @include core-27($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
+}
+
+@mixin bold-24($line-height: (30 / 24), $line-height-640: (24 / 20), $tabular-numbers: false) {
+  @include core-24($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
+}
+
+@mixin bold-19($line-height: (25 / 19), $line-height-640: (20 / 16), $tabular-numbers: false) {
+  @include core-19($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
+}
+
+@mixin bold-16($line-height: (20 / 16), $line-height-640: (16 / 14), $tabular-numbers: false) {
+  @include core-16($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
+}
+
+@mixin bold-14($line-height: (20 / 14), $line-height-640: (15 / 12), $tabular-numbers: false) {
+  @include core-14($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
+}
+
+@mixin heading-80($tabular-numbers: false) {
+  @include core-80($tabular-numbers: $tabular-numbers);
+
+  display: block;
+
+  padding-top: 8px;
+  padding-bottom: 7px;
+
+  @include media(tablet) {
+    padding-top: 6px;
+    padding-bottom: 14px;
+  }
+}
+
+@mixin heading-48($tabular-numbers: false) {
+  @include core-48($tabular-numbers: $tabular-numbers);
+
+  display: block;
+
+  padding-top: 10px;
+  padding-bottom: 10px;
+
+  @include media(tablet) {
+    padding-top: 7px;
+    padding-bottom: 13px;
+  }
+}
+
+@mixin heading-36($tabular-numbers: false) {
+  @include core-36($tabular-numbers: $tabular-numbers);
+
+  display: block;
+
+  padding-top: 8px;
+  padding-bottom: 7px;
+
+  @include media(tablet) {
+    padding-top: 6px;
+    padding-bottom: 9px;
+  }
+}
+
+@mixin heading-27($tabular-numbers: false) {
+  @include core-27($tabular-numbers: $tabular-numbers);
+
+  display: block;
+
+  padding-top: 8px;
+  padding-bottom: 7px;
+
+  @include media(tablet) {
+    padding-top: 4px;
+    padding-bottom: 6px;
+  }
+}
+
+@mixin heading-24($tabular-numbers: false) {
+  @include core-24($tabular-numbers: $tabular-numbers);
+
+  display: block;
+
+  padding-top: 9px;
+  padding-bottom: 6px;
+
+  @include media(tablet) {
+    padding-top: 6px;
+    padding-bottom: 4px;
+  }
+}
+
+@mixin copy-19($tabular-numbers: false) {
+  @include core-19($tabular-numbers: $tabular-numbers);
+
+  padding-top: 2px;
+  padding-bottom: 8px;
+
+  @include media(tablet) {
+    padding-top: 0;
+    padding-bottom: 5px;
+  }
+}
+
+@mixin copy-16($tabular-numbers: false) {
+  @include core-16($tabular-numbers: $tabular-numbers);
+
+  padding-top: 8px;
+  padding-bottom: 7px;
+
+  @include media(tablet) {
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+}
+
+@mixin copy-14($tabular-numbers: false) {
+  @include core-14($tabular-numbers: $tabular-numbers);
+
+  padding-top: 8px;
+  padding-bottom: 7px;
+
+  @include media(tablet) {
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+}