@nationalarchives/frontend 0.44.0 → 0.44.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/nationalarchives/all+analytics.js +1 -2
- package/nationalarchives/all+analytics.js.map +1 -1
- package/nationalarchives/all.css +1 -1
- package/nationalarchives/all.css.map +1 -1
- package/nationalarchives/all.js +1 -2
- package/nationalarchives/all.js.map +1 -1
- package/nationalarchives/analytics.js +1 -1
- package/nationalarchives/analytics.js.map +1 -1
- package/nationalarchives/components/accordion/accordion.js +1 -1
- package/nationalarchives/components/accordion/accordion.js.map +1 -1
- package/nationalarchives/components/breadcrumbs/breadcrumbs.js +1 -1
- package/nationalarchives/components/breadcrumbs/breadcrumbs.js.map +1 -1
- package/nationalarchives/components/code-block/code-block.js +1 -2
- package/nationalarchives/components/code-block/code-block.js.map +1 -1
- package/nationalarchives/components/cookie-banner/cookie-banner.js +1 -1
- package/nationalarchives/components/cookie-banner/cookie-banner.js.map +1 -1
- package/nationalarchives/components/date-input/date-input.js +1 -1
- package/nationalarchives/components/date-input/date-input.js.map +1 -1
- package/nationalarchives/components/error-summary/error-summary.js +1 -1
- package/nationalarchives/components/error-summary/error-summary.js.map +1 -1
- package/nationalarchives/components/file-input/file-input.js +1 -1
- package/nationalarchives/components/file-input/file-input.js.map +1 -1
- package/nationalarchives/components/footer/footer.js +1 -1
- package/nationalarchives/components/footer/footer.js.map +1 -1
- package/nationalarchives/components/gallery/gallery.js +1 -1
- package/nationalarchives/components/gallery/gallery.js.map +1 -1
- package/nationalarchives/components/global-header/global-header.js +1 -1
- package/nationalarchives/components/global-header/global-header.js.map +1 -1
- package/nationalarchives/components/header/header.js +1 -1
- package/nationalarchives/components/header/header.js.map +1 -1
- package/nationalarchives/components/hero/hero.css +1 -1
- package/nationalarchives/components/hero/hero.css.map +1 -1
- package/nationalarchives/components/hero/hero.scss +3 -3
- package/nationalarchives/components/picture/picture.js +1 -1
- package/nationalarchives/components/picture/picture.js.map +1 -1
- package/nationalarchives/components/sidebar/sidebar.js +1 -1
- package/nationalarchives/components/sidebar/sidebar.js.map +1 -1
- package/nationalarchives/components/skip-link/skip-link.js +1 -1
- package/nationalarchives/components/skip-link/skip-link.js.map +1 -1
- package/nationalarchives/components/tabs/tabs.js +1 -1
- package/nationalarchives/components/tabs/tabs.js.map +1 -1
- package/nationalarchives/components/text-input/text-input.js +1 -1
- package/nationalarchives/components/text-input/text-input.js.map +1 -1
- package/nationalarchives/components/textarea/textarea.js +1 -1
- package/nationalarchives/components/textarea/textarea.js.map +1 -1
- package/nationalarchives/prototype-kit.css +1 -1
- package/nationalarchives/prototype-kit.css.map +1 -1
- package/package.json +3 -3
- package/nationalarchives/all+analytics.js.LICENSE.txt +0 -1
- package/nationalarchives/all.js.LICENSE.txt +0 -1
- package/nationalarchives/components/code-block/code-block.js.LICENSE.txt +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,()=>(()=>{"use strict";var t={d:(e,i)=>{for(var
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,()=>(()=>{"use strict";var t={d:(e,i)=>{for(var s in i)t.o(i,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:i[s]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{Gallery:()=>i});class i{constructor(t){this.$module=t,this.$itemsContainer=t&&t.querySelector(".tna-gallery__items"),this.$items=this.$itemsContainer&&this.$itemsContainer.querySelectorAll(".tna-gallery__item"),this.$navigation=t&&t.querySelector(".tna-gallery__navigation"),this.$navigationItems=this.$navigation&&t.querySelectorAll(".tna-gallery__navigation-item"),this.$navigationButtons=t&&t.querySelector(".tna-gallery__navigation-buttons"),this.$module&&this.$itemsContainer&&this.$items&&!(this.$items.length<2)&&this.$navigation&&this.$navigationItems&&this.$navigationButtons&&(this.$module.classList.add("tna-gallery--interactive"),this.$navigationButtonPrev=this.$navigationButtons.querySelector(".tna-gallery__navigation-prev"),this.$navigationButtonNext=this.$navigationButtons.querySelector(".tna-gallery__navigation-next"),this.setup(),this.currentId=this.$items[0].id,this.showItem(this.currentId))}setup(){this.$items.forEach(t=>{t.setAttribute("hidden",""),t.setAttribute("aria-hidden","true"),t.querySelector(".tna-gallery__item-header")?.setAttribute("aria-hidden","true")}),this.$navigation.removeAttribute("hidden"),this.$navigationItems.forEach(t=>{t.addEventListener("click",()=>{this.showItem(t.getAttribute("aria-controls")),this.$itemsContainer.setAttribute("tabindex","0"),this.$itemsContainer.focus()})}),this.$module.addEventListener("keydown",t=>{let e=!1;switch(t.key){case"ArrowLeft":case"ArrowUp":this.showPreviousItem(),e=!0;break;case"ArrowRight":case"ArrowDown":this.showNextItem(),e=!0;break;case"Home":this.showFirstItem(),e=!0;break;case"End":this.showLastItem(),e=!0}e&&(t.stopPropagation(),t.preventDefault())}),this.$navigationButtons?.removeAttribute("hidden"),this.$navigationButtonPrev?.addEventListener("click",()=>{this.showPreviousItem()}),this.$navigationButtonNext?.addEventListener("click",()=>{this.showNextItem()}),this.$liveRegion=document.createElement("div"),this.$liveRegion.setAttribute("aria-live","polite"),this.$liveRegion.setAttribute("aria-atomic","true"),this.$liveRegion.setAttribute("class","tna-gallery__item-header"),this.$itemsContainer.prepend(this.$liveRegion),this.$itemsContainer.classList.add("tna-gallery__items--hide-item-titles"),this.$itemsContainer.addEventListener("blur",()=>this.$itemsContainer.removeAttribute("tabindex"))}showItem(t){this.$items.forEach(e=>{t&&e.id===t?(e.removeAttribute("hidden"),e.removeAttribute("aria-hidden")):(e.setAttribute("hidden",""),e.setAttribute("aria-hidden","true"))}),this.$navigationItems.forEach(e=>{t&&e.getAttribute("aria-controls")===t?e.setAttribute("aria-current","true"):e.setAttribute("aria-current","false")}),this.currentId=t,this.$liveRegion.textContent=`Image ${this.getCurrentItemIndex()+1} of ${this.$items.length}`}getCurrentItemIndex(){return Array.from(this.$items).findIndex(t=>t.id===this.currentId)}showPreviousItem(){let t=this.getCurrentItemIndex()-1;t<0&&(t=this.$items.length-1),this.showItem(this.$items[t].id)}showNextItem(){let t=this.getCurrentItemIndex()+1;t>=this.$items.length&&(t=0),this.showItem(this.$items[t].id)}showFirstItem(){this.showItem(this.$items[0].id)}showLastItem(){this.showItem(this.$items[this.$items.length-1].id)}}return e})());
|
|
2
2
|
//# sourceMappingURL=gallery.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components/gallery/gallery.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/gallery/gallery.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Gallery {\n constructor($module) {\n this.$module = $module;\n this.$itemsContainer =\n $module && $module.querySelector(\".tna-gallery__items\");\n this.$items =\n this.$itemsContainer &&\n this.$itemsContainer.querySelectorAll(\".tna-gallery__item\");\n this.$navigation =\n $module && $module.querySelector(\".tna-gallery__navigation\");\n this.$navigationItems =\n this.$navigation &&\n $module.querySelectorAll(\".tna-gallery__navigation-item\");\n this.$navigationButtons =\n $module && $module.querySelector(\".tna-gallery__navigation-buttons\");\n\n if (\n !this.$module ||\n !this.$itemsContainer ||\n !this.$items ||\n /* eslint-disable-next-line no-magic-numbers */\n this.$items.length < 2 ||\n !this.$navigation ||\n !this.$navigationItems ||\n !this.$navigationButtons\n ) {\n return;\n }\n\n this.$module.classList.add(\"tna-gallery--interactive\");\n\n this.$navigationButtonPrev = this.$navigationButtons.querySelector(\n \".tna-gallery__navigation-prev\",\n );\n this.$navigationButtonNext = this.$navigationButtons.querySelector(\n \".tna-gallery__navigation-next\",\n );\n\n this.setup();\n /* eslint-disable-next-line no-magic-numbers */\n this.currentId = this.$items[0].id;\n this.showItem(this.currentId);\n }\n\n setup() {\n this.$items.forEach(($item) => {\n $item.setAttribute(\"hidden\", \"\");\n $item.setAttribute(\"aria-hidden\", \"true\");\n $item\n .querySelector(\".tna-gallery__item-header\")\n ?.setAttribute(\"aria-hidden\", \"true\");\n });\n this.$navigation.removeAttribute(\"hidden\");\n this.$navigationItems.forEach(($item) => {\n $item.addEventListener(\"click\", () => {\n this.showItem($item.getAttribute(\"aria-controls\"));\n this.$itemsContainer.setAttribute(\"tabindex\", \"0\");\n this.$itemsContainer.focus();\n });\n });\n this.$module.addEventListener(\"keydown\", (event) => {\n let preventDefaultKeyAction = false;\n switch (event.key) {\n case \"ArrowLeft\":\n case \"ArrowUp\":\n this.showPreviousItem();\n preventDefaultKeyAction = true;\n break;\n case \"ArrowRight\":\n case \"ArrowDown\":\n this.showNextItem();\n preventDefaultKeyAction = true;\n break;\n case \"Home\":\n this.showFirstItem();\n preventDefaultKeyAction = true;\n break;\n case \"End\":\n this.showLastItem();\n preventDefaultKeyAction = true;\n break;\n default:\n break;\n }\n if (preventDefaultKeyAction) {\n event.stopPropagation();\n event.preventDefault();\n }\n });\n\n this.$navigationButtons?.removeAttribute(\"hidden\");\n this.$navigationButtonPrev?.addEventListener(\"click\", () => {\n this.showPreviousItem();\n });\n this.$navigationButtonNext?.addEventListener(\"click\", () => {\n this.showNextItem();\n });\n\n this.$liveRegion = document.createElement(\"div\");\n this.$liveRegion.setAttribute(\"aria-live\", \"polite\");\n this.$liveRegion.setAttribute(\"aria-atomic\", \"true\");\n this.$liveRegion.setAttribute(\"class\", \"tna-gallery__item-header\");\n this.$itemsContainer.prepend(this.$liveRegion);\n this.$itemsContainer.classList.add(\"tna-gallery__items--hide-item-titles\");\n this.$itemsContainer.addEventListener(\"blur\", () =>\n this.$itemsContainer.removeAttribute(\"tabindex\"),\n );\n }\n\n showItem(id) {\n this.$items.forEach(($item) => {\n if (id && $item.id === id) {\n $item.removeAttribute(\"hidden\");\n $item.removeAttribute(\"aria-hidden\");\n } else {\n $item.setAttribute(\"hidden\", \"\");\n $item.setAttribute(\"aria-hidden\", \"true\");\n }\n });\n this.$navigationItems.forEach(($item) => {\n if (id) {\n if ($item.getAttribute(\"aria-controls\") === id) {\n $item.setAttribute(\"aria-current\", \"true\");\n } else {\n $item.setAttribute(\"aria-current\", \"false\");\n }\n } else {\n $item.setAttribute(\"aria-current\", \"false\");\n }\n });\n this.currentId = id;\n /* eslint-disable-next-line no-magic-numbers */\n this.$liveRegion.textContent = `Image ${this.getCurrentItemIndex() + 1} of ${this.$items.length}`;\n }\n\n getCurrentItemIndex() {\n return Array.from(this.$items).findIndex(\n ($item) => $item.id === this.currentId,\n );\n }\n\n showPreviousItem() {\n /* eslint-disable-next-line no-magic-numbers */\n let nextIndexToShow = this.getCurrentItemIndex() - 1;\n /* eslint-disable-next-line no-magic-numbers */\n if (nextIndexToShow < 0) {\n /* eslint-disable-next-line no-magic-numbers */\n nextIndexToShow = this.$items.length - 1;\n }\n this.showItem(this.$items[nextIndexToShow].id);\n }\n\n showNextItem() {\n /* eslint-disable-next-line no-magic-numbers */\n let nextIndexToShow = this.getCurrentItemIndex() + 1;\n if (nextIndexToShow >= this.$items.length) {\n /* eslint-disable-next-line no-magic-numbers */\n nextIndexToShow = 0;\n }\n this.showItem(this.$items[nextIndexToShow].id);\n }\n\n showFirstItem() {\n /* eslint-disable-next-line no-magic-numbers */\n this.showItem(this.$items[0].id);\n }\n\n showLastItem() {\n /* eslint-disable-next-line no-magic-numbers */\n this.showItem(this.$items[this.$items.length - 1].id);\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Gallery","$module","_classCallCheck","this","$itemsContainer","querySelector","$items","querySelectorAll","$navigation","$navigationItems","$navigationButtons","length","classList","add","$navigationButtonPrev","$navigationButtonNext","setup","currentId","id","showItem","_this$$navigationButt","_this$$navigationButt2","_this$$navigationButt3","_this","forEach","$item","_$item$querySelector","setAttribute","removeAttribute","addEventListener","getAttribute","focus","event","preventDefaultKeyAction","showPreviousItem","showNextItem","showFirstItem","showLastItem","stopPropagation","preventDefault","$liveRegion","document","createElement","prepend","textContent","concat","getCurrentItemIndex","_this2","Array","from","findIndex","nextIndexToShow"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"components/gallery/gallery.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/gallery/gallery.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Gallery {\n constructor($module) {\n this.$module = $module;\n this.$itemsContainer =\n $module && $module.querySelector(\".tna-gallery__items\");\n this.$items =\n this.$itemsContainer &&\n this.$itemsContainer.querySelectorAll(\".tna-gallery__item\");\n this.$navigation =\n $module && $module.querySelector(\".tna-gallery__navigation\");\n this.$navigationItems =\n this.$navigation &&\n $module.querySelectorAll(\".tna-gallery__navigation-item\");\n this.$navigationButtons =\n $module && $module.querySelector(\".tna-gallery__navigation-buttons\");\n\n if (\n !this.$module ||\n !this.$itemsContainer ||\n !this.$items ||\n /* eslint-disable-next-line no-magic-numbers */\n this.$items.length < 2 ||\n !this.$navigation ||\n !this.$navigationItems ||\n !this.$navigationButtons\n ) {\n return;\n }\n\n this.$module.classList.add(\"tna-gallery--interactive\");\n\n this.$navigationButtonPrev = this.$navigationButtons.querySelector(\n \".tna-gallery__navigation-prev\",\n );\n this.$navigationButtonNext = this.$navigationButtons.querySelector(\n \".tna-gallery__navigation-next\",\n );\n\n this.setup();\n /* eslint-disable-next-line no-magic-numbers */\n this.currentId = this.$items[0].id;\n this.showItem(this.currentId);\n }\n\n setup() {\n this.$items.forEach(($item) => {\n $item.setAttribute(\"hidden\", \"\");\n $item.setAttribute(\"aria-hidden\", \"true\");\n $item\n .querySelector(\".tna-gallery__item-header\")\n ?.setAttribute(\"aria-hidden\", \"true\");\n });\n this.$navigation.removeAttribute(\"hidden\");\n this.$navigationItems.forEach(($item) => {\n $item.addEventListener(\"click\", () => {\n this.showItem($item.getAttribute(\"aria-controls\"));\n this.$itemsContainer.setAttribute(\"tabindex\", \"0\");\n this.$itemsContainer.focus();\n });\n });\n this.$module.addEventListener(\"keydown\", (event) => {\n let preventDefaultKeyAction = false;\n switch (event.key) {\n case \"ArrowLeft\":\n case \"ArrowUp\":\n this.showPreviousItem();\n preventDefaultKeyAction = true;\n break;\n case \"ArrowRight\":\n case \"ArrowDown\":\n this.showNextItem();\n preventDefaultKeyAction = true;\n break;\n case \"Home\":\n this.showFirstItem();\n preventDefaultKeyAction = true;\n break;\n case \"End\":\n this.showLastItem();\n preventDefaultKeyAction = true;\n break;\n default:\n break;\n }\n if (preventDefaultKeyAction) {\n event.stopPropagation();\n event.preventDefault();\n }\n });\n\n this.$navigationButtons?.removeAttribute(\"hidden\");\n this.$navigationButtonPrev?.addEventListener(\"click\", () => {\n this.showPreviousItem();\n });\n this.$navigationButtonNext?.addEventListener(\"click\", () => {\n this.showNextItem();\n });\n\n this.$liveRegion = document.createElement(\"div\");\n this.$liveRegion.setAttribute(\"aria-live\", \"polite\");\n this.$liveRegion.setAttribute(\"aria-atomic\", \"true\");\n this.$liveRegion.setAttribute(\"class\", \"tna-gallery__item-header\");\n this.$itemsContainer.prepend(this.$liveRegion);\n this.$itemsContainer.classList.add(\"tna-gallery__items--hide-item-titles\");\n this.$itemsContainer.addEventListener(\"blur\", () =>\n this.$itemsContainer.removeAttribute(\"tabindex\"),\n );\n }\n\n showItem(id) {\n this.$items.forEach(($item) => {\n if (id && $item.id === id) {\n $item.removeAttribute(\"hidden\");\n $item.removeAttribute(\"aria-hidden\");\n } else {\n $item.setAttribute(\"hidden\", \"\");\n $item.setAttribute(\"aria-hidden\", \"true\");\n }\n });\n this.$navigationItems.forEach(($item) => {\n if (id) {\n if ($item.getAttribute(\"aria-controls\") === id) {\n $item.setAttribute(\"aria-current\", \"true\");\n } else {\n $item.setAttribute(\"aria-current\", \"false\");\n }\n } else {\n $item.setAttribute(\"aria-current\", \"false\");\n }\n });\n this.currentId = id;\n /* eslint-disable-next-line no-magic-numbers */\n this.$liveRegion.textContent = `Image ${this.getCurrentItemIndex() + 1} of ${this.$items.length}`;\n }\n\n getCurrentItemIndex() {\n return Array.from(this.$items).findIndex(\n ($item) => $item.id === this.currentId,\n );\n }\n\n showPreviousItem() {\n /* eslint-disable-next-line no-magic-numbers */\n let nextIndexToShow = this.getCurrentItemIndex() - 1;\n /* eslint-disable-next-line no-magic-numbers */\n if (nextIndexToShow < 0) {\n /* eslint-disable-next-line no-magic-numbers */\n nextIndexToShow = this.$items.length - 1;\n }\n this.showItem(this.$items[nextIndexToShow].id);\n }\n\n showNextItem() {\n /* eslint-disable-next-line no-magic-numbers */\n let nextIndexToShow = this.getCurrentItemIndex() + 1;\n if (nextIndexToShow >= this.$items.length) {\n /* eslint-disable-next-line no-magic-numbers */\n nextIndexToShow = 0;\n }\n this.showItem(this.$items[nextIndexToShow].id);\n }\n\n showFirstItem() {\n /* eslint-disable-next-line no-magic-numbers */\n this.showItem(this.$items[0].id);\n }\n\n showLastItem() {\n /* eslint-disable-next-line no-magic-numbers */\n this.showItem(this.$items[this.$items.length - 1].id);\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Gallery","constructor","$module","this","$itemsContainer","querySelector","$items","querySelectorAll","$navigation","$navigationItems","$navigationButtons","length","classList","add","$navigationButtonPrev","$navigationButtonNext","setup","currentId","id","showItem","forEach","$item","setAttribute","removeAttribute","addEventListener","getAttribute","focus","event","preventDefaultKeyAction","showPreviousItem","showNextItem","showFirstItem","showLastItem","stopPropagation","preventDefault","$liveRegion","document","createElement","prepend","textContent","getCurrentItemIndex","Array","from","findIndex","nextIndexToShow"],"sourceRoot":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,()=>(()=>{"use strict";var t={d:(e,i)=>{for(var n in i)t.o(i,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:i[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,()=>(()=>{"use strict";var t={d:(e,i)=>{for(var n in i)t.o(i,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:i[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{GlobalHeader:()=>i});class i{constructor(t){this.$module=t,this.$toggleButton=t&&t.querySelector(".tna-global-header__navigation-button"),this.$navigation=t&&t.querySelector(".tna-global-header__navigation-wrapper"),this.$topNavigation=t&&t.querySelector(".tna-global-header__top-navigation-wrapper"),this.$links=t&&(this.$navigation&&this.$navigation.querySelectorAll("[tabindex='0']")||this.$topNavigation&&this.$topNavigation.querySelectorAll("[tabindex='0']")),this.menuOpened=!1,this.mql=window.matchMedia("(max-width: 48em)"),this.$module&&this.$toggleButton&&(this.$navigation||this.$topNavigation)&&(this.$toggleButton.removeAttribute("hidden"),this.syncState(),this.$toggleButton.addEventListener("click",()=>this.handleToggleNavigation()),"addEventListener"in this.mql?this.mql.addEventListener("change",()=>this.syncState()):this.mql.addListener(()=>this.syncState()),this.$module.addEventListener("keyup",t=>{"Escape"===t.code&&this.mql.matches&&this.menuOpened&&(this.menuOpened=!1,this.syncState(),this.$toggleButton.focus())}))}handleToggleNavigation(){this.menuOpened=!this.menuOpened,this.syncState()}syncState(){this.mql.matches?this.menuOpened?this.show():this.hide():this.show()}hide(){this.$navigation&&(this.$navigation.hidden=!0,this.$navigation.setAttribute("aria-hidden","true")),this.$topNavigation&&(this.$topNavigation.hidden=!0,this.$topNavigation.setAttribute("aria-hidden","true")),this.$toggleButton.setAttribute("aria-expanded","false"),this.$toggleButton.setAttribute("title","Open menu"),this.$toggleButton.classList.remove("tna-global-header__navigation-button--opened");for(let t=0;t<this.$links.length;t+=1)this.$links[t].setAttribute("tabindex","-1")}show(){this.$navigation&&(this.$navigation.hidden=!1,this.$navigation.setAttribute("aria-hidden","false")),this.$topNavigation&&(this.$topNavigation.hidden=!1,this.$topNavigation.setAttribute("aria-hidden","false")),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu"),this.$toggleButton.classList.add("tna-global-header__navigation-button--opened");for(let t=0;t<this.$links.length;t+=1)this.$links[t].setAttribute("tabindex","0")}}return e})());
|
|
2
2
|
//# sourceMappingURL=global-header.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components/global-header/global-header.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,uBCRD,IAAAC,EAAA,CCAAA,EAAA,CAAAL,EAAAM,KACA,QAAAC,KAAAD,EACAD,EAAAG,EAAAF,EAAAC,KAAAF,EAAAG,EAAAR,EAAAO,IACAE,OAAAC,eAAAV,EAAAO,EAAA,CAAyCI,YAAA,EAAAC,IAAAN,EAAAC,MCJzCF,EAAA,CAAAQ,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAT,EAAAL,IACA,oBAAAkB,QAAAA,OAAAC,aACAV,OAAAC,eAAAV,EAAAkB,OAAAC,YAAA,CAAuDC,MAAA,WAEvDX,OAAAC,eAAAV,EAAA,cAAgDoB,OAAA,
|
|
1
|
+
{"version":3,"file":"components/global-header/global-header.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/global-header/global-header.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class GlobalHeader {\n constructor($module) {\n this.$module = $module;\n this.$toggleButton =\n $module && $module.querySelector(\".tna-global-header__navigation-button\");\n this.$navigation =\n $module &&\n $module.querySelector(\".tna-global-header__navigation-wrapper\");\n this.$topNavigation =\n $module &&\n $module.querySelector(\".tna-global-header__top-navigation-wrapper\");\n this.$links =\n $module &&\n ((this.$navigation &&\n this.$navigation.querySelectorAll(\"[tabindex='0']\")) ||\n (this.$topNavigation &&\n this.$topNavigation.querySelectorAll(\"[tabindex='0']\")));\n this.menuOpened = false;\n this.mql = window.matchMedia(\"(max-width: 48em)\");\n\n if (\n !this.$module ||\n !this.$toggleButton ||\n (!this.$navigation && !this.$topNavigation)\n ) {\n return;\n }\n\n this.$toggleButton.removeAttribute(\"hidden\");\n this.syncState();\n this.$toggleButton.addEventListener(\"click\", () =>\n this.handleToggleNavigation(),\n );\n if (\"addEventListener\" in this.mql) {\n this.mql.addEventListener(\"change\", () => this.syncState());\n } else {\n this.mql.addListener(() => this.syncState());\n }\n\n this.$module.addEventListener(\"keyup\", (event) => {\n if (event.code === \"Escape\" && this.mql.matches && this.menuOpened) {\n this.menuOpened = false;\n this.syncState();\n this.$toggleButton.focus();\n }\n });\n }\n\n handleToggleNavigation() {\n this.menuOpened = !this.menuOpened;\n this.syncState();\n }\n\n syncState() {\n if (this.mql.matches) {\n if (this.menuOpened) {\n this.show();\n } else {\n this.hide();\n }\n } else {\n this.show();\n }\n }\n\n hide() {\n if (this.$navigation) {\n this.$navigation.hidden = true;\n this.$navigation.setAttribute(\"aria-hidden\", \"true\");\n }\n if (this.$topNavigation) {\n this.$topNavigation.hidden = true;\n this.$topNavigation.setAttribute(\"aria-hidden\", \"true\");\n }\n this.$toggleButton.setAttribute(\"aria-expanded\", \"false\");\n this.$toggleButton.setAttribute(\"title\", \"Open menu\");\n this.$toggleButton.classList.remove(\n \"tna-global-header__navigation-button--opened\",\n );\n /* eslint-disable-next-line no-magic-numbers */\n for (let index = 0; index < this.$links.length; index += 1) {\n this.$links[index].setAttribute(\"tabindex\", \"-1\");\n }\n }\n\n show() {\n if (this.$navigation) {\n this.$navigation.hidden = false;\n this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n }\n if (this.$topNavigation) {\n this.$topNavigation.hidden = false;\n this.$topNavigation.setAttribute(\"aria-hidden\", \"false\");\n }\n this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n this.$toggleButton.classList.add(\n \"tna-global-header__navigation-button--opened\",\n );\n /* eslint-disable-next-line no-magic-numbers */\n for (let index = 0; index < this.$links.length; index += 1) {\n this.$links[index].setAttribute(\"tabindex\", \"0\");\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","GlobalHeader","constructor","$module","this","$toggleButton","querySelector","$navigation","$topNavigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","removeAttribute","syncState","addEventListener","handleToggleNavigation","addListener","event","code","matches","focus","show","hide","hidden","setAttribute","classList","remove","index","length","add"],"sourceRoot":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,()=>(()=>{"use strict";var t={d:(e,
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,()=>(()=>{"use strict";var t={d:(e,i)=>{for(var n in i)t.o(i,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:i[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{Header:()=>i});class i{constructor(t){this.$module=t,this.$toggleButton=t&&t.querySelector(".tna-header__navigation-button"),this.$navigation=t&&t.querySelector(".tna-header__navigation"),this.$links=t&&this.$navigation&&this.$navigation.querySelectorAll("[tabindex='0']"),this.menuOpened=!1,this.mql=window.matchMedia("(max-width: 48em)"),this.$module&&this.$toggleButton&&this.$navigation&&(this.$toggleButton.removeAttribute("hidden"),this.syncState(),this.$toggleButton.addEventListener("click",()=>this.handleToggleNavigation()),"addEventListener"in this.mql?this.mql.addEventListener("change",()=>this.syncState()):this.mql.addListener(()=>this.syncState()),this.$module.addEventListener("keyup",t=>{"Escape"===t.code&&this.menuOpened&&this.mql.matches&&(this.menuOpened=!1,this.syncState(),this.$toggleButton.focus())}))}handleToggleNavigation(){this.menuOpened=!this.menuOpened,this.syncState()}syncState(){this.mql.matches?this.menuOpened?this.show():this.hide():this.show()}show(){this.$navigation.classList.add("tna-header__navigation--open"),this.$navigation.removeAttribute("hidden"),this.$navigation.setAttribute("aria-hidden","false"),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu"),this.$toggleButton.classList.add("tna-header__navigation-button--opened");for(let t=0;t<this.$links.length;t+=1)this.$links[t].setAttribute("tabindex","0")}hide(){this.$navigation.classList.remove("tna-header__navigation--open"),this.$navigation.hidden=!0,this.$navigation.setAttribute("aria-hidden","true"),this.$toggleButton.setAttribute("aria-expanded","false"),this.$toggleButton.setAttribute("title","Open menu"),this.$toggleButton.classList.remove("tna-header__navigation-button--opened");for(let t=0;t<this.$links.length;t+=1)this.$links[t].setAttribute("tabindex","-1")}}return e})());
|
|
2
2
|
//# sourceMappingURL=header.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components/header/header.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,uBCRD,IAAAC,EAAA,CCAAA,EAAA,CAAAL,EAAAM,KACA,QAAAC,KAAAD,EACAD,EAAAG,EAAAF,EAAAC,KAAAF,EAAAG,EAAAR,EAAAO,IACAE,OAAAC,eAAAV,EAAAO,EAAA,CAAyCI,YAAA,EAAAC,IAAAN,EAAAC,MCJzCF,EAAA,CAAAQ,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAT,EAAAL,IACA,oBAAAkB,QAAAA,OAAAC,aACAV,OAAAC,eAAAV,EAAAkB,OAAAC,YAAA,CAAuDC,MAAA,WAEvDX,OAAAC,eAAAV,EAAA,cAAgDoB,OAAA,
|
|
1
|
+
{"version":3,"file":"components/header/header.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,uBCRD,IAAAC,EAAA,CCAAA,EAAA,CAAAL,EAAAM,KACA,QAAAC,KAAAD,EACAD,EAAAG,EAAAF,EAAAC,KAAAF,EAAAG,EAAAR,EAAAO,IACAE,OAAAC,eAAAV,EAAAO,EAAA,CAAyCI,YAAA,EAAAC,IAAAN,EAAAC,MCJzCF,EAAA,CAAAQ,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAT,EAAAL,IACA,oBAAAkB,QAAAA,OAAAC,aACAV,OAAAC,eAAAV,EAAAkB,OAAAC,YAAA,CAAuDC,MAAA,WAEvDX,OAAAC,eAAAV,EAAA,cAAgDoB,OAAA,wCCLzC,MAAMC,EACX,WAAAC,CAAYC,GACVC,KAAKD,QAAUA,EACfC,KAAKC,cACHF,GAAWA,EAAQG,cAAc,kCACnCF,KAAKG,YACHJ,GAAWA,EAAQG,cAAc,2BACnCF,KAAKI,OACHL,GACAC,KAAKG,aACLH,KAAKG,YAAYE,iBAAiB,kBACpCL,KAAKM,YAAa,EAClBN,KAAKO,IAAMC,OAAOC,WAAW,qBAExBT,KAAKD,SAAYC,KAAKC,eAAkBD,KAAKG,cAIlDH,KAAKC,cAAcS,gBAAgB,UACnCV,KAAKW,YACLX,KAAKC,cAAcW,iBAAiB,QAAS,IAC3CZ,KAAKa,0BAEH,qBAAsBb,KAAKO,IAC7BP,KAAKO,IAAIK,iBAAiB,SAAU,IAAMZ,KAAKW,aAE/CX,KAAKO,IAAIO,YAAY,IAAMd,KAAKW,aAGlCX,KAAKD,QAAQa,iBAAiB,QAAUG,IACnB,WAAfA,EAAMC,MAAqBhB,KAAKM,YAAcN,KAAKO,IAAIU,UACzDjB,KAAKM,YAAa,EAClBN,KAAKW,YACLX,KAAKC,cAAciB,WAGzB,CAEA,sBAAAL,GACEb,KAAKM,YAAcN,KAAKM,WACxBN,KAAKW,WACP,CAEA,SAAAA,GACMX,KAAKO,IAAIU,QACPjB,KAAKM,WACPN,KAAKmB,OAELnB,KAAKoB,OAGPpB,KAAKmB,MAET,CAEA,IAAAA,GACEnB,KAAKG,YAAYkB,UAAUC,IAAI,gCAC/BtB,KAAKG,YAAYO,gBAAgB,UACjCV,KAAKG,YAAYoB,aAAa,cAAe,SAC7CvB,KAAKC,cAAcsB,aAAa,gBAAiB,QACjDvB,KAAKC,cAAcsB,aAAa,QAAS,cACzCvB,KAAKC,cAAcoB,UAAUC,IAAI,yCAGjC,IAAK,IAAIE,EAAQ,EAAGA,EAAQxB,KAAKI,OAAOqB,OAAQD,GAAS,EACvDxB,KAAKI,OAAOoB,GAAOD,aAAa,WAAY,IAEhD,CAEA,IAAAH,GACEpB,KAAKG,YAAYkB,UAAUK,OAAO,gCAClC1B,KAAKG,YAAYwB,QAAS,EAC1B3B,KAAKG,YAAYoB,aAAa,cAAe,QAC7CvB,KAAKC,cAAcsB,aAAa,gBAAiB,SACjDvB,KAAKC,cAAcsB,aAAa,QAAS,aACzCvB,KAAKC,cAAcoB,UAAUK,OAC3B,yCAIF,IAAK,IAAIF,EAAQ,EAAGA,EAAQxB,KAAKI,OAAOqB,OAAQD,GAAS,EACvDxB,KAAKI,OAAOoB,GAAOD,aAAa,WAAY,KAEhD","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/header/header.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Header {\n constructor($module) {\n this.$module = $module;\n this.$toggleButton =\n $module && $module.querySelector(\".tna-header__navigation-button\");\n this.$navigation =\n $module && $module.querySelector(\".tna-header__navigation\");\n this.$links =\n $module &&\n this.$navigation &&\n this.$navigation.querySelectorAll(\"[tabindex='0']\");\n this.menuOpened = false;\n this.mql = window.matchMedia(\"(max-width: 48em)\");\n\n if (!this.$module || !this.$toggleButton || !this.$navigation) {\n return;\n }\n\n this.$toggleButton.removeAttribute(\"hidden\");\n this.syncState();\n this.$toggleButton.addEventListener(\"click\", () =>\n this.handleToggleNavigation(),\n );\n if (\"addEventListener\" in this.mql) {\n this.mql.addEventListener(\"change\", () => this.syncState());\n } else {\n this.mql.addListener(() => this.syncState());\n }\n\n this.$module.addEventListener(\"keyup\", (event) => {\n if (event.code === \"Escape\" && this.menuOpened && this.mql.matches) {\n this.menuOpened = false;\n this.syncState();\n this.$toggleButton.focus();\n }\n });\n }\n\n handleToggleNavigation() {\n this.menuOpened = !this.menuOpened;\n this.syncState();\n }\n\n syncState() {\n if (this.mql.matches) {\n if (this.menuOpened) {\n this.show();\n } else {\n this.hide();\n }\n } else {\n this.show();\n }\n }\n\n show() {\n this.$navigation.classList.add(\"tna-header__navigation--open\");\n this.$navigation.removeAttribute(\"hidden\");\n this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n this.$toggleButton.classList.add(\"tna-header__navigation-button--opened\");\n\n /* eslint-disable-next-line no-magic-numbers */\n for (let index = 0; index < this.$links.length; index += 1) {\n this.$links[index].setAttribute(\"tabindex\", \"0\");\n }\n }\n\n hide() {\n this.$navigation.classList.remove(\"tna-header__navigation--open\");\n this.$navigation.hidden = true;\n this.$navigation.setAttribute(\"aria-hidden\", \"true\");\n this.$toggleButton.setAttribute(\"aria-expanded\", \"false\");\n this.$toggleButton.setAttribute(\"title\", \"Open menu\");\n this.$toggleButton.classList.remove(\n \"tna-header__navigation-button--opened\",\n );\n\n /* eslint-disable-next-line no-magic-numbers */\n for (let index = 0; index < this.$links.length; index += 1) {\n this.$links[index].setAttribute(\"tabindex\", \"-1\");\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Header","constructor","$module","this","$toggleButton","querySelector","$navigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","removeAttribute","syncState","addEventListener","handleToggleNavigation","addListener","event","code","matches","focus","show","hide","classList","add","setAttribute","index","length","remove","hidden"],"sourceRoot":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tna-hero__details[open] .tna-hero__details-summary,.tna-hero__information{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);--accent-border: var(--accent-border-bright);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-hero{position:relative}.tna-hero::before{content:"";position:absolute;inset:auto 0 0;z-index:-1;border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-hero__figure{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end}.tna-hero__caption{width:100%;overflow:visible;position:absolute;top:0;right:0;z-index:10;order:2}.tna-hero__details{width:100%;overflow:visible}.tna-hero__details-summary{position:absolute;top:0.5rem;right:0.5rem;z-index:2}.tna-hero__details-summary:hover{color:var(--font-dark, rgb(1, 1, 1)) !important;background-color:var(--background, #f4f4f4) !important}.tna-hero__details[open] .tna-hero__details-summary{width:2rem;height:2rem;padding:0;font-size:0;line-height:2rem;text-align:center;border:none}.tna-hero__details[open] .tna-hero__details-summary::before,.tna-hero__details[open] .tna-hero__details-summary::after{content:"";width:1.5rem;height:.125rem;display:block;position:absolute;top:50%;left:50%;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-hero__details[open] .tna-hero__details-summary::before{transform:translate(-50%, -50%) rotate(45deg)}.tna-hero__details[open] .tna-hero__details-summary::after{transform:translate(-50%, -50%) rotate(-45deg)}.tna-hero__details[open] .tna-hero__details-summary:hover::before,.tna-hero__details[open] .tna-hero__details-summary:hover::after{height:.25rem}.tna-hero__details[open] .tna-hero__details-summary-icon{font-size:0}.tna-hero__information{padding:0.625rem 3.25rem 0.625rem 1rem;position:absolute;top:0;right:0;left:0;z-index:1;font-size:1rem}.tna-hero__information p+p{margin-top:0.5rem}.tna-hero__image{width:100%;order:1}.tna-hero__image img{width:100%}.tna-hero__inner{order:3}.tna-hero__content{padding-top:2rem;padding-bottom:2rem}.tna-hero__content-inner{padding-right:0;padding-left:0;border-left:none;background-color:var(--background, #f4f4f4)}@media(min-width: 48.0625em){.tna-hero__figure{min-height:clamp(5rem,30vw,20rem)}.tna-hero--large .tna-hero__figure{min-height:clamp(12rem,33vw,50rem)}.tna-hero__inner{z-index:4}.tna-hero__image{width:auto;position:absolute;inset:0;z-index:1}.tna-hero__image img{height:100%;object-fit:cover}.tna-hero__content{padding-top:12rem;padding-bottom:
|
|
1
|
+
.tna-hero__details[open] .tna-hero__details-summary,.tna-hero__information{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);--accent-border: var(--accent-border-bright);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-hero{position:relative}.tna-hero::before{content:"";position:absolute;inset:auto 0 0;z-index:-1;border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-hero__figure{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end}.tna-hero__caption{width:100%;overflow:visible;position:absolute;top:0;right:0;z-index:10;order:2}.tna-hero__details{width:100%;overflow:visible}.tna-hero__details-summary{position:absolute;top:0.5rem;right:0.5rem;z-index:2}.tna-hero__details-summary:hover{color:var(--font-dark, rgb(1, 1, 1)) !important;background-color:var(--background, #f4f4f4) !important}.tna-hero__details[open] .tna-hero__details-summary{width:2rem;height:2rem;padding:0;font-size:0;line-height:2rem;text-align:center;border:none}.tna-hero__details[open] .tna-hero__details-summary::before,.tna-hero__details[open] .tna-hero__details-summary::after{content:"";width:1.5rem;height:.125rem;display:block;position:absolute;top:50%;left:50%;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-hero__details[open] .tna-hero__details-summary::before{transform:translate(-50%, -50%) rotate(45deg)}.tna-hero__details[open] .tna-hero__details-summary::after{transform:translate(-50%, -50%) rotate(-45deg)}.tna-hero__details[open] .tna-hero__details-summary:hover::before,.tna-hero__details[open] .tna-hero__details-summary:hover::after{height:.25rem}.tna-hero__details[open] .tna-hero__details-summary-icon{font-size:0}.tna-hero__information{padding:0.625rem 3.25rem 0.625rem 1rem;position:absolute;top:0;right:0;left:0;z-index:1;font-size:1rem}.tna-hero__information p+p{margin-top:0.5rem}.tna-hero__image{width:100%;order:1}.tna-hero__image img{width:100%}.tna-hero__inner{order:3}.tna-hero__content{padding-top:2rem;padding-bottom:2rem}.tna-hero__content-inner{padding-right:0;padding-left:0;border-left:none;background-color:var(--background, #f4f4f4)}@media(min-width: 48.0625em){.tna-hero__figure{min-height:clamp(5rem,30vw,20rem)}.tna-hero--large .tna-hero__figure{min-height:clamp(12rem,33vw,50rem)}.tna-hero__inner{z-index:4}.tna-hero__image{width:auto;position:absolute;inset:0;z-index:1}.tna-hero__image img{height:100%;object-fit:cover}.tna-hero__content{padding-top:12rem;padding-bottom:3rem}.tna-hero__content-inner{padding:2rem;border-radius:2px}.tna-hero__information{max-width:640px;left:auto}.tna-hero--split .tna-hero__content{width:50%;padding-top:3rem;padding-bottom:3rem}.tna-hero--split .tna-hero__content-inner{padding:0 1rem 0 0}.tna-hero--split .tna-hero__image{left:50%}.tna-hero--shift{margin-bottom:3rem}.tna-hero--shift .tna-hero__content-inner{position:relative;top:6rem}.tna-hero--over{margin-bottom:3rem}.tna-hero--over .tna-hero__details{max-width:1280px;margin:0 auto;position:relative}.tna-hero--over .tna-hero__details-summary{top:0.5rem;right:2.5rem}.tna-hero--over .tna-hero__information{max-width:calc(50% - 2rem);box-sizing:border-box;top:0;right:2rem;left:auto;border-radius:2px}.tna-hero--over .tna-hero__content{width:50%;padding-top:3rem}.tna-hero--over .tna-hero__content-inner{padding:0}.tna-hero--over .tna-hero__image{max-width:calc(640px - (2rem + 1rem));margin-right:32px;overflow:hidden;bottom:-3rem;left:calc(50% + 1rem);z-index:5;border-radius:2px}.tna-hero--split .tna-hero__figure,.tna-hero--over .tna-hero__figure{justify-content:center}.tna-hero--shift .tna-hero__content-inner,.tna-hero--over .tna-hero__image{box-shadow:0 .25rem 1rem -0.25rem rgba(0,0,0,.25),0 .125rem .5rem -0.25rem rgba(0,0,0,.75)}}/*# sourceMappingURL=hero.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/hero/hero.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss","../../../../src/nationalarchives/variables/_grid.scss"],"names":[],"mappings":"AA8OA,2EACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,6CA3KA,4CAJA,gCC3DF,UACE,kBAEA,kBACE,WAEA,kBACA,eACA,WDyEE,+DCrEJ,kBACE,aACA,sBACA,qBACA,yBAGF,mBACE,WAEA,iBAEA,kBACA,MACA,QACA,WAEA,QAGF,mBACE,WAEA,iBAGF,2BACE,kBACA,WACA,aACA,UAEA,iCDeF,gDAIA,uDCZA,oDACE,WACA,YACA,UAEA,YACA,iBACA,kBAEA,YAIA,uHAEE,WAEA,aACA,eAEA,cAEA,kBACA,QACA,SDZJ,gDCiBE,4DACE,8CAGF,2DACE,+CAIA,mIAEE,cAIJ,yDACE,YAOJ,uBACE,uCAGA,kBACA,MACA,QACA,OACA,UC3HF,eDiIE,2BACE,kBAIJ,iBACE,WAEA,QAEA,qBACE,WAIJ,iBACE,QAGF,mBACE,iBACA,oBAGF,yBACE,gBACA,eAEA,iBDlFF,4CGjBA,6BFyGE,kBACE,kCAGF,mCACE,mCAGF,iBACE,UAGF,iBACE,WAEA,kBACA,QACA,UAEA,qBACE,YAEA,iBAIJ,mBACE,kBACA,oBAGF,yBACE,aGtMJ,cCDsB,IJ2MpB,uBACE,gBAEA,UAGF,oCACE,UACA,iBACA,oBAGF,0CACE,mBAGF,kCACE,SAGF,iBACE,mBAGF,0CACE,kBACA,SAGF,gBACE,mBAGF,mCACE,UK/OoB,OLgPpB,cAEA,kBAGF,2CACE,WACA,aAGF,uCACE,2BAEA,sBAEA,MACA,WACA,UG9PJ,cCDsB,IJoQpB,mCACE,UACA,iBAGF,yCACE,UAGF,iCACE,6BAIA,kBAEA,gBAEA,aAEA,SACA,UGxRJ,cCDsB,IJ6RpB,qEAEE,uBAGF,2EAEE,WACE","file":"hero.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n \"background\",\n \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n \"keyline\",\n \"keyline-dark\"\n);\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour)\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if(sass($important): !important; else: null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n outline-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n @include colour-font(\"input-foreground\");\n @include colour-background(\"input-background\");\n @include colour-border(\"input-border\", forms.$form-field-border-width);\n}\n\n@mixin colour-input() {\n @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline-dark\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"accent-border\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"accent-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n $border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n } @else {\n border: $border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width transparent solid;\n } @else {\n border: $border-width transparent solid;\n }\n}\n\n%always-light {\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%base {\n @each $name, $value in $base-colours {\n --#{$name}: var(--base-#{$value});\n }\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin base {\n @extend %base;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"yellow\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"yellow\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"maroon\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"forest\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"navy\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n%image-loader-background {\n background: linear-gradient(\n -45deg,\n rgb(0 0 0 / 25%),\n rgb(255 255 255 / 25%),\n rgb(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n\n @media (prefers-reduced-motion) {\n animation: none !important;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n @extend %image-loader-background;\n }\n}\n","@use \"sass:math\";\n\n@use \"../../variables/borders\" as bordersVars;\n@use \"../../variables/grid\" as gridVars;\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n$vertical-padding-small: 2 !default;\n$vertical-padding-large: 2 !default;\n$plain-top-padding: 12 !default;\n$split-vertical-padding: 3 !default;\n$shift-overflow: $vertical-padding-large !default;\n$over-overflow: $shift-overflow !default;\n\n.tna-hero {\n position: relative;\n\n &::before {\n content: \"\";\n\n position: absolute;\n inset: auto 0 0;\n z-index: -1;\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n &__figure {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n justify-content: flex-end;\n }\n\n &__caption {\n width: 100%;\n\n overflow: visible;\n\n position: absolute;\n top: 0;\n right: 0;\n z-index: 10;\n\n order: 2;\n }\n\n &__details {\n width: 100%;\n\n overflow: visible;\n }\n\n &__details-summary {\n position: absolute;\n top: spacing.space(0.5);\n right: spacing.space(0.5);\n z-index: 2;\n\n &:hover {\n @include colour.colour-font(\"font-dark\", true);\n\n @include colour.colour-background(\"background\", true);\n }\n }\n\n &__details[open] &__details-summary {\n width: 2rem;\n height: 2rem;\n padding: 0;\n\n font-size: 0;\n line-height: 2rem;\n text-align: center;\n\n border: none;\n\n @include colour.contrast;\n\n &::before,\n &::after {\n content: \"\";\n\n width: 1.5rem;\n height: 0.125rem;\n\n display: block;\n\n position: absolute;\n top: 50%;\n left: 50%;\n\n @include colour.colour-background(\"font-dark\");\n }\n\n &::before {\n transform: translate(-50%, -50%) rotate(45deg);\n }\n\n &::after {\n transform: translate(-50%, -50%) rotate(-45deg);\n }\n\n &:hover {\n &::before,\n &::after {\n height: 0.25rem;\n }\n }\n\n &-icon {\n font-size: 0;\n }\n }\n\n &__details-summary-icon {\n }\n\n &__information {\n padding: spacing.space(0.625) spacing.space(3.25) spacing.space(0.625)\n spacing.space(1);\n\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n z-index: 1;\n\n @include colour.contrast;\n\n @include typography.font-size(16);\n\n p + p {\n margin-top: spacing.space(0.5);\n }\n }\n\n &__image {\n width: 100%;\n\n order: 1;\n\n img {\n width: 100%;\n }\n }\n\n &__inner {\n order: 3;\n }\n\n &__content {\n padding-top: spacing.space($vertical-padding-small);\n padding-bottom: spacing.space($vertical-padding-small);\n }\n\n &__content-inner {\n padding-right: 0;\n padding-left: 0;\n\n border-left: none;\n\n @include colour.colour-background(\"background\");\n }\n\n @include media.on-larger-than-mobile {\n &__figure {\n min-height: clamp(5rem, 30vw, 20rem);\n }\n\n &--large &__figure {\n min-height: clamp(12rem, 33vw, 50rem);\n }\n\n &__inner {\n z-index: 4;\n }\n\n &__image {\n width: auto;\n\n position: absolute;\n inset: 0;\n z-index: 1;\n\n img {\n height: 100%;\n\n object-fit: cover;\n }\n }\n\n &__content {\n padding-top: spacing.space($plain-top-padding);\n padding-bottom: spacing.space($vertical-padding-large);\n }\n\n &__content-inner {\n padding: spacing.space(2);\n @include borders.rounded-border;\n }\n\n &__information {\n max-width: math.div(gridVars.$largest-container-width, 2);\n\n left: auto;\n }\n\n &--split &__content {\n width: 50%;\n padding-top: spacing.space($vertical-padding-large);\n padding-bottom: spacing.space($vertical-padding-large);\n }\n\n &--split &__content-inner {\n padding: 0 grid.gutter-width-half() 0 0;\n }\n\n &--split &__image {\n left: 50%;\n }\n\n &--shift {\n margin-bottom: spacing.space($shift-overflow);\n }\n\n &--shift &__content-inner {\n position: relative;\n top: spacing.space($vertical-padding-large + $shift-overflow);\n }\n\n &--over {\n margin-bottom: spacing.space($over-overflow);\n }\n\n &--over &__details {\n max-width: gridVars.$largest-container-width;\n margin: 0 auto;\n\n position: relative;\n }\n\n &--over &__details-summary {\n top: spacing.space(0.5);\n right: spacing.space(gridVars.$gutter-width + 0.5);\n }\n\n &--over &__information {\n max-width: calc(50% - #{spacing.space(gridVars.$gutter-width)});\n\n box-sizing: border-box;\n\n top: 0;\n right: spacing.space(gridVars.$gutter-width);\n left: auto;\n\n @include borders.rounded-border;\n }\n\n &--over &__content {\n width: 50%;\n padding-top: spacing.space($vertical-padding-large);\n }\n\n &--over &__content-inner {\n padding: 0;\n }\n\n &--over &__image {\n max-width: calc(\n #{math.div(gridVars.$largest-container-width, 2)} -\n #{grid.gutter-width()}\n );\n margin-right: 32px;\n\n overflow: hidden;\n\n bottom: spacing.space($over-overflow * -1);\n\n left: 50%;\n z-index: 5;\n @include borders.rounded-border;\n }\n\n &--split &__figure,\n &--over &__figure {\n justify-content: center;\n }\n\n &--shift &__content-inner,\n &--over &__image {\n box-shadow:\n 0 0.25rem 1rem -0.25rem rgb(0 0 0 / 25%),\n 0 0.125rem 0.5rem -0.25rem rgb(0 0 0 / 75%);\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-variation-settings: \"wdth\" 100;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"../variables/borders\";\n\n@mixin rounded-border {\n border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 2px !default;\n","$largest-container-width: 1280px !default;\n\n$gutter-width: 2 !default;\n$gutter-width-tiny: 1 !default;\n\n$column-count: 12;\n$column-count-medium: 6;\n$column-count-small: 4;\n$column-count-tiny: 2;\n"]}
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/hero/hero.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss","../../../../src/nationalarchives/variables/_grid.scss"],"names":[],"mappings":"AA8OA,2EACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,6CA3KA,4CAJA,gCC3DF,UACE,kBAEA,kBACE,WAEA,kBACA,eACA,WDyEE,+DCrEJ,kBACE,aACA,sBACA,qBACA,yBAGF,mBACE,WAEA,iBAEA,kBACA,MACA,QACA,WAEA,QAGF,mBACE,WAEA,iBAGF,2BACE,kBACA,WACA,aACA,UAEA,iCDeF,gDAIA,uDCZA,oDACE,WACA,YACA,UAEA,YACA,iBACA,kBAEA,YAIA,uHAEE,WAEA,aACA,eAEA,cAEA,kBACA,QACA,SDZJ,gDCiBE,4DACE,8CAGF,2DACE,+CAIA,mIAEE,cAIJ,yDACE,YAOJ,uBACE,uCAGA,kBACA,MACA,QACA,OACA,UC3HF,eDiIE,2BACE,kBAIJ,iBACE,WAEA,QAEA,qBACE,WAIJ,iBACE,QAGF,mBACE,iBACA,oBAGF,yBACE,gBACA,eAEA,iBDlFF,4CGjBA,6BFyGE,kBACE,kCAGF,mCACE,mCAGF,iBACE,UAGF,iBACE,WAEA,kBACA,QACA,UAEA,qBACE,YAEA,iBAIJ,mBACE,kBACA,oBAGF,yBACE,aGtMJ,cCDsB,IJ2MpB,uBACE,gBAEA,UAGF,oCACE,UACA,iBACA,oBAGF,0CACE,mBAGF,kCACE,SAGF,iBACE,mBAGF,0CACE,kBACA,SAGF,gBACE,mBAGF,mCACE,UK/OoB,OLgPpB,cAEA,kBAGF,2CACE,WACA,aAGF,uCACE,2BAEA,sBAEA,MACA,WACA,UG9PJ,cCDsB,IJoQpB,mCACE,UACA,iBAGF,yCACE,UAGF,iCACE,sCAIA,kBAEA,gBAEA,aAEA,sBACA,UGxRJ,cCDsB,IJ6RpB,qEAEE,uBAGF,2EAEE,WACE","file":"hero.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n \"background\",\n \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n \"keyline\",\n \"keyline-dark\"\n);\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour)\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if(sass($important): !important; else: null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n outline-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n @include colour-font(\"input-foreground\");\n @include colour-background(\"input-background\");\n @include colour-border(\"input-border\", forms.$form-field-border-width);\n}\n\n@mixin colour-input() {\n @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline-dark\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"accent-border\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"accent-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n $border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n } @else {\n border: $border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width transparent solid;\n } @else {\n border: $border-width transparent solid;\n }\n}\n\n%always-light {\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%base {\n @each $name, $value in $base-colours {\n --#{$name}: var(--base-#{$value});\n }\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin base {\n @extend %base;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"yellow\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"yellow\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"maroon\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"forest\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"navy\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n%image-loader-background {\n background: linear-gradient(\n -45deg,\n rgb(0 0 0 / 25%),\n rgb(255 255 255 / 25%),\n rgb(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n\n @media (prefers-reduced-motion) {\n animation: none !important;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n @extend %image-loader-background;\n }\n}\n","@use \"sass:math\";\n\n@use \"../../variables/borders\" as bordersVars;\n@use \"../../variables/grid\" as gridVars;\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n$vertical-padding-small: 2 !default;\n$vertical-padding-large: 3 !default;\n$plain-top-padding: 12 !default;\n$split-vertical-padding: 3 !default;\n$shift-overflow: $vertical-padding-large !default;\n$over-overflow: $shift-overflow !default;\n\n.tna-hero {\n position: relative;\n\n &::before {\n content: \"\";\n\n position: absolute;\n inset: auto 0 0;\n z-index: -1;\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n &__figure {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n justify-content: flex-end;\n }\n\n &__caption {\n width: 100%;\n\n overflow: visible;\n\n position: absolute;\n top: 0;\n right: 0;\n z-index: 10;\n\n order: 2;\n }\n\n &__details {\n width: 100%;\n\n overflow: visible;\n }\n\n &__details-summary {\n position: absolute;\n top: spacing.space(0.5);\n right: spacing.space(0.5);\n z-index: 2;\n\n &:hover {\n @include colour.colour-font(\"font-dark\", true);\n\n @include colour.colour-background(\"background\", true);\n }\n }\n\n &__details[open] &__details-summary {\n width: 2rem;\n height: 2rem;\n padding: 0;\n\n font-size: 0;\n line-height: 2rem;\n text-align: center;\n\n border: none;\n\n @include colour.contrast;\n\n &::before,\n &::after {\n content: \"\";\n\n width: 1.5rem;\n height: 0.125rem;\n\n display: block;\n\n position: absolute;\n top: 50%;\n left: 50%;\n\n @include colour.colour-background(\"font-dark\");\n }\n\n &::before {\n transform: translate(-50%, -50%) rotate(45deg);\n }\n\n &::after {\n transform: translate(-50%, -50%) rotate(-45deg);\n }\n\n &:hover {\n &::before,\n &::after {\n height: 0.25rem;\n }\n }\n\n &-icon {\n font-size: 0;\n }\n }\n\n &__details-summary-icon {\n }\n\n &__information {\n padding: spacing.space(0.625) spacing.space(3.25) spacing.space(0.625)\n spacing.space(1);\n\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n z-index: 1;\n\n @include colour.contrast;\n\n @include typography.font-size(16);\n\n p + p {\n margin-top: spacing.space(0.5);\n }\n }\n\n &__image {\n width: 100%;\n\n order: 1;\n\n img {\n width: 100%;\n }\n }\n\n &__inner {\n order: 3;\n }\n\n &__content {\n padding-top: spacing.space($vertical-padding-small);\n padding-bottom: spacing.space($vertical-padding-small);\n }\n\n &__content-inner {\n padding-right: 0;\n padding-left: 0;\n\n border-left: none;\n\n @include colour.colour-background(\"background\");\n }\n\n @include media.on-larger-than-mobile {\n &__figure {\n min-height: clamp(5rem, 30vw, 20rem);\n }\n\n &--large &__figure {\n min-height: clamp(12rem, 33vw, 50rem);\n }\n\n &__inner {\n z-index: 4;\n }\n\n &__image {\n width: auto;\n\n position: absolute;\n inset: 0;\n z-index: 1;\n\n img {\n height: 100%;\n\n object-fit: cover;\n }\n }\n\n &__content {\n padding-top: spacing.space($plain-top-padding);\n padding-bottom: spacing.space($vertical-padding-large);\n }\n\n &__content-inner {\n padding: spacing.space(2);\n @include borders.rounded-border;\n }\n\n &__information {\n max-width: math.div(gridVars.$largest-container-width, 2);\n\n left: auto;\n }\n\n &--split &__content {\n width: 50%;\n padding-top: spacing.space($vertical-padding-large);\n padding-bottom: spacing.space($vertical-padding-large);\n }\n\n &--split &__content-inner {\n padding: 0 grid.gutter-width-half() 0 0;\n }\n\n &--split &__image {\n left: 50%;\n }\n\n &--shift {\n margin-bottom: spacing.space($shift-overflow);\n }\n\n &--shift &__content-inner {\n position: relative;\n top: spacing.space($vertical-padding-large + $shift-overflow);\n }\n\n &--over {\n margin-bottom: spacing.space($over-overflow);\n }\n\n &--over &__details {\n max-width: gridVars.$largest-container-width;\n margin: 0 auto;\n\n position: relative;\n }\n\n &--over &__details-summary {\n top: spacing.space(0.5);\n right: spacing.space(gridVars.$gutter-width + 0.5);\n }\n\n &--over &__information {\n max-width: calc(50% - #{spacing.space(gridVars.$gutter-width)});\n\n box-sizing: border-box;\n\n top: 0;\n right: spacing.space(gridVars.$gutter-width);\n left: auto;\n\n @include borders.rounded-border;\n }\n\n &--over &__content {\n width: 50%;\n padding-top: spacing.space($vertical-padding-large);\n }\n\n &--over &__content-inner {\n padding: 0;\n }\n\n &--over &__image {\n max-width: calc(\n #{math.div(gridVars.$largest-container-width, 2)} -\n (#{grid.gutter-width()} + #{grid.gutter-width-half()})\n );\n margin-right: 32px;\n\n overflow: hidden;\n\n bottom: spacing.space($over-overflow * -1);\n\n left: calc(50% + #{grid.gutter-width-half()});\n z-index: 5;\n @include borders.rounded-border;\n }\n\n &--split &__figure,\n &--over &__figure {\n justify-content: center;\n }\n\n &--shift &__content-inner,\n &--over &__image {\n box-shadow:\n 0 0.25rem 1rem -0.25rem rgb(0 0 0 / 25%),\n 0 0.125rem 0.5rem -0.25rem rgb(0 0 0 / 75%);\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-variation-settings: \"wdth\" 100;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"../variables/borders\";\n\n@mixin rounded-border {\n border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 2px !default;\n","$largest-container-width: 1280px !default;\n\n$gutter-width: 2 !default;\n$gutter-width-tiny: 1 !default;\n\n$column-count: 12;\n$column-count-medium: 6;\n$column-count-small: 4;\n$column-count-tiny: 2;\n"]}
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
@use "../../tools/typography";
|
|
11
11
|
|
|
12
12
|
$vertical-padding-small: 2 !default;
|
|
13
|
-
$vertical-padding-large:
|
|
13
|
+
$vertical-padding-large: 3 !default;
|
|
14
14
|
$plain-top-padding: 12 !default;
|
|
15
15
|
$split-vertical-padding: 3 !default;
|
|
16
16
|
$shift-overflow: $vertical-padding-large !default;
|
|
@@ -272,7 +272,7 @@ $over-overflow: $shift-overflow !default;
|
|
|
272
272
|
&--over &__image {
|
|
273
273
|
max-width: calc(
|
|
274
274
|
#{math.div(gridVars.$largest-container-width, 2)} -
|
|
275
|
-
#{grid.gutter-width()}
|
|
275
|
+
(#{grid.gutter-width()} + #{grid.gutter-width-half()})
|
|
276
276
|
);
|
|
277
277
|
margin-right: 32px;
|
|
278
278
|
|
|
@@ -280,7 +280,7 @@ $over-overflow: $shift-overflow !default;
|
|
|
280
280
|
|
|
281
281
|
bottom: spacing.space($over-overflow * -1);
|
|
282
282
|
|
|
283
|
-
left: 50
|
|
283
|
+
left: calc(50% + #{grid.gutter-width-half()});
|
|
284
284
|
z-index: 5;
|
|
285
285
|
@include borders.rounded-border;
|
|
286
286
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,()=>(()=>{"use strict";var t={181(t,e,r){r.d(e,{A:()=>i});const i=
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,()=>(()=>{"use strict";var t={181(t,e,r){r.d(e,{A:()=>i});const i=()=>([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/gu,t=>(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16))}},e={};function r(i){var s=e[i];if(void 0!==s)return s.exports;var n=e[i]={exports:{}};return t[i](n,n.exports,r),n.exports}r.d=(t,e)=>{for(var i in e)r.o(e,i)&&!r.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var i={};r.r(i),r.d(i,{Picture:()=>n});var s=r(181);class n{constructor(t){this.$module=t,this.$imageWrapper=t&&t.querySelector(".tna-picture__image-wrapper"),this.$transcriptToggle=this.$imageWrapper&&this.$imageWrapper.querySelector(".tna-picture__toggle-transcript"),this.$transcript=t&&t.querySelector(".tna-picture__transcript"),this.transcriptOpened=!1,this.$module&&this.$imageWrapper&&this.$transcriptToggle&&this.$transcript&&(this.openLabel=this.$module.dataset.informationLabelOpen||"Open transcript",this.closeLabel=this.$module.dataset.informationLabelClose||"Close transcript",this.init())}init(){const t=`tna-picture-${(0,s.A)()}`;this.$transcriptToggle.removeAttribute("hidden"),this.$transcriptToggle.setAttribute("aria-controls",t),this.$transcriptToggle.innerText=this.openLabel,this.$transcriptToggle.addEventListener("click",()=>this.toggleTranscript()),this.$transcript.setAttribute("id",t),this.$transcript.setAttribute("hidden",""),this.$transcript.addEventListener("keydown",t=>{"Escape"===t.key&&(this.toggleTranscript(),this.$transcriptToggle.focus())})}toggleTranscript(){this.transcriptOpened=!this.transcriptOpened,this.transcriptOpened?(this.$transcriptToggle.setAttribute("aria-expanded",!0),this.$transcriptToggle.innerText=this.closeLabel,this.$transcript.removeAttribute("hidden")):(this.$transcriptToggle.setAttribute("aria-expanded",!1),this.$transcriptToggle.innerText=this.openLabel,this.$transcript.setAttribute("hidden",""))}}return i})());
|
|
2
2
|
//# sourceMappingURL=picture.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components/picture/picture.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,
|
|
1
|
+
{"version":3,"file":"components/picture/picture.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,0DCPD,MAQAC,EARe,KACZ,CAAC,MAAQ,KAAO,KAAO,KAAO,MAAMC,QAAQ,UAAYC,IAErDA,EACCC,OAAOC,gBAAgB,IAAIC,WAAW,IAAI,GAAM,IAAOH,EAAO,GAC/DI,SAAS,OCNfC,EAAA,GAGA,SAAAC,EAAAC,GAEA,IAAAC,EAAAH,EAAAE,GACA,QAAAE,IAAAD,EACA,OAAAA,EAAAf,QAGA,IAAAC,EAAAW,EAAAE,GAAA,CAGAd,QAAA,IAOA,OAHAiB,EAAAH,GAAAb,EAAAA,EAAAD,QAAAa,GAGAZ,EAAAD,OACA,CCrBAa,EAAAK,EAAA,CAAAlB,EAAAmB,KACA,QAAAC,KAAAD,EACAN,EAAAQ,EAAAF,EAAAC,KAAAP,EAAAQ,EAAArB,EAAAoB,IACAE,OAAAC,eAAAvB,EAAAoB,EAAA,CAAyCI,YAAA,EAAAC,IAAAN,EAAAC,MCJzCP,EAAAQ,EAAA,CAAAK,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAd,EAAAkB,EAAA/B,IACA,oBAAAgC,QAAAA,OAAAC,aACAX,OAAAC,eAAAvB,EAAAgC,OAAAC,YAAA,CAAuDC,MAAA,WAEvDZ,OAAAC,eAAAvB,EAAA,cAAgDkC,OAAA,yDCHzC,MAAMC,EACX,WAAAC,CAAYC,GACVC,KAAKD,QAAUA,EACfC,KAAKC,cACHF,GAAWA,EAAQG,cAAc,+BAEnCF,KAAKG,kBACHH,KAAKC,eACLD,KAAKC,cAAcC,cAAc,mCAEnCF,KAAKI,YACHL,GAAWA,EAAQG,cAAc,4BACnCF,KAAKK,kBAAmB,EAGrBL,KAAKD,SACLC,KAAKC,eACLD,KAAKG,mBACLH,KAAKI,cAKRJ,KAAKM,UACHN,KAAKD,QAAQQ,QAAQC,sBAAwB,kBAC/CR,KAAKS,WACHT,KAAKD,QAAQQ,QAAQG,uBAAyB,mBAEhDV,KAAKW,OACP,CAEA,IAAAA,GACE,MAAMC,EAAW,gBAAe,EAAAC,EAAAC,OAEhCd,KAAKG,kBAAkBY,gBAAgB,UACvCf,KAAKG,kBAAkBa,aAAa,gBAAiBJ,GACrDZ,KAAKG,kBAAkBc,UAAYjB,KAAKM,UACxCN,KAAKG,kBAAkBe,iBAAiB,QAAS,IAC/ClB,KAAKmB,oBAGPnB,KAAKI,YAAYY,aAAa,KAAMJ,GACpCZ,KAAKI,YAAYY,aAAa,SAAU,IAExChB,KAAKI,YAAYc,iBAAiB,UAAYE,IAErC,WADCA,EAAMtC,MAEVkB,KAAKmB,mBACLnB,KAAKG,kBAAkBkB,UAM/B,CAEA,gBAAAF,GACEnB,KAAKK,kBAAoBL,KAAKK,iBAC1BL,KAAKK,kBACPL,KAAKG,kBAAkBa,aAAa,iBAAiB,GACrDhB,KAAKG,kBAAkBc,UAAYjB,KAAKS,WACxCT,KAAKI,YAAYW,gBAAgB,YAEjCf,KAAKG,kBAAkBa,aAAa,iBAAiB,GACrDhB,KAAKG,kBAAkBc,UAAYjB,KAAKM,UACxCN,KAAKI,YAAYY,aAAa,SAAU,IAE5C","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/lib/uuid.mjs","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/picture/picture.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","/* eslint-disable no-magic-numbers */\n/* eslint-disable no-bitwise */\nconst uuidv4 = () =>\n ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/gu, (char) =>\n (\n char ^\n (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (char / 4)))\n ).toString(16),\n );\n\nexport default uuidv4;\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import uuidv4 from \"../../lib/uuid.mjs\";\n\nexport class Picture {\n constructor($module) {\n this.$module = $module;\n this.$imageWrapper =\n $module && $module.querySelector(\".tna-picture__image-wrapper\");\n\n this.$transcriptToggle =\n this.$imageWrapper &&\n this.$imageWrapper.querySelector(\".tna-picture__toggle-transcript\");\n\n this.$transcript =\n $module && $module.querySelector(\".tna-picture__transcript\");\n this.transcriptOpened = false;\n\n if (\n !this.$module ||\n !this.$imageWrapper ||\n !this.$transcriptToggle ||\n !this.$transcript\n ) {\n return;\n }\n\n this.openLabel =\n this.$module.dataset.informationLabelOpen || \"Open transcript\";\n this.closeLabel =\n this.$module.dataset.informationLabelClose || \"Close transcript\";\n\n this.init();\n }\n\n init() {\n const uniqueId = `tna-picture-${uuidv4()}`;\n\n this.$transcriptToggle.removeAttribute(\"hidden\");\n this.$transcriptToggle.setAttribute(\"aria-controls\", uniqueId);\n this.$transcriptToggle.innerText = this.openLabel;\n this.$transcriptToggle.addEventListener(\"click\", () =>\n this.toggleTranscript(),\n );\n\n this.$transcript.setAttribute(\"id\", uniqueId);\n this.$transcript.setAttribute(\"hidden\", \"\");\n\n this.$transcript.addEventListener(\"keydown\", (event) => {\n switch (event.key) {\n case \"Escape\":\n this.toggleTranscript();\n this.$transcriptToggle.focus();\n break;\n default:\n break;\n }\n });\n }\n\n toggleTranscript() {\n this.transcriptOpened = !this.transcriptOpened;\n if (this.transcriptOpened) {\n this.$transcriptToggle.setAttribute(\"aria-expanded\", true);\n this.$transcriptToggle.innerText = this.closeLabel;\n this.$transcript.removeAttribute(\"hidden\");\n } else {\n this.$transcriptToggle.setAttribute(\"aria-expanded\", false);\n this.$transcriptToggle.innerText = this.openLabel;\n this.$transcript.setAttribute(\"hidden\", \"\");\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__WEBPACK_DEFAULT_EXPORT__","replace","char","crypto","getRandomValues","Uint8Array","toString","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","Picture","constructor","$module","this","$imageWrapper","querySelector","$transcriptToggle","$transcript","transcriptOpened","openLabel","dataset","informationLabelOpen","closeLabel","informationLabelClose","init","uniqueId","_lib_uuid_mjs__WEBPACK_IMPORTED_MODULE_0__","A","removeAttribute","setAttribute","innerText","addEventListener","toggleTranscript","event","focus"],"sourceRoot":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():e.TNAFrontend=t()}(self,()=>(()=>{"use strict";var e={d:(t,i)=>{for(var r in i)e.o(i,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:i[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():e.TNAFrontend=t()}(self,()=>(()=>{"use strict";var e={d:(t,i)=>{for(var r in i)e.o(i,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:i[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{Sidebar:()=>i});class i{constructor(e,t={}){if(this.$module=e,this.items=e&&Array.from(e.querySelectorAll(".tna-sidebar__item")).map(e=>{const t=e.querySelector(".tna-sidebar__link[href^='#']").getAttribute("href").substring(1);return{$item:e,id:t,target:document.getElementById(t)}}).filter(e=>e.target),!this.$module||!this.items)return;const{scrollTopThreshold:i=0,disableHighlightSize:r="small"}=t;this.scrollTopThreshold=i,this.disableHighlightSize=r,this.init()}init(){if(this.breakpoints={tiny:getComputedStyle(document.documentElement).getPropertyValue("--media-breakpoint-tiny")||"480px",small:getComputedStyle(document.documentElement).getPropertyValue("--media-breakpoint-small")||"768px",medium:getComputedStyle(document.documentElement).getPropertyValue("--media-breakpoint-medium")||"1024px"},this.disableHighlightSize){if(!Object.keys(this.breakpoints).includes(this.disableHighlightSize))throw new Error(`Invalid value for disableHighlightSize: ${this.disableHighlightSize}. Expected one of: ${Object.keys(this.breakpoints).join(", ")}`);this.hideOnDevice=window.matchMedia(`(max-width: ${this.breakpoints[this.disableHighlightSize]})`)}else this.hideOnDevice=null;this.currentItem=null,window.addEventListener("scroll",()=>this.highlightCurrentSection()),window.addEventListener("resize",()=>this.highlightCurrentSection()),this.highlightCurrentSection()}highlightCurrentSection(){if(this.hideOnDevice&&this.hideOnDevice.matches)return this.items.forEach(e=>{e.$item.classList.remove("tna-sidebar__item--current")}),void(this.currentItem=null);const e=this.items.findLast(e=>Math.floor(e.target.getBoundingClientRect().top)<=this.scrollTopThreshold);e!==this.currentItem&&this.items.forEach(t=>{e&&t===e?(this.currentItem=t,this.currentItem.$item.classList.add("tna-sidebar__item--current")):t.$item.classList.remove("tna-sidebar__item--current")}),this.currentItem=e||null}}return t})());
|
|
2
2
|
//# sourceMappingURL=sidebar.js.map
|