defra_ruby_template 5.4.1 → 5.11.0

data/node_modules/govuk-frontend/dist/govuk/components/fieldset/_index.scss

@@ -7,9 +7,8 @@
     @include govuk-clearfix;
   }
 
-  // Fix for Firefox < 53
-  // https://bugzilla.mozilla.org/show_bug.cgi?id=504622
-  // stylelint-disable selector-type-no-unknown -- Ignore unknown 'x:-moz-any-link'
+  // Fix for Firefox < 53 (https://bugzil.la/504622)
+  // stylelint-disable selector-type-no-unknown -- Ignore 'x:-moz-any-link'
   @supports not (caret-color: auto) {
     .govuk-fieldset,
     x:-moz-any-link {
@@ -59,8 +58,7 @@
   }
 
   // When the legend contains an H1, we want the H1 to inherit all styles from
-  // the legend. Effectively we want to be able to treat the heading as if it is
-  // not there.
+  // the legend. Effectively treat the heading as if it is not there.
   .govuk-fieldset__heading {
     margin: 0;
     font-size: inherit;

data/node_modules/govuk-frontend/dist/govuk/components/fieldset/_index.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/govuk/components/fieldset/_index.scss"],"names":[],"mappings":"AAAA;EACE;IACE,YAAY;IACZ,SAAS;IACT,UAAU;IACV,SAAS;IACT,uBAAuB;EACzB;;EAEA,sBAAsB;EACtB,qDAAqD;EACrD,gFAAgF;EAChF;IACE;;MAEE,mBAAmB;IACrB;EACF;EACA,2CAA2C;;EAE3C;IACE,8BAA8B;IAC9B,0BAA0B;;IAE1B,yCAAyC;IACzC,wBAAwB;IACxB,WAAW;IACX,sBAAsB,EAAE,GAAG;IAC3B,cAAc,EAAE,GAAG;IACnB,eAAe,EAAE,GAAG;IACpB,+BAA+B;IAC/B,UAAU;;IAEV,mBAAmB,EAAE,GAAG;EAC1B;;EAEA,sEAAsE;EACtE;;;IAGE,qCAAqC;IACrC,+BAA+B;EACjC;;EAEA;IACE,mCAAmC;EACrC;;EAEA;IACE,mCAAmC;EACrC;;EAEA;IACE,mCAAmC;EACrC;;EAEA;IACE,qCAAqC;EACvC;;EAEA,2EAA2E;EAC3E,6EAA6E;EAC7E,YAAY;EACZ;IACE,SAAS;IACT,kBAAkB;IAClB,oBAAoB;EACtB;AACF","file":"_index.scss","sourcesContent":["@include govuk-exports(\"govuk/component/fieldset\") {\n  .govuk-fieldset {\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n    @include govuk-clearfix;\n  }\n\n  // Fix for Firefox < 53\n  // https://bugzilla.mozilla.org/show_bug.cgi?id=504622\n  // stylelint-disable selector-type-no-unknown -- Ignore unknown 'x:-moz-any-link'\n  @supports not (caret-color: auto) {\n    .govuk-fieldset,\n    x:-moz-any-link {\n      display: table-cell;\n    }\n  }\n  // stylelint-enable selector-type-no-unknown\n\n  .govuk-fieldset__legend {\n    @include govuk-font($size: 19);\n    @include govuk-text-colour;\n\n    // Fix legend text wrapping in Edge and IE\n    // 1. IE9-11 & Edge 12-13\n    // 2. IE8-11\n    box-sizing: border-box; // 1\n    display: table; // 2\n    max-width: 100%; // 1\n    margin-bottom: govuk-spacing(2);\n    padding: 0;\n\n    white-space: normal; // 1\n  }\n\n  // Modifiers that make legends look more like their equivalent headings\n  .govuk-fieldset__legend--xl,\n  .govuk-fieldset__legend--l,\n  .govuk-fieldset__legend--m {\n    @include govuk-typography-weight-bold;\n    margin-bottom: govuk-spacing(3);\n  }\n\n  .govuk-fieldset__legend--xl {\n    @include govuk-font-size($size: 48);\n  }\n\n  .govuk-fieldset__legend--l {\n    @include govuk-font-size($size: 36);\n  }\n\n  .govuk-fieldset__legend--m {\n    @include govuk-font-size($size: 24);\n  }\n\n  .govuk-fieldset__legend--s {\n    @include govuk-typography-weight-bold;\n  }\n\n  // When the legend contains an H1, we want the H1 to inherit all styles from\n  // the legend. Effectively we want to be able to treat the heading as if it is\n  // not there.\n  .govuk-fieldset__heading {\n    margin: 0;\n    font-size: inherit;\n    font-weight: inherit;\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/govuk/components/fieldset/_index.scss"],"names":[],"mappings":"AAAA;EACE;IACE,YAAY;IACZ,SAAS;IACT,UAAU;IACV,SAAS;IACT,uBAAuB;EACzB;;EAEA,iDAAiD;EACjD,wEAAwE;EACxE;IACE;;MAEE,mBAAmB;IACrB;EACF;EACA,2CAA2C;;EAE3C;IACE,8BAA8B;IAC9B,0BAA0B;;IAE1B,yCAAyC;IACzC,wBAAwB;IACxB,WAAW;IACX,sBAAsB,EAAE,GAAG;IAC3B,cAAc,EAAE,GAAG;IACnB,eAAe,EAAE,GAAG;IACpB,+BAA+B;IAC/B,UAAU;;IAEV,mBAAmB,EAAE,GAAG;EAC1B;;EAEA,sEAAsE;EACtE;;;IAGE,qCAAqC;IACrC,+BAA+B;EACjC;;EAEA;IACE,mCAAmC;EACrC;;EAEA;IACE,mCAAmC;EACrC;;EAEA;IACE,mCAAmC;EACrC;;EAEA;IACE,qCAAqC;EACvC;;EAEA,2EAA2E;EAC3E,kEAAkE;EAClE;IACE,SAAS;IACT,kBAAkB;IAClB,oBAAoB;EACtB;AACF","file":"_index.scss","sourcesContent":["@include govuk-exports(\"govuk/component/fieldset\") {\n  .govuk-fieldset {\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n    @include govuk-clearfix;\n  }\n\n  // Fix for Firefox < 53 (https://bugzil.la/504622)\n  // stylelint-disable selector-type-no-unknown -- Ignore 'x:-moz-any-link'\n  @supports not (caret-color: auto) {\n    .govuk-fieldset,\n    x:-moz-any-link {\n      display: table-cell;\n    }\n  }\n  // stylelint-enable selector-type-no-unknown\n\n  .govuk-fieldset__legend {\n    @include govuk-font($size: 19);\n    @include govuk-text-colour;\n\n    // Fix legend text wrapping in Edge and IE\n    // 1. IE9-11 & Edge 12-13\n    // 2. IE8-11\n    box-sizing: border-box; // 1\n    display: table; // 2\n    max-width: 100%; // 1\n    margin-bottom: govuk-spacing(2);\n    padding: 0;\n\n    white-space: normal; // 1\n  }\n\n  // Modifiers that make legends look more like their equivalent headings\n  .govuk-fieldset__legend--xl,\n  .govuk-fieldset__legend--l,\n  .govuk-fieldset__legend--m {\n    @include govuk-typography-weight-bold;\n    margin-bottom: govuk-spacing(3);\n  }\n\n  .govuk-fieldset__legend--xl {\n    @include govuk-font-size($size: 48);\n  }\n\n  .govuk-fieldset__legend--l {\n    @include govuk-font-size($size: 36);\n  }\n\n  .govuk-fieldset__legend--m {\n    @include govuk-font-size($size: 24);\n  }\n\n  .govuk-fieldset__legend--s {\n    @include govuk-typography-weight-bold;\n  }\n\n  // When the legend contains an H1, we want the H1 to inherit all styles from\n  // the legend. Effectively treat the heading as if it is not there.\n  .govuk-fieldset__heading {\n    margin: 0;\n    font-size: inherit;\n    font-weight: inherit;\n  }\n}\n"]}

data/node_modules/govuk-frontend/dist/govuk/components/fieldset/fixtures.json

@@ -11,6 +11,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your address?\n  </legend>\n</fieldset>"
         },
         {
@@ -24,6 +25,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--xl\">\n    What is your address?\n  </legend>\n</fieldset>"
         },
         {
@@ -37,6 +39,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n    What is your address?\n  </legend>\n</fieldset>"
         },
         {
@@ -50,6 +53,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    What is your address?\n  </legend>\n</fieldset>"
         },
         {
@@ -63,6 +67,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s\">\n    What is your address?\n  </legend>\n</fieldset>"
         },
         {
@@ -77,6 +82,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--xl\">\n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  </legend>\n</fieldset>"
         },
         {
@@ -91,6 +97,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  </legend>\n</fieldset>"
         },
         {
@@ -105,6 +112,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  </legend>\n</fieldset>"
         },
         {
@@ -119,6 +127,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s\">\n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  </legend>\n</fieldset>"
         },
         {
@@ -132,6 +141,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend\">\n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  </legend>\n</fieldset>"
         },
         {
@@ -145,6 +155,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your address?\n  </legend>\n  <div class=\"my-content\">\n  <p>This is some content to put inside the fieldset</p>\n</div>\n\n</fieldset>"
         },
         {
@@ -158,6 +169,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<fieldset class=\"govuk-fieldset\" aria-describedby=\"test-target-element\">\n  <legend class=\"govuk-fieldset__legend\">\n    Which option?\n  </legend>\n</fieldset>"
         },
         {
@@ -170,6 +182,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is &lt;b&gt;your&lt;/b&gt; address?\n  </legend>\n</fieldset>"
         },
         {
@@ -182,6 +195,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is <b>your</b> address?\n  </legend>\n</fieldset>"
         },
         {
@@ -195,6 +209,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend my-custom-class\">\n    What is your address?\n  </legend>\n</fieldset>"
         },
         {
@@ -208,6 +223,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<fieldset class=\"govuk-fieldset app-fieldset--custom-modifier\">\n  <legend class=\"govuk-fieldset__legend\">\n    Which option?\n  </legend>\n</fieldset>"
         },
         {
@@ -221,6 +237,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<fieldset class=\"govuk-fieldset\" role=\"group\">\n  <legend class=\"govuk-fieldset__legend\">\n    Which option?\n  </legend>\n</fieldset>"
         },
         {
@@ -236,6 +253,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<fieldset class=\"govuk-fieldset\" data-attribute=\"value\">\n  <legend class=\"govuk-fieldset__legend\">\n    Which option?\n  </legend>\n</fieldset>"
         }
     ]

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/_index.scss

@@ -3,7 +3,11 @@
 @import "../label/index";
 
 @include govuk-exports("govuk/component/file-upload") {
+  $file-upload-border-width: 2px;
   $component-padding: govuk-spacing(1);
+  $empty-button-background-colour: govuk-colour("white");
+  $empty-pseudo-button-background-colour: govuk-colour("light-grey");
+  $empty-status-background-colour: govuk-tint(govuk-colour("blue"), 70%);
 
   .govuk-file-upload {
     @include govuk-font($size: 19);
@@ -12,11 +16,10 @@
     margin-left: -$component-padding;
     padding: $component-padding;
 
-    // The default file upload button in Safari does not
-    // support setting a custom font-size. Set `-webkit-appearance`
-    // to `button` to drop out of the native appearance so the
-    // font-size is set to 19px
-    // https://bugs.webkit.org/show_bug.cgi?id=224746
+    // The default file upload button in Safari does not support setting a
+    // custom font-size. Set `-webkit-appearance` to `button` to drop out of the
+    // native appearance so the font-size is set to 19px
+    // https://webkit.org/b/224746
     &::-webkit-file-upload-button {
       -webkit-appearance: button;
       color: inherit;
@@ -26,13 +29,13 @@
     &:focus {
       outline: $govuk-focus-width solid $govuk-focus-colour;
       // Use `box-shadow` to add border instead of changing `border-width`
-      // (which changes element size) and since `outline` is already used for the
-      // yellow focus state.
+      // (which changes element size) and since `outline` is already used for
+      // the yellow focus state.
       box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
     }
 
-    // Set "focus-within" to fix https://bugzilla.mozilla.org/show_bug.cgi?id=1430196
-    // so that component receives focus in Firefox.
+    // Set "focus-within" to fix https://bugzil.la/1430196 so that component
+    // receives focus in Firefox.
     // This can't be set together with `:focus` as all versions of IE fail
     // to recognise `focus-within` and don't set any styles from the block
     // when it's a selector.
@@ -47,6 +50,169 @@
       cursor: not-allowed;
     }
   }
+
+  .govuk-drop-zone {
+    display: block;
+    position: relative;
+    z-index: 0;
+    background-color: $govuk-body-background-colour;
+  }
+
+  // required because disabling pointer events
+  // on the button means that the cursor style
+  // be applied on the button itself
+  .govuk-drop-zone--disabled {
+    cursor: not-allowed;
+  }
+
+  .govuk-file-upload-button__pseudo-button {
+    width: auto;
+    margin-right: govuk-spacing(2);
+    margin-bottom: $govuk-border-width-form-element + 1;
+    flex-shrink: 0;
+  }
+
+  .govuk-file-upload-button__instruction {
+    margin-top: govuk-spacing(2) - ($govuk-border-width-form-element + 1);
+    margin-bottom: 0;
+    text-align: left;
+  }
+
+  .govuk-file-upload-button__status {
+    display: block;
+    margin-bottom: govuk-spacing(2);
+    padding: govuk-spacing(3) govuk-spacing(2);
+    background-color: govuk-colour("white");
+    text-align: left;
+  }
+
+  // bugs documented with button using flex
+  // https://github.com/philipwalton/flexbugs#flexbug-9
+  // so we need a container here
+  .govuk-file-upload-button__pseudo-button-container {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+  }
+
+  .govuk-file-upload-button {
+    width: 100%;
+    // align the padding to be same as notification banner and error summary accounting for the thicker borders
+    padding: (govuk-spacing(3) + $govuk-border-width - $file-upload-border-width);
+    border: $file-upload-border-width govuk-colour("mid-grey") solid;
+    background-color: govuk-colour("light-grey");
+    cursor: pointer;
+
+    @include govuk-media-query($from: tablet) {
+      padding: (govuk-spacing(4) + $govuk-border-width - $file-upload-border-width);
+    }
+
+    .govuk-file-upload-button__pseudo-button {
+      background-color: govuk-colour("white");
+    }
+
+    &:hover {
+      background-color: govuk-tint(govuk-colour("mid-grey"), 20%);
+
+      .govuk-file-upload-button__pseudo-button {
+        background-color: govuk-shade(govuk-colour("light-grey"), 10%);
+      }
+
+      .govuk-file-upload-button__status {
+        background-color: govuk-tint(govuk-colour("blue"), 80%);
+      }
+    }
+
+    &:active,
+    &:focus {
+      border: $file-upload-border-width solid govuk-colour("black");
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      // Ensure outline appears outside of the element
+      outline-offset: 0;
+      background-color: govuk-tint(govuk-colour("mid-grey"), 20%);
+      // Double the border by adding its width again. Use `box-shadow` for this
+      // instead of changing `border-width` - this is for consistency with
+      // components such as textarea where we avoid changing `border-width` as
+      // it will change the element size. Also, `outline` cannot be utilised
+      // here as it is already used for the yellow focus state.
+      box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+
+      .govuk-file-upload-button__pseudo-button {
+        background-color: $govuk-focus-colour;
+        box-shadow: 0 2px 0 govuk-colour("black");
+      }
+
+      &:hover .govuk-file-upload-button__pseudo-button {
+        border-color: $govuk-focus-colour;
+        outline: 3px solid transparent;
+        background-color: govuk-colour("light-grey");
+        box-shadow: inset 0 0 0 1px $govuk-focus-colour;
+      }
+    }
+  }
+
+  .govuk-file-upload-button--empty {
+    border-style: dashed;
+    background-color: $empty-button-background-colour;
+
+    .govuk-file-upload-button__pseudo-button {
+      background-color: $empty-pseudo-button-background-colour;
+    }
+
+    .govuk-file-upload-button__status {
+      color: govuk-shade(govuk-colour("blue"), 60%);
+      background-color: $empty-status-background-colour;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: govuk-colour("light-grey");
+
+      .govuk-file-upload-button__status {
+        background-color: govuk-tint(govuk-colour("blue"), 80%);
+      }
+    }
+  }
+
+  .govuk-file-upload-button--dragging {
+    border-style: solid;
+    border-color: govuk-colour("black");
+
+    // extra specificity to apply when
+    // empty
+    &.govuk-file-upload-button {
+      background-color: govuk-tint(govuk-colour("mid-grey"), 20%);
+    }
+
+    &.govuk-file-upload-button--empty {
+      background-color: govuk-colour("light-grey");
+    }
+
+    &.govuk-file-upload-button--empty:not(:disabled) .govuk-file-upload-button__status,
+    &.govuk-file-upload-button--empty .govuk-file-upload-button__pseudo-button {
+      background-color: govuk-colour("white");
+    }
+
+    .govuk-file-upload-button__pseudo-button {
+      background-color: govuk-shade(govuk-colour("light-grey"), 10%);
+    }
+  }
+
+  .govuk-file-upload-button:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+
+    background-color: $empty-button-background-colour;
+
+    .govuk-file-upload-button__pseudo-button {
+      background-color: $empty-pseudo-button-background-colour;
+    }
+
+    .govuk-file-upload-button__status {
+      background-color: $empty-status-background-colour;
+    }
+  }
 }
 
 /*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/_index.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/govuk/components/file-upload/_index.scss"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,uBAAuB;AACvB,wBAAwB;;AAExB;EACE,oCAAoC;;EAEpC;IACE,8BAA8B;IAC9B,0BAA0B;IAC1B,eAAe;IACf,gCAAgC;IAChC,2BAA2B;;IAE3B,mDAAmD;IACnD,8DAA8D;IAC9D,yDAAyD;IACzD,0BAA0B;IAC1B,gDAAgD;IAChD;MACE,0BAA0B;MAC1B,cAAc;MACd,aAAa;IACf;;IAEA;MACE,qDAAqD;MACrD,mEAAmE;MACnE,0EAA0E;MAC1E,qBAAqB;MACrB,sDAAsD;IACxD;;IAEA,gFAAgF;IAChF,8CAA8C;IAC9C,qEAAqE;IACrE,qEAAqE;IACrE,uBAAuB;IACvB;MACE,qDAAqD;;MAErD,sDAAsD;IACxD;;IAEA;MACE,YAAY;MACZ,mBAAmB;IACrB;EACF;AACF","file":"_index.scss","sourcesContent":["@import \"../error-message/index\";\n@import \"../hint/index\";\n@import \"../label/index\";\n\n@include govuk-exports(\"govuk/component/file-upload\") {\n  $component-padding: govuk-spacing(1);\n\n  .govuk-file-upload {\n    @include govuk-font($size: 19);\n    @include govuk-text-colour;\n    max-width: 100%;\n    margin-left: -$component-padding;\n    padding: $component-padding;\n\n    // The default file upload button in Safari does not\n    // support setting a custom font-size. Set `-webkit-appearance`\n    // to `button` to drop out of the native appearance so the\n    // font-size is set to 19px\n    // https://bugs.webkit.org/show_bug.cgi?id=224746\n    &::-webkit-file-upload-button {\n      -webkit-appearance: button;\n      color: inherit;\n      font: inherit;\n    }\n\n    &:focus {\n      outline: $govuk-focus-width solid $govuk-focus-colour;\n      // Use `box-shadow` to add border instead of changing `border-width`\n      // (which changes element size) and since `outline` is already used for the\n      // yellow focus state.\n      box-shadow: inset 0 0 0 4px $govuk-input-border-colour;\n    }\n\n    // Set \"focus-within\" to fix https://bugzilla.mozilla.org/show_bug.cgi?id=1430196\n    // so that component receives focus in Firefox.\n    // This can't be set together with `:focus` as all versions of IE fail\n    // to recognise `focus-within` and don't set any styles from the block\n    // when it's a selector.\n    &:focus-within {\n      outline: $govuk-focus-width solid $govuk-focus-colour;\n\n      box-shadow: inset 0 0 0 4px $govuk-input-border-colour;\n    }\n\n    &:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/govuk/components/file-upload/_index.scss"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,uBAAuB;AACvB,wBAAwB;;AAExB;EACE,8BAA8B;EAC9B,oCAAoC;EACpC,sDAAsD;EACtD,kEAAkE;EAClE,sEAAsE;;EAEtE;IACE,8BAA8B;IAC9B,0BAA0B;IAC1B,eAAe;IACf,gCAAgC;IAChC,2BAA2B;;IAE3B,qEAAqE;IACrE,2EAA2E;IAC3E,mDAAmD;IACnD,6BAA6B;IAC7B;MACE,0BAA0B;MAC1B,cAAc;MACd,aAAa;IACf;;IAEA;MACE,qDAAqD;MACrD,mEAAmE;MACnE,sEAAsE;MACtE,yBAAyB;MACzB,sDAAsD;IACxD;;IAEA,uEAAuE;IACvE,4BAA4B;IAC5B,qEAAqE;IACrE,qEAAqE;IACrE,uBAAuB;IACvB;MACE,qDAAqD;;MAErD,sDAAsD;IACxD;;IAEA;MACE,YAAY;MACZ,mBAAmB;IACrB;EACF;;EAEA;IACE,cAAc;IACd,kBAAkB;IAClB,UAAU;IACV,+CAA+C;EACjD;;EAEA,2CAA2C;EAC3C,2CAA2C;EAC3C,iCAAiC;EACjC;IACE,mBAAmB;EACrB;;EAEA;IACE,WAAW;IACX,8BAA8B;IAC9B,mDAAmD;IACnD,cAAc;EAChB;;EAEA;IACE,qEAAqE;IACrE,gBAAgB;IAChB,gBAAgB;EAClB;;EAEA;IACE,cAAc;IACd,+BAA+B;IAC/B,0CAA0C;IAC1C,uCAAuC;IACvC,gBAAgB;EAClB;;EAEA,wCAAwC;EACxC,oDAAoD;EACpD,6BAA6B;EAC7B;IACE,aAAa;IACb,qBAAqB;IACrB,eAAe;EACjB;;EAEA;IACE,WAAW;IACX,0GAA0G;IAC1G,6EAA6E;IAC7E,gEAAgE;IAChE,4CAA4C;IAC5C,eAAe;;IAEf;MACE,6EAA6E;IAC/E;;IAEA;MACE,uCAAuC;IACzC;;IAEA;MACE,2DAA2D;;MAE3D;QACE,8DAA8D;MAChE;;MAEA;QACE,uDAAuD;MACzD;IACF;;IAEA;;MAEE,6DAA6D;MAC7D,qDAAqD;MACrD,+CAA+C;MAC/C,iBAAiB;MACjB,2DAA2D;MAC3D,wEAAwE;MACxE,mEAAmE;MACnE,uEAAuE;MACvE,qEAAqE;MACrE,wDAAwD;MACxD,wDAAwD;;MAExD;QACE,qCAAqC;QACrC,yCAAyC;MAC3C;;MAEA;QACE,iCAAiC;QACjC,8BAA8B;QAC9B,4CAA4C;QAC5C,+CAA+C;MACjD;IACF;EACF;;EAEA;IACE,oBAAoB;IACpB,iDAAiD;;IAEjD;MACE,wDAAwD;IAC1D;;IAEA;MACE,6CAA6C;MAC7C,iDAAiD;IACnD;;IAEA;;;MAGE,4CAA4C;;MAE5C;QACE,uDAAuD;MACzD;IACF;EACF;;EAEA;IACE,mBAAmB;IACnB,mCAAmC;;IAEnC,iCAAiC;IACjC,OAAO;IACP;MACE,2DAA2D;IAC7D;;IAEA;MACE,4CAA4C;IAC9C;;IAEA;;MAEE,uCAAuC;IACzC;;IAEA;MACE,8DAA8D;IAChE;EACF;;EAEA;IACE,oBAAoB;IACpB,YAAY;;IAEZ,iDAAiD;;IAEjD;MACE,wDAAwD;IAC1D;;IAEA;MACE,iDAAiD;IACnD;EACF;AACF","file":"_index.scss","sourcesContent":["@import \"../error-message/index\";\n@import \"../hint/index\";\n@import \"../label/index\";\n\n@include govuk-exports(\"govuk/component/file-upload\") {\n  $file-upload-border-width: 2px;\n  $component-padding: govuk-spacing(1);\n  $empty-button-background-colour: govuk-colour(\"white\");\n  $empty-pseudo-button-background-colour: govuk-colour(\"light-grey\");\n  $empty-status-background-colour: govuk-tint(govuk-colour(\"blue\"), 70%);\n\n  .govuk-file-upload {\n    @include govuk-font($size: 19);\n    @include govuk-text-colour;\n    max-width: 100%;\n    margin-left: -$component-padding;\n    padding: $component-padding;\n\n    // The default file upload button in Safari does not support setting a\n    // custom font-size. Set `-webkit-appearance` to `button` to drop out of the\n    // native appearance so the font-size is set to 19px\n    // https://webkit.org/b/224746\n    &::-webkit-file-upload-button {\n      -webkit-appearance: button;\n      color: inherit;\n      font: inherit;\n    }\n\n    &:focus {\n      outline: $govuk-focus-width solid $govuk-focus-colour;\n      // Use `box-shadow` to add border instead of changing `border-width`\n      // (which changes element size) and since `outline` is already used for\n      // the yellow focus state.\n      box-shadow: inset 0 0 0 4px $govuk-input-border-colour;\n    }\n\n    // Set \"focus-within\" to fix https://bugzil.la/1430196 so that component\n    // receives focus in Firefox.\n    // This can't be set together with `:focus` as all versions of IE fail\n    // to recognise `focus-within` and don't set any styles from the block\n    // when it's a selector.\n    &:focus-within {\n      outline: $govuk-focus-width solid $govuk-focus-colour;\n\n      box-shadow: inset 0 0 0 4px $govuk-input-border-colour;\n    }\n\n    &:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  }\n\n  .govuk-drop-zone {\n    display: block;\n    position: relative;\n    z-index: 0;\n    background-color: $govuk-body-background-colour;\n  }\n\n  // required because disabling pointer events\n  // on the button means that the cursor style\n  // be applied on the button itself\n  .govuk-drop-zone--disabled {\n    cursor: not-allowed;\n  }\n\n  .govuk-file-upload-button__pseudo-button {\n    width: auto;\n    margin-right: govuk-spacing(2);\n    margin-bottom: $govuk-border-width-form-element + 1;\n    flex-shrink: 0;\n  }\n\n  .govuk-file-upload-button__instruction {\n    margin-top: govuk-spacing(2) - ($govuk-border-width-form-element + 1);\n    margin-bottom: 0;\n    text-align: left;\n  }\n\n  .govuk-file-upload-button__status {\n    display: block;\n    margin-bottom: govuk-spacing(2);\n    padding: govuk-spacing(3) govuk-spacing(2);\n    background-color: govuk-colour(\"white\");\n    text-align: left;\n  }\n\n  // bugs documented with button using flex\n  // https://github.com/philipwalton/flexbugs#flexbug-9\n  // so we need a container here\n  .govuk-file-upload-button__pseudo-button-container {\n    display: flex;\n    align-items: baseline;\n    flex-wrap: wrap;\n  }\n\n  .govuk-file-upload-button {\n    width: 100%;\n    // align the padding to be same as notification banner and error summary accounting for the thicker borders\n    padding: (govuk-spacing(3) + $govuk-border-width - $file-upload-border-width);\n    border: $file-upload-border-width govuk-colour(\"mid-grey\") solid;\n    background-color: govuk-colour(\"light-grey\");\n    cursor: pointer;\n\n    @include govuk-media-query($from: tablet) {\n      padding: (govuk-spacing(4) + $govuk-border-width - $file-upload-border-width);\n    }\n\n    .govuk-file-upload-button__pseudo-button {\n      background-color: govuk-colour(\"white\");\n    }\n\n    &:hover {\n      background-color: govuk-tint(govuk-colour(\"mid-grey\"), 20%);\n\n      .govuk-file-upload-button__pseudo-button {\n        background-color: govuk-shade(govuk-colour(\"light-grey\"), 10%);\n      }\n\n      .govuk-file-upload-button__status {\n        background-color: govuk-tint(govuk-colour(\"blue\"), 80%);\n      }\n    }\n\n    &:active,\n    &:focus {\n      border: $file-upload-border-width solid govuk-colour(\"black\");\n      outline: $govuk-focus-width solid $govuk-focus-colour;\n      // Ensure outline appears outside of the element\n      outline-offset: 0;\n      background-color: govuk-tint(govuk-colour(\"mid-grey\"), 20%);\n      // Double the border by adding its width again. Use `box-shadow` for this\n      // instead of changing `border-width` - this is for consistency with\n      // components such as textarea where we avoid changing `border-width` as\n      // it will change the element size. Also, `outline` cannot be utilised\n      // here as it is already used for the yellow focus state.\n      box-shadow: inset 0 0 0 $govuk-border-width-form-element;\n\n      .govuk-file-upload-button__pseudo-button {\n        background-color: $govuk-focus-colour;\n        box-shadow: 0 2px 0 govuk-colour(\"black\");\n      }\n\n      &:hover .govuk-file-upload-button__pseudo-button {\n        border-color: $govuk-focus-colour;\n        outline: 3px solid transparent;\n        background-color: govuk-colour(\"light-grey\");\n        box-shadow: inset 0 0 0 1px $govuk-focus-colour;\n      }\n    }\n  }\n\n  .govuk-file-upload-button--empty {\n    border-style: dashed;\n    background-color: $empty-button-background-colour;\n\n    .govuk-file-upload-button__pseudo-button {\n      background-color: $empty-pseudo-button-background-colour;\n    }\n\n    .govuk-file-upload-button__status {\n      color: govuk-shade(govuk-colour(\"blue\"), 60%);\n      background-color: $empty-status-background-colour;\n    }\n\n    &:hover,\n    &:focus,\n    &:active {\n      background-color: govuk-colour(\"light-grey\");\n\n      .govuk-file-upload-button__status {\n        background-color: govuk-tint(govuk-colour(\"blue\"), 80%);\n      }\n    }\n  }\n\n  .govuk-file-upload-button--dragging {\n    border-style: solid;\n    border-color: govuk-colour(\"black\");\n\n    // extra specificity to apply when\n    // empty\n    &.govuk-file-upload-button {\n      background-color: govuk-tint(govuk-colour(\"mid-grey\"), 20%);\n    }\n\n    &.govuk-file-upload-button--empty {\n      background-color: govuk-colour(\"light-grey\");\n    }\n\n    &.govuk-file-upload-button--empty:not(:disabled) .govuk-file-upload-button__status,\n    &.govuk-file-upload-button--empty .govuk-file-upload-button__pseudo-button {\n      background-color: govuk-colour(\"white\");\n    }\n\n    .govuk-file-upload-button__pseudo-button {\n      background-color: govuk-shade(govuk-colour(\"light-grey\"), 10%);\n    }\n  }\n\n  .govuk-file-upload-button:disabled {\n    pointer-events: none;\n    opacity: 0.5;\n\n    background-color: $empty-button-background-colour;\n\n    .govuk-file-upload-button__pseudo-button {\n      background-color: $empty-pseudo-button-background-colour;\n    }\n\n    .govuk-file-upload-button__status {\n      background-color: $empty-status-background-colour;\n    }\n  }\n}\n"]}