@nationalarchives/frontend 0.2.12 → 0.2.14
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/README.md +2 -2
- package/nationalarchives/all+analytics.js +1 -1
- 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 -1
- package/nationalarchives/all.js.map +1 -1
- package/nationalarchives/all.mjs +79 -57
- package/nationalarchives/components/breadcrumbs/fixtures.json +5 -5
- package/nationalarchives/components/breadcrumbs/template.njk +1 -1
- package/nationalarchives/components/button/button.css +1 -1
- package/nationalarchives/components/button/button.css.map +1 -1
- package/nationalarchives/components/button/button.scss +19 -18
- package/nationalarchives/components/card/card.css +1 -1
- package/nationalarchives/components/card/card.css.map +1 -1
- package/nationalarchives/components/card/card.scss +40 -0
- package/nationalarchives/components/card/fixtures.json +1 -1
- package/nationalarchives/components/card/template.njk +1 -1
- package/nationalarchives/components/checkboxes/checkboxes.css +1 -1
- package/nationalarchives/components/checkboxes/checkboxes.css.map +1 -1
- package/nationalarchives/components/checkboxes/checkboxes.scss +3 -0
- package/nationalarchives/components/date-input/date-input.css +1 -1
- package/nationalarchives/components/date-input/date-input.css.map +1 -1
- package/nationalarchives/components/date-search/date-search.css +1 -1
- package/nationalarchives/components/date-search/date-search.css.map +1 -1
- package/nationalarchives/components/error-summary/error-summary.css +1 -1
- package/nationalarchives/components/error-summary/error-summary.css.map +1 -1
- package/nationalarchives/components/files-list/files-list.css +1 -1
- package/nationalarchives/components/files-list/files-list.css.map +1 -1
- package/nationalarchives/components/files-list/files-list.scss +58 -12
- package/nationalarchives/components/files-list/fixtures.json +19 -0
- package/nationalarchives/components/files-list/macro-options.json +6 -0
- package/nationalarchives/components/files-list/template.njk +3 -0
- package/nationalarchives/components/footer/footer.css +1 -1
- package/nationalarchives/components/footer/footer.css.map +1 -1
- package/nationalarchives/components/gallery/gallery.css +1 -1
- package/nationalarchives/components/gallery/gallery.css.map +1 -1
- package/nationalarchives/components/global-header/global-header.css +1 -1
- package/nationalarchives/components/global-header/global-header.css.map +1 -1
- package/nationalarchives/components/header/header.css +1 -1
- package/nationalarchives/components/header/header.css.map +1 -1
- package/nationalarchives/components/hero/hero.css +1 -1
- package/nationalarchives/components/hero/hero.css.map +1 -1
- package/nationalarchives/components/index-grid/index-grid.css +1 -1
- package/nationalarchives/components/index-grid/index-grid.css.map +1 -1
- package/nationalarchives/components/pagination/fixtures.json +117 -2
- package/nationalarchives/components/pagination/macro-options.json +0 -18
- package/nationalarchives/components/picture/picture.css +1 -1
- package/nationalarchives/components/picture/picture.css.map +1 -1
- package/nationalarchives/components/radios/radios.css +1 -1
- package/nationalarchives/components/radios/radios.css.map +1 -1
- package/nationalarchives/components/radios/radios.scss +3 -0
- package/nationalarchives/components/search-field/search-field.css +1 -1
- package/nationalarchives/components/search-field/search-field.css.map +1 -1
- package/nationalarchives/components/select/select.css +1 -1
- package/nationalarchives/components/select/select.css.map +1 -1
- package/nationalarchives/components/text-input/text-input.css +1 -1
- package/nationalarchives/components/text-input/text-input.css.map +1 -1
- package/nationalarchives/components/textarea/textarea.css +1 -1
- package/nationalarchives/components/textarea/textarea.css.map +1 -1
- package/nationalarchives/components/warning/warning.css +1 -1
- package/nationalarchives/components/warning/warning.css.map +1 -1
- package/nationalarchives/ie.css +1 -1
- package/nationalarchives/ie.css.map +1 -1
- package/nationalarchives/ie.scss +66 -0
- package/nationalarchives/print.css +1 -1
- package/nationalarchives/print.css.map +1 -1
- package/nationalarchives/prototype-kit.css +1 -1
- package/nationalarchives/prototype-kit.css.map +1 -1
- package/nationalarchives/templates/fixtures.json +3 -3
- package/nationalarchives/utilities/_reset.scss +4 -0
- package/nationalarchives/utilities/forms/_index.scss +1 -0
- package/nationalarchives/utilities/tables/_index.scss +18 -0
- package/nationalarchives/variables/_colour.scss +20 -19
- package/package.json +12 -12
- package/nationalarchives/global-header-package.css +0 -1
- package/nationalarchives/global-header-package.css.map +0 -1
- package/nationalarchives/global-header-package.scss +0 -312
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
}
|
|
20
20
|
]
|
|
21
21
|
},
|
|
22
|
-
"html": "<nav class=\"tna-breadcrumbs\" data-module=\"tna-breadcrumbs\" aria-label=\"
|
|
22
|
+
"html": "<nav class=\"tna-breadcrumbs\" data-module=\"tna-breadcrumbs\" aria-label=\"Breadcrumbs\"><ol class=\"tna-breadcrumbs__list\"><li class=\"tna-breadcrumbs__item\"><a href=\"#/alpha\" class=\"tna-breadcrumbs__link\">Alpha</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/beta\" class=\"tna-breadcrumbs__link\">Beta</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/gamma\" class=\"tna-breadcrumbs__link\">Gamma</a></li></ol></nav>"
|
|
23
23
|
},
|
|
24
24
|
{
|
|
25
25
|
"name": "non-collapsing",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
],
|
|
41
41
|
"noCollapse": true
|
|
42
42
|
},
|
|
43
|
-
"html": "<nav class=\"tna-breadcrumbs tna-breadcrumbs--no-collapse\" data-module=\"tna-breadcrumbs\" aria-label=\"
|
|
43
|
+
"html": "<nav class=\"tna-breadcrumbs tna-breadcrumbs--no-collapse\" data-module=\"tna-breadcrumbs\" aria-label=\"Breadcrumbs\"><ol class=\"tna-breadcrumbs__list\"><li class=\"tna-breadcrumbs__item\"><a href=\"#/alpha\" class=\"tna-breadcrumbs__link\">Alpha</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/beta\" class=\"tna-breadcrumbs__link\">Beta</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/gamma\" class=\"tna-breadcrumbs__link\">Gamma</a></li></ol></nav>"
|
|
44
44
|
},
|
|
45
45
|
{
|
|
46
46
|
"name": "Structured data",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
],
|
|
62
62
|
"structuredData": true
|
|
63
63
|
},
|
|
64
|
-
"html": "<nav class=\"tna-breadcrumbs\" data-module=\"tna-breadcrumbs\" aria-label=\"
|
|
64
|
+
"html": "<nav class=\"tna-breadcrumbs\" data-module=\"tna-breadcrumbs\" aria-label=\"Breadcrumbs\"><ol class=\"tna-breadcrumbs__list\" itemscope itemtype=\"https://schema.org/BreadcrumbList\"><li class=\"tna-breadcrumbs__item\" itemprop=\"itemListElement\" itemscope itemtype=\"https://schema.org/ListItem\"><a href=\"#/alpha\" class=\"tna-breadcrumbs__link\" itemprop=\"item\"><span itemprop=\"name\">Alpha</span></a><meta itemprop=\"position\" content=\"1\"></li><li class=\"tna-breadcrumbs__item\" itemprop=\"itemListElement\" itemscope itemtype=\"https://schema.org/ListItem\"><a href=\"#/beta\" class=\"tna-breadcrumbs__link\" itemprop=\"item\"><span itemprop=\"name\">Beta</span></a><meta itemprop=\"position\" content=\"2\"></li><li class=\"tna-breadcrumbs__item\" itemprop=\"itemListElement\" itemscope itemtype=\"https://schema.org/ListItem\"><a href=\"#/gamma\" class=\"tna-breadcrumbs__link\" itemprop=\"item\"><span itemprop=\"name\">Gamma</span></a><meta itemprop=\"position\" content=\"3\"></li></ol></nav>"
|
|
65
65
|
},
|
|
66
66
|
{
|
|
67
67
|
"name": "with classes",
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
],
|
|
83
83
|
"classes": "tna-breadcrumbs--test"
|
|
84
84
|
},
|
|
85
|
-
"html": "<nav class=\"tna-breadcrumbs tna-breadcrumbs--test\" data-module=\"tna-breadcrumbs\" aria-label=\"
|
|
85
|
+
"html": "<nav class=\"tna-breadcrumbs tna-breadcrumbs--test\" data-module=\"tna-breadcrumbs\" aria-label=\"Breadcrumbs\"><ol class=\"tna-breadcrumbs__list\"><li class=\"tna-breadcrumbs__item\"><a href=\"#/alpha\" class=\"tna-breadcrumbs__link\">Alpha</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/beta\" class=\"tna-breadcrumbs__link\">Beta</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/gamma\" class=\"tna-breadcrumbs__link\">Gamma</a></li></ol></nav>"
|
|
86
86
|
},
|
|
87
87
|
{
|
|
88
88
|
"name": "with attributes",
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
"data-testattribute": "foobar"
|
|
106
106
|
}
|
|
107
107
|
},
|
|
108
|
-
"html": "<nav class=\"tna-breadcrumbs\" data-module=\"tna-breadcrumbs\" aria-label=\"
|
|
108
|
+
"html": "<nav class=\"tna-breadcrumbs\" data-module=\"tna-breadcrumbs\" aria-label=\"Breadcrumbs\" data-testattribute=\"foobar\"><ol class=\"tna-breadcrumbs__list\"><li class=\"tna-breadcrumbs__item\"><a href=\"#/alpha\" class=\"tna-breadcrumbs__link\">Alpha</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/beta\" class=\"tna-breadcrumbs__link\">Beta</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/gamma\" class=\"tna-breadcrumbs__link\">Gamma</a></li></ol></nav>"
|
|
109
109
|
}
|
|
110
110
|
]
|
|
111
111
|
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
{%- set containerClasses = containerClasses.concat('tna-breadcrumbs--no-collapse') -%}
|
|
4
4
|
{%- endif -%}
|
|
5
5
|
{%- set classes = containerClasses | join(' ') -%}
|
|
6
|
-
<nav class="tna-breadcrumbs{% if classes %} {{ classes }}{% endif %}" data-module="tna-breadcrumbs" aria-label="
|
|
6
|
+
<nav class="tna-breadcrumbs{% if classes %} {{ classes }}{% endif %}" data-module="tna-breadcrumbs" aria-label="Breadcrumbs"{%- for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
|
|
7
7
|
<ol class="tna-breadcrumbs__list" {%- if params.structuredData %} itemscope itemtype="https://schema.org/BreadcrumbList"{% endif %}>
|
|
8
8
|
{%- for item in params.items %}
|
|
9
9
|
<li class="tna-breadcrumbs__item" {%- if params.structuredData %} itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"{% endif %}>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tna-button-group{margin-top:32px}.tna-button-group:first-child{margin-top:0}.tna-button-group{display:flex;flex-wrap:wrap;align-items:center;gap:16px}@media(max-width: 30em){.tna-button-group{flex-direction:column;align-items:stretch}}.tna-button-group--small{gap:8px}.tna-button{padding:4px 16px;display:inline-flex;align-items:baseline;justify-content:center;gap:12px;line-height:2rem;text-align:center;text-decoration:none;text-wrap:balance;cursor:pointer;font-size:1.125rem;font-weight:700;background-color:var(--button-background, rgb(1, 1, 1));border:4px var(--button-background, rgb(1, 1, 1)) solid;-webkit-print-color-adjust:exact;print-color-adjust:exact}.tna-button,.tna-button:link,.tna-button:visited{color:var(--button-text, rgb(255, 255, 255))}.tna-button:hover{color:var(--button-hover-text, rgb(1, 1, 1));text-decoration:none;background:rgba(0,0,0,0)}.tna-button .fa-solid{display:block;font-size:.9em;line-height:1.7777777778}.tna-button svg{height:.9em;flex-shrink:0;align-self:center;fill:currentColor}.tna-button--plain{font-weight:400;background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.tna-button--plain,.tna-button--plain:link,.tna-button--plain:visited{color:var(--link, #005fa3)}.tna-button--plain:hover{text-decoration:underline;text-decoration-thickness:3.5px}.tna-button--accent{background-color:var(--button-accented-background, rgb(140, 150, 148));border-color:var(--button-accented-background, rgb(140, 150, 148))}.tna-button--accent,.tna-button--accent:link,.tna-button--accent:visited{color:var(--button-accented-text, rgb(1, 1, 1))}.tna-button--accent:hover{color:var(--font-dark, rgb(1, 1, 1))}.tna-button--icon-right{flex-direction:row-reverse}.tna-button--small,.tna-button-group--small .tna-button{padding:0 8px;font-size:0.875rem;line-height:1.5rem}.tna-button--icon-only{padding-right:0;padding-left:0;gap:0;font-size:0 !important;line-height:0 !important}.tna-button--icon-only .fa-solid{width:2.5rem;font-size:1.125rem}.tna-button--icon-only svg{height:1.5rem;margin:.5rem}.tna-button--small.tna-button--icon-only,.tna-button-group--small .tna-button--icon-only{padding-right:0;padding-left:0}.tna-button--small.tna-button--icon-only .fa-solid,.tna-button-group--small .tna-button--icon-only .fa-solid{width:2rem;font-size:1.0125rem;line-height:2rem}.tna-button--small.tna-button--icon-only svg,.tna-button-group--small .tna-button--icon-only svg{height:1rem;margin:.5rem}@media(max-width: 48em){.tna-button--icon-only-mobile{padding-right:0;padding-left:0;gap:0;font-size:0 !important;line-height:0 !important}.tna-button--icon-only-mobile .fa-solid{width:2.5rem;font-size:1.125rem}.tna-button--icon-only-mobile svg{height:1.5rem;margin:.5rem}.tna-button--small.tna-button--icon-only-mobile,.tna-button-group--small .tna-button--icon-only-mobile{padding-right:0;padding-left:0}.tna-button--small.tna-button--icon-only-mobile .fa-solid,.tna-button-group--small .tna-button--icon-only-mobile .fa-solid{width:2rem;font-size:1.0125rem;line-height:2rem}.tna-button--small.tna-button--icon-only-mobile svg,.tna-button-group--small .tna-button--icon-only-mobile svg{height:1rem;margin:.5rem}}.tna-button--solid-hover:not(.tna-button--plain):hover{color:var(--font-dark, rgb(1, 1, 1));background-color:var(--background, #f4f4f4)}.tna-background-accent .tna-button:hover,.tna-template--dark-theme .tna-background-accent-light .tna-button:hover{color:var(--font-dark, rgb(1, 1, 1))}.tna-background-accent .tna-button--accent,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent{background-color:var(--contrast-button-background, rgb(255, 255, 255));border-color:var(--contrast-button-background, rgb(255, 255, 255))}.tna-background-accent .tna-button--accent,.tna-background-accent .tna-button--accent:link,.tna-background-accent .tna-button--accent:visited,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent:link,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent:visited{color:var(--contrast-button-text, rgb(1, 1, 1))}.tna-background-accent .tna-button--accent:hover,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent:hover{color:var(--contrast-font-dark, rgb(255, 255, 255));background-color:var(--contrast-background, #1e1e1e)}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-background-accent-light .tna-button:hover{color:var(--font-dark, rgb(1, 1, 1))}.tna-template--system-theme .tna-background-accent-light .tna-button--accent{background-color:var(--contrast-button-background, rgb(255, 255, 255));border-color:var(--contrast-button-background, rgb(255, 255, 255))}.tna-template--system-theme .tna-background-accent-light .tna-button--accent,.tna-template--system-theme .tna-background-accent-light .tna-button--accent:link,.tna-template--system-theme .tna-background-accent-light .tna-button--accent:visited{color:var(--contrast-button-text, rgb(1, 1, 1))}.tna-template--system-theme .tna-background-accent-light .tna-button--accent:hover{color:var(--contrast-font-dark, rgb(255, 255, 255));background-color:var(--contrast-background, #1e1e1e)}}@media(forced-colors: active){.tna-button:hover{text-decoration:underline;text-decoration-thickness:3.5px}}/*# sourceMappingURL=button.css.map */
|
|
1
|
+
.tna-button-group{margin-top:32px}.tna-button-group:first-child{margin-top:0}.tna-button-group{display:flex;flex-wrap:wrap;align-items:center;gap:16px}@media(max-width: 30em){.tna-button-group{flex-direction:column;align-items:stretch}}.tna-button-group--small{gap:8px}.tna-button{padding:4px 16px;display:inline-flex;align-items:baseline;justify-content:center;gap:12px;line-height:2rem;text-align:center;text-decoration:none;text-wrap:balance;cursor:pointer;font-size:1.125rem;font-weight:700;background-color:var(--button-background, rgb(1, 1, 1));border:4px var(--button-background, rgb(1, 1, 1)) solid;-webkit-print-color-adjust:exact;print-color-adjust:exact}.tna-button,.tna-button:link,.tna-button:visited{color:var(--button-text, rgb(255, 255, 255))}.tna-button:hover,.tna-button:focus{color:var(--button-hover-text, rgb(1, 1, 1));text-decoration:none;background:rgba(0,0,0,0)}.tna-button .fa-solid{display:block;font-size:.9em;line-height:1.7777777778}.tna-button svg{height:.9em;flex-shrink:0;align-self:center;fill:currentColor}.tna-button--plain{font-weight:400;background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.tna-button--plain,.tna-button--plain:link,.tna-button--plain:visited,.tna-button--plain:hover,.tna-button--plain:focus{color:var(--link, #005fa3)}.tna-button--plain:hover,.tna-button--plain:focus{text-decoration:underline;text-decoration-thickness:3.5px}.tna-button--accent{background-color:var(--button-accented-background, rgb(140, 150, 148));border-color:var(--button-accented-background, rgb(140, 150, 148))}.tna-button--accent,.tna-button--accent:link,.tna-button--accent:visited{color:var(--button-accented-text, rgb(1, 1, 1))}.tna-button--accent:hover,.tna-button--accent:focus{color:var(--font-dark, rgb(1, 1, 1))}.tna-button--icon-right{flex-direction:row-reverse}.tna-button--small,.tna-button-group--small .tna-button{padding:0 8px;font-size:0.875rem;line-height:1.5rem}.tna-button--icon-only{padding-right:0;padding-left:0;gap:0;font-size:0 !important;line-height:0 !important}.tna-button--icon-only .fa-solid{width:2.5rem;font-size:1.125rem}.tna-button--icon-only svg{height:1.5rem;margin:.5rem}.tna-button--small.tna-button--icon-only,.tna-button-group--small .tna-button--icon-only{padding-right:0;padding-left:0}.tna-button--small.tna-button--icon-only .fa-solid,.tna-button-group--small .tna-button--icon-only .fa-solid{width:2rem;font-size:1.0125rem;line-height:2rem}.tna-button--small.tna-button--icon-only svg,.tna-button-group--small .tna-button--icon-only svg{height:1rem;margin:.5rem}@media(max-width: 48em){.tna-button--icon-only-mobile{padding-right:0;padding-left:0;gap:0;font-size:0 !important;line-height:0 !important}.tna-button--icon-only-mobile .fa-solid{width:2.5rem;font-size:1.125rem}.tna-button--icon-only-mobile svg{height:1.5rem;margin:.5rem}.tna-button--small.tna-button--icon-only-mobile,.tna-button-group--small .tna-button--icon-only-mobile{padding-right:0;padding-left:0}.tna-button--small.tna-button--icon-only-mobile .fa-solid,.tna-button-group--small .tna-button--icon-only-mobile .fa-solid{width:2rem;font-size:1.0125rem;line-height:2rem}.tna-button--small.tna-button--icon-only-mobile svg,.tna-button-group--small .tna-button--icon-only-mobile svg{height:1rem;margin:.5rem}}.tna-button--solid-hover:not(.tna-button--plain):hover{color:var(--font-dark, rgb(1, 1, 1));background-color:var(--background, #f4f4f4)}.tna-background-accent .tna-button:hover,.tna-background-accent .tna-button:focus,.tna-template--dark-theme .tna-background-accent-light .tna-button:hover,.tna-template--dark-theme .tna-background-accent-light .tna-button:focus{color:var(--font-dark, rgb(1, 1, 1))}.tna-background-accent .tna-button--accent,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent{background-color:var(--contrast-button-background, rgb(255, 255, 255));border-color:var(--contrast-button-background, rgb(255, 255, 255))}.tna-background-accent .tna-button--accent,.tna-background-accent .tna-button--accent:link,.tna-background-accent .tna-button--accent:visited,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent:link,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent:visited{color:var(--contrast-button-text, rgb(1, 1, 1))}.tna-background-accent .tna-button--accent:hover,.tna-background-accent .tna-button--accent:focus,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent:hover,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent:focus{color:var(--contrast-font-dark, rgb(255, 255, 255));background-color:var(--contrast-background, #1e1e1e)}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-background-accent-light .tna-button:hover,.tna-template--system-theme .tna-background-accent-light .tna-button:focus{color:var(--font-dark, rgb(1, 1, 1))}.tna-template--system-theme .tna-background-accent-light .tna-button--accent{background-color:var(--contrast-button-background, rgb(255, 255, 255));border-color:var(--contrast-button-background, rgb(255, 255, 255))}.tna-template--system-theme .tna-background-accent-light .tna-button--accent,.tna-template--system-theme .tna-background-accent-light .tna-button--accent:link,.tna-template--system-theme .tna-background-accent-light .tna-button--accent:visited{color:var(--contrast-button-text, rgb(1, 1, 1))}.tna-template--system-theme .tna-background-accent-light .tna-button--accent:hover,.tna-template--system-theme .tna-background-accent-light .tna-button--accent:focus{color:var(--contrast-font-dark, rgb(255, 255, 255));background-color:var(--contrast-background, #1e1e1e)}}@media(forced-colors: active){.tna-button:hover,.tna-button:focus{text-decoration:underline;text-decoration-thickness:3.5px}}/*# sourceMappingURL=button.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/button/_button-group.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/components/button/button.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_colour.scss"],"names":[],"mappings":"AAUA,kBACE,gBAEA,8BACE,aCXJ,kBACE,aACA,eACA,mBACA,SCmDA,wBDvDF,kBASI,sBACA,qBAGF,yBACE,QERJ,YACE,iBAEA,oBACA,qBACA,uBACA,SAEA,iBACA,kBACA,qBACA,kBAEA,eChBA,mBAiBA,YCYsB,ICoBtB,wDA0BI,wDHlDJ,iCACA,yBAEA,iDGiBA,6CHXA,kBGWA,6CHTE,qBAEA,yBAGF,sBACE,cAEA,eACA,yBAGF,gBACE,YACA,cAEA,kBAEA,kBAGF,mBChDA,YCkBiB,IFiCf,+BAEA,2BAEA,sEGnBF,2BHyBE,yBCdF,0BACA,0BCpCsC,MFsDtC,oBG1BA,uEA+BI,4IAnCJ,gDHyCE,0BGzCF,qCH8CA,wBACE,2BAGF,wDAEE,cCjGF,mBDoGE,mBAyCF,uBArCE,gBACA,eAEA,MAEA,uBACA,yBAEA,iCACE,aCjHJ,mBDsHE,2BACE,cACA,aAyBJ,yFApBE,gBACA,eAEA,6GACE,WCjIJ,oBDoII,iBAGF,iGACE,YACA,aD7DJ,wBC2EE,8BA/CA,gBACA,eAEA,MAEA,uBACA,yBAEA,wCACE,aCjHJ,mBDsHE,kCACE,cACA,aAmCF,uGA9BA,gBACA,eAEA,2HACE,WCjIJ,oBDoII,iBAGF,+GACE,YACA,cAyBF,uDGrHF,qCAIA,4CH0HE,kHG9HF,qCHmIA,sHG/HA,uEA+BI,mEH0GF,4XG7IF,gDHoJE,kIGpJF,oDAIA,qDHyJA,mCAEI,2EG/JJ,qCHoKE,6EGhKF,uEA+BI,mEHwIA,oPG3KJ,gDHiLI,mFGjLJ,oDAIA,sDAgaA,8BH1OE,kBC/KF,0BACA,0BCpCsC","file":"button.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n margin-top: space(2);\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n\n.tna-button-group {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: spacing.space(1);\n\n @include spacing.space-above;\n\n @include media.on-tiny {\n flex-direction: column;\n align-items: stretch;\n }\n\n &--small {\n gap: spacing.space(0.5);\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 \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n@use \"button-group\";\n\n$button-border-width: 4px !default;\n\n.tna-button {\n padding: spacing.space(0.25) spacing.space(1);\n\n display: inline-flex;\n align-items: baseline;\n justify-content: center;\n gap: spacing.space(0.75);\n\n line-height: 2rem;\n text-align: center;\n text-decoration: none;\n text-wrap: balance;\n\n cursor: pointer;\n\n @include typography.font-size(18);\n @include typography.main-font-weight-bold;\n\n @include colour.colour-background(\"button-background\");\n\n @include colour.colour-border(\"button-background\", $button-border-width);\n\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"button-text\");\n }\n\n &:hover {\n @include colour.colour-font(\"button-hover-text\");\n text-decoration: none;\n\n background: transparent;\n }\n\n .fa-solid {\n display: block;\n\n font-size: 0.9em;\n line-height: #{math.div(16, 18) * 2};\n }\n\n svg {\n height: 0.9em;\n flex-shrink: 0;\n\n align-self: center;\n\n fill: currentColor;\n }\n\n &--plain {\n @include typography.main-font-weight;\n\n background-color: transparent;\n\n border-color: transparent;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"link\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n\n &--accent {\n @include colour.colour-background(\"button-accented-background\");\n\n @include colour.colour-border(\"button-accented-background\");\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"button-accented-text\");\n }\n\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n &--icon-right {\n flex-direction: row-reverse;\n }\n\n &--small,\n &-group--small & {\n padding: 0 spacing.space(0.5);\n\n @include typography.font-size(14);\n line-height: 1.5rem;\n }\n\n @mixin icon-only {\n padding-right: 0;\n padding-left: 0;\n\n gap: 0;\n\n font-size: 0 !important;\n line-height: 0 !important;\n\n .fa-solid {\n width: 2.5rem;\n\n @include typography.font-size(18);\n }\n\n svg {\n height: 1.5rem;\n margin: 0.5rem;\n }\n }\n\n @mixin icon-only-small {\n padding-right: 0;\n padding-left: 0;\n\n .fa-solid {\n width: 2rem;\n\n @include typography.font-size(18 * 0.9);\n line-height: 2rem;\n }\n\n svg {\n height: 1rem;\n margin: 0.5rem;\n }\n }\n\n &--icon-only {\n @include icon-only;\n }\n\n &--small#{&}--icon-only,\n &-group--small &--icon-only {\n @include icon-only-small;\n }\n\n @include media.on-mobile {\n &--icon-only-mobile {\n @include icon-only;\n }\n\n &--small#{&}--icon-only-mobile,\n &-group--small &--icon-only-mobile {\n @include icon-only-small;\n }\n }\n\n &--solid-hover {\n &:not(.tna-button--plain):hover {\n @include colour.colour-font(\"font-dark\");\n\n @include colour.colour-background(\"background\");\n }\n }\n\n .tna-background-accent &,\n .tna-template--dark-theme .tna-background-accent-light & {\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n .tna-background-accent &--accent,\n .tna-template--dark-theme .tna-background-accent-light &--accent {\n // @include colour.contrast;\n\n // @include colour.colour-background(\"button-background\");\n @include colour.colour-background(\"contrast-button-background\");\n\n // @include colour.colour-border(\"button-background\");\n @include colour.colour-border(\"contrast-button-background\");\n\n &,\n &:link,\n &:visited {\n // @include colour.colour-font(\"button-text\");\n @include colour.colour-font(\"contrast-button-text\");\n }\n\n &:hover {\n // @include colour.colour-font(\"font-dark\");\n @include colour.colour-font(\"contrast-font-dark\");\n\n // @include colour.colour-background(\"background\");\n @include colour.colour-background(\"contrast-background\");\n }\n }\n\n @media (prefers-color-scheme: dark) {\n .tna-template--system-theme .tna-background-accent-light & {\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n .tna-template--system-theme .tna-background-accent-light &--accent {\n // @include colour.contrast;\n\n @include colour.colour-background(\"contrast-button-background\");\n\n @include colour.colour-border(\"contrast-button-background\");\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"contrast-button-text\");\n }\n\n &:hover {\n @include colour.colour-font(\"contrast-font-dark\");\n\n @include colour.colour-background(\"contrast-background\");\n }\n }\n }\n\n @include colour.on-forced-colours {\n &:hover {\n @include typography.interacted-text-decoration;\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-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\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 interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\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","/*\n * ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n */\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/*\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n */\n$use-local-fonts: false !default;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/*\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n */\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/*\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\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 }\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 }\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 }\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 }\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($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, 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($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width transparent solid;\n } @else {\n border: borders.$thick-border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\n \"form-error-border\",\n \"focus-outline\"\n );\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-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\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-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\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%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n // @include colour-font(\"font-base\");\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-list-marker: var(--accent-font-base);\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-list-marker: var(--font-base);\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-list-marker: var(--accent-font-base);\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-list-marker: var(--accent-font-base);\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-list-marker: #{colour.brand-colour(\"brown\")} !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.45)} !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(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !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.45)} !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-list-marker: #{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(\"pink\")} !important;\n --accent-list-marker: #{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(\"orange\")} !important;\n --accent-list-marker: #{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(\"green\")} !important;\n --accent-list-marker: #{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(\"blue\")} !important;\n --accent-list-marker: #{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@mixin image-loader-background {\n @if not features.$disable-image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(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}\n"]}
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/button/_button-group.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/components/button/button.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_colour.scss"],"names":[],"mappings":"AAUA,kBACE,gBAEA,8BACE,aCXJ,kBACE,aACA,eACA,mBACA,SCmDA,wBDvDF,kBASI,sBACA,qBAGF,yBACE,QERJ,YACE,iBAEA,oBACA,qBACA,uBACA,SAEA,iBACA,kBACA,qBACA,kBAEA,eChBA,mBAiBA,YCYsB,ICoBtB,wDA0BI,wDHlDJ,iCACA,yBAEA,iDGiBA,6CHXA,oCGWA,6CHRE,qBAEA,yBAGF,sBACE,cAEA,eACA,yBAGF,gBACE,YACA,cAEA,kBAEA,kBAGF,mBCjDA,YCkBiB,IFkCf,+BAEA,2BAEA,wHGpBF,2BH4BE,kDCjBF,0BACA,0BCpCsC,MF0DtC,oBG9BA,uEA+BI,mEHIF,yEGvCF,gDH6CE,oDG7CF,qCHmDA,wBACE,2BAGF,wDAEE,cCtGF,mBDyGE,mBAyCF,uBArCE,gBACA,eAEA,MAEA,uBACA,yBAEA,iCACE,aCtHJ,mBD2HE,2BACE,cACA,aAyBJ,yFApBE,gBACA,eAEA,6GACE,WCtIJ,oBDyII,iBAGF,iGACE,YACA,aDlEJ,wBCgFE,8BA/CA,gBACA,eAEA,MAEA,uBACA,yBAEA,wCACE,aCtHJ,mBD2HE,kCACE,cACA,aAmCF,uGA9BA,gBACA,eAEA,2HACE,WCtIJ,oBDyII,iBAGF,+GACE,YACA,cAyBF,uDG1HF,qCAIA,4CH+HE,oOGnIF,qCHyIA,sHGrIA,uEA+BI,mEH4GF,4XG/IF,gDHqJE,oQGrJF,oDAIA,qDHyJA,mCAEI,sJG/JJ,qCHqKE,6EGjKF,uEA+BI,mEHuIA,oPG1KJ,gDHgLI,sKGhLJ,oDAIA,sDAgaA,8BH1OE,oCC/KF,0BACA,0BCpCsC","file":"button.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n margin-top: space(2);\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n\n.tna-button-group {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: spacing.space(1);\n\n @include spacing.space-above;\n\n @include media.on-tiny {\n flex-direction: column;\n align-items: stretch;\n }\n\n &--small {\n gap: spacing.space(0.5);\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 \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n@use \"button-group\";\n\n$button-border-width: 4px !default;\n\n.tna-button {\n padding: spacing.space(0.25) spacing.space(1);\n\n display: inline-flex;\n align-items: baseline;\n justify-content: center;\n gap: spacing.space(0.75);\n\n line-height: 2rem;\n text-align: center;\n text-decoration: none;\n text-wrap: balance;\n\n cursor: pointer;\n\n @include typography.font-size(18);\n @include typography.main-font-weight-bold;\n\n @include colour.colour-background(\"button-background\");\n\n @include colour.colour-border(\"button-background\", $button-border-width);\n\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"button-text\");\n }\n\n &:hover,\n &:focus {\n @include colour.colour-font(\"button-hover-text\");\n text-decoration: none;\n\n background: transparent;\n }\n\n .fa-solid {\n display: block;\n\n font-size: 0.9em;\n line-height: #{math.div(16, 18) * 2};\n }\n\n svg {\n height: 0.9em;\n flex-shrink: 0;\n\n align-self: center;\n\n fill: currentColor;\n }\n\n &--plain {\n @include typography.main-font-weight;\n\n background-color: transparent;\n\n border-color: transparent;\n\n &,\n &:link,\n &:visited,\n &:hover,\n &:focus {\n @include colour.colour-font(\"link\");\n }\n\n &:hover,\n &:focus {\n @include typography.interacted-text-decoration;\n }\n }\n\n &--accent {\n @include colour.colour-background(\"button-accented-background\");\n\n @include colour.colour-border(\"button-accented-background\");\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"button-accented-text\");\n }\n\n &:hover,\n &:focus {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n &--icon-right {\n flex-direction: row-reverse;\n }\n\n &--small,\n &-group--small & {\n padding: 0 spacing.space(0.5);\n\n @include typography.font-size(14);\n line-height: 1.5rem;\n }\n\n @mixin icon-only {\n padding-right: 0;\n padding-left: 0;\n\n gap: 0;\n\n font-size: 0 !important;\n line-height: 0 !important;\n\n .fa-solid {\n width: 2.5rem;\n\n @include typography.font-size(18);\n }\n\n svg {\n height: 1.5rem;\n margin: 0.5rem;\n }\n }\n\n @mixin icon-only-small {\n padding-right: 0;\n padding-left: 0;\n\n .fa-solid {\n width: 2rem;\n\n @include typography.font-size(18 * 0.9);\n line-height: 2rem;\n }\n\n svg {\n height: 1rem;\n margin: 0.5rem;\n }\n }\n\n &--icon-only {\n @include icon-only;\n }\n\n &--small#{&}--icon-only,\n &-group--small &--icon-only {\n @include icon-only-small;\n }\n\n @include media.on-mobile {\n &--icon-only-mobile {\n @include icon-only;\n }\n\n &--small#{&}--icon-only-mobile,\n &-group--small &--icon-only-mobile {\n @include icon-only-small;\n }\n }\n\n &--solid-hover {\n &:not(.tna-button--plain):hover {\n @include colour.colour-font(\"font-dark\");\n\n @include colour.colour-background(\"background\");\n }\n }\n\n .tna-background-accent &,\n .tna-template--dark-theme .tna-background-accent-light & {\n &:hover,\n &:focus {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n .tna-background-accent &--accent,\n .tna-template--dark-theme .tna-background-accent-light &--accent {\n @include colour.colour-background(\"contrast-button-background\");\n\n @include colour.colour-border(\"contrast-button-background\");\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"contrast-button-text\");\n }\n\n &:hover,\n &:focus {\n @include colour.colour-font(\"contrast-font-dark\");\n\n @include colour.colour-background(\"contrast-background\");\n }\n }\n\n @media (prefers-color-scheme: dark) {\n .tna-template--system-theme .tna-background-accent-light & {\n &:hover,\n &:focus {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n .tna-template--system-theme .tna-background-accent-light &--accent {\n @include colour.colour-background(\"contrast-button-background\");\n\n @include colour.colour-border(\"contrast-button-background\");\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"contrast-button-text\");\n }\n\n &:hover,\n &:focus {\n @include colour.colour-font(\"contrast-font-dark\");\n\n @include colour.colour-background(\"contrast-background\");\n }\n }\n }\n\n @include colour.on-forced-colours {\n &:hover,\n &:focus {\n @include typography.interacted-text-decoration;\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-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\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 interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\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","/*\n * ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n */\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/*\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n */\n$use-local-fonts: false !default;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/*\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n */\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/*\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\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 }\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 }\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 }\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 }\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($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, 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($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width transparent solid;\n } @else {\n border: borders.$thick-border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\n \"form-error-border\",\n \"focus-outline\"\n );\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-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\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-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\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%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n // @include colour-font(\"font-base\");\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-list-marker: var(--accent-font-base);\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-list-marker: var(--font-base);\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-list-marker: var(--accent-font-base);\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-list-marker: var(--accent-font-base);\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-list-marker: #{colour.brand-colour(\"brown\")} !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.45)} !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(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !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.45)} !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-list-marker: #{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(\"pink\")} !important;\n --accent-list-marker: #{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(\"orange\")} !important;\n --accent-list-marker: #{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(\"green\")} !important;\n --accent-list-marker: #{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(\"blue\")} !important;\n --accent-list-marker: #{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@mixin image-loader-background {\n @if not features.$disable-image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(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}\n"]}
|
|
@@ -38,7 +38,8 @@ $button-border-width: 4px !default;
|
|
|
38
38
|
@include colour.colour-font("button-text");
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
&:hover
|
|
41
|
+
&:hover,
|
|
42
|
+
&:focus {
|
|
42
43
|
@include colour.colour-font("button-hover-text");
|
|
43
44
|
text-decoration: none;
|
|
44
45
|
|
|
@@ -70,11 +71,14 @@ $button-border-width: 4px !default;
|
|
|
70
71
|
|
|
71
72
|
&,
|
|
72
73
|
&:link,
|
|
73
|
-
&:visited
|
|
74
|
+
&:visited,
|
|
75
|
+
&:hover,
|
|
76
|
+
&:focus {
|
|
74
77
|
@include colour.colour-font("link");
|
|
75
78
|
}
|
|
76
79
|
|
|
77
|
-
&:hover
|
|
80
|
+
&:hover,
|
|
81
|
+
&:focus {
|
|
78
82
|
@include typography.interacted-text-decoration;
|
|
79
83
|
}
|
|
80
84
|
}
|
|
@@ -90,7 +94,8 @@ $button-border-width: 4px !default;
|
|
|
90
94
|
@include colour.colour-font("button-accented-text");
|
|
91
95
|
}
|
|
92
96
|
|
|
93
|
-
&:hover
|
|
97
|
+
&:hover,
|
|
98
|
+
&:focus {
|
|
94
99
|
@include colour.colour-font("font-dark");
|
|
95
100
|
}
|
|
96
101
|
}
|
|
@@ -175,47 +180,41 @@ $button-border-width: 4px !default;
|
|
|
175
180
|
|
|
176
181
|
.tna-background-accent &,
|
|
177
182
|
.tna-template--dark-theme .tna-background-accent-light & {
|
|
178
|
-
&:hover
|
|
183
|
+
&:hover,
|
|
184
|
+
&:focus {
|
|
179
185
|
@include colour.colour-font("font-dark");
|
|
180
186
|
}
|
|
181
187
|
}
|
|
182
188
|
|
|
183
189
|
.tna-background-accent &--accent,
|
|
184
190
|
.tna-template--dark-theme .tna-background-accent-light &--accent {
|
|
185
|
-
// @include colour.contrast;
|
|
186
|
-
|
|
187
|
-
// @include colour.colour-background("button-background");
|
|
188
191
|
@include colour.colour-background("contrast-button-background");
|
|
189
192
|
|
|
190
|
-
// @include colour.colour-border("button-background");
|
|
191
193
|
@include colour.colour-border("contrast-button-background");
|
|
192
194
|
|
|
193
195
|
&,
|
|
194
196
|
&:link,
|
|
195
197
|
&:visited {
|
|
196
|
-
// @include colour.colour-font("button-text");
|
|
197
198
|
@include colour.colour-font("contrast-button-text");
|
|
198
199
|
}
|
|
199
200
|
|
|
200
|
-
&:hover
|
|
201
|
-
|
|
201
|
+
&:hover,
|
|
202
|
+
&:focus {
|
|
202
203
|
@include colour.colour-font("contrast-font-dark");
|
|
203
204
|
|
|
204
|
-
// @include colour.colour-background("background");
|
|
205
205
|
@include colour.colour-background("contrast-background");
|
|
206
206
|
}
|
|
207
207
|
}
|
|
208
208
|
|
|
209
209
|
@media (prefers-color-scheme: dark) {
|
|
210
210
|
.tna-template--system-theme .tna-background-accent-light & {
|
|
211
|
-
&:hover
|
|
211
|
+
&:hover,
|
|
212
|
+
&:focus {
|
|
212
213
|
@include colour.colour-font("font-dark");
|
|
213
214
|
}
|
|
214
215
|
}
|
|
215
216
|
|
|
216
217
|
.tna-template--system-theme .tna-background-accent-light &--accent {
|
|
217
|
-
// @include colour.contrast;
|
|
218
|
-
|
|
219
218
|
@include colour.colour-background("contrast-button-background");
|
|
220
219
|
|
|
221
220
|
@include colour.colour-border("contrast-button-background");
|
|
@@ -226,7 +225,8 @@ $button-border-width: 4px !default;
|
|
|
226
225
|
@include colour.colour-font("contrast-button-text");
|
|
227
226
|
}
|
|
228
227
|
|
|
229
|
-
&:hover
|
|
228
|
+
&:hover,
|
|
229
|
+
&:focus {
|
|
230
230
|
@include colour.colour-font("contrast-font-dark");
|
|
231
231
|
|
|
232
232
|
@include colour.colour-background("contrast-background");
|
|
@@ -235,7 +235,8 @@ $button-border-width: 4px !default;
|
|
|
235
235
|
}
|
|
236
236
|
|
|
237
237
|
@include colour.on-forced-colours {
|
|
238
|
-
&:hover
|
|
238
|
+
&:hover,
|
|
239
|
+
&:focus {
|
|
239
240
|
@include typography.interacted-text-decoration;
|
|
240
241
|
}
|
|
241
242
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tna-card{margin-top:32px}.tna-card:first-child{margin-top:0}.tna-card{display:flex;flex-direction:column;gap:16px;position:relative}.tna-card:not(:has(.tna-card__image-container)){padding-top:8px;border-top:5px var(--keyline-dark,
|
|
1
|
+
.tna-card{margin-top:32px}.tna-card:first-child{margin-top:0}.tna-card{display:flex;flex-direction:column;gap:16px;position:relative}.tna-card:not(:has(.tna-card__image-container)){padding-top:8px;border-top:5px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-card__heading{order:2}.tna-card--full-click{border-radius:.1px}.tna-card--full-click:hover{outline:1px var(--keyline, rgb(38 38 42/0.25)) solid;outline-offset:4px}.tna-card--full-click:focus,.tna-card--full-click:active{outline:none}.tna-card--full-click .tna-card__heading-link::before{content:"";position:absolute;inset:0;z-index:3;border-radius:.1px}.tna-card--full-click .tna-card__heading-link:focus-visible,.tna-card--full-click .tna-card__heading-link:active{outline:none}.tna-card--full-click .tna-card__heading-link:focus-visible::before,.tna-card--full-click .tna-card__heading-link:active::before{outline:5px var(--focus-outline, rgb(0, 176, 255)) solid;outline-offset:2px}.tna-card--full-click .tna-card__heading-link:active::before{outline-offset:0}.tna-card--full-click:not(:has(.tna-card__image-container)) .tna-card__heading-link::before{top:-5px}.tna-card__image-container{aspect-ratio:3/2;order:1;position:relative;background:linear-gradient(-45deg, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25));background-size:500% 500%;background-position:0 50%;animation:image-loader-background ease-in-out 1.2s infinite}.tna-card__image{position:absolute;inset:0;z-index:1}.tna-card__image img{width:100%;height:100%;object-fit:cover}.tna-card__image-label{position:absolute;top:8px;left:8px;z-index:2}.tna-card__body{order:3;display:flex;flex-direction:column;gap:16px}.tna-card__body>*{margin-top:0}.tna-card__actions{display:flex;gap:16px 32px}.tna-card__action{font-weight:700}.tna-card--padded{padding-bottom:16px}.tna-card--padded .tna-card__heading,.tna-card--padded .tna-card__body{padding-right:16px;padding-left:16px}@media(min-width: 48.0625em){.tna-card--horizontal{padding-bottom:0;display:grid;grid-template:min-content 1fr/50% 50%;grid-template-areas:"image header" "image body";gap:0}.tna-card--horizontal>*+*{margin-top:16px}.tna-card--horizontal>:first-child{padding-top:32px}.tna-card--horizontal>:last-child{padding-bottom:32px}.tna-card--horizontal.tna-card--flipped{grid-template-areas:"header image" "body image" "footer image"}.tna-card--horizontal .tna-card__heading,.tna-card--horizontal .tna-card__body{padding-right:32px;padding-left:32px}.tna-card--horizontal .tna-card__heading{grid-area:header}.tna-card--horizontal .tna-card__image-container{width:100%;height:100%;margin:0;padding:0;grid-area:image}.tna-card--horizontal .tna-card__body{grid-area:body}.tna-card--horizontal.tna-card--horizontal-small-image{grid-template-columns:min(10rem,25%) 1fr}.tna-card--horizontal.tna-card--horizontal-small-image.tna-card--flipped{grid-template-columns:1fr min(10rem,25%)}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-card--horizontal-on-small{padding-bottom:0;display:grid;grid-template:min-content 1fr/50% 50%;grid-template-areas:"image header" "image body";gap:0}.tna-card--horizontal-on-small>*+*{margin-top:16px}.tna-card--horizontal-on-small>:first-child{padding-top:16px}.tna-card--horizontal-on-small>:last-child{padding-bottom:16px}.tna-card--horizontal-on-small.tna-card--flipped{grid-template-areas:"header image" "body image" "footer image"}.tna-card--horizontal-on-small .tna-card__heading,.tna-card--horizontal-on-small .tna-card__body{padding-right:16px;padding-left:16px}.tna-card--horizontal-on-small .tna-card__heading{grid-area:header}.tna-card--horizontal-on-small .tna-card__image-container{width:100%;height:100%;margin:0;padding:0;grid-area:image}.tna-card--horizontal-on-small .tna-card__body{grid-area:body}.tna-card--horizontal-on-small.tna-card--horizontal-small-image{grid-template-columns:min(10rem,25%) 1fr}.tna-card--horizontal-on-small.tna-card--horizontal-small-image.tna-card--flipped{grid-template-columns:1fr min(10rem,25%)}}@media(prefers-contrast: more){.tna-card{border:1px var(--keyline-dark, rgb(38, 38, 42)) solid}}/*# sourceMappingURL=card.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/card/card.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAUA,UACE,gBAEA,sBACE,aC+CJ,UAGE,aACA,sBACA,SAEA,kBAEA,gDACE,kEAKF,mBACE,QAIA,sDACE,WAEA,kBACA,QACA,UAIJ,2BACE,iBAEA,QAEA,kBCyYA,wGAMA,0BACA,0BAEA,4DD7YF,iBACE,kBACA,QACA,UAEA,qBACE,WACA,YAEA,iBAIJ,uBACE,kBACA,QACA,SACA,UAGF,gBACE,QAEA,aACA,sBAEA,SAEA,kBACE,aAIJ,mBACE,aACA,cAGF,kBEnHA,YCYsB,IH2GtB,kBACE,oBAGF,uEAEE,mBACA,kBIrFF,6BJzDA,sBACE,iBAEA,aACA,sCACA,oBACE,4BAEF,MAEA,0BACE,gBAGF,mCACE,iBAGF,kCACE,oBAIJ,wCACE,oBACE,2CAKJ,+EAEE,mBACA,kBAGF,yCACE,iBAGF,iDACE,WACA,YACA,SACA,UAEA,gBAGF,sCACE,eAkGA,uDACE,yCAGF,yEACE,0CI5GJ,kDJ7CA,+BACE,iBAEA,aACA,sCACA,oBACE,4BAEF,MAEA,mCACE,gBAGF,4CACE,iBAGF,2CACE,oBAIJ,iDACE,oBACE,2CAKJ,iGAEE,mBACA,kBAGF,kDACE,iBAGF,0DACE,WACA,YACA,SACA,UAEA,gBAGF,+CACE,eA8GA,gEACE,yCAGF,kFACE,0CCqSJ,+BDpZF,UCoBM","file":"card.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n margin-top: space(2);\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n@mixin horizontal-card-layout($modifierClass, $innerPaddingAmount) {\n &#{$modifierClass} {\n padding-bottom: 0;\n\n display: grid;\n grid-template: min-content 1fr / 50% 50%;\n grid-template-areas:\n \"image header\"\n \"image body\";\n gap: 0;\n\n > * + * {\n margin-top: spacing.space(1);\n }\n\n > :first-child {\n padding-top: spacing.space($innerPaddingAmount);\n }\n\n > :last-child {\n padding-bottom: spacing.space($innerPaddingAmount);\n }\n }\n\n &#{$modifierClass}#{&}--flipped {\n grid-template-areas:\n \"header image\"\n \"body image\"\n \"footer image\";\n }\n\n &#{$modifierClass} &__heading,\n &#{$modifierClass} &__body {\n padding-right: spacing.space($innerPaddingAmount);\n padding-left: spacing.space($innerPaddingAmount);\n }\n\n &#{$modifierClass} &__heading {\n grid-area: header;\n }\n\n &#{$modifierClass} &__image-container {\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n\n grid-area: image;\n }\n\n &#{$modifierClass} &__body {\n grid-area: body;\n }\n}\n\n.tna-card {\n @include spacing.space-above;\n\n display: flex;\n flex-direction: column;\n gap: spacing.space(1);\n\n position: relative;\n\n &:not(:has(&__image-container)) {\n padding-top: spacing.space(0.5);\n\n @include colour.thick-keyline-dark(top);\n }\n\n &__heading {\n order: 2;\n }\n\n &--full-click &__heading-link {\n &::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n z-index: 3;\n }\n }\n\n &__image-container {\n aspect-ratio: 3/2;\n\n order: 1;\n\n position: relative;\n\n @include colour.image-loader-background;\n }\n\n &__image {\n position: absolute;\n inset: 0;\n z-index: 1;\n\n img {\n width: 100%;\n height: 100%;\n\n object-fit: cover;\n }\n }\n\n &__image-label {\n position: absolute;\n top: spacing.space(0.5);\n left: spacing.space(0.5);\n z-index: 2;\n }\n\n &__body {\n order: 3;\n\n display: flex;\n flex-direction: column;\n\n gap: spacing.space(1);\n\n > * {\n margin-top: 0;\n }\n }\n\n &__actions {\n display: flex;\n gap: spacing.space(1) spacing.space(2);\n }\n\n &__action {\n @include typography.main-font-weight-bold;\n }\n\n &--padded {\n padding-bottom: spacing.space(1);\n }\n\n &--padded &__heading,\n &--padded &__body {\n padding-right: spacing.space(1);\n padding-left: spacing.space(1);\n }\n\n @include media.on-larger-than-mobile {\n @include horizontal-card-layout(\"--horizontal\", 2);\n\n &--horizontal#{&}--horizontal-small-image {\n grid-template-columns: min(10rem, 25%) 1fr;\n }\n\n &--horizontal#{&}--horizontal-small-image#{&}--flipped {\n grid-template-columns: 1fr min(10rem, 25%);\n }\n }\n\n @include media.on-small {\n @include horizontal-card-layout(\"--horizontal-on-small\", 1);\n\n &--horizontal-on-small#{&}--horizontal-small-image {\n grid-template-columns: min(10rem, 25%) 1fr;\n }\n\n &--horizontal-on-small#{&}--horizontal-small-image#{&}--flipped {\n grid-template-columns: 1fr min(10rem, 25%);\n }\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\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 }\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 }\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 }\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 }\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($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, 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($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width transparent solid;\n } @else {\n border: borders.$thick-border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\n \"form-error-border\",\n \"focus-outline\"\n );\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-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\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-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\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%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n // @include colour-font(\"font-base\");\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-list-marker: var(--accent-font-base);\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-list-marker: var(--font-base);\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-list-marker: var(--accent-font-base);\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-list-marker: var(--accent-font-base);\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-list-marker: #{colour.brand-colour(\"brown\")} !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.45)} !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(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !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.45)} !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-list-marker: #{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(\"pink\")} !important;\n --accent-list-marker: #{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(\"orange\")} !important;\n --accent-list-marker: #{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(\"green\")} !important;\n --accent-list-marker: #{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(\"blue\")} !important;\n --accent-list-marker: #{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@mixin image-loader-background {\n @if not features.$disable-image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(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}\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-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\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 interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\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","/*\n * ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n */\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/*\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n */\n$use-local-fonts: false !default;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/*\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n */\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/*\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\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"]}
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/card/card.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_a11y.scss","../../../../src/nationalarchives/variables/_a11y.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAUA,UACE,gBAEA,sBACE,aCkDJ,UAGE,aACA,sBACA,SAEA,kBAEA,gDACE,gBCHE,0DDQJ,mBACE,QAGF,sBACE,mBAEA,4BCWA,qDDTE,mBAGF,yDAEE,aAKF,sDACE,WAEA,kBACA,QACA,UAEA,mBAGF,iHAEE,aAEA,iICfF,yDCpFF,eCZqB,IHqHjB,6DErGJ,iBF4GE,4FACE,SAIJ,2BACE,iBAEA,QAEA,kBCiWA,wGAMA,0BACA,0BAEA,4DDrWF,iBACE,kBACA,QACA,UAEA,qBACE,WACA,YAEA,iBAIJ,uBACE,kBACA,QACA,SACA,UAGF,gBACE,QAEA,aACA,sBAEA,SAEA,kBACE,aAIJ,mBACE,aACA,cAGF,kBI3JA,YCYsB,ILmJtB,kBACE,oBAGF,uEAEE,mBACA,kBM7HF,6BNtDA,sBACE,iBAEA,aACA,sCACA,oBACE,4BAEF,MAEA,0BACE,gBAGF,mCACE,iBAGF,kCACE,oBAIJ,wCACE,oBACE,2CAKJ,+EAEE,mBACA,kBAGF,yCACE,iBAGF,iDACE,WACA,YACA,SACA,UAEA,gBAGF,sCACE,eAuIA,uDACE,yCAGF,yEACE,0CMpJJ,kDN1CA,+BACE,iBAEA,aACA,sCACA,oBACE,4BAEF,MAEA,mCACE,gBAGF,4CACE,iBAGF,2CACE,oBAIJ,iDACE,oBACE,2CAKJ,iGAEE,mBACA,kBAGF,kDACE,iBAGF,0DACE,WACA,YACA,SACA,UAEA,gBAGF,+CACE,eAmJA,gEACE,yCAGF,kFACE,0CC6PJ,+BDjZF,UCiBM","file":"card.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n margin-top: space(2);\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"sass:math\";\n@use \"../../variables/a11y\" as a11yVariables;\n@use \"../../variables/borders\";\n@use \"../../tools/a11y\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n@mixin horizontal-card-layout($modifierClass, $innerPaddingAmount) {\n &#{$modifierClass} {\n padding-bottom: 0;\n\n display: grid;\n grid-template: min-content 1fr / 50% 50%;\n grid-template-areas:\n \"image header\"\n \"image body\";\n gap: 0;\n\n > * + * {\n margin-top: spacing.space(1);\n }\n\n > :first-child {\n padding-top: spacing.space($innerPaddingAmount);\n }\n\n > :last-child {\n padding-bottom: spacing.space($innerPaddingAmount);\n }\n }\n\n &#{$modifierClass}#{&}--flipped {\n grid-template-areas:\n \"header image\"\n \"body image\"\n \"footer image\";\n }\n\n &#{$modifierClass} &__heading,\n &#{$modifierClass} &__body {\n padding-right: spacing.space($innerPaddingAmount);\n padding-left: spacing.space($innerPaddingAmount);\n }\n\n &#{$modifierClass} &__heading {\n grid-area: header;\n }\n\n &#{$modifierClass} &__image-container {\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n\n grid-area: image;\n }\n\n &#{$modifierClass} &__body {\n grid-area: body;\n }\n}\n\n.tna-card {\n @include spacing.space-above;\n\n display: flex;\n flex-direction: column;\n gap: spacing.space(1);\n\n position: relative;\n\n &:not(:has(&__image-container)) {\n padding-top: spacing.space(0.5);\n\n @include colour.thick-keyline-dark(top);\n }\n\n &__heading {\n order: 2;\n }\n\n &--full-click {\n border-radius: 0.1px;\n\n &:hover {\n @include colour.colour-outline(\"keyline\", 1px, solid);\n outline-offset: a11yVariables.$focus-outline-width - 1px;\n }\n\n &:focus,\n &:active {\n outline: none;\n }\n }\n\n &--full-click &__heading-link {\n &::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n z-index: 3;\n\n border-radius: 0.1px;\n }\n\n &:focus-visible,\n &:active {\n outline: none;\n\n &::before {\n @include a11y.focus-outline;\n }\n }\n\n &:active {\n &::before {\n @include a11y.active-outline;\n }\n }\n }\n\n &--full-click:not(:has(&__image-container)) &__heading-link {\n &::before {\n top: -#{borders.$thick-border-width};\n }\n }\n\n &__image-container {\n aspect-ratio: 3/2;\n\n order: 1;\n\n position: relative;\n\n @include colour.image-loader-background;\n }\n\n &__image {\n position: absolute;\n inset: 0;\n z-index: 1;\n\n img {\n width: 100%;\n height: 100%;\n\n object-fit: cover;\n }\n }\n\n &__image-label {\n position: absolute;\n top: spacing.space(0.5);\n left: spacing.space(0.5);\n z-index: 2;\n }\n\n &__body {\n order: 3;\n\n display: flex;\n flex-direction: column;\n\n gap: spacing.space(1);\n\n > * {\n margin-top: 0;\n }\n }\n\n &__actions {\n display: flex;\n gap: spacing.space(1) spacing.space(2);\n }\n\n &__action {\n @include typography.main-font-weight-bold;\n }\n\n &--padded {\n padding-bottom: spacing.space(1);\n }\n\n &--padded &__heading,\n &--padded &__body {\n padding-right: spacing.space(1);\n padding-left: spacing.space(1);\n }\n\n @include media.on-larger-than-mobile {\n @include horizontal-card-layout(\"--horizontal\", 2);\n\n &--horizontal#{&}--horizontal-small-image {\n grid-template-columns: min(10rem, 25%) 1fr;\n }\n\n &--horizontal#{&}--horizontal-small-image#{&}--flipped {\n grid-template-columns: 1fr min(10rem, 25%);\n }\n }\n\n @include media.on-small {\n @include horizontal-card-layout(\"--horizontal-on-small\", 1);\n\n &--horizontal-on-small#{&}--horizontal-small-image {\n grid-template-columns: min(10rem, 25%) 1fr;\n }\n\n &--horizontal-on-small#{&}--horizontal-small-image#{&}--flipped {\n grid-template-columns: 1fr min(10rem, 25%);\n }\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\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 }\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 }\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 }\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 }\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($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, 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($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width transparent solid;\n } @else {\n border: borders.$thick-border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\n \"form-error-border\",\n \"focus-outline\"\n );\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-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\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-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\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%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n // @include colour-font(\"font-base\");\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-list-marker: var(--accent-font-base);\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-list-marker: var(--font-base);\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-list-marker: var(--accent-font-base);\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-list-marker: var(--accent-font-base);\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-list-marker: #{colour.brand-colour(\"brown\")} !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.45)} !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(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !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.45)} !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-list-marker: #{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(\"pink\")} !important;\n --accent-list-marker: #{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(\"orange\")} !important;\n --accent-list-marker: #{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(\"green\")} !important;\n --accent-list-marker: #{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(\"blue\")} !important;\n --accent-list-marker: #{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@mixin image-loader-background {\n @if not features.$disable-image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(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}\n","@use \"../variables/a11y\";\n@use \"colour\";\n\n@mixin focus-outline-without-offset {\n @include colour.colour-outline(\n \"focus-outline\",\n a11y.$focus-outline-width,\n solid\n );\n}\n\n@mixin focus-outline {\n @include focus-outline-without-offset;\n outline-offset: a11y.$focus-outline-offset;\n}\n\n@mixin active-outline {\n outline-offset: 0;\n}\n\n@mixin no-focus-outline-on-click {\n .tna-template--clicked &:focus {\n outline: none;\n }\n}\n","$focus-outline-width: 5px !default;\n$focus-outline-offset: 2px !default;\n$focus-outline-padding: $focus-outline-width + $focus-outline-offset;\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-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\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 interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\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","/*\n * ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n */\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/*\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n */\n$use-local-fonts: false !default;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/*\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n */\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/*\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\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"]}
|