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

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.

{"version":3,"sources":["../../../../src/govuk/components/file-upload/_index.scss"],"names":[],"mappings":"AAAA,oBAAoB;;AAEpB,gCAAgC;AAChC,uBAAuB;AACvB,wBAAwB;;AAExB;EACE,8BAA8B;EAC9B,oCAAoC;EACpC,sDAAsD;EACtD,kFAAkF;EAClF,0EAA0E;;EAE1E;IACE,8BAA8B;;IAE9B,eAAe;IACf,gCAAgC;IAChC,2BAA2B;IAC3B,oCAAoC;;IAEpC,qEAAqE;IACrE,2EAA2E;IAC3E,mDAAmD;IACnD,6BAA6B;IAC7B;MACE,0BAA0B;MAC1B,cAAc;MACd,aAAa;IACf;;IAEA;MACE,iCAAiC;MACjC,6CAA6C;MAC7C,mEAAmE;MACnE,sEAAsE;MACtE,yBAAyB;MACzB,iEAAiE;IACnE;;IAEA,uEAAuE;IACvE,4BAA4B;IAC5B,qEAAqE;IACrE,qEAAqE;IACrE,uBAAuB;IACvB;MACE,iCAAiC;MACjC,6CAA6C;;MAE7C,iEAAiE;IACnE;;IAEA;MACE,YAAY;MACZ,mBAAmB;IACrB;EACF;;EAEA;IACE,cAAc;IACd,kBAAkB;IAClB,UAAU;IACV,0DAA0D;EAC5D;;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,4BAA4B;IAC5B,sCAAsC;IACtC,gBAAgB;IAChB,8BAA8B;EAChC;;EAEA,wCAAwC;EACxC,oDAAoD;EACpD,6BAA6B;EAC7B;IACE,aAAa;IACb,qBAAqB;IACrB,eAAe;EACjB;;EAEA;IACE,WAAW;IACX,0GAA0G;IAC1G,6EAA6E;IAC7E,kFAAkF;IAClF,uCAAuC;IACvC,eAAe;;IAEf;MACE,6EAA6E;IAC/E;;IAEA;MACE,4DAA4D;IAC9D;;IAEA;MACE,wDAAwD;;MAExD;QACE,4DAA4D;MAC9D;;MAEA;QACE,sCAAsC;MACxC;IACF;;IAEA;;MAEE,6DAA6D;MAC7D,iCAAiC;MACjC,6CAA6C;MAC7C,+CAA+C;MAC/C,iBAAiB;MACjB,4DAA4D;MAC5D,wEAAwE;MACxE,mEAAmE;MACnE,uEAAuE;MACvE,qEAAqE;MACrE,wDAAwD;MACxD,wDAAwD;;MAExD;QACE,gDAAgD;QAChD,yCAAyC;MAC3C;;MAEA;QACE,4CAA4C;QAC5C,8BAA8B;QAC9B,4DAA4D;QAC5D,0DAA0D;MAC5D;IACF;EACF;;EAEA;IACE,oBAAoB;IACpB,iDAAiD;;IAEjD;MACE,wDAAwD;IAC1D;;IAEA;MACE,4BAA4B;MAC5B,iDAAiD;IACnD;;IAEA;;;MAGE,4DAA4D;;MAE5D;QACE,2DAA2D;MAC7D;IACF;EACF;;EAEA;IACE,mBAAmB;IACnB,mCAAmC;;IAEnC,iCAAiC;IACjC,OAAO;IACP;MACE,4DAA4D;IAC9D;EACF;;EAEA;IACE,oBAAoB;IACpB,YAAY;;IAEZ,iDAAiD;;IAEjD;MACE,wDAAwD;IAC1D;;IAEA;MACE,iDAAiD;IACnD;EACF;AACF","file":"_index.scss","sourcesContent":["@import \"../../base\";\n\n@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(\"black\", $variant: \"tint-95\");\n  $empty-status-background-colour: govuk-colour(\"blue\", $variant: \"tint-80\");\n\n  .govuk-file-upload {\n    @include govuk-font($size: 19);\n\n    max-width: 100%;\n    margin-left: -$component-padding;\n    padding: $component-padding;\n    color: govuk-functional-colour(text);\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;\n      outline-color: govuk-functional-colour(focus);\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-functional-colour(input-border);\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;\n      outline-color: govuk-functional-colour(focus);\n\n      box-shadow: inset 0 0 0 4px govuk-functional-colour(input-border);\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-functional-colour(body-background);\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    color: govuk-colour(\"white\");\n    background-color: govuk-colour(\"blue\");\n    text-align: left;\n    @include govuk-text-break-word;\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(\"black\", $variant: \"tint-80\") solid;\n    background-color: govuk-colour(\"white\");\n    cursor: pointer;\n\n    @media #{govuk-from-breakpoint(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(\"black\", $variant: \"tint-95\");\n    }\n\n    &:hover {\n      border-color: govuk-colour(\"black\", $variant: \"tint-50\");\n\n      .govuk-file-upload-button__pseudo-button {\n        background-color: govuk-colour(\"black\", $variant: \"tint-80\");\n      }\n\n      .govuk-file-upload-button__status {\n        background-color: govuk-colour(\"blue\");\n      }\n    }\n\n    &:active,\n    &:focus {\n      border: $file-upload-border-width solid govuk-colour(\"black\");\n      outline: $govuk-focus-width solid;\n      outline-color: govuk-functional-colour(focus);\n      // Ensure outline appears outside of the element\n      outline-offset: 0;\n      background-color: govuk-colour(\"black\", $variant: \"tint-95\");\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-functional-colour(focus);\n        box-shadow: 0 2px 0 govuk-colour(\"black\");\n      }\n\n      &:hover .govuk-file-upload-button__pseudo-button {\n        border-color: govuk-functional-colour(focus);\n        outline: 3px solid transparent;\n        background-color: govuk-colour(\"black\", $variant: \"tint-80\");\n        box-shadow: inset 0 0 0 1px govuk-functional-colour(focus);\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-colour(\"black\");\n      background-color: $empty-status-background-colour;\n    }\n\n    &:hover,\n    &:focus,\n    &:active {\n      background-color: govuk-colour(\"black\", $variant: \"tint-95\");\n\n      .govuk-file-upload-button__status {\n        background-color: govuk-colour(\"blue\", $variant: \"tint-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--empty {\n      background-color: govuk-colour(\"black\", $variant: \"tint-95\");\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"]}