govuk_tech_docs 1.0.0

data/lib/assets/stylesheets/govuk_frontend_toolkit/_url-helpers.scss

@@ -0,0 +1,16 @@
+// URL Helpers
+
+$path: false !default;
+
+// A function which can either output a image-url to be used with the Rails
+// Asset Pipeline or Compass or a plain url which is prefixed with a defined
+// path variable.
+@function file-url($file) {
+  $url: '';
+  @if $path {
+    $url: url($path + $file);
+  } @else {
+    $url: image-url($file);
+  }
+  @return $url;
+}

data/lib/assets/stylesheets/govuk_frontend_toolkit/colours/_organisation.scss

@@ -0,0 +1,103 @@
+// We use `websafe` to mean strong enough contrast against white to
+// be used for copy and meet the AAA (large text) and AA (smaller
+// copy) WCAG guidelines.
+
+$attorney-generals-office: #9f1888;
+$attorney-generals-office-websafe: #a03a88;
+$cabinet-office: #005abb;
+$cabinet-office-websafe: #347da4;
+$civil-service: #af292e;
+$department-for-business-innovation-skills: #003479;
+$department-for-business-innovation-skills-websafe: #347da4;
+$department-for-communities-and-local-government: #00857e;
+$department-for-communities-and-local-government-websafe: #37836e;
+$department-for-culture-media-sport: #d40072;
+$department-for-culture-media-sport-websafe: #a03155;
+$department-for-education: #003a69;
+$department-for-education-websafe: #347ca9;
+$department-for-environment-food-rural-affairs: #00a33b;
+$department-for-international-development: #002878;
+$department-for-international-development-websafe: #405e9a;
+$department-for-international-trade: #CF102D;
+$department-for-international-trade-websafe: $link-colour;
+$department-for-transport: #006c56;
+$department-for-transport-websafe: #398373;
+$department-for-work-pensions: #00beb7;
+$department-for-work-pensions-websafe: #37807b;
+$department-of-energy-climate-change: #009ddb;
+$department-of-energy-climate-change-websafe: #2b7cac;
+$department-of-health: #00ad93;
+$department-of-health-websafe: #39836e;
+$foreign-commonwealth-office: #003e74;
+$foreign-commonwealth-office-websafe: #406e97;
+$government-equalities-office: #9325b2;
+$hm-government: #0076c0;
+$hm-government-websafe: #347da4;
+$hm-revenue-customs: #009390;
+$hm-revenue-customs-websafe: #008770;
+$hm-treasury: #af292e;
+$hm-treasury-websafe: #832322;
+$home-office: #9325b2;
+$home-office-websafe: #9440b2;
+$ministry-of-defence: #4d2942;
+$ministry-of-defence-websafe: #5a5c92;
+$ministry-of-justice: #231f20;
+$ministry-of-justice-websafe: #5a5c92;
+$northern-ireland-office: #002663;
+$northern-ireland-office-websafe: #3e598c;
+$office-of-the-advocate-general-for-scotland: #002663;
+$office-of-the-advocate-general-for-scotland-websafe: $link-colour;
+$office-of-the-leader-of-the-house-of-lords: #9c132e;
+$office-of-the-leader-of-the-house-of-lords-websafe: #c2395d;
+$scotland-office: #002663;
+$scotland-office-websafe: #405c8a;
+// Note: the 'the' part here will get dropped
+$the-office-of-the-leader-of-the-house-of-commons: #317023;
+$the-office-of-the-leader-of-the-house-of-commons-websafe: #005f8f;
+$uk-export-finance: #005747;
+$uk-export-finance-websafe: $link-colour;
+$uk-trade-investment: #C80651;
+$uk-trade-investment-websafe: $link-colour;
+$wales-office: #a33038;
+$wales-office-websafe: #7a242a;
+
+// All organisation colours in a list
+// (class_name, brand colour, WCAG acceptible text colour)
+//
+// example usage:
+// @each $organisation in $all-organisation-brand-colours {
+//    .#{nth($organisation, 1)} {
+//      border-color: nth($organisation, 2);
+//    }
+// }
+
+$all-organisation-brand-colours:
+  'attorney-generals-office' $attorney-generals-office $attorney-generals-office-websafe,
+  'cabinet-office' $cabinet-office $cabinet-office-websafe,
+  'civil-service' $civil-service $civil-service,
+  'department-for-business-innovation-skills' $department-for-business-innovation-skills $department-for-business-innovation-skills-websafe,
+  'department-for-communities-and-local-government' $department-for-communities-and-local-government $department-for-communities-and-local-government-websafe,
+  'department-for-culture-media-sport' $department-for-culture-media-sport $department-for-culture-media-sport-websafe,
+  'department-for-education' $department-for-education $department-for-education-websafe,
+  'department-for-environment-food-rural-affairs' $department-for-environment-food-rural-affairs $department-for-environment-food-rural-affairs,
+  'department-for-international-development' $department-for-international-development $department-for-international-development-websafe,
+  'department-for-international-trade' $department-for-international-trade $department-for-international-trade-websafe,
+  'department-for-transport' $department-for-transport $department-for-transport-websafe,
+  'department-for-work-pensions' $department-for-work-pensions $department-for-work-pensions-websafe,
+  'department-of-energy-climate-change' $department-of-energy-climate-change $department-of-energy-climate-change-websafe,
+  'department-of-health' $department-of-health $department-of-health-websafe,
+  'foreign-commonwealth-office' $foreign-commonwealth-office $foreign-commonwealth-office-websafe,
+  'hm-government' $hm-government $hm-government-websafe,
+  'hm-revenue-customs' $hm-revenue-customs $hm-revenue-customs-websafe,
+  'hm-treasury' $hm-treasury $hm-treasury-websafe,
+  'home-office' $home-office $home-office-websafe,
+  'ministry-of-defence' $ministry-of-defence $ministry-of-defence-websafe,
+  'ministry-of-justice' $ministry-of-justice $ministry-of-justice-websafe,
+  'northern-ireland-office' $northern-ireland-office $northern-ireland-office-websafe,
+  'office-of-the-advocate-general-for-scotland' $office-of-the-advocate-general-for-scotland $office-of-the-advocate-general-for-scotland-websafe,
+  'office-of-the-leader-of-the-house-of-lords' $office-of-the-leader-of-the-house-of-lords $office-of-the-leader-of-the-house-of-lords-websafe,
+  'scotland-office' $scotland-office $scotland-office-websafe,
+  'the-office-of-the-leader-of-the-house-of-commons' $the-office-of-the-leader-of-the-house-of-commons $the-office-of-the-leader-of-the-house-of-commons-websafe,
+  'uk-export-finance' $uk-export-finance $uk-export-finance-websafe,
+  'uk-trade-investment' $uk-trade-investment $uk-trade-investment-websafe,
+  'wales-office' $wales-office $wales-office-websafe;

data/lib/assets/stylesheets/govuk_frontend_toolkit/colours/_palette.scss

@@ -0,0 +1,77 @@
+// Brand colours
+$govuk-blue: #005ea5;
+$mainstream-brand: $govuk-blue;
+
+// Standard palette, colours
+$purple: #2e358b;
+$purple-50: #9799c4;
+$purple-25: #d5d6e7;
+$mauve: #6f72af;
+$mauve-50: #b7b9d7;
+$mauve-25: #e2e2ef;
+$fuschia: #912b88;
+$fuschia-50: #c994c3;
+$fuschia-25: #e9d4e6;
+$pink: #d53880;
+$pink-50: #eb9bbe;
+$pink-25: #f6d7e5;
+$baby-pink: #f499be;
+$baby-pink-50: #faccdf;
+$baby-pink-25: #fdebf2;
+$red: #b10e1e;
+$red-50: #d9888c;
+$red-25: #efcfd1;
+$mellow-red: #df3034;
+$mellow-red-50: #ef9998;
+$mellow-red-25: #f9d6d6;
+$orange: #f47738;
+$orange-50: #fabb96;
+$orange-25: #fde4d4;
+$brown: #b58840;
+$brown-50: #dac39c;
+$brown-25: #f0e7d7;
+$yellow: #ffbf47;
+$yellow-50: #ffdf94;
+$yellow-25: #fff2d3;
+$grass-green: #85994b;
+$grass-green-50: #c2cca3;
+$grass-green-25: #e7ebda;
+$green: #006435;
+$green-50: #7fb299;
+$green-25: #cce0d6;
+$turquoise: #28a197;
+$turquoise-50: #95d0cb;
+$turquoise-25: #d5ecea;
+$light-blue: #2b8cc4;
+$light-blue-50: #96c6e2;
+$light-blue-25: #d5e8f3;
+
+// Standard palette, greys
+$black: #0b0c0c;
+$grey-1: #6f777b;
+$grey-2: #bfc1c3;
+$grey-3: #dee0e2;
+$grey-4: #f8f8f8;
+$white: #fff;
+
+// Semantic colour names
+$link-colour: $govuk-blue;
+$link-active-colour: $light-blue;
+$link-hover-colour: $light-blue;
+$link-visited-colour: #4c2c92;
+$button-colour: #00823b;
+$focus-colour: $yellow;
+$text-colour: $black;             // Standard text colour
+$secondary-text-colour: $grey-1;  // Section headers, help text etc.
+$border-colour: $grey-2;          // Borders, seperators, rules, keylines etc.
+$panel-colour: $grey-3;           // Related links panel, page footer etc.
+$canvas-colour: $grey-4;          // Page background
+$highlight-colour: $grey-4;       // Table stripes etc.
+$page-colour: $white;             // The page
+$discovery-colour: $fuschia;      // Discovery badges and banners
+$alpha-colour: $pink;             // Alpha badges and banners
+$beta-colour: $orange;            // Beta badges and banners
+$live-colour: $grass-green;       // Live badges and banners
+$banner-text-colour: #000;        // Text colour for Alpha & Beta banners
+$error-colour: $red;              // Error text and border colour
+$error-background: #fef7f7;       // Error background colour

data/lib/assets/stylesheets/govuk_frontend_toolkit/design-patterns/_alpha-beta.scss

@@ -0,0 +1,66 @@
+@import "../colours";
+@import "../typography";
+@import "../shims";
+@import "../grid_layout";
+
+// Phase banner usage:
+//
+// .phase-banner {
+//    @include phase-banner($state: beta);
+// }
+
+@mixin phase-banner($state: alpha) {
+  padding: 10px 0 8px;
+
+  @include media(tablet) {
+    padding-bottom: 10px;
+  }
+
+  border-bottom: 1px solid $border-colour;
+
+  p {
+    display: table;
+    margin: 0;
+    color: $banner-text-colour;
+    @include core-16;
+  }
+
+  .phase-tag {
+    @include phase-tag($state);
+  }
+
+  span {
+    display: table-cell;
+    vertical-align: baseline;
+  }
+}
+
+// Phase tag usage:
+//
+// Alpha
+// .phase-tag {
+//    @include phase-tag;
+// }
+//
+// Beta
+// .phase-tag {
+//    @include phase-tag(beta);
+// }
+
+@mixin phase-tag($state: alpha) {
+  @include inline-block;
+  margin: 0 8px 0 0;
+  padding: 2px 5px 0;
+
+  @include bold-16($line-height: 20 / 16);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  text-decoration: none;
+
+  color: $white;
+  @if $state == alpha {
+    background-color: $alpha-colour;
+  } @else if $state == beta {
+    background-color: $beta-colour;
+  }
+}

data/lib/assets/stylesheets/govuk_frontend_toolkit/design-patterns/_breadcrumbs.scss

@@ -0,0 +1,53 @@
+@import "../colours";
+@import "../typography";
+@import "../shims";
+@import "../url-helpers";
+
+// Breadcrumbs usage:
+//
+// .breadcrumbs {
+//    @include breadcrumbs;
+// }
+
+@mixin breadcrumbs {
+
+  padding-top: 0.75em;
+  padding-bottom: 0.75em;
+
+  ol {
+    @extend %contain-floats;
+  }
+
+  li {
+    @include core-16;
+    float: left;
+
+    background-image: file-url("separator.png");
+
+    @include device-pixel-ratio() {
+      background-image: file-url("separator-2x.png");
+      background-size: 6px 11px;
+    }
+
+    background-position: 0% 50%;
+    background-repeat: no-repeat;
+
+    list-style: none;
+
+    margin-left: 0.6em;
+    margin-bottom: 0.4em;
+    padding-left: 0.9em;
+
+    &:first-child {
+      background-image: none;
+      margin-left: 0;
+      padding-left: 0;
+    }
+
+  }
+
+  a {
+    color: $text-colour;
+  }
+
+}

data/lib/assets/stylesheets/govuk_frontend_toolkit/design-patterns/_buttons.scss

@@ -0,0 +1,141 @@
+@import '../shims';
+@import '../css3';
+@import '../conditionals';
+@import '../colours';
+
+// Mixin and defaults for making buttons on GOV.UK services.
+
+// For guidance, see: https://www.gov.uk/service-manual/design-and-content/resources/buttons.html
+
+// Example usage:
+
+// .button{
+//   @include button;
+// }
+// .button-secondary{
+//   @include button($grey-3);
+// }
+// .button-warning{
+//   @include button($red);
+// }
+
+
+@mixin button($colour: $button-colour) {
+  // Colour
+  background-color: $colour;
+
+  // Size and shape
+  position: relative;
+  @include inline-block;
+  padding: .526315em .789473em .263157em; // 10px 15px 5px
+  border: none;
+  @include border-radius(0);
+  -webkit-appearance: none;
+
+  // Bottom edge effect
+  @include box-shadow(0 2px 0 darken($colour, 15%));
+  @include ie-lte(8) {
+    border-bottom: 2px solid darken($colour, 15%);
+  }
+
+  // Text
+  font-size: 1em; // inherit from parent
+  line-height: 1.25;
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+
+  // Interaction
+  cursor: pointer;
+
+  &:visited {
+    background-color: $colour;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: darken($colour, 5%);
+  }
+
+  &:active {
+    top: 2px;
+    @include box-shadow(0 0 0 $colour);
+  }
+
+  // Disabled button styles
+  &.disabled,
+  &[disabled="disabled"],
+  &[disabled] {
+    @include opacity(0.5);
+    &:hover {
+      cursor: default;
+      background-color: $colour;
+    }
+
+    &:active {
+      top: 0;
+      @include box-shadow(0 2px 0 darken($colour, 15%));
+      @include ie-lte(8) {
+        border-bottom: 2px solid darken($colour, 15%);
+      }
+    }
+  }
+
+  // Set text colour depending on background colour
+  @if lightness($colour) < 50% {
+    color: $white;
+
+    &:link,
+    &:hover,
+    &:focus,
+    &:visited {
+      color: $white;
+    }
+  } @else {
+    color: $text-colour;
+
+    &:link,
+    &:hover,
+    &:focus,
+    &:visited {
+      color: $text-colour;
+    }
+  }
+
+  // making the click target bigger than the button
+  // (and fill the space made when the button moves)
+  &:before {
+    content: "";
+    height: 110%;
+    width: 100%;
+    display: block;
+    background: transparent;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &:active:before {
+    top: -10%;
+    height: 120%;
+
+    // IE6 ignores the :before psuedo-class but applies the block to :active
+    // It therefore needs to be reset
+    @include ie(6) {
+      top: auto;
+      height: 100%;
+    }
+  }
+
+  // Fixes a bug where IE puts a black border around certain elements
+  @include ie-lte(8) {
+    &[type="submit"],
+    &[type="reset"],
+    &[type="button"] {
+      filter: chroma(color = $black);
+    }
+
+    &[type=submit].button {
+      filter: none;
+    }
+  }
+}