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) • 3.74 kB
Source Map (JSON)
{"version":3,"sources":["../../../../src/govuk/components/notification-banner/_index.scss"],"names":[],"mappings":"AAAA,gBAAgB;;AAEhB,oBAAoB;;AAEpB;EACE;IACE,8BAA8B;IAC9B,6CAA6C;;IAE7C,iCAAiC;IACjC,4CAA4C;;IAE5C,gDAAgD;;IAEhD;MACE,iCAAiC;MACjC,6CAA6C;IAC/C;EACF;;EAEA;IACE,8CAA8C;;IAE9C,2EAA2E;IAC3E,4BAA4B;IAC5B,oCAAoC;;IAEpC;MACE,8CAA8C;IAChD;EACF;;EAEA;IACE,yEAAyE;IACzE,6CAA6C;IAC7C,mCAAmC;IACnC,qCAAqC;IACrC,SAAS;IACT,UAAU;IACV,4BAA4B;EAC9B;;EAEA;IACE,iCAAiC;IACjC,yBAAyB;;IAEzB,oCAAoC;IACpC,0DAA0D;;IAE1D;MACE,wBAAwB;IAC1B;;IAEA,yEAAyE;IACzE,iEAAiE;IACjE;MACE,wEAAwE;MACxE,8BAA8B;MAC9B,sBAAsB;;MAEtB,wDAAwD;MACxD,mFAAmF;;MAEnF,mDAAmD;MACnD,yDAAyD;MACzD,4CAA4C;IAC9C;;IAEA;MACE,gBAAgB;IAClB;EACF;;EAEA;IACE,mCAAmC;IACnC,qCAAqC;;IAErC,4BAA4B;;IAE5B,UAAU;EACZ;;EAEA;IACE,0BAA0B;IAC1B,0CAA0C;EAC5C;;EAEA;IACE,8CAA8C;;IAE9C,kDAAkD;;IAElD;MACE,iCAAiC;IACnC;EACF;AACF","file":"_index.scss","sourcesContent":["@use \"sass:math\";\n\n@import \"../../base\";\n\n@include govuk-exports(\"govuk/component/notification-banner\") {\n .govuk-notification-banner {\n @include govuk-font($size: 19);\n @include govuk-responsive-margin(8, \"bottom\");\n\n border: $govuk-border-width solid;\n border-color: govuk-functional-colour(brand);\n\n background-color: govuk-functional-colour(brand);\n\n &:focus {\n outline: $govuk-focus-width solid;\n outline-color: govuk-functional-colour(focus);\n }\n }\n\n .govuk-notification-banner__header {\n padding: 2px govuk-spacing(3) govuk-spacing(1);\n\n // Ensures the notification header appears separate to the notification body\n // text in high contrast mode\n border-bottom: 1px solid transparent;\n\n @media #{govuk-from-breakpoint(tablet)} {\n padding: 2px govuk-spacing(4) govuk-spacing(1);\n }\n }\n\n .govuk-notification-banner__title {\n // Set the size again because this element is a heading and the user agent\n // font size overrides the inherited font size\n @include govuk-font-size($size: 19);\n @include govuk-typography-weight-bold;\n margin: 0;\n padding: 0;\n color: govuk-colour(\"white\");\n }\n\n .govuk-notification-banner__content {\n $padding-tablet: govuk-spacing(4);\n padding: govuk-spacing(3);\n\n color: govuk-functional-colour(text);\n background-color: govuk-functional-colour(body-background);\n\n @media #{govuk-from-breakpoint(tablet)} {\n padding: $padding-tablet;\n }\n\n // Wrap content at the same place that a 2/3 grid column ends, to maintain\n // shorter line-lengths when the notification banner is full width\n > * {\n // When elements have their own padding (like lists), include the padding\n // in the max-width calculation\n box-sizing: border-box;\n\n // Calculate the internal width of a two-thirds column...\n $two-col-width: math.div($govuk-page-width * 2, 3) - math.div($govuk-gutter * 1, 3);\n\n // ...and then factor in the left border and padding\n $banner-exterior: ($padding-tablet + $govuk-border-width);\n max-width: $two-col-width - $banner-exterior;\n }\n\n > :last-child {\n margin-bottom: 0;\n }\n }\n\n .govuk-notification-banner__heading {\n @include govuk-font-size($size: 24);\n @include govuk-typography-weight-bold;\n\n margin: 0 0 govuk-spacing(3);\n\n padding: 0;\n }\n\n .govuk-notification-banner__link {\n @include govuk-link-common;\n @include govuk-link-style-no-visited-state;\n }\n\n .govuk-notification-banner--success {\n border-color: govuk-functional-colour(success);\n\n background-color: govuk-functional-colour(success);\n\n .govuk-notification-banner__link {\n @include govuk-link-style-success;\n }\n }\n}\n"]}