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) • 10.8 kB
Source Map (JSON)
{"version":3,"sources":["../../../../src/govuk/components/service-navigation/_index.scss"],"names":[],"mappings":"AAAA;EACE,oEAAoE;EACpE,gEAAgE;EAChE,6DAA6D;;EAE7D,yEAAyE;EACzE,4DAA4D;EAC5D,2EAA2E;;EAE3E;IACE,wBAAwB;IACxB,0BAA0B;IAC1B;;;;KAIC;IACD;;;;KAIC;EACH;;EAEA;IACE,aAAa;IACb,sBAAsB;IACtB,kBAAkB;;IAElB;MACE,mBAAmB;MACnB,eAAe;IACjB;EACF;;EAEA,sEAAsE;EACtE,qEAAqE;EACrE;;IAEE,kBAAkB;IAClB,0BAA0B;IAC1B,qDAAqD;;IAErD;MACE,4EAA4E;MAC5E,qBAAqB;;MAErB,aAAa;MACb,gBAAgB;MAChB,2BAA2B;;MAE3B;QACE,2BAA2B;;QAE3B,0BAA0B;QAC1B,oEAAoE;QACpE,sEAAsE;QACtE,qEAAqE;QACrE,6BAA6B;QAC7B,sBAAsB;MACxB;;MAEA;QACE,sDAAsD;MACxD;IACF;EACF;;EAEA,4EAA4E;EAC5E,yEAAyE;EACzE;IACE;;MAEE;QACE,aAAa;MACf;IACF;EACF;;EAEA;IACE;MACE,0EAA0E;MAC1E,qDAAqD;MACrD,2FAA2F;MAC3F,8BAA8B;MAC9B,qEAAqE;IACvE;;IAEA;MACE;;;;OAIC;MACD,uEAAuE;IACzE;EACF;;EAEA;IACE,0BAA0B;IAC1B,sCAAsC;IACtC,0CAA0C;;IAE1C;MACE,kEAAkE;MAClE,eAAe;MACf,4CAA4C;IAC9C;EACF;;EAEA,CAAC;EACD,4BAA4B;EAC5B,CAAC;;EAED;IACE,6CAA6C;EAC/C;;EAEA,uEAAuE;EACvE,2DAA2D;EAC3D;IACE,8BAA8B;EAChC;;EAEA,qEAAqE;EACrE,4EAA4E;EAC5E,0BAA0B;EAC1B;IACE,YAAY;EACd;;EAEA,CAAC;EACD,+BAA+B;EAC/B,CAAC;;EAED;IACE,6CAA6C;IAC7C,oBAAoB;IACpB,0BAA0B;IAC1B,UAAU;IACV,SAAS;IACT,4CAA4C;IAC5C,gBAAgB;IAChB,qBAAqB;IACrB,eAAe;IACf,mBAAmB;;IAEnB;MACE,2BAA2B;IAC7B;;IAEA;MACE,iFAAiF;MACjF,WAAW;MACX,6BAA6B;IAC/B;;IAEA;MACE,+EAA+E;IACjF;;IAEA,mEAAmE;IACnE;MACE,aAAa;IACf;;IAEA,kEAAkE;IAClE,8DAA8D;IAC9D;MACE,aAAa;IACf;EACF;;EAEA;IACE,8BAA8B;IAC9B,SAAS;IACT,+BAA+B;IAC/B,UAAU;IACV,gBAAgB;;IAEhB,mEAAmE;IACnE,sEAAsE;IACtE,wEAAwE;IACxE,uCAAuC;IACvC,wEAAwE;IACxE,0CAA0C;IAC1C;MACE,aAAa;MACb,eAAe;MACf,gBAAgB;;MAEhB,uEAAuE;MACvE,oEAAoE;MACpE,oEAAoE;MACpE,mEAAmE;MACnE,CAAC;MACD,8EAA8E;MAC9E;QACE,cAAc;MAChB;IACF;EACF;;EAEA,qEAAqE;EACrE,mEAAmE;EACnE,wEAAwE;EACxE,iCAAiC;EACjC;IACE,oBAAoB;EACtB;;EAEA,yDAAyD;EACzD;IACE;MACE,kDAAkD;MAClD,mBAAmB;;MAEnB,mEAAmE;MACnE,aAAa;MACb,4BAA4B;;MAE5B,qCAAqC;;MAErC;QACE,mBAAmB;QACnB,mBAAmB;QACnB,2DAA2D;MAC7D;;MAEA,2DAA2D;MAC3D;QACE,gBAAgB;MAClB;;MAEA,qCAAqC;MACrC;;QAEE,mCAAmC;MACrC;;MAEA,sBAAsB;MACtB;QACE,iCAAiC;MACnC;;MAEA,qDAAqD;MACrD;QACE,mBAAmB;MACrB;IACF;EACF;AACF","file":"_index.scss","sourcesContent":["@include govuk-exports(\"govuk/component/service-navigation\") {\n $govuk-service-navigation-active-link-border-width: govuk-spacing(1);\n $govuk-service-navigation-background: govuk-colour(\"light-grey\");\n $govuk-service-navigation-border-colour: $govuk-border-colour;\n\n // We make the link colour a little darker than normal here so that it has\n // better perceptual contrast with the navigation background.\n $govuk-service-navigation-link-colour: govuk-shade($govuk-link-colour, 10%);\n\n .govuk-service-navigation {\n border-bottom-width: 1px;\n border-bottom-style: solid;\n @include _govuk-rebrand(\n \"border-bottom-color\",\n $from: $govuk-service-navigation-border-colour,\n $to: $_govuk-rebrand-border-colour-on-blue-tint-95\n );\n @include _govuk-rebrand(\n \"background-color\",\n $from: $govuk-service-navigation-background,\n $to: $_govuk-rebrand-template-background-colour\n );\n }\n\n .govuk-service-navigation__container {\n display: flex;\n flex-direction: column;\n align-items: start;\n\n @include govuk-media-query($from: tablet) {\n flex-direction: row;\n flex-wrap: wrap;\n }\n }\n\n // These styles are shared between nav items and the service name, they\n // ensure that both of them remain vertically aligned with one another\n .govuk-service-navigation__item,\n .govuk-service-navigation__service-name {\n position: relative;\n margin: govuk-spacing(2) 0;\n border: 0 solid $govuk-service-navigation-link-colour;\n\n @include govuk-media-query($from: tablet) {\n // inline-block is used as a fallback for browsers that don't support flexbox\n display: inline-block;\n\n margin-top: 0;\n margin-bottom: 0;\n padding: govuk-spacing(4) 0;\n\n @include _govuk-rebrand {\n padding: govuk-spacing(3) 0;\n\n // More magic numbers ahoy:\n // 29 is the desired height of the element (60), minus top and bottom\n // padding (2×15), minus bottom border (1); 19 is the font-size at this\n // point. This gives us the perfect fractional line height to make the\n // overall component 60px high\n line-height: (29 / 19);\n }\n\n &:not(:last-child) {\n @include govuk-responsive-margin(6, $direction: right);\n }\n }\n }\n\n // Remove the top margin of the first nav item if there is a service name but\n // there's no menu button (either because it doesn't exist or it's hidden)\n .govuk-service-navigation__service-name + .govuk-service-navigation__wrapper {\n .govuk-service-navigation__list:first-child,\n .govuk-service-navigation__toggle[hidden] + .govuk-service-navigation__list {\n .govuk-service-navigation__item:first-child {\n margin-top: 0;\n }\n }\n }\n\n .govuk-service-navigation__item--active {\n @include govuk-media-query($until: tablet) {\n // Negative offset the left margin so we can place a current page indicator\n // to the left without misaligning the list item text.\n margin-left: ((govuk-spacing(2) + $govuk-service-navigation-active-link-border-width) * -1);\n padding-left: govuk-spacing(2);\n border-left-width: $govuk-service-navigation-active-link-border-width;\n }\n\n @include govuk-media-query($from: tablet) {\n @include _govuk-rebrand(\n \"padding-bottom\",\n $from: govuk-spacing(4) - $govuk-service-navigation-active-link-border-width,\n $to: govuk-spacing(3) - $govuk-service-navigation-active-link-border-width\n );\n border-bottom-width: $govuk-service-navigation-active-link-border-width;\n }\n }\n\n .govuk-service-navigation__link {\n @include govuk-link-common;\n @include govuk-link-style-no-underline;\n @include govuk-link-style-no-visited-state;\n\n &:not(:hover):not(:focus) {\n // We set the colour here as we don't want to override the hover or\n // focus colours\n color: $govuk-service-navigation-link-colour;\n }\n }\n\n //\n // Service name specific code\n //\n\n .govuk-service-navigation__service-name {\n @include govuk-font($size: 19, $weight: bold);\n }\n\n // Annoyingly this requires a compound selector in order to overcome the\n // specificity of the other link colour override we're doing\n .govuk-service-navigation__service-name .govuk-service-navigation__link {\n @include govuk-link-style-text;\n }\n\n // Allow navigation section to always take up maximum available space,\n // rather than sizing to fit the content. This makes it easier to right align\n // nav items and use slots.\n .govuk-service-navigation__wrapper {\n flex-grow: 1;\n }\n\n //\n // Navigation list specific code\n //\n\n .govuk-service-navigation__toggle {\n @include govuk-font($size: 19, $weight: bold);\n display: inline-flex;\n margin: govuk-spacing(2) 0;\n padding: 0;\n border: 0;\n color: $govuk-service-navigation-link-colour;\n background: none;\n word-break: break-all;\n cursor: pointer;\n align-items: center;\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 // Ensure the button stays hidden if the hidden attribute is present\n &[hidden] {\n display: none;\n }\n\n // If we have both a service name and navigation toggle, remove the\n // margin-top so that there isn't a bunch of space between them\n .govuk-service-navigation__service-name + .govuk-service-navigation__wrapper & {\n margin-top: 0;\n }\n }\n\n .govuk-service-navigation__list {\n @include govuk-font($size: 19);\n margin: 0;\n margin-bottom: govuk-spacing(3);\n padding: 0;\n list-style: none;\n\n // Make the navigation list a flexbox. Doing so resolves a couple of\n // accessibility problems caused by the list items being inline-blocks:\n // - Removes the extra whitespace from between each list item that screen\n // readers would pointlessly announce.\n // - Fixes an NVDA issue in Firefox and Chrome <= 124 where it would read\n // all of the links as a run-on sentence.\n @include govuk-media-query($from: tablet) {\n display: flex;\n flex-wrap: wrap;\n margin-bottom: 0;\n\n // However... IE11 totally trips over flexbox and doesn't wrap anything,\n // making all of the items into a single, horizontally scrolling row,\n // which is no good. This CSS hack removes the flexbox definition for\n // IE 9–11, reverting it to the flawed, but OK, non-flexbox version.\n //\n // CSS hack from http://browserhacks.com/#hack-a60b03e301a67f76a5a22221c739dc64\n @media screen and (min-width: 0\\0) {\n display: block;\n }\n }\n }\n\n // This is a <strong> element that is used as a fallback mechanism for\n // visually indicating the current page in scenarios where CSS isn't\n // available. We don't actually want it to be bold normally, so set it to\n // inherit the parent font-weight.\n .govuk-service-navigation__active-fallback {\n font-weight: inherit;\n }\n\n // Inverted colour scheme style intended for product pages\n .govuk-service-navigation--inverse {\n @include _govuk-rebrand {\n // Remove bottom border to add width-container ones\n border-bottom: none;\n\n // Set colour here so non-link text (service name, slot content) can\n // use it too.\n color: govuk-colour(\"white\");\n\n background-color: $govuk-brand-colour;\n\n .govuk-width-container {\n border-width: 1px 0;\n border-style: solid;\n border-color: $_govuk-rebrand-border-colour-on-blue-tint-95;\n }\n\n // Subtract 1px of space to account for the extra border-top\n .govuk-service-navigation__container {\n margin-top: -1px;\n }\n\n // Override the 'active' border colour\n .govuk-service-navigation__item,\n .govuk-service-navigation__service-name {\n border-color: govuk-colour(\"white\");\n }\n\n // Override link styles\n .govuk-service-navigation__link {\n @include govuk-link-style-inverse;\n }\n\n // Override mobile menu toggle colour when not focused\n .govuk-service-navigation__toggle:not(:focus) {\n color: currentcolor;\n }\n }\n }\n}\n"]}