Replace $gutter with govuk-spacing function

Replaced `$gutter` and similar variables such as `$gutter-half` with the `govuk-spacing()` static spacing function. This uses `govuk-spacing()` instead of `$govuk-gutter` because `$govuk-gutter` should only be used for the gaps in between grid columns and we were mostly using `$gutter` to add more space around elements. There are other places in the SCSS files where we had hardcoded a measurement in px which could be replaced with `govuk-spacing`, but this commit only replaces the existing uses of `$gutter`.
2026-08-02 20:59:39 -04:00 · 2020-02-21 13:21:44 +00:00
parent a85f7fa2c1
commit bc83ff6c09
35 changed files with 139 additions and 139 deletions
--- a/app/assets/stylesheets/_grids.scss
+++ b/app/assets/stylesheets/_grids.scss
@@ -23,28 +23,28 @@
 .top-gutter {
  @extend %contain-floats;
  display: block;
-  margin-top: $gutter;
+  margin-top: govuk-spacing(6);
  clear: both;
 }

 .top-gutter-4-3 {
  @extend %top-gutter;
-  margin-top: $gutter * 4 / 3;
+  margin-top: govuk-spacing(7);
 }

 .top-gutter-1-2 {
  @extend %top-gutter;
-  margin-top: $gutter-half;
+  margin-top: govuk-spacing(3);
 }

 .top-gutter-1-3 {
  @extend %top-gutter;
-  margin-top: $gutter / 3;
+  margin-top: govuk-spacing(2);
 }

 .top-gutter-2-3 {
  @extend %top-gutter;
-  margin-top: $gutter * 2 / 3;
+  margin-top: govuk-spacing(4);
 }

 .top-gutter-0 {
@@ -54,41 +54,41 @@
 %bottom-gutter,
 .bottom-gutter {
  @extend %contain-floats;
-  margin-bottom: $gutter;
+  margin-bottom: govuk-spacing(6);
  clear: both;
 }

 .bottom-gutter-2-3 {
  @extend %bottom-gutter;
-  margin-bottom: $gutter-two-thirds;
+  margin-bottom: govuk-spacing(4);
 }

 .bottom-gutter-1-2 {
  @extend %bottom-gutter;
-  margin-bottom: $gutter-half;
+  margin-bottom: govuk-spacing(3);
 }

 .bottom-gutter-1-3 {
  @extend %bottom-gutter;
-  margin-bottom: $gutter/3;
+  margin-bottom: govuk-spacing(2);
 }

 .bottom-gutter-3-2 {
  @extend %bottom-gutter;
-  margin-bottom: $gutter * 3/2;
+  margin-bottom: govuk-spacing(6) * 3/2;
 }

 .bottom-gutter-2 {
  @extend %bottom-gutter;
-  margin-bottom: $gutter * 2;
+  margin-bottom: govuk-spacing(9);
 }

 .left-gutter {
-  padding-left: $gutter;
+  padding-left: govuk-spacing(6);
 }

 .left-gutter-4-3 {
-  padding-left: $gutter * 4 / 3;
+  padding-left: govuk-spacing(7);
 }

 .align-with-heading {
@@ -111,5 +111,5 @@
 }

 .align-with-big-number-hint {
-  margin-top: $gutter / 0.6;
+  margin-top: govuk-spacing(8);
 }
--- a/app/assets/stylesheets/app.scss
+++ b/app/assets/stylesheets/app.scss
@@ -17,7 +17,7 @@

  .heading-large,
  > .heading-medium {
-    margin: $gutter-half 0 ($gutter / 3 * 2) 0;
+    margin: govuk-spacing(3) 0 govuk-spacing(4) 0;
    word-wrap: break-word;

    &.top-gutter-0 {
@@ -55,7 +55,7 @@ td {
 }

 .heading-medium {
-  margin-top: $gutter;
+  margin-top: govuk-spacing(6);
 }

 .form-label {
@@ -86,12 +86,12 @@ td {

 details summary {
  text-decoration: underline;
-  margin-bottom: $gutter-half;
+  margin-bottom: govuk-spacing(3);
 }

 .spreadsheet {

-  margin-bottom: -$gutter;
+  margin-bottom: -govuk-spacing(6);

  .table {
    margin-bottom: 0;
@@ -208,5 +208,5 @@ details .arrow {
 }

 .heading-upcoming-jobs {
-  margin-top: $gutter-half;
+  margin-top: govuk-spacing(3);
 }
--- a/app/assets/stylesheets/components/banner.scss
+++ b/app/assets/stylesheets/components/banner.scss
@@ -5,8 +5,8 @@
  @include bold-19;
  color: $button-colour;
  display: block;
-  padding: $gutter-half;
-  margin: $gutter-half 0 $gutter 0;
+  padding: govuk-spacing(3);
+  margin: govuk-spacing(3) 0 govuk-spacing(6) 0;
  text-align: left;
  position: relative;
  clear: both;
@@ -28,11 +28,11 @@

 %banner-with-tick,
 .banner-with-tick {
-  padding: $gutter-half ($gutter + $gutter-half);
+  padding: govuk-spacing(3) (govuk-spacing(6) + govuk-spacing(3));
  background-image: file-url('tick.png');
  background-size: 19px;
  background-repeat: no-repeat;
-  background-position: $gutter-half $gutter-half;
+  background-position: govuk-spacing(3) govuk-spacing(3);

 }

@@ -68,7 +68,7 @@
  color: $white;
  margin-top: 10px;
  margin-bottom: 0;
-  padding: $gutter;
+  padding: govuk-spacing(6);
  height: 425px;
  overflow: hidden;
  box-shadow: inset 0 -1em 1.6em 0 rgba(0, 0, 0, 0.05);
@@ -81,14 +81,14 @@
  p {

    margin-top: 0;
-    margin-bottom: $gutter;
+    margin-bottom: govuk-spacing(6);

    &:last-child {
      margin-bottom: 0;
    }

    & + p {
-      margin-top: -$gutter-half;
+      margin-top: -govuk-spacing(3);
    }

  }
@@ -98,7 +98,7 @@
    font-weight: bold;
    display: block;
    padding: 0 ;
-    margin: 0 0 $gutter 0;
+    margin: 0 0 govuk-spacing(6) 0;

    &:link,
    &:visited {
@@ -133,15 +133,15 @@
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
-  padding: ($gutter-half - 1px) 0 ($gutter-half + 1px) 0;
+  padding: (govuk-spacing(3) - 1px) 0 (govuk-spacing(3) + 1px) 0;
  border-top: 1px solid $border-colour;
  border-bottom: 1px solid $border-colour;
-  margin-bottom: $gutter;
+  margin-bottom: govuk-spacing(6);
  text-decoration: none;

  &:focus {
    border-top: 1px solid transparent;
-    border-bottom: 1px solid transparent;    
+    border-bottom: 1px solid transparent;
  }

  &-count,
@@ -175,7 +175,7 @@
  }

  & + .banner-dashboard {
-    margin-top: -$gutter;
+    margin-top: -govuk-spacing(6);
    border-top: none;
  }
 }
--- a/app/assets/stylesheets/components/big-number.scss
+++ b/app/assets/stylesheets/components/big-number.scss
@@ -18,7 +18,7 @@

 .big-number-dark {
  @extend %big-number;
-  padding: $gutter-half;
+  padding: govuk-spacing(3);
  position: relative;
  background: $black;
  color: $white;
@@ -52,11 +52,11 @@

  @extend %big-number;
  position: relative;
-  margin-bottom: $gutter-two-thirds;
+  margin-bottom: govuk-spacing(4);

  .big-number,
  .big-number-smaller {
-    padding: $gutter-half;
+    padding: govuk-spacing(3);
    position: relative;
    background: $black;
    color: $white;
@@ -146,12 +146,12 @@
 .big-number-meta-wrapper {

  position: relative;
-  margin: $gutter-half 0 $gutter 0;
+  margin: govuk-spacing(3) 0 govuk-spacing(6) 0;
  background: $govuk-blue;

  .big-number-meta {

-    padding: ($gutter / 3) $gutter-half;
+    padding: govuk-spacing(2) govuk-spacing(3);
    color: $white;
    pointer-events: none;

--- a/app/assets/stylesheets/components/browse-list.scss
+++ b/app/assets/stylesheets/components/browse-list.scss
@@ -1,11 +1,11 @@
 .browse-list {
-  margin-bottom: $gutter-half;
+  margin-bottom: govuk-spacing(3);

  .browse-sub-list {
-    margin-top: $gutter-half;
-    margin-left: $gutter;
+    margin-top: govuk-spacing(3);
+    margin-left: govuk-spacing(6);
    @include media('desktop') {
-      margin-left: $gutter * 2;
+      margin-left: govuk-spacing(9);
    }
  }

@@ -13,7 +13,7 @@
  &-sub-item {
    @include bold-24;
    list-style: none;
-    margin-bottom: $gutter-half;
+    margin-bottom: govuk-spacing(3);
  }

  &-link {
--- a/app/assets/stylesheets/components/checkboxes.scss
+++ b/app/assets/stylesheets/components/checkboxes.scss
@@ -3,7 +3,7 @@
  .selection-summary__text {
    @include core-19($tabular-numbers: true);
    padding: 5px 0 0 0;
-    margin-bottom: $gutter / 2;
+    margin-bottom: govuk-spacing(3);

    &:focus {
      outline: none;
@@ -66,7 +66,7 @@
 }

 .selection-content {
-  margin-bottom: ($gutter / 3) * 2;
+  margin-bottom: govuk-spacing(4);

  .checkboxes-nested {
    margin-bottom: 0;
--- a/app/assets/stylesheets/components/conditional-radios.scss
+++ b/app/assets/stylesheets/components/conditional-radios.scss
@@ -1,5 +1,5 @@
 $border-thickness: 4px;
-$top-spacing: $gutter - 5px;
+$top-spacing: govuk-spacing(5);

 .multiple-choice {

@@ -17,8 +17,8 @@ $top-spacing: $gutter - 5px;

  &-panel {
    border-left: $border-thickness solid $border-colour;
-    margin: 0 0 (-$gutter-half) ($gutter-half + ($border-thickness / 2));
-    padding: $gutter-half 0 0 ($gutter - ($border-thickness / 2));
+    margin: 0 0 (-govuk-spacing(3)) (govuk-spacing(3) + ($border-thickness / 2));
+    padding: govuk-spacing(3) 0 0 (govuk-spacing(6) - ($border-thickness / 2));
    position: relative;
    top: -$top-spacing;
    z-index: 1;
--- a/app/assets/stylesheets/components/email-message.scss
+++ b/app/assets/stylesheets/components/email-message.scss
@@ -1,12 +1,12 @@
 $white-50-opaque: rgba($white, 0.5);
 $button-bottom-border-colour: rgba(0, 0, 0, 0.17);
-$email-message-gutter: $gutter * 2;
+$email-message-gutter: govuk-spacing(9);

 // sass-lint:disable no-important

 .email-message {

-  margin-bottom: $gutter;
+  margin-bottom: govuk-spacing(6);
  border: 1px solid $border-colour;

  &-meta {
@@ -49,7 +49,7 @@ $email-message-gutter: $gutter * 2;

    width: 100%;
    box-sizing: border-box;
-    padding: $gutter-half $email-message-gutter 0 $email-message-gutter;
+    padding: govuk-spacing(3) $email-message-gutter 0 $email-message-gutter;
    margin: 0 0 0 0;
    clear: both;
    position: relative;
--- a/app/assets/stylesheets/components/file-upload.scss
+++ b/app/assets/stylesheets/components/file-upload.scss
@@ -31,7 +31,7 @@
    &-filename {
      @include bold-19;
      display: inline-block;
-      padding-left: $gutter-half;
+      padding-left: govuk-spacing(3);
    }

    &-submit {
--- a/app/assets/stylesheets/components/fullscreen-table.scss
+++ b/app/assets/stylesheets/components/fullscreen-table.scss
@@ -6,7 +6,7 @@
    z-index: 10;
    overflow-y: hidden;
    box-sizing: border-box;
-    margin: 0 0 $gutter 0;
+    margin: 0 0 govuk-spacing(6) 0;
    padding: 0 0 0 0;
    overflow: hidden;
    border-bottom: 1px solid $border-colour;
--- a/app/assets/stylesheets/components/letter.scss
+++ b/app/assets/stylesheets/components/letter.scss
@@ -9,7 +9,7 @@ $iso-paper-ratio: 141.42135624%;
 .letter {

  padding: $iso-paper-ratio 0 0 0;
-  margin: 0 0 $gutter 0;
+  margin: 0 0 govuk-spacing(6) 0;
  position: relative;
  background: $panel-colour;

--- a/app/assets/stylesheets/components/live-search.scss
+++ b/app/assets/stylesheets/components/live-search.scss
@@ -14,7 +14,7 @@ input[type=search] {
  }

  .form-group {
-    margin-bottom: $gutter * 2 / 3;
+    margin-bottom: govuk-spacing(4);
  }

 }
--- a/app/assets/stylesheets/components/message.scss
+++ b/app/assets/stylesheets/components/message.scss
@@ -2,7 +2,7 @@
  display: inline-block;
  vertical-align: top;
  width: 20px;
-  height: $gutter;
+  height: govuk-spacing(6);
  position: relative;

  &:before {
@@ -31,8 +31,8 @@
    margin: 0;

    a {
-      margin-bottom: -$gutter;
-      padding-bottom: $gutter;
+      margin-bottom: -govuk-spacing(6);
+      padding-bottom: govuk-spacing(6);

      &:hover .message-name-separator:before {
        border-color: $link-hover-colour;
@@ -64,7 +64,7 @@

  &-type {
    color: $secondary-text-colour;
-    margin: 0 0 $gutter-two-thirds 0;
+    margin: 0 0 govuk-spacing(4) 0;
    pointer-events: none;
  }

@@ -72,7 +72,7 @@

 #template-list {

-  margin-top: $gutter;
+  margin-top: govuk-spacing(6);

  &.top-gutter-5px {
    margin-top: 5px;
@@ -87,7 +87,7 @@
    &-with-checkbox {

      position: relative;
-      padding-left: $gutter * 2;
+      padding-left: govuk-spacing(9);

      .multiple-choice {
        position: absolute;
@@ -148,22 +148,22 @@

  &-empty {
    color: $secondary-text-colour;
-    padding: $gutter-half 0 $gutter-one-third 0;
+    padding: govuk-spacing(3) 0 govuk-spacing(2) 0;
  }

  &-selected-counter {
    color: $secondary-text-colour;
-    margin: $gutter-half 0;
+    margin: govuk-spacing(3) 0;

    @include media(tablet) {
      position: absolute;
      right: 0;
-      top: $gutter - 1px;
+      top: govuk-spacing(6) - 1px;
      margin: 0;
    }

    .content-fixed & {
-      right: $gutter-half;
+      right: govuk-spacing(3);
    }

  }
@@ -173,7 +173,7 @@
 .folder-heading {

  .govuk-grid-row & {
-    margin: $gutter-half 0 20px 0;
+    margin: govuk-spacing(3) 0 20px 0;
    word-wrap: break-word;
  }

@@ -246,7 +246,7 @@
  &-manage-link {
    display: block;
    text-align: right;
-    padding: $gutter-two-thirds 0 0 0;
+    padding: govuk-spacing(4) 0 0 0;
    position: relative;
    top: -6px;
  }
--- a/app/assets/stylesheets/components/navigation.scss
+++ b/app/assets/stylesheets/components/navigation.scss
@@ -1,7 +1,7 @@
 .navigation {

  @include govuk-font($size: 19);
-  padding: 0 $gutter 0 0;
+  padding: 0 govuk-spacing(6) 0 0;

  $padding-top: 14px;
  $padding-bottom: 11px;
@@ -53,7 +53,7 @@
      position: absolute;
      top: 0;
      right: 0;
-      padding: $padding-top 0 $padding-bottom $gutter-half;
+      padding: $padding-top 0 $padding-bottom govuk-spacing(3);

      &:focus {
        outline: none;
@@ -67,7 +67,7 @@

    &-back-to {

-      padding: $padding-top $gutter-half $padding-bottom 0;
+      padding: $padding-top govuk-spacing(3) $padding-bottom 0;
      display: inline-block;

    }
@@ -145,7 +145,7 @@
 // https://github.com/alphagov/product-page-example/blob/master/source/stylesheets/modules/_sub-navigation.scss
 .sub-navigation {
  @include media(tablet) {
-    margin-top: $gutter * 1.5;
+    margin-top: govuk-spacing(6) * 1.5;
  }

  ol,
@@ -160,7 +160,7 @@

    border-bottom: 1px $grey-3 solid;
    display: block;
-    padding: $gutter-one-third 0;
+    padding: govuk-spacing(2) 0;

    a:link {
      text-decoration: none;
@@ -172,7 +172,7 @@
    }

    ol ol & {
-      padding-left: $gutter;
+      padding-left: govuk-spacing(6);
    }
  }

--- a/app/assets/stylesheets/components/page-footer.scss
+++ b/app/assets/stylesheets/components/page-footer.scss
@@ -17,7 +17,7 @@

  &-secondary-link {
    display: block;
-    margin-top: $gutter;
+    margin-top: govuk-spacing(6);
  }

  &-right-aligned-link {
--- a/app/assets/stylesheets/components/pill.scss
+++ b/app/assets/stylesheets/components/pill.scss
@@ -88,7 +88,7 @@

    display: block;
    text-align: left;
-    padding: 10px $gutter-half;
+    padding: 10px govuk-spacing(3);
    text-align: center;

    &:link,
--- a/app/assets/stylesheets/components/preview-pane.scss
+++ b/app/assets/stylesheets/components/preview-pane.scss
@@ -3,7 +3,7 @@
  box-sizing: border-box;
  border: solid 1px $border-colour;
  min-height: 200px;
-  margin-bottom: $gutter
+  margin-bottom: govuk-spacing(6)
 }

 #logo-img {
--- a/app/assets/stylesheets/components/show-more.scss
+++ b/app/assets/stylesheets/components/show-more.scss
@@ -4,7 +4,7 @@
  @include core-16;
  display: block;
  padding: 0 0;
-  margin: $gutter-half 0 $gutter-half 0;
+  margin: govuk-spacing(3) 0 govuk-spacing(3) 0;
  text-align: center;
  border-top: 1px solid $border-colour;

--- a/app/assets/stylesheets/components/site-footer.scss
+++ b/app/assets/stylesheets/components/site-footer.scss
@@ -3,8 +3,8 @@
    margin: 0 auto;

    &-wrapper {
-      margin-bottom: $gutter;
-      padding-bottom: $gutter * 2;
+      margin-bottom: govuk-spacing(6);
+      padding-bottom: govuk-spacing(9);
      border-bottom: 1px solid $grey-2;
    }

--- a/app/assets/stylesheets/components/sms-message.scss
+++ b/app/assets/stylesheets/components/sms-message.scss
@@ -6,12 +6,12 @@ $tail-angle: 20deg;
  width: 100%;
  max-width: 464px;
  box-sizing: border-box;
-  padding: $gutter-half $gutter-half $gutter-half $gutter-half;
+  padding: govuk-spacing(3);
  background: $panel-colour;
  border: 1px solid $panel-colour;
  border-radius: 5px;
  white-space: normal;
-  margin: 0 0 $gutter 0;
+  margin: 0 0 govuk-spacing(6) 0;
  clear: both;
  word-wrap: break-word;

@@ -63,7 +63,7 @@ $tail-angle: 20deg;
 .sms-message-status {
  @include core-16;
  color: $secondary-text-colour;
-  margin: -20px $gutter-half 20px $gutter-half;
+  margin: -20px govuk-spacing(3) 20px govuk-spacing(3);
 }

 .sms-message-status-outbound {
--- a/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
+++ b/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
@@ -1,14 +1,14 @@
 // CSS adapted from
 // https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling

-$sticky-padding: $gutter * 2 / 3;
+$sticky-padding: govuk-spacing(4);

 .js-stick-at-top-when-scrolling,
 .js-stick-at-bottom-when-scrolling {

  overflow: hidden;
-  margin-left: -$gutter-half;
-  padding: 10px 0 0 $gutter-half;
+  margin-left: -govuk-spacing(3);
+  padding: 10px 0 0 govuk-spacing(3);
  position: relative;

  .form-group {
@@ -21,8 +21,8 @@ $sticky-padding: $gutter * 2 / 3;

  .back-to-top-link {
    position: absolute;
-    top: $gutter;
-    right: $gutter-half;
+    top: govuk-spacing(6);
+    right: govuk-spacing(3);
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
  }
@@ -41,7 +41,7 @@ $sticky-padding: $gutter * 2 / 3;
 .js-stick-at-bottom-when-scrolling {

  transition: bottom 0.1s ease-out, box-shadow 1s ease-in-out;
-  padding: $sticky-padding 0 $sticky-padding $gutter-half;
+  padding: $sticky-padding 0 $sticky-padding govuk-spacing(3);
  margin-top: -$sticky-padding;

  & + .js-stick-at-bottom-when-scrolling {
@@ -68,7 +68,7 @@ $sticky-padding: $gutter * 2 / 3;
  position: fixed;
  background: $white;
  z-index: 100;
-  padding-right: $gutter-half;
+  padding-right: govuk-spacing(3);
  margin-top: 0;

  .back-to-top-link {
--- a/app/assets/stylesheets/components/table.scss
+++ b/app/assets/stylesheets/components/table.scss
@@ -1,11 +1,11 @@
 .table {
-  margin-bottom: $gutter;
+  margin-bottom: govuk-spacing(6);
  width: 100%;
 }

 .table-heading {
  text-align: left;
-  margin: $gutter-half 0 $gutter-half 0;
+  margin: govuk-spacing(3) 0 govuk-spacing(3) 0;
 }

 .dashboard-table {
@@ -119,7 +119,7 @@

  table {
    table-layout: fixed;
-    margin-bottom: $gutter / 6;
+    margin-bottom: govuk-spacing(1);
  }

  th {
@@ -343,10 +343,10 @@

      position: absolute;

-      top: -$gutter-half;
+      top: -govuk-spacing(3);
      right: 0;
-      bottom: -$gutter-half + 4px;
-      left: -$gutter-half;
+      bottom: -govuk-spacing(3) + 4px;
+      left: -govuk-spacing(3);

      background: transparent;
    }
@@ -381,13 +381,13 @@ td.table-empty-message {

  @include core-16;
  color: $secondary-text-colour;
-  margin-bottom: $gutter * 1.3333;
+  margin-bottom: govuk-spacing(7);
  border-bottom: 1px solid $border-colour;
  padding: 35px 0 10px 0;
  text-align: center;

  .table + & {
-    margin-top: -$gutter;
+    margin-top: -govuk-spacing(6);
  }

 }
@@ -400,7 +400,7 @@ a.table-show-more-link {
  @include core-16;
  color: $secondary-text-colour;
  margin-top: 10px;
-  margin-bottom: $gutter * 1.3333;
+  margin-bottom: govuk-spacing(7);
  border-top: 1px solid $border-colour;
  border-bottom: 1px solid $border-colour;
  padding: 0.75em 0 0.5625em 0;
--- a/app/assets/stylesheets/components/task-list.scss
+++ b/app/assets/stylesheets/components/task-list.scss
@@ -6,7 +6,7 @@ $indicator-colour: $black;
  padding: 3px 8px 1px 8px;
  position: absolute;
  right: 0;
-  top: $gutter - 2px;
+  top: govuk-spacing(6) - 2px;
  margin-top: -15px;
  border: 2px solid $indicator-colour;
  pointer-events: none;
@@ -18,7 +18,7 @@ $indicator-colour: $black;
 .task-list {

  border-top: 1px solid $border-colour;
-  margin: $gutter 0;
+  margin: govuk-spacing(6) 0;

  &-item {

@@ -27,7 +27,7 @@ $indicator-colour: $black;
    a {
      border-bottom: 1px solid $border-colour;
      display: block;
-      padding: $gutter-half 0;
+      padding: govuk-spacing(3) 0;
      padding-right: 20%;
      position: relative;

@@ -37,8 +37,8 @@ $indicator-colour: $black;
        border-color: transparent;
        top: -1px;
        margin-bottom: -2px;
-        padding-top: $gutter-half + 1px;
-        padding-bottom: $gutter-half + 1px;
+        padding-top: govuk-spacing(3) + 1px;
+        padding-bottom: govuk-spacing(3) + 1px;
      }

    }
--- a/app/assets/stylesheets/components/textbox.scss
+++ b/app/assets/stylesheets/components/textbox.scss
@@ -36,7 +36,7 @@
    overflow-wrap: break-word;
    word-wrap: break-word;
    border: 2px solid transparent;
-    padding-bottom: $gutter-half;
+    padding-bottom: govuk-spacing(3);
    z-index: 10;

    .placeholder,
--- a/app/assets/stylesheets/components/tick-cross.scss
+++ b/app/assets/stylesheets/components/tick-cross.scss
@@ -51,10 +51,10 @@

          position: absolute;

-          top: -$gutter-half - 1;
+          top: -govuk-spacing(3) - 1;
          right: 0;
-          bottom: -$gutter-half;
-          left: -$gutter-half;
+          bottom: -govuk-spacing(3);
+          left: -govuk-spacing(3);

          background: transparent;
        }
--- a/app/assets/stylesheets/components/vendor/breadcrumbs.scss
+++ b/app/assets/stylesheets/components/vendor/breadcrumbs.scss
@@ -32,11 +32,11 @@
  @include govuk-width-container;
  @include core-16($line-height: (25 / 16), $line-height-640: 1.75);

-  padding: $gutter-one-third 0;
+  padding: govuk-spacing(2) 0;
  list-style: none;

  @include media(tablet) {
-    margin-bottom: $gutter;
+    margin-bottom: govuk-spacing(6);
  }

  ol {
@@ -49,7 +49,7 @@
    display: inline-block;

    margin: 0;
-    padding: 0 $gutter-one-quarter 0 (11px + $gutter-one-quarter);
+    padding: 0 (govuk-spacing(6) / 4) 0 (11px + govuk-spacing(6) / 4);

    background-image: file-url('separator.png');
    background-repeat: no-repeat;
--- a/app/assets/stylesheets/components/vendor/previous-next-navigation.scss
+++ b/app/assets/stylesheets/components/vendor/previous-next-navigation.scss
@@ -30,10 +30,10 @@ $is-ie: false !default;

 .govuk-previous-and-next-navigation {
  display: block;
-  margin-top: $gutter;
-  margin-bottom: $gutter;
-  margin-left: -$gutter-half;
-  margin-right: -$gutter-half;
+  margin-top: govuk-spacing(6);
+  margin-bottom: govuk-spacing(6);
+  margin-left: -govuk-spacing(3);
+  margin-right: -govuk-spacing(3);
  overflow: hidden;

  ul {
@@ -52,7 +52,7 @@ $is-ie: false !default;

    a {
      display: block;
-      padding: $gutter-half;
+      padding: govuk-spacing(3);
      text-decoration: none;

      &:hover,
--- a/app/assets/stylesheets/views/api.scss
+++ b/app/assets/stylesheets/views/api.scss
@@ -18,7 +18,7 @@

    &__heading {
      display: block;
-      margin-bottom: $gutter-half;
+      margin-bottom: govuk-spacing(3);

      &::before {
        top: -1.3em;
--- a/app/assets/stylesheets/views/dashboard.scss
+++ b/app/assets/stylesheets/views/dashboard.scss
@@ -5,14 +5,14 @@
  }

  > .heading-medium:first-of-type {
-    margin-top: $gutter-half;
+    margin-top: govuk-spacing(3);
  }

 }

 .keyline-block {
  border-top: 1px solid $border-colour;
-  padding-top: $gutter-half;
+  padding-top: govuk-spacing(3);
 }

 .spark-bar {
@@ -21,8 +21,8 @@
  box-sizing: border-box;
  display: block;
  width: 100%;
-  margin-bottom: $gutter-half;
-  height: $gutter-half;
+  margin-bottom: govuk-spacing(3);
+  height: govuk-spacing(3);
  color: $text-colour;
  text-align: left;

@@ -92,5 +92,5 @@

 .align-with-message-body {
  display: block;
-  margin-top: $gutter * 5 / 6;
+  margin-top: govuk-spacing(5);
 }
--- a/app/assets/stylesheets/views/get_started.scss
+++ b/app/assets/stylesheets/views/get_started.scss
@@ -5,8 +5,8 @@
  &__item {

    counter-increment: get-started-counter;
-    padding: 0 0 0 $gutter + 5px;
-    margin: ($gutter * 1.67) 0 0 0;
+    padding: 0 0 0 govuk-spacing(6) + 5px;
+    margin: govuk-spacing(8) 0 0 0;
    position: relative;

    &:before {
@@ -26,7 +26,7 @@
  &__heading {
    @include bold-24;
    display: inline-block;
-    margin: 5px 0 $gutter-half 0;
+    margin: 5px 0 govuk-spacing(3) 0;
  }

 }
--- a/app/assets/stylesheets/views/history.scss
+++ b/app/assets/stylesheets/views/history.scss
@@ -1,13 +1,13 @@
-$item-top-padding: $gutter-half;
+$item-top-padding: govuk-spacing(3);

 .history-list {

  @include core-19;
-  margin-bottom: $gutter;
+  margin-bottom: govuk-spacing(6);

  &-item {

-    padding: $item-top-padding 0 $gutter-half 0;
+    padding: $item-top-padding 0 govuk-spacing(3) 0;
    border-top: 1px solid $border-colour;
    position: relative;

--- a/app/assets/stylesheets/views/notification.scss
+++ b/app/assets/stylesheets/views/notification.scss
@@ -2,7 +2,7 @@

  @include core-16;
  color: $secondary-text-colour;
-  margin-top: -$gutter-half;
+  margin-top: -govuk-spacing(3);

  &.error {

--- a/app/assets/stylesheets/views/product-page.scss
+++ b/app/assets/stylesheets/views/product-page.scss
@@ -11,8 +11,8 @@ $button-shadow-size: $govuk-border-width-form-element;
    // We need the `<main>` section to be above it, like the default order, so when we apply the
    // negative margin-top it overlaps the theme bar at the bottom of the header
    position: relative;
-    margin: -10px 0 $gutter * 1.5 0;
-    padding: 0 0 $gutter * 2 0;
+    margin: -10px 0 govuk-spacing(6) * 1.5 0;
+    padding: 0 0 govuk-spacing(9) 0;
    background: $product-page-blue;
    color: $white;

@@ -31,12 +31,12 @@ $button-shadow-size: $govuk-border-width-form-element;

    h1 {
      @include bold-48;
-      margin: 20px 0 $gutter 0;
+      margin: 20px 0 govuk-spacing(6) 0;
    }

    p {
      @include core-24;
-      margin: $gutter-half 0 $gutter;
+      margin: govuk-spacing(3) 0 govuk-spacing(6);
    }

    .govuk-link {
@@ -58,21 +58,21 @@ $button-shadow-size: $govuk-border-width-form-element;
  &-section {

    @include govuk-width-container;
-    margin-bottom: $gutter-half;
+    margin-bottom: govuk-spacing(3);

    h2 {
      @include bold-27;
-      margin: 0 0 $gutter;
+      margin: 0 0 govuk-spacing(6);
    }

    .with-keyline {
      border-top: 1px solid $border-colour;
-      padding: $gutter * 1.5 0 0 0;
+      padding: govuk-spacing(6) * 1.5 0 0 0;
    }

    img {
      width: 100%;
-      margin: 0 0 $gutter * 1.5 0;
+      margin: 0 0 govuk-spacing(6) * 1.5 0;
    }

  }
--- a/app/assets/stylesheets/views/template.scss
+++ b/app/assets/stylesheets/views/template.scss
@@ -9,7 +9,7 @@
  position: absolute;
  background: $link-colour;
  color: $white;
-  padding: 10px $gutter-half;
+  padding: 10px govuk-spacing(3);
  z-index: 10000;

  &:link, &:visited {
--- a/app/assets/stylesheets/views/users.scss
+++ b/app/assets/stylesheets/views/users.scss
@@ -1,19 +1,19 @@
-$item-top-padding: $gutter-half;
+$item-top-padding: govuk-spacing(3);

 .user-list {

  @include core-19;
-  margin-bottom: $gutter;
+  margin-bottom: govuk-spacing(6);

  &-item {

-    padding: $item-top-padding 150px $gutter-half 0;
+    padding: $item-top-padding 150px govuk-spacing(3) 0;
    border-top: 1px solid $border-colour;
    position: relative;

    h3 {

-      padding-right: $gutter-half;
+      padding-right: govuk-spacing(3);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;