govuk_publishing_components 60.0.1 → 60.1.0

data/node_modules/govuk-frontend/dist/govuk/components/select/fixtures.json

@@ -27,71 +27,8 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
-            "screenshot": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"select-1\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\" selected>GOV.UK frontend option 2</option>\n    <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n  </select>\n</div>"
-        },
-        {
-            "name": "id",
-            "options": {
-                "id": "select-id",
-                "name": "test-name",
-                "label": {
-                    "text": "Horse with no name"
-                },
-                "items": []
-            },
-            "hidden": false,
-            "description": "",
-            "previewLayoutModifiers": [],
-            "screenshot": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"select-id\">\n    Horse with no name\n  </label>\n  <select class=\"govuk-select\" id=\"select-id\" name=\"test-name\">\n  </select>\n</div>"
-        },
-        {
-            "name": "with no items",
-            "options": {
-                "id": "select-1",
-                "name": "select-1",
-                "label": {
-                    "text": "Horse with no name"
-                },
-                "items": []
-            },
-            "hidden": false,
-            "description": "",
-            "previewLayoutModifiers": [],
-            "screenshot": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"select-1\">\n    Horse with no name\n  </label>\n  <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n  </select>\n</div>"
-        },
-        {
-            "name": "with selected value",
-            "options": {
-                "id": "select-1",
-                "name": "select-1",
-                "label": {
-                    "text": "Label text goes here"
-                },
-                "items": [
-                    {
-                        "value": 1,
-                        "text": "GOV.UK frontend option 1"
-                    },
-                    {
-                        "value": 2,
-                        "text": "GOV.UK frontend option 2"
-                    },
-                    {
-                        "value": 3,
-                        "text": "GOV.UK frontend option 3",
-                        "disabled": true
-                    }
-                ],
-                "value": 2
-            },
-            "hidden": false,
-            "description": "",
-            "previewLayoutModifiers": [],
-            "screenshot": false,
+            "pageTemplateOptions": {},
+            "screenshot": true,
             "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"select-1\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\" selected>GOV.UK frontend option 2</option>\n    <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n  </select>\n</div>"
         },
         {
@@ -125,7 +62,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"select-2\">\n    Label text goes here\n  </label>\n  <div id=\"select-2-hint\" class=\"govuk-hint\">\n    Hint text goes here\n  </div>\n  <p id=\"select-2-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n  <select class=\"govuk-select govuk-select--error\" id=\"select-2\" name=\"select-2\" aria-describedby=\"select-2-hint select-2-error\">\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\">GOV.UK frontend option 2</option>\n    <option value=\"3\">GOV.UK frontend option 3</option>\n  </select>\n</div>"
         },
@@ -158,7 +95,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\">\n    <label class=\"govuk-label govuk-label--l\" for=\"select-3\">\n      Label text goes here\n    </label>\n  </h1>\n  <select class=\"govuk-select\" id=\"select-3\" name=\"select-3\">\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\" selected>GOV.UK frontend option 2</option>\n    <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n  </select>\n</div>"
         },
@@ -190,45 +127,10 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"select-1\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select govuk-!-width-full\" id=\"select-1\" name=\"select-1\">\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\" selected>GOV.UK frontend option 2</option>\n    <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n  </select>\n</div>"
         },
-        {
-            "name": "with optional form-group classes",
-            "options": {
-                "id": "select-1",
-                "name": "select-1",
-                "classes": "govuk-!-width-full",
-                "label": {
-                    "text": "Label text goes here"
-                },
-                "formGroup": {
-                    "classes": "extra-class"
-                },
-                "items": [
-                    {
-                        "value": 1,
-                        "text": "GOV.UK frontend option 1"
-                    },
-                    {
-                        "value": 2,
-                        "text": "GOV.UK frontend option 2",
-                        "selected": true
-                    },
-                    {
-                        "value": 3,
-                        "text": "GOV.UK frontend option 3",
-                        "disabled": true
-                    }
-                ]
-            },
-            "hidden": false,
-            "description": "",
-            "previewLayoutModifiers": [],
-            "screenshot": false,
-            "html": "<div class=\"govuk-form-group extra-class\">\n  <label class=\"govuk-label\" for=\"select-1\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select govuk-!-width-full\" id=\"select-1\" name=\"select-1\">\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\" selected>GOV.UK frontend option 2</option>\n    <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n  </select>\n</div>"
-        },
         {
             "name": "with describedBy",
             "options": {
@@ -251,7 +153,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-describedby\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"with-describedby\" name=\"with-describedby\" aria-describedby=\"test-target-element\">\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
         },
@@ -279,7 +181,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-attributes\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"with-attributes\" name=\"with-attributes\" data-attribute=\"my data value\">\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
         },
@@ -313,7 +215,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-item-attributes\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"with-item-attributes\" name=\"with-item-attributes\">\n    <option value=\"1\" data-attribute=\"ABC\" data-second-attribute=\"DEF\">Option 1</option>\n    <option value=\"2\" selected data-attribute=\"GHI\" data-second-attribute=\"JKL\">Option 2</option>\n  </select>\n</div>"
         },
@@ -341,7 +243,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-falsy-items\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"with-falsy-items\" name=\"with-falsy-items\">\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\">Options 2</option>\n  </select>\n</div>"
         },
@@ -359,7 +261,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"select-with-hint\">\n    Label text goes here\n  </label>\n  <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n    Hint text goes here\n  </div>\n  <select class=\"govuk-select\" id=\"select-with-hint\" name=\"select-with-hint\" aria-describedby=\"select-with-hint-hint\">\n  </select>\n</div>"
         },
@@ -388,7 +290,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"select-with-hint\">\n    Label text goes here\n  </label>\n  <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n    Hint text goes here\n  </div>\n  <select class=\"govuk-select\" id=\"select-with-hint\" name=\"select-with-hint\" aria-describedby=\"test-target-element select-with-hint-hint\">\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
         },
@@ -416,7 +318,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"select-with-error\">\n    Label text goes here\n  </label>\n  <p id=\"select-with-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"select-with-error-error\">\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
         },
@@ -445,7 +347,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"select-with-error\">\n    Label text goes here\n  </label>\n  <p id=\"select-with-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"test-target-element select-with-error-error\">\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
         },
@@ -471,7 +373,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"colors\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"colors\" name=\"colors\">\n    <option>Red</option>\n    <option>Green</option>\n    <option>Blue</option>\n  </select>\n</div>"
         },
@@ -498,7 +400,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"colors\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"colors\" name=\"colors\">\n    <option>Red</option>\n    <option selected>Green</option>\n    <option>Blue</option>\n  </select>\n</div>"
         },
@@ -527,7 +429,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"falsy-values\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"falsy-values\" name=\"falsy-values\">\n    <option value=\"\">Empty string</option>\n    <option value=\"false\">Boolean false</option>\n    <option value=\"0\">Number zero</option>\n  </select>\n</div>"
         },
@@ -558,9 +460,91 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"colors\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"colors\" name=\"colors\">\n    <option value=\"red\">Red</option>\n    <option value=\"green\">Green</option>\n    <option value=\"blue\">Blue</option>\n  </select>\n</div>"
+        },
+        {
+            "name": "id",
+            "options": {
+                "id": "select-id",
+                "name": "test-name",
+                "label": {
+                    "text": "Horse with no name"
+                },
+                "items": []
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"select-id\">\n    Horse with no name\n  </label>\n  <select class=\"govuk-select\" id=\"select-id\" name=\"test-name\">\n  </select>\n</div>"
+        },
+        {
+            "name": "with selected value",
+            "options": {
+                "id": "select-1",
+                "name": "select-1",
+                "label": {
+                    "text": "Label text goes here"
+                },
+                "items": [
+                    {
+                        "value": 1,
+                        "text": "GOV.UK frontend option 1"
+                    },
+                    {
+                        "value": 2,
+                        "text": "GOV.UK frontend option 2"
+                    },
+                    {
+                        "value": 3,
+                        "text": "GOV.UK frontend option 3",
+                        "disabled": true
+                    }
+                ],
+                "value": 2
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"select-1\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\" selected>GOV.UK frontend option 2</option>\n    <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n  </select>\n</div>"
+        },
+        {
+            "name": "with optional form-group classes",
+            "options": {
+                "id": "select-1",
+                "name": "select-1",
+                "classes": "govuk-!-width-full",
+                "label": {
+                    "text": "Label text goes here"
+                },
+                "formGroup": {
+                    "classes": "extra-class"
+                },
+                "items": [
+                    {
+                        "value": 1,
+                        "text": "GOV.UK frontend option 1"
+                    },
+                    {
+                        "value": 2,
+                        "text": "GOV.UK frontend option 2",
+                        "selected": true
+                    },
+                    {
+                        "value": 3,
+                        "text": "GOV.UK frontend option 3",
+                        "disabled": true
+                    }
+                ]
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group extra-class\">\n  <label class=\"govuk-label\" for=\"select-1\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select govuk-!-width-full\" id=\"select-1\" name=\"select-1\">\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\" selected>GOV.UK frontend option 2</option>\n    <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n  </select>\n</div>"
         }
     ]
 }

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/_index.scss

@@ -42,13 +42,22 @@
     border: 0 solid $govuk-service-navigation-link-colour;
 
     @include govuk-media-query($from: tablet) {
+      // inline-block is used as a fallback for browsers that don't support flexbox
+      display: inline-block;
+
       margin-top: 0;
       margin-bottom: 0;
       padding: govuk-spacing(4) 0;
 
       @include _govuk-rebrand {
         padding: govuk-spacing(3) 0;
-        line-height: 1.5;
+
+        // More magic numbers ahoy:
+        // 29 is the desired height of the element (60), minus top and bottom
+        // padding (2×15), minus bottom border (1); 19 is the font-size at this
+        // point. This gives us the perfect fractional line height to make the
+        // overall component 60px high
+        line-height: (29 / 19);
       }
 
       &:not(:last-child) {
@@ -57,6 +66,17 @@
     }
   }
 
+  // Remove the top margin of the first nav item if there is a service name but
+  // there's no menu button (either because it doesn't exist or it's hidden)
+  .govuk-service-navigation__service-name + .govuk-service-navigation__wrapper {
+    .govuk-service-navigation__list:first-child,
+    .govuk-service-navigation__toggle[hidden] + .govuk-service-navigation__list {
+      .govuk-service-navigation__item:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+
   .govuk-service-navigation__item--active {
     @include govuk-media-query($until: tablet) {
       // Negative offset the left margin so we can place a current page indicator
@@ -102,6 +122,13 @@
     @include govuk-link-style-text;
   }
 
+  // Allow navigation section to always take up maximum available space,
+  // rather than sizing to fit the content. This makes it easier to right align
+  // nav items and use slots.
+  .govuk-service-navigation__wrapper {
+    flex-grow: 1;
+  }
+
   //
   // Navigation list specific code
   //
@@ -165,11 +192,10 @@
       // However... IE11 totally trips over flexbox and doesn't wrap anything,
       // making all of the items into a single, horizontally scrolling row,
       // which is no good. This CSS hack removes the flexbox definition for
-      // IE 10 & 11, reverting it to the flawed, but OK, non-flexbox version.
+      // IE 9–11, reverting it to the flawed, but OK, non-flexbox version.
       //
-      // CSS hack taken from https://stackoverflow.com/questions/11173106/apply-style-only-on-ie#answer-36448860
-      // which also includes an explanation of why this works
-      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      // CSS hack from http://browserhacks.com/#hack-a60b03e301a67f76a5a22221c739dc64
+      @media screen and (min-width: 0\0) {
         display: block;
       }
     }
@@ -182,6 +208,47 @@
   .govuk-service-navigation__active-fallback {
     font-weight: inherit;
   }
+
+  // Inverted colour scheme style intended for product pages
+  .govuk-service-navigation--inverse {
+    @include _govuk-rebrand {
+      // Remove bottom border to add width-container ones
+      border-bottom: none;
+
+      // Set colour here so non-link text (service name, slot content) can
+      // use it too.
+      color: govuk-colour("white");
+
+      background-color: $govuk-brand-colour;
+
+      .govuk-width-container {
+        border-width: 1px 0;
+        border-style: solid;
+        border-color: $_govuk-rebrand-border-colour-on-blue-tint-95;
+      }
+
+      // Subtract 1px of space to account for the extra border-top
+      .govuk-service-navigation__container {
+        margin-top: -1px;
+      }
+
+      // Override the 'active' border colour
+      .govuk-service-navigation__item,
+      .govuk-service-navigation__service-name {
+        border-color: govuk-colour("white");
+      }
+
+      // Override link styles
+      .govuk-service-navigation__link {
+        @include govuk-link-style-inverse;
+      }
+
+      // Override mobile menu toggle colour when not focused
+      .govuk-service-navigation__toggle:not(:focus) {
+        color: currentcolor;
+      }
+    }
+  }
 }
 
 /*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/_index.scss.map

@@ -1 +1 @@
-{"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,aAAa;MACb,gBAAgB;MAChB,2BAA2B;;MAE3B;QACE,2BAA2B;QAC3B,gBAAgB;MAClB;;MAEA;QACE,sDAAsD;MACxD;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,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,sEAAsE;MACtE,CAAC;MACD,yGAAyG;MACzG,sDAAsD;MACtD;QACE,cAAc;MAChB;IACF;EACF;;EAEA,qEAAqE;EACrE,mEAAmE;EACnE,wEAAwE;EACxE,iCAAiC;EACjC;IACE,oBAAoB;EACtB;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      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        line-height: 1.5;\n      }\n\n      &:not(:last-child) {\n        @include govuk-responsive-margin(6, $direction: right);\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  //\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 10 & 11, reverting it to the flawed, but OK, non-flexbox version.\n      //\n      // CSS hack taken from https://stackoverflow.com/questions/11173106/apply-style-only-on-ie#answer-36448860\n      // which also includes an explanation of why this works\n      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\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"]}
+{"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"]}