Fix Stylelint issues

colinrotherham · colinrotherham · commit 22cb368394fc · 2026-03-09T14:53:38.000Z
diff --git a/app/assets/sass/_misc.scss b/app/assets/sass/_misc.scss
@@ -5,11 +5,11 @@
   // height: 150px;
 
   outline: 1px solid rgba(255, 255, 255, 0.2);
-  background-color: black;
+  background-color: #000000;
 
   p {
     margin-left: 5px;
-    color: white;
+    color: #ffffff;
   }
 }
 
@@ -37,11 +37,11 @@
   display: none;
 }
 
-body.js-enabled .app-js-only {
+.nhsuk-frontend-supported .app-js-only {
   display: block;
 }
 
-body.js-enabled .app-no-js-only {
+.nhsuk-frontend-supported .app-no-js-only {
   display: none;
 }
 
diff --git a/app/assets/sass/_typography.scss b/app/assets/sass/_typography.scss
@@ -17,7 +17,7 @@ h3 {
 }
 
 .nhsuk-link--no-visited-state a {
-  @extend .nhsuk-link--no-visited-state;
+  @include nhsuk-link-style-no-visited-state;
 }
 
 .app-link--error,
diff --git a/app/assets/sass/_workflow.scss b/app/assets/sass/_workflow.scss
@@ -69,11 +69,13 @@
 }
 
 // Only apply link styles to actual links
+// stylelint-disable-next-line selector-no-qualifying-type
 a.app-workflow-side-nav__link {
   @include nhsuk-link-style-default;
   @include nhsuk-link-style-no-visited-state;
 
   &:hover {
+    // stylelint-disable-next-line selector-no-qualifying-type
     .app-workflow-side-nav__label {
       text-decoration: underline;
       text-decoration-thickness: max(3px, 0.1875rem, 0.12em);
@@ -92,14 +94,6 @@ a.app-workflow-side-nav__link {
   cursor: not-allowed;
 }
 
-// Clickable links (not current, not completed, not disabled) have blue circles
-.app-workflow-side-nav__link--clickable {
-  .app-workflow-side-nav__number {
-    color: nhsuk-colour("white");
-    background-color: nhsuk-colour("blue");
-  }
-}
-
 .app-workflow-side-nav__number {
   display: flex;
 
diff --git a/app/assets/sass/components/_annotation.scss b/app/assets/sass/components/_annotation.scss
@@ -1,6 +1,7 @@
-/* Mammogram annotation styles */
 @use "nhsuk-frontend/dist/nhsuk/core" as *;
 
+// Mammogram annotation styles
+
 .app-mammogram-image {
   display: block;
   max-width: 100%;
@@ -56,7 +57,7 @@
   line-height: 1;
 }
 
-/* Visual feedback when dragging */
+// Visual feedback when dragging
 .app-mammogram-marker.dragging {
   // filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
   transform: translate(-50%, -50%) scale(1.1);
diff --git a/app/assets/sass/components/_button-menu.scss b/app/assets/sass/components/_button-menu.scss
@@ -1,6 +1,7 @@
+@use "nhsuk-frontend/dist/nhsuk/core" as *;
+
 // Button Menu Component
 // Adapted from MOJ Frontend for NHS prototype use
-@use "nhsuk-frontend/dist/nhsuk/core" as *;
 
 .app-button-menu {
   display: inline-block;
@@ -50,7 +51,7 @@
   }
 }
 
-/* Menu items with no JS */
+// Menu items with no JS
 .app-button-menu__item {
   display: inline-block;
   width: auto; // Override NHS UK's 100% width
@@ -67,7 +68,7 @@
   margin: 0;
 }
 
-/* Menu items with JS */
+// Menu items with JS
 .app-button-menu li > .app-button-menu__item {
   box-sizing: border-box;
   display: inline-block;
diff --git a/app/assets/sass/components/_dark-mode.scss b/app/assets/sass/components/_dark-mode.scss
@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 @use "nhsuk-frontend/dist/nhsuk/core" as *;
 
 $app-dark-mode-blue: #348de0;
@@ -188,7 +190,7 @@ $app-tag--blue-dark-text: nhsuk-tint(nhsuk-colour("blue"), 80%);
     &:visited,
     &:active,
     &:hover {
-      color: white;
+      color: #ffffff;
     }
   }
 
diff --git a/app/assets/sass/components/_modal.scss b/app/assets/sass/components/_modal.scss
@@ -3,6 +3,7 @@
 $app-modal-width: 700px !default; // Default width for the modal
 
 // Prevent background scrolling when modal is open
+// stylelint-disable-next-line selector-no-qualifying-type
 body.app-modal-open {
   width: 100%;
   overflow: hidden;
diff --git a/app/assets/sass/components/_reading.scss b/app/assets/sass/components/_reading.scss
@@ -2,16 +2,6 @@
 
 // app/assets/sass/components/_reading.scss
 
-.app-reading-status {
-  padding: 10px;
-  color: $nhsuk-reverse-text-colour;
-  background-color: nhsuk-shade(nhsuk-colour("blue"), 40%);
-
-  a {
-    color: $nhsuk-reverse-text-colour;
-  }
-}
-
 // Mammogram thumbnail grid for reading pages
 .app-mammogram-thumbnails {
   display: inline-grid;
@@ -163,6 +153,10 @@
   color: $nhsuk-reverse-text-colour;
   background-color: nhsuk-shade(nhsuk-colour("blue"), 40%);
 
+  a {
+    color: $nhsuk-reverse-text-colour;
+  }
+
   &__row {
     display: flex;
     flex-wrap: wrap;
diff --git a/app/assets/sass/components/_secondary-navigation-overrides.scss b/app/assets/sass/components/_secondary-navigation-overrides.scss
@@ -1,6 +1,7 @@
-// app/assets/sass/components/_secondary-navigation-overrides.scss
 @use "nhsuk-frontend/dist/nhsuk/core" as *;
 
+// app/assets/sass/components/_secondary-navigation-overrides.scss
+
 // Fix for tick SVG in secondary navigation
 .app-secondary-navigation__link {
   // gap is already set to 6px in the main component
diff --git a/app/assets/sass/components/_stepper-input.scss b/app/assets/sass/components/_stepper-input.scss
@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 // app/assets/sass/components/_stepper-input.scss
 
 .app-stepper-input {
@@ -44,6 +46,7 @@
   }
 }
 
+// stylelint-disable-next-line selector-no-qualifying-type
 .app-stepper-input input.nhsuk-input {
   text-align: center;
 }
diff --git a/app/assets/sass/components/_sticky-appointment-bar.scss b/app/assets/sass/components/_sticky-appointment-bar.scss
@@ -16,7 +16,7 @@
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }
 
-/* Sticky action button */
+// Sticky action button
 
 .app-sticky-bottom-container {
   position: fixed;
@@ -39,6 +39,6 @@
 }
 
 .app-sticky-bottom-button {
-  /* Use standard NHS button styling */
+  // Use standard NHS button styling
   margin: 0;
 }
diff --git a/app/assets/sass/components/_summary-card.scss b/app/assets/sass/components/_summary-card.scss
@@ -4,7 +4,20 @@
 // https://github.com/alphagov/govuk-frontend/blob/main/packages/govuk-frontend/src/govuk/components/summary-list/_index.scss
 
 .nhsuk-summary-card__action {
-  display: inline-block;
+  display: inline;
+
+  // We use the following media query to target IE11 and 10 only to add margin
+  // between actions.
+  //
+  // We do this because we're using row-gap to create space between actions on
+  // more evergreen browsers which IE doesn't support. @supports currently isn't
+  // a viable solution, see https://github.com/w3c/csswg-drafts/issues/3559.
+  //
+  // Solution taken from https://stackoverflow.com/questions/11173106/apply-style-only-on-ie#answer-36448860
+  // which also includes an explanation of why this works
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    margin-bottom: nhsuk-spacing(1);
+  }
 }
 
 @include nhsuk-media-query($until: tablet) {
@@ -91,23 +104,6 @@
   }
 }
 
-.nhsuk-summary-card__action {
-  display: inline;
-
-  // We use the following media query to target IE11 and 10 only to add margin
-  // between actions.
-  //
-  // We do this because we're using row-gap to create space between actions on
-  // more evergreen browsers which IE doesn't support. @supports currently isn't
-  // a viable solution, see https://github.com/w3c/csswg-drafts/issues/3559.
-  //
-  // Solution taken from https://stackoverflow.com/questions/11173106/apply-style-only-on-ie#answer-36448860
-  // which also includes an explanation of why this works
-  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    margin-bottom: nhsuk-spacing(1);
-  }
-}
-
 .nhsuk-summary-card__action:last-child {
   // See above comment for why this is here
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

Original file line number	Diff line number	Diff line change
`@@ -5,11 +5,11 @@`
`5`	`5`	`// height: 150px;`
`6`	`6`
`7`	`7`	`outline: 1px solid rgba(255, 255, 255, 0.2);`
`8`		`- background-color: black;`
	`8`	`+ background-color: #000000;`
`9`	`9`
`10`	`10`	`p {`
`11`	`11`	`margin-left: 5px;`
`12`		`- color: white;`
	`12`	`+ color: #ffffff;`
`13`	`13`	`}`
`14`	`14`	`}`
`15`	`15`
`@@ -37,11 +37,11 @@`
`37`	`37`	`display: none;`
`38`	`38`	`}`
`39`	`39`
`40`		`-body.js-enabled .app-js-only {`
	`40`	`+.nhsuk-frontend-supported .app-js-only {`
`41`	`41`	`display: block;`
`42`	`42`	`}`
`43`	`43`
`44`		`-body.js-enabled .app-no-js-only {`
	`44`	`+.nhsuk-frontend-supported .app-no-js-only {`
`45`	`45`	`display: none;`
`46`	`46`	`}`
`47`	`47`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ h3 {`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`.nhsuk-link--no-visited-state a {`
`20`		`- @extend .nhsuk-link--no-visited-state;`
	`20`	`+ @include nhsuk-link-style-no-visited-state;`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`.app-link--error,`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+// stylelint-disable declaration-no-important`
	`2`	`+`
`1`	`3`	`@use "nhsuk-frontend/dist/nhsuk/core" as *;`
`2`	`4`
`3`	`5`	`$app-dark-mode-blue: #348de0;`
`@@ -188,7 +190,7 @@ $app-tag--blue-dark-text: nhsuk-tint(nhsuk-colour("blue"), 80%);`
`188`	`190`	`&:visited,`
`189`	`191`	`&:active,`
`190`	`192`	`&:hover {`
`191`		`- color: white;`
	`193`	`+ color: #ffffff;`
`192`	`194`	`}`
`193`	`195`	`}`
`194`	`196`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+// stylelint-disable declaration-no-important`
	`2`	`+`
`1`	`3`	`// app/assets/sass/components/_stepper-input.scss`
`2`	`4`
`3`	`5`	`.app-stepper-input {`
`@@ -44,6 +46,7 @@`
`44`	`46`	`}`
`45`	`47`	`}`
`46`	`48`
	`49`	`+// stylelint-disable-next-line selector-no-qualifying-type`
`47`	`50`	`.app-stepper-input input.nhsuk-input {`
`48`	`51`	`text-align: center;`
`49`	`52`	`}`