govuk-frontend/dist/govuk/components/header/_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/header/_index.scss"],"names":[],"mappings":"AAAA,oBAAoB;;AAEpB;EACE,wDAAwD;EACxD,yCAAyC;EACzC,2CAA2C;EAC3C,qCAAqC;;EAErC;IACE,+CAA+C;;IAE/C,yDAAyD;IACzD,oCAAoC;IACpC,yBAAyB;IACzB,oCAAoC;EACtC;;EAEA;IACE,2BAA2B;EAC7B;;EAEA;IACE,sBAAsB;;IAEtB,gEAAgE;IAChE,iBAAiB;IACjB,uDAAuD;EACzD;;EAEA;IACE,oEAAoE;IACpE,0CAA0C;IAC1C,CAAC;IACD,wCAAwC;IACxC,uEAAuE;IACvE,sEAAsE;IACtE,+CAA+C;IAC/C,CAAC;IACD,yEAAyE;IACzE,YAAY;IACZ,eAAe;IACf,8BAA8B;IAC9B,eAAe,EAAE,oDAAoD;IACrE,qBAAqB;IACrB,2DAA2D;IAC3D,mCAAmC;IACnC,mCAAmC;IACnC,uCAAuC;IACvC;MACE,eAAe;IACjB;IACA,iCAAiC;;IAEjC;;MAEE,qBAAqB;IACvB;;IAEA;;MAEE,yBAAyB;MACzB,0DAA0D;MAC1D,2DAA2D;IAC7D;;IAEA;MACE,0BAA0B;MAC1B,iEAAiE;;MAEjE;QACE,mDAAmD;MACrD;IACF;;IAEA;MACE,wDAAwD;MACxD,gBAAgB;MAChB,gBAAgB;;MAEhB,2BAA2B;IAC7B;;IAEA;MACE,0CAA0C;IAC5C;EACF;;EAEA;IACE,qBAAqB;IACrB,kBAAkB;IAClB,SAAS;;IAET,wEAAwE;IACxE,sDAAsD;IACtD,kCAAkC,EAAE,SAAS;IAC7C,4DAA4D;IAC5D,+CAA+C;IAC/C,kBAAkB;IAClB,mBAAmB;;IAEnB,wEAAwE;IACxE,eAAe;IACf;MACE,yBAAyB;MACzB,eAAe;IACjB;;IAEA,wEAAwE;IACxE,uBAAuB;IACvB;MACE,eAAe;IACjB;EACF;;EAEA,mBAAmB;EACnB;IACE,oCAAoC;;IAEpC,mCAAmC;IACnC;MACE,kBAAkB;IACpB;;IAEA,4CAA4C;IAC5C;MACE,kBAAkB;IACpB;;IAEA,8BAA8B;IAC9B;MACE,kBAAkB;IACpB;EACF;;EAEA;IACE,qBAAqB;;IAErB,mEAAmE;IACnE,8BAA8B;IAC9B,oCAAoC;;IAEpC,+DAA+D;IAC/D,6DAA6D;IAC7D,gCAAgC;;IAEhC,uBAAuB;IACvB,wBAAwB;;IAExB,6CAA6C;IAC7C,mBAAmB;;IAEnB,sEAAsE;IACtE,uEAAuE;IACvE,yBAAyB;;IAEzB;MACE,eAAe;MACf,uBAAuB;IACzB;EACF;;EAEA;IACE;MACE,sBAAsB;MACtB,4BAA4B;MAC5B,uBAAuB;IACzB;;IAEA;MACE;;QAEE,4BAA4B;MAC9B;;MAEA,mEAAmE;MACnE;QACE,aAAa;MACf;IACF;;IAEA;MACE,qDAAqD;MACrD;QACE,eAAe;MACjB;IACF;EACF;AACF","file":"_index.scss","sourcesContent":["@import \"../../base\";\n\n@include govuk-exports(\"govuk/component/header\") {\n  $govuk-header-background: govuk-functional-colour(brand);\n  $govuk-header-text: govuk-colour(\"white\");\n  $govuk-header-link-underline-thickness: 3px;\n  $govuk-header-logo-bottom-margin: 2px;\n\n  .govuk-header {\n    @include govuk-font($size: 16, $line-height: 1);\n\n    // Add a transparent bottom border for forced-colour modes\n    border-bottom: 1px solid transparent;\n    color: $govuk-header-text;\n    background: $govuk-header-background;\n  }\n\n  .govuk-header__container--full-width {\n    padding: 0 govuk-spacing(3);\n  }\n\n  .govuk-header__logo {\n    box-sizing: border-box;\n\n    // Magic numbers, set padding to vertically centre align the logo\n    padding-top: 16px;\n    padding-bottom: 14px - $govuk-header-logo-bottom-margin;\n  }\n\n  .govuk-header__homepage-link {\n    // Avoid using the `govuk-link-common` mixin because the links in the\n    // header get a special treatment, because:\n    //\n    // - underlines are only visible on hover\n    // - all links get a 3px underline regardless of text size, as there are\n    //   multiple grouped elements close to one another and having slightly\n    //   different underline widths looks unbalanced\n    //\n    // Font size needs to be set on the link so that the box sizing is correct\n    // in Firefox\n    display: inline;\n    margin-right: govuk-spacing(2);\n    font-size: 30px; // We don't have a mixin that produces 30px font size\n    text-decoration: none;\n    // Remove word-spacing from within the logo so we can ignore\n    // whitespace characters in the HTML\n    word-spacing: govuk-px-to-rem(-6px);\n    // Reset word-spacing for child elements\n    > * {\n      word-spacing: 0;\n    }\n    @include govuk-link-style-inverse;\n\n    &:link,\n    &:visited {\n      text-decoration: none;\n    }\n\n    &:hover,\n    &:active {\n      // Negate the added border\n      margin-bottom: $govuk-header-link-underline-thickness * -1;\n      border-bottom: $govuk-header-link-underline-thickness solid;\n    }\n\n    &:hover {\n      text-decoration: underline;\n      text-decoration-thickness: $govuk-header-link-underline-thickness;\n\n      @if $govuk-link-underline-offset {\n        text-underline-offset: $govuk-link-underline-offset;\n      }\n    }\n\n    &:focus {\n      // Remove any borders that show when focused and hovered.\n      margin-bottom: 0;\n      border-bottom: 0;\n\n      @include govuk-focused-text;\n    }\n\n    &:not(:focus) {\n      background-color: $govuk-header-background;\n    }\n  }\n\n  .govuk-header__logotype {\n    display: inline-block;\n    position: relative;\n    top: -3px;\n\n    // Add a gap after the logo in case it's followed by a product name. This\n    // gets removed later if the logotype is a :last-child.\n    margin-right: govuk-px-to-rem(7px); // 1 'dot'\n    // Add bottom margin to space Product name on small viewports\n    margin-bottom: $govuk-header-logo-bottom-margin;\n    fill: currentcolor;\n    vertical-align: top;\n\n    // Prevent readability backplate from obscuring underline in Windows High\n    // Contrast Mode\n    @media (forced-colors: active) {\n      forced-color-adjust: none;\n      color: linktext;\n    }\n\n    // Remove the gap after the logo if there's no product name to keep hover\n    // and focus states neat\n    &:last-child {\n      margin-right: 0;\n    }\n  }\n\n  // Colour in the Dot\n  .govuk-logo-dot {\n    fill: govuk-colour(\"teal\", \"accent\");\n\n    // Override Dot colour when printing\n    @media print {\n      fill: currentcolor;\n    }\n\n    // Override Dot colour on forced colours mode\n    @media (forced-colors: active) {\n      fill: currentcolor;\n    }\n\n    // Override Dot colour on focus\n    :focus & {\n      fill: currentcolor;\n    }\n  }\n\n  .govuk-header__product-name {\n    display: inline-table;\n\n    // Remove 1px from the bottom to account for the font-size being 1px\n    // larger than the logo height.\n    margin-bottom: govuk-px-to-rem(-1px);\n\n    // Magic number font-size that visually aligns with GOV.UK logo.\n    // Also stops reducing the product name size on narrow screens\n    font-size: govuk-px-to-rem(31px);\n\n    // Reduce letter spacing\n    letter-spacing: -0.015em;\n\n    // Align vertically with logo when not wrapped\n    vertical-align: top;\n\n    // Prevent forced colour modes from applying a background colour behind\n    // the product name, which cuts off the underline that appears on hover.\n    forced-color-adjust: none;\n\n    @media screen and (forced-colors: active) {\n      color: LinkText;\n      background: transparent;\n    }\n  }\n\n  @media print {\n    .govuk-header {\n      border-bottom-width: 0;\n      color: govuk-colour(\"black\");\n      background: transparent;\n    }\n\n    .govuk-header__homepage-link {\n      &:link,\n      &:visited {\n        color: govuk-colour(\"black\");\n      }\n\n      // Do not append link href to GOV.UK link when printing (e.g. '(/)')\n      &::after {\n        display: none;\n      }\n    }\n\n    .govuk-header__product-name {\n      // Fix product name alignment in Firefox when printing\n      @-moz-document url-prefix() {\n        margin-top: 2px;\n      }\n    }\n  }\n}\n"]}