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) • 19.8 kB
Source Map (JSON)
{"version":3,"sources":["../../../../src/govuk/components/header/_index.scss"],"names":[],"mappings":"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","file":"_index.scss","sourcesContent":["@include govuk-exports(\"govuk/component/header\") {\n $govuk-header-background: govuk-colour(\"black\");\n $govuk-header-border-color: $govuk-brand-colour;\n $govuk-header-border-width: govuk-spacing(2);\n $govuk-header-text: govuk-colour(\"white\");\n $govuk-header-link-active: #1d8feb;\n $govuk-header-nav-item-border-color: #2e3133;\n $govuk-header-link-underline-thickness: 3px;\n $govuk-header-vertical-spacing-value: 2;\n // This crown height is only used to calculate top offset of mobile menu button\n // as the crown svg height is the only thing that controls the height of the header\n $govuk-header-crown-height: 30px;\n $govuk-header-menu-button-height: 24px;\n $govuk-header-menu-button-width: 80px;\n\n $govuk-header-rebrand-background: $govuk-brand-colour;\n $govuk-header-rebrand-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 @include _govuk-rebrand(\n \"border-bottom\",\n $from: govuk-spacing(2) solid govuk-colour(\"white\"),\n $to: 1px solid transparent\n );\n @include _govuk-rebrand(\"background\", $from: $govuk-header-background, $to: $govuk-header-rebrand-background);\n\n color: $govuk-header-text;\n }\n\n .govuk-header--with-js-navigation {\n @include govuk-media-query($until: desktop) {\n .govuk-header__logo {\n // Protect the absolute positioned menu button from overlapping with the\n // logo with right padding using the button's width\n padding-right: $govuk-header-menu-button-width;\n }\n }\n }\n\n .govuk-header__container--full-width {\n padding: 0 govuk-spacing(3);\n border-color: $govuk-header-border-color;\n\n .govuk-header__menu-button {\n right: govuk-spacing(3);\n }\n }\n\n .govuk-header__container {\n @include govuk-clearfix;\n position: relative;\n margin-bottom: -$govuk-header-border-width;\n padding-top: govuk-spacing($govuk-header-vertical-spacing-value);\n border-bottom: $govuk-header-border-width solid $govuk-header-border-color;\n\n @include _govuk-rebrand {\n // Remove the space allocated to the blue bar\n margin-bottom: 0;\n\n // Remove padding as the child elements are now responsible for spacing\n padding-top: 0;\n\n // Remove the blue bar\n border-bottom: none;\n }\n }\n\n // TODO: Remove this when _govuk-rebrand becomes the default\n .govuk-header--full-width-border {\n border-bottom-color: $govuk-header-border-color;\n\n .govuk-header__container {\n border-bottom-color: transparent;\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-spacing(1);\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 @include _govuk-rebrand {\n margin-right: govuk-px-to-rem(7px); // 1 'dot'\n margin-bottom: $govuk-header-rebrand-logo-bottom-margin;\n\n // Remove right-margin if there's no product name\n &:last-child {\n margin-right: 0;\n }\n }\n }\n\n // Colour in the Dot\n .govuk-logo-dot {\n fill: #00ffe0;\n\n // Override Dot colour when printing\n @include govuk-media-query($media-type: 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 $product-name-offset: if($govuk-new-typography-scale, 7px, 10px);\n $product-name-offset-tablet: 5px;\n\n @include govuk-font-size($size: 24, $line-height: 1);\n @include govuk-typography-weight-regular;\n display: inline-table;\n\n // Maintain space below logo when wrapped\n margin-top: $product-name-offset;\n\n // Firefox places the GOV.UK logo one pixel higher, due to how it rounds\n // subpixels, so nudge the product name in FF to still be aligned.\n @-moz-document url-prefix() {\n margin-top: $product-name-offset - 0.5px;\n }\n\n // Align vertically with logo when not wrapped\n vertical-align: top;\n\n @include govuk-media-query($from: tablet) {\n margin-top: $product-name-offset-tablet;\n @-moz-document url-prefix() {\n margin-top: $product-name-offset-tablet - 0.5px;\n }\n }\n\n @include _govuk-rebrand {\n // Remove top margin\n margin-top: 0;\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 // 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 // Remove top margin on the breakpoints too\n @include govuk-media-query($from: tablet) {\n margin-top: 0;\n }\n\n @include govuk-media-query($from: desktop) {\n margin-top: 0;\n }\n }\n }\n\n .govuk-header__link {\n // Avoid using the `govuk-link-common` mixin because the links in the header\n // 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 @include govuk-link-style-inverse;\n\n text-decoration: none;\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 @include govuk-focused-text;\n }\n }\n\n .govuk-header__link--homepage {\n // Font size needs to be set on the link so that the box sizing is correct\n // in Firefox\n display: inline-block;\n margin-right: govuk-spacing(2);\n font-size: 30px; // We don't have a mixin that produces 30px font size\n\n @include govuk-media-query($from: desktop) {\n display: inline;\n }\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 // Remove any borders that show when focused and hovered.\n &:focus {\n margin-bottom: 0;\n border-bottom: 0;\n }\n\n @include _govuk-rebrand {\n display: inline;\n\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\n // Reset word-spacing for child elements\n > * {\n word-spacing: 0;\n }\n\n &:not(:focus) {\n background-color: $govuk-header-rebrand-background;\n }\n }\n }\n\n .govuk-header__service-name {\n display: inline-block;\n margin-bottom: govuk-spacing(2);\n @include govuk-font-size($size: 24);\n @include govuk-typography-weight-bold;\n\n @include _govuk-rebrand {\n // Apply margins to internal elements to emulate padding\n margin-bottom: govuk-spacing(3);\n\n @include govuk-media-query($from: desktop) {\n // Magic number to align service name baseline with the GOV.UK logo\n $service-name-offset: 4px;\n\n margin: (govuk-spacing(3) + $service-name-offset) 0 (govuk-spacing(3) - $service-name-offset);\n }\n }\n }\n\n .govuk-header__logo,\n .govuk-header__content {\n box-sizing: border-box;\n }\n\n .govuk-header__logo {\n @include govuk-responsive-margin($govuk-header-vertical-spacing-value, \"bottom\");\n\n @include govuk-media-query($from: desktop) {\n width: 33.33%;\n padding-right: $govuk-gutter-half;\n float: left;\n vertical-align: top;\n\n // Reset float when logo is the last child, without a navigation\n &:last-child {\n width: auto;\n padding-right: 0;\n float: none;\n }\n }\n\n @include _govuk-rebrand {\n // Apply margins to internal elements to emulate padding\n margin-bottom: 0;\n\n // Magic numbers, set padding to vertically centre align the logo\n padding-top: 16px;\n padding-bottom: 14px - $govuk-header-rebrand-logo-bottom-margin;\n }\n }\n\n .govuk-header__content {\n @include govuk-media-query($from: desktop) {\n width: 66.66%;\n padding-left: $govuk-gutter-half;\n float: left;\n }\n }\n\n .govuk-header__menu-button {\n @include govuk-font($size: 16);\n max-width: $govuk-header-menu-button-width;\n min-height: $govuk-header-menu-button-height;\n margin-bottom: govuk-spacing(1);\n padding: 0;\n border: 0;\n color: govuk-colour(\"white\");\n background: none;\n word-break: break-all;\n cursor: pointer;\n\n &:hover {\n text-decoration: solid underline $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 @include govuk-focused-text;\n }\n\n &::after {\n @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);\n content: \"\";\n margin-left: govuk-spacing(1);\n }\n\n &[aria-expanded=\"true\"]::after {\n @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);\n }\n\n @include govuk-media-query($from: mobile) {\n position: absolute;\n // calculate top offset by:\n // - getting the vertical spacing for the top and the bottom of the header\n // - adding that to the crown height\n // - dividing it by 2 so you have the vertical centre of the header\n // - subtracting half the height of the menu button\n top: (((govuk-spacing($govuk-header-vertical-spacing-value) * 2) + $govuk-header-crown-height) / 2) -\n ($govuk-header-menu-button-height / 2);\n right: 0;\n margin: 0;\n }\n\n @include govuk-media-query($from: tablet) {\n top: govuk-spacing(3);\n }\n\n .govuk-frontend-supported & {\n display: block;\n }\n\n &[hidden],\n .govuk-frontend-supported &[hidden] {\n display: none;\n }\n }\n\n .govuk-header__navigation {\n @include govuk-media-query($until: mobile) {\n @include _govuk-rebrand {\n padding-bottom: govuk-spacing(3);\n }\n }\n\n @include govuk-media-query($from: desktop) {\n margin-bottom: govuk-spacing(2);\n\n @include _govuk-rebrand {\n // Magic number so that the bottom of the nav links aligns with the\n // baseline of the GOV.UK logo\n $navigation-offset: 7px;\n\n // Apply margins to internal elements to emulate padding\n margin-bottom: 0;\n padding: (govuk-spacing(3) + $navigation-offset) 0 (govuk-spacing(3) - $navigation-offset);\n }\n }\n }\n\n .govuk-header__service-name + .govuk-header__navigation {\n @include _govuk-rebrand {\n @include govuk-media-query($from: desktop) {\n // If there's both a service name and navigation,\n // remove the extra padding between them on desktop\n padding-top: 0;\n\n // Restore the full bottom padding as the navigation isn't standalone\n padding-bottom: govuk-spacing(3);\n }\n }\n }\n\n .govuk-header__navigation-list {\n // Reset user-agent default list styles\n margin: 0;\n padding: 0;\n list-style: none;\n\n &[hidden] {\n display: none;\n }\n\n @include _govuk-rebrand {\n @include govuk-media-query($from: mobile, $until: desktop) {\n padding-bottom: govuk-spacing(3);\n }\n }\n }\n\n .govuk-header__navigation--end {\n @include govuk-media-query($from: desktop) {\n margin: 0;\n padding: govuk-spacing(1) 0;\n text-align: right;\n }\n }\n\n .govuk-header__navigation-item {\n padding: govuk-spacing(2) 0;\n border-bottom: 1px solid $govuk-header-nav-item-border-color;\n\n @include govuk-media-query($from: desktop) {\n display: inline-block;\n margin-right: govuk-spacing(3);\n padding: govuk-spacing(1) 0;\n border: 0;\n }\n\n a {\n @include govuk-font-size($size: 16);\n @include govuk-typography-weight-bold;\n white-space: nowrap;\n }\n\n @include _govuk-rebrand {\n // Increase top padding of nav items...\n padding-top: govuk-spacing(3);\n\n // ...except on desktop\n @include govuk-media-query($from: desktop) {\n padding-top: govuk-spacing(1);\n }\n\n // Change the dividing line colour between mobile nav items\n border-bottom-color: govuk-colour(\"white\");\n\n // Reduce default weight of links so that we can use bold for active ones\n a {\n @include govuk-typography-weight-regular;\n }\n }\n }\n\n .govuk-header__navigation-item--active {\n a {\n @include _govuk-rebrand {\n // Change active links to use bold text instead of changing colour\n @include govuk-typography-weight-bold;\n }\n\n &:link,\n &:hover,\n &:visited {\n color: $govuk-header-link-active;\n\n @include _govuk-rebrand {\n color: inherit;\n }\n }\n\n // When printing, use the normal blue as this contrasts better with the\n // white printing header\n @include govuk-media-query($media-type: print) {\n color: $govuk-brand-colour;\n }\n\n // When focussed, the text colour needs to be darker to ensure that colour\n // contrast is still acceptable\n &:focus {\n color: $govuk-focus-text-colour;\n\n @include _govuk-rebrand {\n color: $govuk-focus-text-colour;\n }\n }\n }\n }\n\n .govuk-header__navigation-item:last-child {\n margin-right: 0;\n border-bottom: 0;\n }\n\n @include govuk-media-query($media-type: print) {\n .govuk-header {\n border-bottom-width: 0;\n color: govuk-colour(\"black\");\n background: transparent;\n }\n\n .govuk-header__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}\n"]}