@ministryofjustice/frontend 3.3.1 → 3.5.0

package/moj/components/header/_header.scss

@@ -3,9 +3,9 @@
    ========================================================================== */
 
 .moj-header {
-  background-color: govuk-colour("black");
   padding-top: govuk-spacing(3);
   border-bottom: 10px solid $govuk-brand-colour;
+  background-color: govuk-colour("black");
 }
 
 .moj-header__container {
@@ -20,7 +20,6 @@
   @include govuk-media-query($from: desktop) {
     float: left;
   }
-
 }
 
 .moj-header__logotype-crown {
@@ -28,7 +27,6 @@
   top: -4px;
   margin-right: govuk-spacing(1);
   vertical-align: top;
-
 }
 
 .moj-header__logotype-crest {
@@ -44,19 +42,19 @@
   @include govuk-media-query($from: desktop) {
     float: right;
   }
-
 }
 
-.moj-header__link, .moj-header__link > a {
+.moj-header__link,
+.moj-header__link > a {
   @include govuk-link-common;
   @include govuk-link-style-default;
-  border-bottom: 1px solid transparent;
-  color: govuk-colour("white");
   display: inline-block;
-  text-decoration: none;
-  line-height: 25px; // Override due to alignment issue in Chrome
   margin-bottom: -1px;
   overflow: hidden; // Fixes focus gaps in background colour
+  border-bottom: 1px solid transparent;
+  color: govuk-colour("white");
+  line-height: 25px; // Override due to alignment issue in Chrome
+  text-decoration: none;
   vertical-align: middle;
 
   &:link,
@@ -78,6 +76,7 @@
   &--organisation-name {
     @include govuk-font($size: 24, $weight: "bold");
     vertical-align: middle;
+
     &:hover {
       border-color: transparent;
     }
@@ -93,6 +92,7 @@
     @include govuk-media-query($from: desktop) {
       margin-left: govuk-spacing(1);
     }
+
     &:hover {
       border-color: transparent;
     }
@@ -100,20 +100,19 @@
 }
 
 .moj-header__link a {
-  vertical-align: text-bottom;
   margin-bottom: 1px;
+  vertical-align: text-bottom;
 
   &:hover {
     border-color: govuk-colour("white");
   }
 
   @include govuk-media-query($until: desktop) {
-    vertical-align: middle;
     margin-bottom: -1px;
+    vertical-align: middle;
   }
 }
-
-
+// stylelint-disable-next-line selector-no-qualifying-type
 span.moj-header__link {
   &:hover {
     border-color: transparent;
@@ -122,15 +121,15 @@ span.moj-header__link {
 
 // Navigation
 .moj-header__navigation {
+  margin-top: govuk-spacing(1) - 2px;
   color: govuk-colour("white");
-  margin-top: govuk-spacing(1)-2px;
 }
 
 .moj-header__navigation-list {
-  font-size: 0; // Removes white space when using inline-block on child element.
-  list-style: none;
   margin: 0;
   padding: 0;
+  font-size: 0; // Removes white space when using inline-block on child element.
+  list-style: none;
 }
 
 .moj-header__navigation-item {
@@ -141,7 +140,6 @@ span.moj-header__link {
   &:last-child {
     margin-right: 0;
   }
-
 }
 
 .moj-header__navigation-link {
@@ -156,15 +154,15 @@ span.moj-header__link {
   }
 
   &:hover {
+    // stylelint-disable-next-line declaration-no-important
     text-decoration: underline !important;
   }
 
   &:focus {
     color: govuk-colour("black");
   }
-
 }
 
-.moj-header__navigation-link[aria-current=page] {
+.moj-header__navigation-link[aria-current="page"] {
   text-decoration: none;
 }

package/moj/components/identity-bar/_identity-bar.scss

@@ -4,11 +4,11 @@
 
 .moj-identity-bar {
   @include govuk-clearfix;
+  padding-top: govuk-spacing(2);
+  padding-bottom: govuk-spacing(2) - 1px; /* Negative by 1px to compensate */
+  color: govuk-colour("black");
   background-color: govuk-colour("white");
   box-shadow: inset 0 -1px 0 0 govuk-colour("mid-grey"); /* Takes up no space */
-  color: govuk-colour("black");
-  padding-bottom: govuk-spacing(2) - 1px; /* Negative by 1px to compensate */
-  padding-top: govuk-spacing(2);
 }
 
 .moj-identity-bar__container {
@@ -16,7 +16,7 @@
   font-size: 0; /* Hide whitespace between elements */
   text-align: justify; /* Trick to remove the need for floats */
 
-  &:after {
+  &::after {
     content: "";
     display: inline-block;
     width: 100%;
@@ -36,9 +36,9 @@
 
   @include govuk-media-query($from: tablet) {
     display: inline-block;
-    vertical-align: top;
     padding-top: govuk-spacing(2) + 1px; /* Alignment tweaks */
     padding-bottom: govuk-spacing(2) - 1px; /* Alignment tweaks */
+    vertical-align: top;
   }
 }
 

package/moj/components/interruption-card/_interruption-card.scss

@@ -1,8 +1,8 @@
 .moj-interruption-card {
-  background-color: govuk-colour("blue");
   margin-bottom: govuk-spacing(3);
-  @include govuk-responsive-padding(7, $adjustment: $govuk-border-width*-1);
   border: $govuk-border-width solid transparent;
+  background-color: govuk-colour("blue");
+  @include govuk-responsive-padding(7, $adjustment: $govuk-border-width * -1);
 }
 
 .moj-interruption-card__content {

package/moj/components/messages/_messages.scss

@@ -9,38 +9,37 @@
 
 .moj-message-list {
   min-height: 200px;
-  overflow-y: scroll;
-  overflow-x: hidden;
   padding: govuk-spacing(1);
+  overflow-x: hidden;
+  overflow-y: scroll;
 
   &__date {
     @include govuk-font($size: 19, $weight: "bold");
+    display: inline-block;
+    width: 100%;
     padding: govuk-spacing(3) 0;
     color: govuk-colour("dark-grey");
-    display: inline-block;
     text-align: center;
-    width: 100%;
   }
-
 }
 
 .moj-message-item {
-  border-radius: 0.5em 0.5em 0.75em 0.5em;
+  position: relative;
   margin-bottom: govuk-spacing(1);
   padding: govuk-spacing(3);
-  position: relative;
+  border-radius: 0.5em 0.5em 0.75em;
 
   @include govuk-media-query($from: tablet) {
     width: 50%;
   }
 
   &--sent {
-    color: govuk-colour("white");
-    background-color: $govuk-brand-colour;
     margin-right: govuk-spacing(2);
     padding-right: govuk-spacing(5);
-    text-align: right;
     float: right;
+    color: govuk-colour("white");
+    background-color: $govuk-brand-colour;
+    text-align: right;
 
     &::after {
       content: "";
@@ -55,24 +54,22 @@
   }
 
   &--received {
-    background-color: govuk-colour("light-grey");
-    float: left;
     margin-left: govuk-spacing(2);
     padding-left: govuk-spacing(5);
+    float: left;
+    background-color: govuk-colour("light-grey");
 
     &::after {
       content: "";
       position: absolute;
-      left: -1.5em;
       bottom: 0;
+      left: -1.5em;
       width: 1.5em;
       height: 1.5em;
       border-right: 1em solid govuk-colour("light-grey");
       border-bottom-right-radius: 1.75em 1.5em;
     }
-
   }
-
 }
 
 .moj-message-item a:link,
@@ -85,7 +82,6 @@
 }
 
 .moj-message-item__text {
-
   &--sent table {
     color: govuk-colour("white");
 
@@ -93,9 +89,7 @@
     & td {
       border-bottom: 1px solid govuk-colour("white");
     }
-
   }
-
 }
 
 .moj-message-item__meta {
@@ -108,5 +102,4 @@
   &--timestamp {
     @include govuk-font($size: 16, $weight: "bold");
   }
-
 }

package/moj/components/multi-file-upload/README.md

@@ -1 +1 @@
-# Multi file upload
+# Multi file upload

package/moj/components/multi-file-upload/_multi-file-upload.scss

@@ -1,66 +1,70 @@
 .moj-multi-file-upload {
-	margin-bottom: 40px;
+  margin-bottom: 40px;
 }
 
 .moj-multi-file-upload--enhanced .moj-multi-file-upload__button {
-	display: none;
+  display: none;
 }
 
 .moj-multi-file-upload__dropzone {
-  outline: 3px dashed govuk-colour('black');
-	display: flex;
-	text-align: center;
-	padding: govuk-spacing(9) govuk-spacing(3);
-	transition: outline-offset .1s ease-in-out, background-color .1s linear;
+  display: flex;
+  padding: govuk-spacing(9) govuk-spacing(3);
+  transition:
+    outline-offset 0.1s ease-in-out,
+    background-color 0.1s linear;
+  outline: 3px dashed govuk-colour("black");
+  text-align: center;
 }
 
 .moj-multi-file-upload__dropzone label {
-	margin-bottom: 0;
-	display: inline-block;
-	width: auto;
+  display: inline-block;
+  width: auto;
+  margin-bottom: 0;
 }
 
 .moj-multi-file-upload__dropzone p {
-  margin-bottom: 0;
   margin-right: 10px;
+  margin-bottom: 0;
   padding-top: 7px;
 }
 
-.moj-multi-file-upload__dropzone [type=file] {
-	position: absolute;
-	left: -9999em;
+.moj-multi-file-upload__dropzone [type="file"] {
+  position: absolute;
+  left: -9999em;
 }
 
 .moj-multi-file-upload--dragover {
-	background: #b1b4b6;
-	outline-color: #6f777b;
+  outline-color: #6f777b;
+  background: #b1b4b6;
 }
 
 .moj-multi-file-upload--focused {
-	background-color: $govuk-focus-colour;
-  color: $govuk-focus-text-colour;
-  box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
   outline: none;
+  color: $govuk-focus-text-colour;
+  background-color: $govuk-focus-colour;
+  box-shadow:
+    0 -2px $govuk-focus-colour,
+    0 4px $govuk-focus-text-colour;
 }
 
 .moj-multi-file-upload__error {
-	color: govuk-colour('red');
-	font-weight: bold;
+  color: govuk-colour("red");
+  font-weight: bold;
 }
 
 .moj-multi-file-upload__success {
-	color: govuk-colour('green');
-	font-weight: bold;
+  color: govuk-colour("green");
+  font-weight: bold;
 }
 
 .moj-multi-file-upload__error svg {
-   fill: currentColor;
-   float: left;
-   margin-right: govuk-spacing(2);
+  margin-right: govuk-spacing(2);
+  float: left;
+  fill: currentcolor;
 }
 
 .moj-multi-file-upload__success svg {
-	fill: currentColor;
-	float: left;
-	margin-right: govuk-spacing(2);
-}
+  margin-right: govuk-spacing(2);
+  float: left;
+  fill: currentcolor;
+}