Merge pull request #1289 from alphagov/update-grid-frontend

Update grid usages to GOV.UK Frontend
alphagov · Apr 29, 2019 · 960e79d · 960e79d
2 parents df79707 + ebe6054
commit 960e79d
Show file tree

Hide file tree

Showing 62 changed files with 212 additions and 222 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -1,8 +1,10 @@
 // The main application stylesheet
 
+// Components from govuk_publishing_components gem
+@import 'govuk_publishing_components/all_components';
+
 // govuk_frontend_toolkit imports
 @import 'colours';
-@import 'measurements';
 @import 'shims';
 @import 'typography';
 
@@ -21,9 +23,6 @@
 // Components from this application
 @import 'components/*';
 
-// Components from govuk_publishing_components gem
-@import 'govuk_publishing_components/all_components';
-
 // pages specific view imports
 @import 'views/case-studies';
 @import 'views/coming-soon';

diff --git a/app/assets/stylesheets/components/_back-to-top.scss b/app/assets/stylesheets/components/_back-to-top.scss
@@ -1,9 +1,9 @@
 .app-c-back-to-top {
   @include core-16;
   display: inline-block;
-  margin-bottom: $gutter-half;
-  margin-left: $gutter-half;
-  margin-right: $gutter-half;
+  margin-bottom: govuk-spacing(3);
+  margin-left: govuk-spacing(3);
+  margin-right: govuk-spacing(3);
 }
 
 .app-c-back-to-top__icon {

diff --git a/app/assets/stylesheets/components/_banner.scss b/app/assets/stylesheets/components/_banner.scss
@@ -1,22 +1,20 @@
-@import "grid_layout";
-
 .app-c-banner {
   @include responsive-bottom-margin;
   @include core-19;
   @include white-links;
   background: $govuk-blue;
   color: $white;
-  padding: $gutter-half;
+  padding: govuk-spacing(3);
   clear: both;
 
   @include media(tablet) {
-    padding: $gutter-two-thirds $gutter;
+    padding: govuk-spacing(4) govuk-spacing(6);
   }
 }
 
-.app-c-banner--grid {
+.app-c-banner--aside {
   @include media(tablet) {
-    padding: $gutter;
+    padding: govuk-spacing(6);
   }
 }
 
@@ -26,12 +24,12 @@
 
 .app-c-banner__title {
   @include bold-27;
-  margin-bottom: $gutter-one-third;
+  margin-bottom: govuk-spacing(2);
 }
 
 .app-c-banner__desc {
   @include core-19;
   // Ensure the text has a line-length of around 60 characters
   max-width: 30em;
-  padding-top: $gutter-one-third;
+  padding-top: govuk-spacing(2);
 }
diff --git a/app/assets/stylesheets/components/_contents-list-with-body.scss b/app/assets/stylesheets/components/_contents-list-with-body.scss
@@ -13,10 +13,10 @@
 }
 
 .app-c-contents-list-with-body__link-wrapper {
-  padding-bottom: $gutter-one-third;
+  padding-bottom: govuk-spacing(2);
 
   .app-c-back-to-top {
-    padding-bottom: $gutter-one-third;
+    padding-bottom: govuk-spacing(2);
   }
 }
 
@@ -32,17 +32,17 @@
   z-index: 1;
 
   @include media(tablet) {
-    padding-left: $gutter-one-third;
+    padding-left: govuk-spacing(2);
   }
 
   .app-c-back-to-top {
     color: $link-colour;
     margin-bottom: 0;
-    padding: $gutter-half;
+    padding: govuk-spacing(3);
     width: percentage(2 / 3);
 
     @include media(tablet) {
-      padding: $gutter-two-thirds;
+      padding: govuk-spacing(4);
     }
   }
 

diff --git a/app/assets/stylesheets/components/_download-link.scss b/app/assets/stylesheets/components/_download-link.scss
@@ -1,11 +1,11 @@
 .app-c-download-link {
   display: inline-block;
   @include bold-19;
-  margin-top: $gutter-half;
-  margin-bottom: $gutter-half;
+  margin-top: govuk-spacing(3);
+  margin-bottom: govuk-spacing(3);
 
   @include media(tablet) {
-    margin-top: $gutter;
+    margin-top: govuk-spacing(6);
   }
 }
 

diff --git a/app/assets/stylesheets/components/_figure.scss b/app/assets/stylesheets/components/_figure.scss
@@ -3,7 +3,7 @@
   @include responsive-bottom-margin;
 
   border-top: 1px solid $border-colour;
-  padding-top: $gutter-half;
+  padding-top: govuk-spacing(3);
 }
 
 .app-c-figure__image {
@@ -28,19 +28,19 @@
 
     box-sizing: border-box;
     float: left;
-    padding-left: $gutter-half;
+    padding-left: govuk-spacing(3);
     width: 50%;
   }
 
   @include media(mobile) {
-    margin-top: $gutter-one-third;
+    margin-top: govuk-spacing(2);
   }
 }
 
 .app-c-figure__figcaption-text {
   margin-bottom: 0;
 
   @include media(desktop, tablet) {
-    margin-bottom: $gutter-one-third;
+    margin-bottom: govuk-spacing(2);
   }
 }
diff --git a/app/assets/stylesheets/components/_important-metadata.scss b/app/assets/stylesheets/components/_important-metadata.scss
@@ -3,11 +3,11 @@
   @include white-links;
   background: $govuk-blue;
   color: $white;
-  padding: $gutter-half;
+  padding: govuk-spacing(3);
 
   @include media(tablet) {
     overflow: auto;
-    padding: $gutter-two-thirds $gutter;
+    padding: govuk-spacing(4) govuk-spacing(6);
   }
 }
 
@@ -25,7 +25,7 @@
 
 .app-c-important-metadata__term {
   float: left;
-  padding-right: $gutter-one-third / 2;
+  padding-right: govuk-spacing(1);
 }
 
 .app-c-important-metadata__definition {

diff --git a/app/assets/stylesheets/components/_published-dates.scss b/app/assets/stylesheets/components/_published-dates.scss
@@ -25,6 +25,6 @@
 }
 
 .app-c-published-dates--history {
-  padding-top: $gutter-one-third;
+  padding-top: govuk-spacing(2);
   border-top: 1px solid $border-colour;
 }
diff --git a/app/assets/stylesheets/components/_publisher-metadata.scss b/app/assets/stylesheets/components/_publisher-metadata.scss
@@ -1,7 +1,7 @@
 .app-c-publisher-metadata {
   @include responsive-bottom-margin;
   @include core-16;
-  padding-top: $gutter-half;
+  padding-top: govuk-spacing(3);
 }
 
 .app-c-publisher-metadata__other a {
@@ -10,7 +10,7 @@
 
 .app-c-publisher-metadata__term {
   float: left;
-  padding-right: $gutter-one-third / 2;
+  padding-right: govuk-spacing(1);
 
   .direction-rtl & {
     float: none;

diff --git a/app/assets/stylesheets/helpers/_content-bottom-margin.scss b/app/assets/stylesheets/helpers/_content-bottom-margin.scss
@@ -1,5 +1,5 @@
 .content-bottom-margin {
-  margin-bottom: $gutter-two-thirds;
+  margin-bottom: govuk-spacing(4);
 
   @include media(tablet) {
     @include responsive-bottom-margin;

diff --git a/app/assets/stylesheets/helpers/_parts.scss b/app/assets/stylesheets/helpers/_parts.scss
@@ -1,13 +1,13 @@
 @mixin parts {
   .part-navigation-container {
-    margin-top: $gutter;
-    margin-bottom: $gutter;
-    padding-bottom: $gutter-half;
+    margin-top: govuk-spacing(6);
+    margin-bottom: govuk-spacing(6);
+    padding-bottom: govuk-spacing(3);
 
     @include media(tablet) {
       margin-top: 0;
       margin-bottom: 0;
-      padding-bottom: $gutter-half;
+      padding-bottom: govuk-spacing(3);
     }
 
     border-bottom: 1px solid $grey-2;
@@ -33,12 +33,12 @@
 
   .part-title {
     @include bold-27;
-    margin-bottom: $gutter-half;
-    margin-top: $gutter-half;
+    margin-bottom: govuk-spacing(3);
+    margin-top: govuk-spacing(3);
 
     @include media(tablet) {
-      margin-bottom: $gutter-two-thirds;
-      margin-top: $gutter-two-thirds;
+      margin-bottom: govuk-spacing(4);
+      margin-top: govuk-spacing(4);
     }
   }
 }
diff --git a/app/assets/stylesheets/helpers/_publisher-metadata-with-logo.scss b/app/assets/stylesheets/helpers/_publisher-metadata-with-logo.scss
@@ -2,10 +2,10 @@
 // roll out the combination of metadata + logo across
 // formats so they may ultimately become component styles.
 .metadata-logo-wrapper {
-  @extend %contain-floats;
+  @include govuk-clearfix;
   border-top: 1px solid $border-colour;
-  margin-left: $gutter-half;
-  margin-right: $gutter-half;
+  margin-left: govuk-spacing(3);
+  margin-right: govuk-spacing(3);
 
   .metadata-column {
     padding-left: 0;
@@ -14,8 +14,8 @@
   .metadata-logo {
     max-height: 90px;
     max-width: 100%;
-    padding-bottom: $gutter-half;
-    padding-top: $gutter-half;
+    padding-bottom: govuk-spacing(3);
+    padding-top: govuk-spacing(3);
 
     @include media(tablet) {
       float: right;

diff --git a/app/assets/stylesheets/helpers/_sidebar-with-body.scss b/app/assets/stylesheets/helpers/_sidebar-with-body.scss
@@ -1,6 +1,6 @@
 @mixin sidebar-with-body {
   .sidebar-with-body {
     position: relative;
-    margin-bottom: $gutter * 1.5;
+    margin-bottom: govuk-spacing(8);
   }
 }
diff --git a/app/assets/stylesheets/mixins/_margins.scss b/app/assets/stylesheets/mixins/_margins.scss
@@ -1,16 +1,16 @@
 @mixin responsive-bottom-margin {
-  margin-bottom: $gutter-half;
+  margin-bottom: govuk-spacing(3);
 
   @include media(tablet) {
-    margin-bottom: $gutter * 1.5;
+    margin-bottom: govuk-spacing(8);
   }
 }
 
 @mixin responsive-top-margin {
-  margin-top: $gutter-half;
+  margin-top: govuk-spacing(3);
 
   @include media(tablet) {
-    margin-top: $gutter * 1.5;
+    margin-top: govuk-spacing(8);
   }
 }
 

diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss
@@ -1,5 +1,4 @@
 // govuk_frontend_toolkit imports
-@import 'measurements';
 @import 'typography';
 
 @import 'govuk_publishing_components/all_components_print';

diff --git a/app/assets/stylesheets/views/_answer.scss b/app/assets/stylesheets/views/_answer.scss
@@ -2,6 +2,6 @@
   @include add-title-margin;
 
   .last-updated {
-    padding-bottom: $gutter-half;
+    padding-bottom: govuk-spacing(3);
   }
 }
diff --git a/app/assets/stylesheets/views/_coming-soon.scss b/app/assets/stylesheets/views/_coming-soon.scss
@@ -1,6 +1,6 @@
 .coming-soon {
   .summary {
     @include core-24;
-    margin-bottom: $gutter-half;
+    margin-bottom: govuk-spacing(3);
   }
 }
diff --git a/app/assets/stylesheets/views/_consultation.scss b/app/assets/stylesheets/views/_consultation.scss
@@ -9,7 +9,7 @@
     border-top: 1px solid $border-colour;
 
     @include media(tablet) {
-      padding-top: $gutter;
+      padding-top: govuk-spacing(6);
     }
   }
 }
diff --git a/app/assets/stylesheets/views/_document-collection.scss b/app/assets/stylesheets/views/_document-collection.scss
@@ -4,12 +4,12 @@
 
   .group-title {
     @include bold-27;
-    margin-top: $gutter;
-    margin-bottom: $gutter-half;
+    margin-top: govuk-spacing(6);
+    margin-bottom: govuk-spacing(3);
 
     @include media(desktop) {
-      margin-top: $gutter * 1.5;
-      margin-bottom: $gutter-two-thirds;
+      margin-top: govuk-spacing(8);
+      margin-bottom: govuk-spacing(4);
     }
 
     &:first-child {

diff --git a/app/assets/stylesheets/views/_help-page.scss b/app/assets/stylesheets/views/_help-page.scss
@@ -2,6 +2,6 @@
   @include add-title-margin;
 
   .last-updated {
-    padding-bottom: $gutter-half;
+    padding-bottom: govuk-spacing(3);
   }
 }