@ministryofjustice/frontend 3.3.1 → 3.4.0

package/moj/components/progress-bar/_progress-bar.scss

@@ -7,11 +7,11 @@
 }
 
 .moj-progress-bar__list {
-  font-size: 0; // Hide white space between elements
-  list-style: none;
+  position: relative;
   margin: 0;
   padding: 0;
-  position: relative;
+  font-size: 0; // Hide white space between elements
+  list-style: none;
   text-align: justify;
   vertical-align: top;
 
@@ -22,84 +22,79 @@
   }
 
   &::before {
-    border-top: 6px solid govuk-colour("green");
     content: "";
-    left: 0;
     position: absolute;
     top: 13px;
+    left: 0;
     width: 100%;
+    border-top: 6px solid govuk-colour("green");
   }
-
 }
 
 .moj-progress-bar__item {
   @include govuk-font(19);
   display: inline-block;
-  max-width: 20%;
   position: relative;
+  max-width: 20%;
   text-align: center;
   vertical-align: top;
 
   &:first-child,
   &:last-child {
     &::before {
-      border-top: 6px solid govuk-colour("white");
       content: "";
       position: absolute;
-      top: 13px; left: 0;
+      top: 13px;
+      left: 0;
       width: 50%;
+      border-top: 6px solid govuk-colour("white");
     }
-
   }
 
   &:first-child {
-
     &::before {
       left: 0;
     }
-
   }
 
   &:last-child {
-
     &::before {
-      left: auto;
       right: 0;
+      left: auto;
     }
-
   }
 
-  &[aria-current=step] { // https://tink.uk/using-the-aria-current-attribute
+  &[aria-current="step"] {
+    // https://tink.uk/using-the-aria-current-attribute
     @include govuk-font($size: 19, $weight: "bold");
   }
-
 }
 
 .moj-progress-bar__icon {
-  position: relative;
-  background-color: govuk-colour("white");
-  border: 6px solid govuk-colour("green");
-  border-radius: 50%;
   box-sizing: border-box;
   display: block;
+  position: relative;
+  width: 32px;
   height: 32px;
-  margin-left: auto;
   margin-right: auto;
-  width: 32px;
+  margin-left: auto;
+  border: 6px solid govuk-colour("green");
+  border-radius: 50%;
+  background-color: govuk-colour("white");
 }
 
 .moj-progress-bar__icon--complete {
   background-color: govuk-colour("green");
   background-image: url(#{$moj-images-path}icon-progress-tick.svg);
-  background-position: 50% 50%;
   background-repeat: no-repeat;
+  background-position: 50% 50%;
 }
 
 .moj-progress-bar__label {
   @include govuk-font(16);
   display: block;
-  font-weight: inherit;
-  margin-top: govuk-spacing(3);
   position: relative;
+  margin-top: govuk-spacing(3);
+  font-weight: inherit;
   word-wrap: break-word; // Just in case
 }

package/moj/components/rich-text-editor/_rich-text-editor.scss

@@ -8,20 +8,20 @@
 }
 
 .moj-rich-text-editor__toolbar-button {
+  width: 40px;
+  height: 40px;
+  margin-left: -2px;
+  float: left;
+  border: 2px solid govuk-colour("black");
+  outline: 0;
+  color: govuk-colour("black");
   background-color: govuk-colour("white");
-  background-position: 50% 50%;
   background-repeat: no-repeat;
+  background-position: 50% 50%;
   background-size: 40px 40px;
-  border: 2px solid govuk-colour("black");
-  color: govuk-colour("black");
-  cursor: pointer;
-  float: left;
   text-decoration: none;
-  height: 40px;
-  margin-left: -2px;
-  outline: 0;
   vertical-align: top;
-  width: 40px;
+  cursor: pointer;
 
   &:first-child {
     margin-left: 0;
@@ -34,14 +34,15 @@
   }
 
   &:focus {
-    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;
     position: relative;
     z-index: 2;
+    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-rich-text-editor__toolbar-button--bold {
@@ -57,8 +58,8 @@
 }
 
 .moj-rich-text-editor__toolbar-button--unordered-list {
-  background-image: url(#{$moj-images-path}icon-wysiwyg-unordered-list.svg);
   margin-left: govuk-spacing(2);
+  background-image: url(#{$moj-images-path}icon-wysiwyg-unordered-list.svg);
 }
 
 .moj-rich-text-editor__toolbar-button--ordered-list {
@@ -67,7 +68,7 @@
 
 .moj-rich-text-editor__content {
   min-height: 130px;
-  outline: none;
   overflow: auto;
   resize: vertical;
+  outline: none;
 }

package/moj/components/rich-text-editor/rich-text-editor.js

@@ -1,139 +1,153 @@
-if('contentEditable' in document.documentElement) {
-  MOJFrontend.RichTextEditor = function(options) {
-    this.options = options;
+if ('contentEditable' in document.documentElement) {
+  MOJFrontend.RichTextEditor = function (options) {
+    this.options = options
     this.options.toolbar = this.options.toolbar || {
       bold: false,
       italic: false,
       underline: false,
       bullets: true,
       numbers: true
-    };
-    this.textarea = this.options.textarea;
-    this.container = $(this.textarea).parent();
+    }
+    this.textarea = this.options.textarea
+    this.container = $(this.textarea).parent()
 
     if (this.container.data('moj-rich-text-editor-initialised')) {
       return
     }
 
-    this.container.data('moj-rich-text-editor-initialised', true);
+    this.container.data('moj-rich-text-editor-initialised', true)
 
-    this.createToolbar();
-    this.hideDefault();
-    this.configureToolbar();
+    this.createToolbar()
+    this.hideDefault()
+    this.configureToolbar()
     this.keys = {
       left: 37,
       right: 39,
       up: 38,
       down: 40
-    };
-    this.container.on('click', '.moj-rich-text-editor__toolbar-button', $.proxy(this, 'onButtonClick'));
-    this.container.find('.moj-rich-text-editor__content').on('input', $.proxy(this, 'onEditorInput'));
-    this.container.find('label').on('click', $.proxy(this, 'onLabelClick'));
-    this.toolbar.on('keydown', $.proxy(this, 'onToolbarKeydown'));
-  };
-
-  MOJFrontend.RichTextEditor.prototype.onToolbarKeydown = function(e) {
-    var focusableButton;
-    switch(e.keyCode) {
+    }
+    this.container.on(
+      'click',
+      '.moj-rich-text-editor__toolbar-button',
+      $.proxy(this, 'onButtonClick')
+    )
+    this.container
+      .find('.moj-rich-text-editor__content')
+      .on('input', $.proxy(this, 'onEditorInput'))
+    this.container.find('label').on('click', $.proxy(this, 'onLabelClick'))
+    this.toolbar.on('keydown', $.proxy(this, 'onToolbarKeydown'))
+  }
+
+  MOJFrontend.RichTextEditor.prototype.onToolbarKeydown = function (e) {
+    let focusableButton
+    switch (e.keyCode) {
       case this.keys.right:
-      case this.keys.down:
-        focusableButton = this.toolbar.find('button[tabindex=0]');
-        var nextButton = focusableButton.next('button');
-        if(nextButton[0]) {
-          nextButton.focus();
-          focusableButton.attr('tabindex', '-1');
-          nextButton.attr('tabindex', '0');
+      case this.keys.down: {
+        focusableButton = this.toolbar.find('button[tabindex=0]')
+        const nextButton = focusableButton.next('button')
+        if (nextButton[0]) {
+          nextButton.focus()
+          focusableButton.attr('tabindex', '-1')
+          nextButton.attr('tabindex', '0')
         }
-        break;
+        break
+      }
       case this.keys.left:
-      case this.keys.up:
-        focusableButton = this.toolbar.find('button[tabindex=0]');
-        var previousButton = focusableButton.prev('button');
-        if(previousButton[0]) {
-          previousButton.focus();
-          focusableButton.attr('tabindex', '-1');
-          previousButton.attr('tabindex', '0');
+      case this.keys.up: {
+        focusableButton = this.toolbar.find('button[tabindex=0]')
+        const previousButton = focusableButton.prev('button')
+        if (previousButton[0]) {
+          previousButton.focus()
+          focusableButton.attr('tabindex', '-1')
+          previousButton.attr('tabindex', '0')
         }
-        break;
+        break
+      }
     }
-  };
+  }
 
-  MOJFrontend.RichTextEditor.prototype.getToolbarHtml = function() {
-    var html = '';
+  MOJFrontend.RichTextEditor.prototype.getToolbarHtml = function () {
+    let html = ''
 
-    html += '<div class="moj-rich-text-editor__toolbar" role="toolbar">';
+    html += '<div class="moj-rich-text-editor__toolbar" role="toolbar">'
 
-    if(this.options.toolbar.bold) {
-      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--bold" type="button" data-command="bold"><span class="govuk-visually-hidden">Bold</span></button>';
+    if (this.options.toolbar.bold) {
+      html +=
+        '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--bold" type="button" data-command="bold"><span class="govuk-visually-hidden">Bold</span></button>'
     }
 
-    if(this.options.toolbar.italic) {
-      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--italic" type="button" data-command="italic"><span class="govuk-visually-hidden">Italic</span></button>';
+    if (this.options.toolbar.italic) {
+      html +=
+        '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--italic" type="button" data-command="italic"><span class="govuk-visually-hidden">Italic</span></button>'
     }
 
-    if(this.options.toolbar.underline) {
-      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--underline" type="button" data-command="underline"><span class="govuk-visually-hidden">Underline</span></button>';
+    if (this.options.toolbar.underline) {
+      html +=
+        '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--underline" type="button" data-command="underline"><span class="govuk-visually-hidden">Underline</span></button>'
     }
 
-    if(this.options.toolbar.bullets) {
-      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--unordered-list" type="button" data-command="insertUnorderedList"><span class="govuk-visually-hidden">Unordered list</span></button>';
+    if (this.options.toolbar.bullets) {
+      html +=
+        '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--unordered-list" type="button" data-command="insertUnorderedList"><span class="govuk-visually-hidden">Unordered list</span></button>'
     }
 
-    if(this.options.toolbar.numbers) {
-      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--ordered-list" type="button" data-command="insertOrderedList"><span class="govuk-visually-hidden">Ordered list</span></button>';
+    if (this.options.toolbar.numbers) {
+      html +=
+        '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--ordered-list" type="button" data-command="insertOrderedList"><span class="govuk-visually-hidden">Ordered list</span></button>'
     }
 
-    html += '</div>';
-    return html;
-  };
-
-  MOJFrontend.RichTextEditor.prototype.getEnhancedHtml = function(val) {
-    return this.getToolbarHtml() + '<div class="govuk-textarea moj-rich-text-editor__content" contenteditable="true" spellcheck="false"></div>';
-  };
-
-  MOJFrontend.RichTextEditor.prototype.hideDefault = function() {
-    this.textarea = this.container.find('textarea');
-    this.textarea.addClass('govuk-visually-hidden');
-    this.textarea.attr('aria-hidden', true);
-    this.textarea.attr('tabindex', '-1');
-  };
-
-  MOJFrontend.RichTextEditor.prototype.createToolbar = function() {
-    this.toolbar = document.createElement('div');
-    this.toolbar.className = 'moj-rich-text-editor';
-    this.toolbar.innerHTML = this.getEnhancedHtml();
-    this.container.append(this.toolbar);
-    this.toolbar = this.container.find('.moj-rich-text-editor__toolbar');
-    this.container.find('.moj-rich-text-editor__content').html(this.textarea.val());
-  };
-
-  MOJFrontend.RichTextEditor.prototype.configureToolbar = function() {
-    this.buttons = this.container.find('.moj-rich-text-editor__toolbar-button');
-    this.buttons.prop('tabindex', '-1');
-    var firstTab = this.buttons.first();
-    firstTab.prop('tabindex', '0');
-  };
-
-  MOJFrontend.RichTextEditor.prototype.onButtonClick = function(e) {
-    document.execCommand($(e.currentTarget).data('command'), false, null);
-  };
-
-  MOJFrontend.RichTextEditor.prototype.getContent = function() {
-    return this.container.find('.moj-rich-text-editor__content').html();
-  };
-
-  MOJFrontend.RichTextEditor.prototype.onEditorInput = function(e) {
-    this.updateTextarea();
-  };
-
-  MOJFrontend.RichTextEditor.prototype.updateTextarea = function() {
-    document.execCommand('defaultParagraphSeparator', false, 'p');
-    this.textarea.val(this.getContent());
-  };
-
-  MOJFrontend.RichTextEditor.prototype.onLabelClick = function(e) {
-    e.preventDefault();
-    this.container.find('.moj-rich-text-editor__content').focus();
-  };
-
+    html += '</div>'
+    return html
+  }
+
+  MOJFrontend.RichTextEditor.prototype.getEnhancedHtml = function (val) {
+    return `${this.getToolbarHtml()}<div class="govuk-textarea moj-rich-text-editor__content" contenteditable="true" spellcheck="false"></div>`
+  }
+
+  MOJFrontend.RichTextEditor.prototype.hideDefault = function () {
+    this.textarea = this.container.find('textarea')
+    this.textarea.addClass('govuk-visually-hidden')
+    this.textarea.attr('aria-hidden', true)
+    this.textarea.attr('tabindex', '-1')
+  }
+
+  MOJFrontend.RichTextEditor.prototype.createToolbar = function () {
+    this.toolbar = document.createElement('div')
+    this.toolbar.className = 'moj-rich-text-editor'
+    this.toolbar.innerHTML = this.getEnhancedHtml()
+    this.container.append(this.toolbar)
+    this.toolbar = this.container.find('.moj-rich-text-editor__toolbar')
+    this.container
+      .find('.moj-rich-text-editor__content')
+      .html(this.textarea.val())
+  }
+
+  MOJFrontend.RichTextEditor.prototype.configureToolbar = function () {
+    this.buttons = this.container.find('.moj-rich-text-editor__toolbar-button')
+    this.buttons.prop('tabindex', '-1')
+    const firstTab = this.buttons.first()
+    firstTab.prop('tabindex', '0')
+  }
+
+  MOJFrontend.RichTextEditor.prototype.onButtonClick = function (e) {
+    document.execCommand($(e.currentTarget).data('command'), false, null)
+  }
+
+  MOJFrontend.RichTextEditor.prototype.getContent = function () {
+    return this.container.find('.moj-rich-text-editor__content').html()
+  }
+
+  MOJFrontend.RichTextEditor.prototype.onEditorInput = function (e) {
+    this.updateTextarea()
+  }
+
+  MOJFrontend.RichTextEditor.prototype.updateTextarea = function () {
+    document.execCommand('defaultParagraphSeparator', false, 'p')
+    this.textarea.val(this.getContent())
+  }
+
+  MOJFrontend.RichTextEditor.prototype.onLabelClick = function (e) {
+    e.preventDefault()
+    this.container.find('.moj-rich-text-editor__content').focus()
+  }
 }

package/moj/components/search/_search.scss

@@ -26,17 +26,19 @@
 
 .moj-search__button {
   display: inline-block;
-  margin-bottom: 0;
-  margin-left: govuk-spacing(2);
   position: relative;
   top: -2px; // Override default gov properties due to active pixel movement
-  vertical-align: bottom;
   width: auto;
+  margin-bottom: 0;
+  margin-left: govuk-spacing(2);
+  vertical-align: bottom;
 }
 
 .moj-search--inline {
+  // stylelint-disable-next-line declaration-no-important
   padding: govuk-spacing(2) 0 !important;
   @include govuk-media-query($from: desktop) {
+    // stylelint-disable-next-line declaration-no-important
     padding: 0 !important;
   }
-}
+}

package/moj/components/search-toggle/search-toggle.js

@@ -1,53 +1,52 @@
 MOJFrontend.SearchToggle = function (options) {
-  this.options = options;
-  this.container = $(this.options.search.container);
-  this.toggleButtonContainer = $(this.options.toggleButton.container);
+  this.options = options
+  this.container = $(this.options.search.container)
+  this.toggleButtonContainer = $(this.options.toggleButton.container)
 
-  if (this.container.data("moj-search-toggle-initialised")) {
-    return;
+  if (this.container.data('moj-search-toggle-initialised')) {
+    return
   }
 
-  this.container.data("moj-search-toggle-initialised", true);
+  this.container.data('moj-search-toggle-initialised', true)
 
   const svg =
-    '<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="moj-search-toggle__button__icon"><path d="M7.433,12.5790048 C6.06762625,12.5808611 4.75763941,12.0392925 3.79217348,11.0738265 C2.82670755,10.1083606 2.28513891,8.79837375 2.28699522,7.433 C2.28513891,6.06762625 2.82670755,4.75763941 3.79217348,3.79217348 C4.75763941,2.82670755 6.06762625,2.28513891 7.433,2.28699522 C8.79837375,2.28513891 10.1083606,2.82670755 11.0738265,3.79217348 C12.0392925,4.75763941 12.5808611,6.06762625 12.5790048,7.433 C12.5808611,8.79837375 12.0392925,10.1083606 11.0738265,11.0738265 C10.1083606,12.0392925 8.79837375,12.5808611 7.433,12.5790048 L7.433,12.5790048 Z M14.293,12.579 L13.391,12.579 L13.071,12.269 C14.2300759,10.9245158 14.8671539,9.20813198 14.866,7.433 C14.866,3.32786745 11.5381325,-1.65045755e-15 7.433,-1.65045755e-15 C3.32786745,-1.65045755e-15 -1.65045755e-15,3.32786745 -1.65045755e-15,7.433 C-1.65045755e-15,11.5381325 3.32786745,14.866 7.433,14.866 C9.208604,14.8671159 10.9253982,14.2296624 12.27,13.07 L12.579,13.39 L12.579,14.294 L18.296,20 L20,18.296 L14.294,12.579 L14.293,12.579 Z"></path></svg>';
+    '<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="moj-search-toggle__button__icon"><path d="M7.433,12.5790048 C6.06762625,12.5808611 4.75763941,12.0392925 3.79217348,11.0738265 C2.82670755,10.1083606 2.28513891,8.79837375 2.28699522,7.433 C2.28513891,6.06762625 2.82670755,4.75763941 3.79217348,3.79217348 C4.75763941,2.82670755 6.06762625,2.28513891 7.433,2.28699522 C8.79837375,2.28513891 10.1083606,2.82670755 11.0738265,3.79217348 C12.0392925,4.75763941 12.5808611,6.06762625 12.5790048,7.433 C12.5808611,8.79837375 12.0392925,10.1083606 11.0738265,11.0738265 C10.1083606,12.0392925 8.79837375,12.5808611 7.433,12.5790048 L7.433,12.5790048 Z M14.293,12.579 L13.391,12.579 L13.071,12.269 C14.2300759,10.9245158 14.8671539,9.20813198 14.866,7.433 C14.866,3.32786745 11.5381325,-1.65045755e-15 7.433,-1.65045755e-15 C3.32786745,-1.65045755e-15 -1.65045755e-15,3.32786745 -1.65045755e-15,7.433 C-1.65045755e-15,11.5381325 3.32786745,14.866 7.433,14.866 C9.208604,14.8671159 10.9253982,14.2296624 12.27,13.07 L12.579,13.39 L12.579,14.294 L18.296,20 L20,18.296 L14.294,12.579 L14.293,12.579 Z"></path></svg>'
 
   this.toggleButton = $(
-    '<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">' +
-      this.options.toggleButton.text +
-      svg +
-      "</button>"
-  );
-  this.toggleButton.on("click", $.proxy(this, "onToggleButtonClick"));
-  this.toggleButtonContainer.append(this.toggleButton);
-  $(document).on("click", this.onDocumentClick.bind(this));
-  $(document).on("focusin", this.onDocumentClick.bind(this));
-};
+    `<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">
+      ${this.options.toggleButton.text} ${svg}
+    </button>`
+  )
+  this.toggleButton.on('click', $.proxy(this, 'onToggleButtonClick'))
+  this.toggleButtonContainer.append(this.toggleButton)
+  $(document).on('click', this.onDocumentClick.bind(this))
+  $(document).on('focusin', this.onDocumentClick.bind(this))
+}
 
 MOJFrontend.SearchToggle.prototype.showMenu = function () {
-  this.toggleButton.attr("aria-expanded", "true");
-  this.container.removeClass("moj-js-hidden");
-  this.container.find("input").first().get(0).focus();
-};
+  this.toggleButton.attr('aria-expanded', 'true')
+  this.container.removeClass('moj-js-hidden')
+  this.container.find('input').first().get(0).focus()
+}
 
 MOJFrontend.SearchToggle.prototype.hideMenu = function () {
-  this.container.addClass("moj-js-hidden");
-  this.toggleButton.attr("aria-expanded", "false");
-};
+  this.container.addClass('moj-js-hidden')
+  this.toggleButton.attr('aria-expanded', 'false')
+}
 
 MOJFrontend.SearchToggle.prototype.onToggleButtonClick = function () {
-  if (this.toggleButton.attr("aria-expanded") == "false") {
-    this.showMenu();
+  if (this.toggleButton.attr('aria-expanded') === 'false') {
+    this.showMenu()
   } else {
-    this.hideMenu();
+    this.hideMenu()
   }
-};
+}
 
 MOJFrontend.SearchToggle.prototype.onDocumentClick = function (e) {
   if (
     !$.contains(this.toggleButtonContainer[0], e.target) &&
     !$.contains(this.container[0], e.target)
   ) {
-    this.hideMenu();
+    this.hideMenu()
   }
-};
+}

package/moj/components/search-toggle/search-toggle.scss

@@ -1,24 +1,25 @@
 .moj-search-toggle__button {
   @include govuk-font($size: 19, $weight: bold);
-  background-color: transparent;
-  border: none;
-  color: $govuk-link-colour;
-  cursor: pointer;
   display: inline-block;
   padding-top: 12px;
+  padding-right: 0;
   padding-bottom: 13px;
   padding-left: 0;
-  padding-right: 0;
+  border: none;
+  color: $govuk-link-colour;
+  background-color: transparent;
+  cursor: pointer;
   -webkit-font-smoothing: antialiased;
   -webkit-appearance: none;
+  appearance: none;
 
   &__icon {
     display: inline-block;
+    width: 20px;
     height: 20px;
     margin-left: govuk-spacing(2);
+    fill: currentcolor;
     vertical-align: middle;
-    width: 20px;
-    fill: currentColor;
 
     @media screen and (forced-colors: active) {
       fill: windowText;
@@ -26,12 +27,14 @@
   }
 
   &:focus {
-    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;
     position: relative;
     z-index: 1;
+    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;
   }
 }
 
@@ -39,14 +42,17 @@
   padding: govuk-spacing(3);
 
   @include govuk-media-query($until: desktop) {
-    padding-left: 0 !important;
+    // stylelint-disable-next-line declaration-no-important
     padding-right: 0 !important;
+    // stylelint-disable-next-line declaration-no-important
+    padding-left: 0 !important;
   }
 }
 
 // JS enabled
 .js-enabled .moj-search--toggle {
   @include govuk-media-query($until: desktop) {
+    // stylelint-disable-next-line declaration-no-important
     padding-top: 0 !important;
   }
 }
@@ -59,11 +65,11 @@
   background-color: govuk-colour("light-grey");
 
   @include govuk-media-query($from: desktop) {
-    max-width: 450px;
     position: absolute;
-    right: -15px;
+    z-index: 10;
     top: 50px; // Height of nav bar
+    right: -15px;
     width: 450px;
-    z-index: 10;
+    max-width: 450px;
   }
 }