govuk-frontend
Version:
GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
2 lines (1 loc) • 8.96 kB
Source Map (JSON)
{"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"]}