Tidy stylesheets (#1163)

* Tidy stylesheets * Consistent use of "dfe" prefix for container classes * Change to dfe-frontend from alpha release and refactor width declaration * Attempt fix to header service name, links and button (incomplete) * Linting * Update header component to match the prototype * Update class to match prototype * Remove border radius for menu button to match prototype * Update govuk-frontend to show correct tag styling * Remove capitalize for tag * Update to resolve failing check * Address PR comment about width being incorrect for some pages * Stylelint update and update for console error * Update for mobile padding * Padding update * Remove padding for content page header * Update for mobile padding --------- Co-authored-by: Katherine Martin <[email protected]>
DFE-Digital · Jul 2, 2024 · a35e68a · a35e68a
1 parent f690ae6
commit a35e68a
Show file tree

Hide file tree

Showing 20 changed files with 1,955 additions and 11,668 deletions.
diff --git a/app/assets/stylesheets/about.scss b/app/assets/stylesheets/about.scss
@@ -33,12 +33,12 @@ label.menu-icon {
 .dfe-vertical-nav {
   font-weight: 400;
   font-size: 16px;
-  line-height: 1.14286;
+  line-height: 1.1429;
 }
 
 .dfe-vertical-nav__section {
   margin: 0 0 govuk-spacing(4);
-  padding: 0px;
+  padding: 0;
   list-style-type: none;
 }
 
@@ -48,18 +48,18 @@ label.menu-icon {
   line-height: 1.25;
 
   &:hover {
-    border-left: 4px solid $department-for-education-websafe;
+    border-left: 4px solid govuk-organisation-colour('department-for-education');
   }
 
   &--current {
-    border-left: 4px solid $department-for-education;
+    border-left: 4px solid govuk-organisation-colour('department-for-education', false);
     font-weight: 700;
     background: govuk-colour('light-grey');
 
     .dfe-vertical-nav__link {
-      border-left-color: $department-for-education;
+      border-left-color: govuk-organisation-colour('department-for-education', false);
       font-weight: 700;
-      color: $department-for-education;
+      color: govuk-organisation-colour('department-for-education', false);
 
       &:hover {
         text-decoration: none;
@@ -74,12 +74,12 @@ label.menu-icon {
   padding: 7px 30px 8px 10px;
   text-decoration: none;
   margin-bottom: govuk-spacing(1);
-  color: $department-for-education;
+  color: govuk-organisation-colour('department-for-education', false);
 
   &:active,
   &:hover {
     color: govuk-colour('blue');
-    border-left-color: $department-for-education-websafe;
+    border-left-color: govuk-organisation-colour('department-for-education');
     box-shadow: none;
     outline: 0;
   }

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -1,26 +1,13 @@
-/*
-https://frontend.design-system.service.gov.uk/sass-api-reference
-https://design.education.gov.uk/design-system/dfe-frontend
-https://design-system.service.gov.uk/styles/colour/
+// https://frontend.design-system.service.gov.uk/sass-api-reference
+// https://design.education.gov.uk/design-system/dfe-frontend
+// https://design-system.service.gov.uk/styles/colour/
 
-https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_colours.scss
-*/
-$department-for-education: #003a69;
-$department-for-education-websafe: #347ca9;
+@import 'govuk-frontend/dist/govuk/all';
+@import 'dfe-frontend/packages/dfefrontend';
 
-$govuk-new-link-styles: true;
-$govuk-page-width: 1200px;
+$light-blue: tint(govuk-organisation-colour('department-for-education'), 90%);
 
-.govuk-width-container {
-  max-width: $govuk-page-width;
-}
-
-@import 'govuk-frontend/govuk/all';
-@import 'dfe-frontend-alpha/packages/dfefrontend';
-
-$light-blue: tint($department-for-education-websafe, 90%);
-
-@import 'dfe-header';
+@import 'header';
 @import 'print';
 @import 'about';
 @import 'card';
@@ -44,8 +31,6 @@ $light-blue: tint($department-for-education-websafe, 90%);
 // training/pages#show (certificate)
 @import 'certificate';
 
-
-
 * {
   font-family:
     BlinkMacSystemFont,
@@ -63,21 +48,20 @@ main img {
   max-width: 100%;
 }
 
-/*
-Default layout
------------------------------------------------
-*/
+.govuk-width-container,
+.dfe-width-container {
+  max-width: 1200px;
+}
 
-#default-layout {
-  .govuk-notification-banner {
+// Default layout
+// -----------------------------------------------
+
+#default-layout .govuk-notification-banner {
     margin-bottom: govuk-spacing(8);
-  }
 }
 
-/*
-Hero layout
------------------------------------------------
-*/
+// Hero layout
+// -----------------------------------------------
 
 #hero-layout {
   .govuk-notification-banner {
@@ -102,11 +86,9 @@ Hero layout
   }
 }
 
+// Internal
+// -----------------------------------------------
 
-/*
-Internal
------------------------------------------------
-*/
 pre.code-tip {
   padding: 0 5px;
   color: govuk-colour('red');
@@ -183,14 +165,14 @@ ul>li>ul>li {
 
 .log-entry {
   border: 0.5px solid;
-  border-color: #b1b4b6;
+  border-color: $govuk-border-colour;
   padding: 20px;
   margin-bottom: 40px;
 }
 
 .form-container {
   padding: 30px;
-  background: #f3f2f1;
+  background: govuk-colour('light-grey');
 }
 
 .govuk-footer__copyright-logo {

diff --git a/app/assets/stylesheets/assets-page.scss b/app/assets/stylesheets/assets-page.scss
@@ -7,7 +7,7 @@
 
   .thumbnail--image {
     outline: 5px solid rgba(11,12,12,0.1);
-    box-shadow: 0 2px 2px rgb(11 12 12 / 40%);
+    box-shadow: 0 2px 2px rgb(11 12 12 / 0.4);
     float: left;
     width: 99px;
     @include govuk-responsive-margin(6, 'right');

diff --git a/app/assets/stylesheets/autocomplete.scss b/app/assets/stylesheets/autocomplete.scss
@@ -74,7 +74,7 @@
 }
 
 .autocomplete__menu--overlay {
-  box-shadow: rgba(0, 0, 0, .256863) 0 2px 6px;
+  box-shadow: rgba(0, 0, 0, .2569) 0 2px 6px;
   left: 0;
   position: absolute;
   top: 100%;
@@ -136,11 +136,10 @@
 }
 
 @media (min-width:641px) {
-
   .autocomplete__hint,
   .autocomplete__input,
   .autocomplete__option {
       font-size: 19px;
-      line-height: 1.31579
+      line-height: 1.3158
   }
-}
+}
diff --git a/app/assets/stylesheets/card.scss b/app/assets/stylesheets/card.scss
@@ -1,7 +1,5 @@
-/*
-Progress bar
-================================================================================
-*/
+// Progress bar
+// ================================================================================
 
 .bar-bg {
   height: 8px;
@@ -22,10 +20,7 @@ Progress bar
   right: 0;
 }
 
-
-/*
-================================================================================
-*/
+// ================================================================================
 
 .grid-container {
   display: flex;
@@ -159,7 +154,7 @@ Progress bar
     color: govuk-colour('blue');
 
     // TODO: document what this is doing
-    &:after {
+    &::after {
       position: absolute;
       content: '';
       left: 0;

diff --git a/app/assets/stylesheets/certificate.scss b/app/assets/stylesheets/certificate.scss
@@ -54,10 +54,10 @@
 
   @include govuk-media-query($from: tablet) {
     font-size: 19px;
-    line-height: 1.3157894737;
+    line-height: 1.3158;
   }
 
-  &:after {
+  &::after {
     content: "";
     display: block;
     clear: both;
@@ -66,7 +66,7 @@
   .certificate-title {
     font-weight: 400;
     font-size: 18px;
-    line-height: 1.1111111111;
+    line-height: 1.1111;
     margin: 0 0 govuk-spacing(3);
 
     .certificate-link {
@@ -75,7 +75,7 @@
 
     @include govuk-media-query($from: tablet) {
       font-size: 27px;
-      line-height: 1.1111111111;
+      line-height: 1.1111;
     }
   }
 
@@ -135,7 +135,7 @@
 
     @include govuk-media-query($from: tablet) {
       font-size: 19px;
-      line-height: 1.3157894737;
+      line-height: 1.3158;
     }
   }
 }
diff --git a/app/assets/stylesheets/dfe-header.scss → app/assets/stylesheets/header.scss b/app/assets/stylesheets/dfe-header.scss → app/assets/stylesheets/header.scss
@@ -2,47 +2,43 @@
   margin-left: auto;
   order: 2;
 
-  &.dfe-header__content:after {
+  &.dfe-header__content::after {
     display: none;
   }
 }
 
-.dfe-width-container {
-  margin: 0 auto;
-  max-width: $govuk-page-width;
-
-  @include govuk-media-query($until: tablet) {
-    padding-left: govuk-spacing(3);
-    padding-right: govuk-spacing(3);
-  }
-
-  &.dfe-header__container.dfe-header-f-header-flex {
-    display: flex;
-    flex-wrap: wrap;
-  }
+.dfe-width-container.dfe-header__container.dfe-header-f-header-flex {
+  display: flex;
+  flex-wrap: wrap;
 }
 
 header #service-name {
   align-self: flex-end;
   width: 100%;
   order: 3;
 
+  .dfe-header__link {
+    height: auto;
+  }
+
   .dfe-header__link--service,
   .dfe-header__link--service:hover {
-    color: #fff;
+    margin-bottom: govuk-spacing(2);
+    width: 100%;
+    color: govuk-colour('white');
     font-size: 1.125em;
     margin-top: 12px;
   }
 
   .dfe-header__link--service:focus {
-    color: #000;
+    color: govuk-colour('black');
   }
 
   @media (min-width: 61.875em) {
     order: 2;
     width: auto;
-    padding-left: 30px;
-    margin-bottom: -6px;
+    padding-left: govuk-spacing(6);
+    margin-bottom: 0;
 
     .dfe-header__link--service,
     .dfe-header__link--service:hover {
@@ -57,7 +53,7 @@ header #service-name {
 }
 
 .dfe-header__menu-toggle {
-  right: 0px;
+  right: 0;
 }
 
 @media (min-width: 61.875em) {
@@ -91,17 +87,13 @@ header #service-name {
   }
 }
 
-.dfe-header-f-header-flex.dfe-header__container:after {
+.dfe-header-f-header-flex .dfe-header__container::after {
   display: none;
 }
 
 .dfe-content-page--header {
   background: $light-blue;
 
-  @include govuk-media-query($until: tablet) {
-    padding: govuk-spacing(2);
-  }
-
   img {
     max-width: 100%;
     width: 100%;

diff --git a/app/assets/stylesheets/module-overview.scss b/app/assets/stylesheets/module-overview.scss
@@ -65,7 +65,9 @@ $progress-bar-container-width: 81px;
   .module-section--container {
     display: grid;
     grid-template-columns: auto 139px;
-    gap: 5px;
+    gap: 7px;
+    margin-left: 10px;
+    margin-right: 10px;
 
     .progress-indicator {
       margin-left: auto;

diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss
@@ -1,6 +1,6 @@
 @media print {
   @page {
-    size: A4 landscape;
+    size: a4 landscape;
     margin-top: 0;
   }
 
@@ -10,7 +10,7 @@
 }
 
 .print-link-button {
-  background: url([email protected]) no-repeat govuk-spacing(2) 50%;
+  background: url("[email protected]") no-repeat govuk-spacing(2) 50%;
   background-size: 16px 18px;
   padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) 36px;
 
@@ -22,7 +22,7 @@
   font-weight: 400;
   font-size: 14px;
   font-size: .875rem;
-  line-height: 1.1428571429;
+  line-height: 1.1429;
 
   &:hover {
     background-color: govuk-colour('light-grey');

diff --git a/app/assets/stylesheets/progress-bar.scss b/app/assets/stylesheets/progress-bar.scss
@@ -19,7 +19,7 @@
 
     .line {
       width: 100%;
-      height: 0px;
+      height: 0;
       position: relative;
       bottom: 17.25px;
       right: 54%;