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) • 2.74 kB
Source Map (JSON)
{"version":3,"sources":["../../../../src/govuk/components/cookie-banner/_index.scss"],"names":[],"mappings":"AAAA,oBAAoB;;AAEpB,yBAAyB;;AAEzB;EACE,kEAAkE;EAClE,sCAAsC;;EAEtC;IACE,6BAA6B;IAC7B,yEAAyE;IACzE,4CAA4C;;IAE5C,uEAAuE;IACvE,mCAAmC;IACnC,qDAAqD;;IAErD,4CAA4C;IAC5C,6DAA6D;EAC/D;;EAEA,8EAA8E;EAC9E,+DAA+D;EAC/D;IACE,aAAa;EACf;;EAEA;IACE,wDAAwD;IACxD,oCAAoC;;IAEpC;MACE,oEAAoE;MACpE,qEAAqE;MACrE,UAAU;MACV,aAAa;IACf;;IAEA;MACE,+DAA+D;MAC/D,2BAA2B;MAC3B,CAAC;MACD,yEAAyE;MACzE,wEAAwE;MACxE,yEAAyE;MACzE,kEAAkE;MAClE,uEAAuE;MACvE,CAAC;MACD,iEAAiE;MACjE,uBAAuB;MACvB,CAAC;MACD,+DAA+D;MAC/D,aAAa;IACf;EACF;AACF","file":"_index.scss","sourcesContent":["@import \"../../base\";\n\n@import \"../button/index\";\n\n@include govuk-exports(\"govuk/component/cookie-banner\") {\n // This needs to be kept in sync with the header component's styles\n $border-bottom-width: govuk-spacing(2);\n\n .govuk-cookie-banner {\n padding-top: govuk-spacing(4);\n // The component does not set bottom spacing. The bottom spacing should be\n // created by the items inside the component.\n\n // Visually separate the cookie banner from content underneath when user\n // changes colours in their browser.\n border-bottom: $border-bottom-width solid transparent;\n\n color: govuk-functional-colour(surface-text);\n background-color: govuk-functional-colour(surface-background);\n }\n\n // Support older browsers which don't hide elements with the `hidden` attribute\n // when user hides the whole cookie banner with a 'Hide' button.\n .govuk-cookie-banner[hidden] {\n display: none;\n }\n\n .govuk-cookie-banner__message {\n // Remove the extra height added by the separator border.\n margin-bottom: -$border-bottom-width;\n\n &[hidden] {\n // Support older browsers which don't hide elements with the `hidden`\n // attribute when the visibility of cookie and replacement messages is\n // toggled.\n display: none;\n }\n\n &:focus {\n // Remove the native visible focus indicator when the element is\n // programmatically focused.\n //\n // The focused cookie banner is the first element on the page and the last\n // thing the user interacted with prior to it gaining focus. We therefore\n // assume that moving focus to it is not going to surprise users, and that\n // giving it a visible focus indicator could be more confusing than\n // helpful, especially as the element is not normally keyboard operable.\n //\n // We have flagged this in the research section of the guidance as\n // something to monitor.\n //\n // A related discussion: https://github.com/w3c/wcag/issues/1001\n outline: none;\n }\n }\n}\n"]}