@nationalarchives/frontend 0.1.52 → 0.1.54
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/nationalarchives/all.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 +7 -0
- package/nationalarchives/analytics.js +1 -1
- package/nationalarchives/analytics.js.map +1 -1
- package/nationalarchives/analytics.mjs +4 -4
- package/nationalarchives/assets/fonts/OpenSans-SemiBold.ttf +0 -0
- package/nationalarchives/components/breadcrumbs/breadcrumbs.css +1 -1
- package/nationalarchives/components/breadcrumbs/breadcrumbs.css.map +1 -1
- package/nationalarchives/components/breadcrumbs/breadcrumbs.scss +9 -8
- package/nationalarchives/components/button/button-group.stories.js +0 -8
- package/nationalarchives/components/button/button.css +1 -1
- package/nationalarchives/components/button/button.css.map +1 -1
- package/nationalarchives/components/button/button.scss +12 -6
- package/nationalarchives/components/button/fixtures.json +76 -0
- package/nationalarchives/components/card/card.css +1 -1
- package/nationalarchives/components/card/card.css.map +1 -1
- package/nationalarchives/components/card/card.scss +1 -1
- package/nationalarchives/components/card/fixtures.json +24 -24
- package/nationalarchives/components/card/macro-options.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 -2
- package/nationalarchives/components/compound-filters/compound-filters.css +1 -1
- package/nationalarchives/components/compound-filters/compound-filters.css.map +1 -1
- package/nationalarchives/components/compound-filters/compound-filters.scss +10 -6
- package/nationalarchives/components/cookie-banner/README.md +6 -2
- package/nationalarchives/components/cookie-banner/cookie-banner.css.map +1 -1
- package/nationalarchives/components/cookie-banner/cookie-banner.js +1 -1
- package/nationalarchives/components/cookie-banner/cookie-banner.js.map +1 -1
- package/nationalarchives/components/cookie-banner/cookie-banner.mjs +2 -1
- package/nationalarchives/components/cookie-banner/cookie-banner.stories.js +7 -8
- 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/date-search/date-search.scss +2 -0
- package/nationalarchives/components/error-summary/error-summary.css +1 -1
- package/nationalarchives/components/error-summary/error-summary.css.map +1 -1
- package/nationalarchives/components/featured-records/featured-records.css +1 -1
- package/nationalarchives/components/featured-records/featured-records.css.map +1 -1
- package/nationalarchives/components/featured-records/featured-records.scss +5 -3
- package/nationalarchives/components/footer/analytics.js +8 -0
- package/nationalarchives/components/footer/fixtures.json +9 -2
- package/nationalarchives/components/footer/footer.css +1 -1
- package/nationalarchives/components/footer/footer.css.map +1 -1
- package/nationalarchives/components/footer/footer.js +2 -0
- package/nationalarchives/components/footer/footer.js.map +1 -0
- package/nationalarchives/components/footer/footer.mjs +87 -0
- package/nationalarchives/components/footer/footer.scss +28 -8
- package/nationalarchives/components/footer/footer.stories.js +62 -3
- package/nationalarchives/components/footer/template.njk +168 -120
- package/nationalarchives/components/gallery/gallery.css +1 -1
- package/nationalarchives/components/gallery/gallery.css.map +1 -1
- package/nationalarchives/components/gallery/gallery.scss +2 -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/global-header/global-header.scss +13 -10
- package/nationalarchives/components/grid/grid.css +1 -1
- package/nationalarchives/components/grid/grid.css.map +1 -1
- package/nationalarchives/components/grid/grid.scss +3 -3
- package/nationalarchives/components/header/header.css +1 -1
- package/nationalarchives/components/header/header.css.map +1 -1
- package/nationalarchives/components/header/header.scss +17 -15
- package/nationalarchives/components/hero/fixtures.json +106 -18
- package/nationalarchives/components/hero/hero.css +1 -1
- package/nationalarchives/components/hero/hero.css.map +1 -1
- package/nationalarchives/components/hero/hero.scss +78 -19
- package/nationalarchives/components/hero/hero.stories.js +60 -32
- package/nationalarchives/components/hero/macro-options.json +34 -3
- package/nationalarchives/components/hero/template.njk +27 -6
- package/nationalarchives/components/index-grid/index-grid.css +1 -1
- package/nationalarchives/components/index-grid/index-grid.css.map +1 -1
- package/nationalarchives/components/index-grid/macro-options.json +1 -1
- package/nationalarchives/components/pagination/pagination.css +1 -1
- package/nationalarchives/components/pagination/pagination.css.map +1 -1
- package/nationalarchives/components/pagination/pagination.scss +2 -2
- package/nationalarchives/components/phase-banner/phase-banner.css.map +1 -1
- package/nationalarchives/components/picture/picture.css +1 -1
- package/nationalarchives/components/picture/picture.css.map +1 -1
- package/nationalarchives/components/picture/picture.scss +5 -1
- package/nationalarchives/components/quick-filters/quick-filters.css +1 -1
- package/nationalarchives/components/quick-filters/quick-filters.css.map +1 -1
- package/nationalarchives/components/quick-filters/quick-filters.scss +4 -2
- package/nationalarchives/components/radios/radios.css +1 -1
- package/nationalarchives/components/radios/radios.css.map +1 -1
- package/nationalarchives/components/radios/radios.scss +3 -2
- package/nationalarchives/components/search-field/search-field.css +1 -1
- package/nationalarchives/components/search-field/search-field.css.map +1 -1
- package/nationalarchives/components/search-filters/search-filters.css +1 -1
- package/nationalarchives/components/search-filters/search-filters.css.map +1 -1
- package/nationalarchives/components/search-filters/search-filters.scss +7 -6
- package/nationalarchives/components/select/select.css +1 -1
- package/nationalarchives/components/select/select.css.map +1 -1
- package/nationalarchives/components/sensitive-image/sensitive-image.css +1 -1
- package/nationalarchives/components/sensitive-image/sensitive-image.css.map +1 -1
- package/nationalarchives/components/sensitive-image/sensitive-image.scss +7 -6
- package/nationalarchives/components/skip-link/skip-link.css +1 -1
- package/nationalarchives/components/skip-link/skip-link.css.map +1 -1
- package/nationalarchives/components/skip-link/skip-link.scss +4 -4
- package/nationalarchives/components/tabs/tabs.css +1 -1
- package/nationalarchives/components/tabs/tabs.css.map +1 -1
- package/nationalarchives/components/tabs/tabs.scss +8 -6
- 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/textarea/textarea.scss +7 -4
- package/nationalarchives/components/warning/warning.css +1 -1
- package/nationalarchives/components/warning/warning.css.map +1 -1
- package/nationalarchives/components/warning/warning.scss +7 -5
- package/nationalarchives/global-header-package.css +1 -1
- package/nationalarchives/global-header-package.css.map +1 -1
- package/nationalarchives/lib/cookies.mjs +21 -4
- package/nationalarchives/lib/functions.css +1 -0
- package/nationalarchives/lib/functions.css.map +1 -0
- package/nationalarchives/lib/functions.scss +16 -0
- package/nationalarchives/prototype-kit.css +1 -1
- package/nationalarchives/prototype-kit.css.map +1 -1
- package/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js +6 -2
- package/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js +2 -1
- package/nationalarchives/templates/fixtures.json +27 -4
- package/nationalarchives/templates/layouts/_generic.njk +15 -15
- package/nationalarchives/tools/_colour.scss +3 -3
- package/nationalarchives/tools/_typography.scss +8 -9
- package/nationalarchives/utilities/_a11y.scss +4 -4
- package/nationalarchives/utilities/_debug.scss +2 -2
- package/nationalarchives/utilities/_global.scss +8 -0
- package/nationalarchives/utilities/_imports.scss +57 -0
- package/nationalarchives/utilities/_index.scss +1 -0
- package/nationalarchives/utilities/_lists.scss +36 -19
- package/nationalarchives/utilities/_tables.scss +8 -8
- package/nationalarchives/utilities/_typography.scss +6 -42
- package/nationalarchives/variables/_colour.scss +7 -2
- package/nationalarchives/variables/_typography.scss +55 -4
- package/package.json +21 -20
- package/nationalarchives/assets/fonts/OpenSans-Italic.ttf +0 -0
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"headingLevel": 3,
|
|
9
9
|
"body": "<p>Card body</p>"
|
|
10
10
|
},
|
|
11
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"
|
|
11
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
12
12
|
},
|
|
13
13
|
{
|
|
14
14
|
"name": "with supertitle",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"headingSize": "xl",
|
|
29
29
|
"body": "<p>Card body</p>"
|
|
30
30
|
},
|
|
31
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"
|
|
31
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-xl tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
32
32
|
},
|
|
33
33
|
{
|
|
34
34
|
"name": "heading level",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"headingLevel": 1,
|
|
38
38
|
"body": "<p>Card body</p>"
|
|
39
39
|
},
|
|
40
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h1 class=\"
|
|
40
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h1 class=\"tna-heading-s tna-card__heading\">Card title</h1><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
41
41
|
},
|
|
42
42
|
{
|
|
43
43
|
"name": "with link",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"href": "#",
|
|
48
48
|
"body": "<p>Card body</p>"
|
|
49
49
|
},
|
|
50
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"
|
|
50
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
"name": "with meta",
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
],
|
|
71
71
|
"body": "<p>Card body</p>"
|
|
72
72
|
},
|
|
73
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"
|
|
73
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><ul class=\"tna-card__meta tna-chip-list\"><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-calendar\" aria-hidden=\"true\"></i>24th September 2023</div></li><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-ticket\" aria-hidden=\"true\"></i>From £16</div></li><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-location-dot\" aria-hidden=\"true\"></i>Online</div></li></ul><p>Card body</p></div></div></div>"
|
|
74
74
|
},
|
|
75
75
|
{
|
|
76
76
|
"name": "with text",
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"headingLevel": 3,
|
|
80
80
|
"text": "Card body"
|
|
81
81
|
},
|
|
82
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"
|
|
82
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
83
83
|
},
|
|
84
84
|
{
|
|
85
85
|
"name": "with image",
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
"imageHeight": 360,
|
|
93
93
|
"body": "<p>Card body</p>"
|
|
94
94
|
},
|
|
95
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"
|
|
95
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
96
96
|
},
|
|
97
97
|
{
|
|
98
98
|
"name": "with image and alternative sources",
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
],
|
|
112
112
|
"body": "<p>Card body</p>"
|
|
113
113
|
},
|
|
114
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"
|
|
114
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"640\" height=\"360\"><source srcset=\"https://loremflickr.com/640/360\" type=\"image/jpeg\" width=\"640\" height=\"360\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
115
115
|
},
|
|
116
116
|
{
|
|
117
117
|
"name": "with link and image",
|
|
@@ -125,7 +125,7 @@
|
|
|
125
125
|
"href": "#",
|
|
126
126
|
"body": "<p>Card body</p>"
|
|
127
127
|
},
|
|
128
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"
|
|
128
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><a href=\"#\" class=\"tna-card__image-container\" tabindex=\"-1\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></a><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
129
129
|
},
|
|
130
130
|
{
|
|
131
131
|
"name": "with actions",
|
|
@@ -140,7 +140,7 @@
|
|
|
140
140
|
}
|
|
141
141
|
]
|
|
142
142
|
},
|
|
143
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"
|
|
143
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\">Card action</a></div></div></div>"
|
|
144
144
|
},
|
|
145
145
|
{
|
|
146
146
|
"name": "with actions with titles",
|
|
@@ -156,7 +156,7 @@
|
|
|
156
156
|
}
|
|
157
157
|
]
|
|
158
158
|
},
|
|
159
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"
|
|
159
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" title=\"Go and do the action\">Card action</a></div></div></div>"
|
|
160
160
|
},
|
|
161
161
|
{
|
|
162
162
|
"name": "with actions with classes",
|
|
@@ -172,7 +172,7 @@
|
|
|
172
172
|
}
|
|
173
173
|
]
|
|
174
174
|
},
|
|
175
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"
|
|
175
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action card__test-class\">Card action</a></div></div></div>"
|
|
176
176
|
},
|
|
177
177
|
{
|
|
178
178
|
"name": "with actions with attributes",
|
|
@@ -190,7 +190,7 @@
|
|
|
190
190
|
}
|
|
191
191
|
]
|
|
192
192
|
},
|
|
193
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"
|
|
193
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" data-testattribute=\"foobar\">Card action</a></div></div></div>"
|
|
194
194
|
},
|
|
195
195
|
{
|
|
196
196
|
"name": "with a label",
|
|
@@ -204,7 +204,7 @@
|
|
|
204
204
|
"label": "New",
|
|
205
205
|
"body": "<p>Card body</p>"
|
|
206
206
|
},
|
|
207
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"
|
|
207
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture><div class=\"tna-chip tna-card__image-label\">New</div></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
208
208
|
},
|
|
209
209
|
{
|
|
210
210
|
"name": "with a coloured label",
|
|
@@ -219,7 +219,7 @@
|
|
|
219
219
|
"labelColour": "green",
|
|
220
220
|
"body": "<p>Card body</p>"
|
|
221
221
|
},
|
|
222
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"
|
|
222
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture><div class=\"tna-chip tna-chip--green tna-card__image-label\">New</div></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
223
223
|
},
|
|
224
224
|
{
|
|
225
225
|
"name": "with a contrast style",
|
|
@@ -229,7 +229,7 @@
|
|
|
229
229
|
"body": "<p>Card body</p>",
|
|
230
230
|
"style": "contrast"
|
|
231
231
|
},
|
|
232
|
-
"html": "<div class=\"tna-card tna-card--contrast\"><div class=\"tna-card__inner\"><h3 class=\"
|
|
232
|
+
"html": "<div class=\"tna-card tna-card--contrast\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
233
233
|
},
|
|
234
234
|
{
|
|
235
235
|
"name": "with a tint style",
|
|
@@ -239,7 +239,7 @@
|
|
|
239
239
|
"body": "<p>Card body</p>",
|
|
240
240
|
"style": "tint"
|
|
241
241
|
},
|
|
242
|
-
"html": "<div class=\"tna-card tna-card--tint\"><div class=\"tna-card__inner\"><h3 class=\"
|
|
242
|
+
"html": "<div class=\"tna-card tna-card--tint\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
243
243
|
},
|
|
244
244
|
{
|
|
245
245
|
"name": "with a accent style",
|
|
@@ -249,7 +249,7 @@
|
|
|
249
249
|
"body": "<p>Card body</p>",
|
|
250
250
|
"style": "accent"
|
|
251
251
|
},
|
|
252
|
-
"html": "<div class=\"tna-card tna-card--accent\"><div class=\"tna-card__inner\"><h3 class=\"
|
|
252
|
+
"html": "<div class=\"tna-card tna-card--accent\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
253
253
|
},
|
|
254
254
|
{
|
|
255
255
|
"name": "with an unknown style",
|
|
@@ -259,7 +259,7 @@
|
|
|
259
259
|
"body": "<p>Card body</p>",
|
|
260
260
|
"style": "foobar"
|
|
261
261
|
},
|
|
262
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"
|
|
262
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
263
263
|
},
|
|
264
264
|
{
|
|
265
265
|
"name": "horizontal card",
|
|
@@ -269,7 +269,7 @@
|
|
|
269
269
|
"body": "<p>Card body</p>",
|
|
270
270
|
"horizontal": true
|
|
271
271
|
},
|
|
272
|
-
"html": "<div class=\"tna-card tna-card--horizontal\"><div class=\"tna-card__inner\"><h3 class=\"
|
|
272
|
+
"html": "<div class=\"tna-card tna-card--horizontal\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
273
273
|
},
|
|
274
274
|
{
|
|
275
275
|
"name": "with classes for href items",
|
|
@@ -280,7 +280,7 @@
|
|
|
280
280
|
"body": "<p>Card body</p>",
|
|
281
281
|
"hrefClasses": "card__test-class"
|
|
282
282
|
},
|
|
283
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"
|
|
283
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link card__test-class\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
284
284
|
},
|
|
285
285
|
{
|
|
286
286
|
"name": "with attributes for href items",
|
|
@@ -293,7 +293,7 @@
|
|
|
293
293
|
"data-testattribute": "foobar"
|
|
294
294
|
}
|
|
295
295
|
},
|
|
296
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"
|
|
296
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\" data-testattribute=\"foobar\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
297
297
|
},
|
|
298
298
|
{
|
|
299
299
|
"name": "with classes",
|
|
@@ -303,7 +303,7 @@
|
|
|
303
303
|
"body": "<p>Card body</p>",
|
|
304
304
|
"classes": "card__test-class"
|
|
305
305
|
},
|
|
306
|
-
"html": "<div class=\"tna-card card__test-class\"><div class=\"tna-card__inner\"><h3 class=\"
|
|
306
|
+
"html": "<div class=\"tna-card card__test-class\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
307
307
|
},
|
|
308
308
|
{
|
|
309
309
|
"name": "with attributes",
|
|
@@ -315,7 +315,7 @@
|
|
|
315
315
|
"data-testattribute": "foobar"
|
|
316
316
|
}
|
|
317
317
|
},
|
|
318
|
-
"html": "<div class=\"tna-card\" data-testattribute=\"foobar\"><div class=\"tna-card__inner\"><h3 class=\"
|
|
318
|
+
"html": "<div class=\"tna-card\" data-testattribute=\"foobar\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
319
319
|
}
|
|
320
320
|
]
|
|
321
321
|
}
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
</h{{ params.headingLevel }}>
|
|
26
26
|
</hgroup>
|
|
27
27
|
{%- else %}
|
|
28
|
-
<h{{ params.headingLevel }} class="
|
|
28
|
+
<h{{ params.headingLevel }} class="tna-heading-{{ params.headingSize or 's' }} tna-card__heading">
|
|
29
29
|
{%- if params.href %}
|
|
30
30
|
<a href="{{ params.href }}" class="tna-card__heading-link{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ params.title }}</a>
|
|
31
31
|
{%- else %}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tna-checkboxes__item-label::before,.tna-checkboxes__item-label::after{--background: #f4f4f4;--background-tint: rgb(217, 217, 214);--font-base: #343338;--font-dark: rgb(1, 1, 1);--font-light: rgb(1 1 1/0.58);--icon-light: rgb(52 51 56/0.45);--link: #005fa3;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: rgb(140, 150, 148);--accent-background-light: #ededed;--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-checkboxes__item-label::before,.tna-checkboxes__item-label::after{--background: rgb(255, 255, 255);--background-tint:
|
|
1
|
+
.tna-checkboxes__item-label::before,.tna-checkboxes__item-label::after{--background: #f4f4f4;--background-tint: rgb(217, 217, 214);--font-base: #343338;--font-dark: rgb(1, 1, 1);--font-light: rgb(1 1 1/0.58);--icon-light: rgb(52 51 56/0.45);--link: #005fa3;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: rgb(140, 150, 148);--accent-background-light: #ededed;--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-checkboxes__item-label::before,.tna-checkboxes__item-label::after{--background: rgb(255, 255, 255);--background-tint: #f4f4f4;--font-base: rgb(1, 1, 1);--font-dark: rgb(1, 1, 1);--font-light: rgb(1, 1, 1);--icon-light: rgb(1 1 1/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(1, 1, 1);--keyline-dark: rgb(1, 1, 1);--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(1, 1, 1);--contrast-font-dark: rgb(1, 1, 1);--contrast-font-light: rgb(1, 1, 1);--contrast-icon-light: rgb(1 1 1/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(1, 1, 1);--contrast-keyline-dark: rgb(1, 1, 1);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(1, 1, 1);--contrast-button-hover-text: rgb(1, 1, 1);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: rgb(140, 150, 148);--accent-background-light: #ededed;--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}}.tna-checkboxes{display:flex;flex-direction:column;align-items:flex-start;gap:16px}.tna-checkboxes__item{position:relative}.tna-checkboxes__item input{width:1px;height:1px;margin:0;padding:0;position:absolute;top:-1px;left:-1px;opacity:0}.tna-checkboxes__item-label{padding-left:48px;display:block;line-height:2rem;cursor:pointer}.tna-checkboxes__item-label::before,.tna-checkboxes__item-label::after{content:"";width:2rem;position:absolute;top:0;left:0}.tna-checkboxes__item-label::before{height:2rem;display:block;box-sizing:border-box;z-index:1;background-color:var(--input-background, rgb(255, 255, 255));border:2px var(--input-border, rgb(1, 1, 1)) solid;border-radius:.1px}.tna-checkboxes__item-label::after{width:1.25rem;height:.5rem;margin-top:-0.1875rem;display:none;top:1rem;left:1rem;z-index:2;border:0 var(--input-background, rgb(255, 255, 255)) solid;border-width:0 0 .1875rem .1875rem;transform:translateX(-50%) translateY(-50%) rotate(-45deg)}.tna-checkboxes--small{gap:8px}.tna-checkboxes--small .tna-checkboxes__item-label{padding-left:36px;line-height:1.5rem}.tna-checkboxes--small .tna-checkboxes__item-label::before{width:1.5rem;height:1.5rem}.tna-checkboxes--small .tna-checkboxes__item-label::after{width:.825rem;height:.375rem;margin-top:-0.125rem;top:.75rem;left:.75rem}.tna-checkboxes--inline{flex-flow:row wrap;align-items:center;gap:16px 32px}@media(max-width: 30em){.tna-checkboxes--inline{flex-direction:column;align-items:flex-start}}.tna-checkboxes__item-label:active::before{outline:5px var(--focus-outline, rgb(0, 176, 255)) solid;outline-offset:2px;outline-offset:0}input:focus+.tna-checkboxes__item-label::before{outline:5px var(--focus-outline, rgb(0, 176, 255)) solid;outline-offset:2px}input:checked+.tna-checkboxes__item-label::before{background-color:var(--input-foreground, rgb(1, 1, 1))}input:checked+.tna-checkboxes__item-label::after{display:block}.tna-checkboxes--small .tna-checkboxes__item:hover .tna-checkboxes__item-label::before{box-shadow:0 0 0 .125rem var(--input-border)}/*# sourceMappingURL=checkboxes.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/checkboxes/checkboxes.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_a11y.scss","../../../../src/nationalarchives/variables/_a11y.scss"],"names":[],"mappings":"AA6JA,uEAhJM,2/CAmJJ,+BAHF,uEAhIM,87CCvBN,gBACE,aACA,sBACA,uBACA,SAEA,sBACE,kBAEA,4BACE,UACA,WACA,SACA,UAEA,kBACA,SACA,UAEA,UAGF,4BACE,kBAEA,cAEA,iBAEA,eAEA,uEAEE,WAEA,kBACA,MACA,OAIA,WAGF,oCACE,YAEA,cACA,sBAEA,UDRN,6DAiCI,mDCjBE,mBAGF,mCACE,cACA,aACA,sBAEA,aAEA,SACA,UACA,UDKF,2DCFE,mCAGA,2DAKN,uBACE,QAIA,mDACE,kBAEA,mBAEA,2DACE,aACA,cAGF,0DACE,cACA,eACA,qBAEA,WACA,YAKN,wBACE,mBACA,mBACA,cC1DF,wBDuDA,wBAMI,sBACA,wBAKF,2CD5BA,yDGxFF,eCRqB,IDYrB,iBFuHE,gDDnCA,yDGxFF,eCRqB,IHyInB,kDD1FF,uDC8FE,iDACE,cAKF,uFACE","file":"checkboxes.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\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@mixin colour-font($colour, $important: false) {\n color: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n 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 var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n var(--#{$colour}, #{map.get(colour.$colour-palette-default, $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\n var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n $style\n if($important, !important, null);\n } @else {\n outline-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-dark($direction) {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-accent($direction) {\n @include colour-border(\n \"accent-background\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-error($direction) {\n @include colour-border(\n \"form-error\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n border-#{$direction}: borders.$thick-border-width #{brand-colour($brandColour)}\n solid;\n}\n\n// Use light theme colours (except for \"form-error\")\n%light {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n// Remove accent and contrast values (except for \"form-error\")\n%plain {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark(\"form-error\");\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n @include colour-background(\"background\");\n}\n\n@mixin plain {\n @extend %plain;\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\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\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\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\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 }\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\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\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-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-accent-text: #{colour.brand-colour(\"black\")} !important;\n --button-accent-background: #{colour.brand-colour(\"yellow\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.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-accent-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 --button-accent-text: #{colour.brand-colour(\"black\")} !important;\n --button-accent-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %black-accent;\n @extend %accent-lighter-text;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %pink-accent;\n @extend %accent-lighter-text;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %orange-accent;\n @extend %accent-lighter-text;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %green-accent;\n @extend %accent-lighter-text;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %blue-accent;\n @extend %accent-lighter-text;\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","@use \"../../variables/forms\";\n@use \"../../tools/a11y\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n\n.tna-checkboxes {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: spacing.space(1);\n\n &__item {\n position: relative;\n\n input {\n width: 1px;\n height: 1px;\n margin: 0;\n padding: 0;\n\n position: absolute;\n top: -1px;\n left: -1px;\n\n opacity: 0;\n }\n\n &-label {\n padding-left: spacing.space(3);\n\n display: block;\n\n line-height: 2rem;\n\n cursor: pointer;\n\n &::before,\n &::after {\n width: 2rem;\n\n position: absolute;\n top: 0;\n left: 0;\n\n @include colour.light;\n\n content: \"\";\n }\n\n &::before {\n height: 2rem;\n\n display: block;\n box-sizing: border-box;\n\n z-index: 1;\n\n @include colour.colour-background(\"input-background\");\n\n @include colour.colour-border(\n \"input-border\",\n forms.$form-field-border-width\n );\n border-radius: 0.1px;\n }\n\n &::after {\n width: 1.25rem;\n height: 0.5rem;\n margin-top: -0.1875rem;\n\n display: none;\n\n top: 1rem;\n left: 1rem;\n z-index: 2;\n\n @include colour.colour-border(\"input-background\", 0, solid);\n border-width: 0 0 forms.$checkbox-checkmark-width\n forms.$checkbox-checkmark-width;\n\n transform: translateX(-50%) translateY(-50%) rotate(-45deg);\n }\n }\n }\n\n &--small {\n gap: spacing.space(0.5);\n }\n\n &--small &__item {\n &-label {\n padding-left: spacing.space(2.25);\n\n line-height: 1.5rem;\n\n &::before {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n &::after {\n width: 0.825rem;\n height: 0.375rem;\n margin-top: -0.125rem;\n\n top: 0.75rem;\n left: 0.75rem;\n }\n }\n }\n\n &--inline {\n flex-flow: row wrap;\n align-items: center;\n gap: spacing.space(1) spacing.space(2);\n\n @include media.on-tiny {\n flex-direction: column;\n align-items: flex-start;\n }\n }\n\n &__item-label:active {\n &::before {\n @include a11y.focus-outline;\n @include a11y.active-outline;\n }\n }\n\n input:focus + &__item-label {\n &::before {\n @include a11y.focus-outline;\n }\n }\n\n input:checked + &__item-label {\n &::before {\n @include colour.colour-background(\"input-foreground\");\n }\n\n &::after {\n display: block;\n }\n }\n\n &--small &__item:hover &__item-label {\n &::before {\n box-shadow: 0 0 0 0.125rem var(--input-border);\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"../variables/a11y\";\n@use \"colour\";\n\n@mixin focus-outline {\n @include colour.colour-outline(\n \"focus-outline\",\n a11y.$focus-outline-width,\n solid\n );\n outline-offset: a11y.$focus-outline-offset;\n}\n\n@mixin active-outline {\n outline-offset: 0;\n}\n","$focus-outline-width: 5px !default;\n$focus-outline-offset: 2px !default;\n"]}
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/checkboxes/checkboxes.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_a11y.scss","../../../../src/nationalarchives/variables/_a11y.scss"],"names":[],"mappings":"AA6JA,uEAhJM,2/CAmJJ,+BAHF,uEAhIM,66CCvBN,gBACE,aACA,sBACA,uBACA,SAEA,sBACE,kBAEA,4BACE,UACA,WACA,SACA,UAEA,kBACA,SACA,UAEA,UAGF,4BACE,kBAEA,cAEA,iBAEA,eAEA,uEAEE,WAEA,WAEA,kBACA,MACA,OAKF,oCACE,YAEA,cACA,sBAEA,UDRN,6DAiCI,mDCjBE,mBAGF,mCACE,cACA,aACA,sBAEA,aAEA,SACA,UACA,UDKF,2DCFE,mCAGA,2DAKN,uBACE,QAIA,mDACE,kBAEA,mBAEA,2DACE,aACA,cAGF,0DACE,cACA,eACA,qBAEA,WACA,YAKN,wBACE,mBAEA,mBACA,cC3DF,wBDuDA,wBAOI,sBACA,wBAKF,2CD7BA,yDGxFF,eCRqB,IDYrB,iBFwHE,gDDpCA,yDGxFF,eCRqB,IH0InB,kDD3FF,uDC+FE,iDACE,cAKF,uFACE","file":"checkboxes.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\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@mixin colour-font($colour, $important: false) {\n color: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n 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 var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n var(--#{$colour}, #{map.get(colour.$colour-palette-default, $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\n var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n $style\n if($important, !important, null);\n } @else {\n outline-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-dark($direction) {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-accent($direction) {\n @include colour-border(\n \"accent-background\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-error($direction) {\n @include colour-border(\n \"form-error\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n border-#{$direction}: borders.$thick-border-width #{brand-colour($brandColour)}\n solid;\n}\n\n// Use light theme colours (except for \"form-error\")\n%light {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n// Remove accent and contrast values (except for \"form-error\")\n%plain {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark(\"form-error\");\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n @include colour-background(\"background\");\n}\n\n@mixin plain {\n @extend %plain;\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\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\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\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\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 }\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\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\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-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-accent-text: #{colour.brand-colour(\"white\")} !important;\n --button-accent-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-accent-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 --button-accent-text: #{colour.brand-colour(\"black\")} !important;\n --button-accent-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %black-accent;\n @extend %accent-lighter-text;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %pink-accent;\n @extend %accent-lighter-text;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %orange-accent;\n @extend %accent-lighter-text;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %green-accent;\n @extend %accent-lighter-text;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %blue-accent;\n @extend %accent-lighter-text;\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","@use \"../../variables/forms\";\n@use \"../../tools/a11y\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n\n.tna-checkboxes {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: spacing.space(1);\n\n &__item {\n position: relative;\n\n input {\n width: 1px;\n height: 1px;\n margin: 0;\n padding: 0;\n\n position: absolute;\n top: -1px;\n left: -1px;\n\n opacity: 0;\n }\n\n &-label {\n padding-left: spacing.space(3);\n\n display: block;\n\n line-height: 2rem;\n\n cursor: pointer;\n\n &::before,\n &::after {\n content: \"\";\n\n width: 2rem;\n\n position: absolute;\n top: 0;\n left: 0;\n\n @include colour.light;\n }\n\n &::before {\n height: 2rem;\n\n display: block;\n box-sizing: border-box;\n\n z-index: 1;\n\n @include colour.colour-background(\"input-background\");\n\n @include colour.colour-border(\n \"input-border\",\n forms.$form-field-border-width\n );\n border-radius: 0.1px;\n }\n\n &::after {\n width: 1.25rem;\n height: 0.5rem;\n margin-top: -0.1875rem;\n\n display: none;\n\n top: 1rem;\n left: 1rem;\n z-index: 2;\n\n @include colour.colour-border(\"input-background\", 0, solid);\n border-width: 0 0 forms.$checkbox-checkmark-width\n forms.$checkbox-checkmark-width;\n\n transform: translateX(-50%) translateY(-50%) rotate(-45deg);\n }\n }\n }\n\n &--small {\n gap: spacing.space(0.5);\n }\n\n &--small &__item {\n &-label {\n padding-left: spacing.space(2.25);\n\n line-height: 1.5rem;\n\n &::before {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n &::after {\n width: 0.825rem;\n height: 0.375rem;\n margin-top: -0.125rem;\n\n top: 0.75rem;\n left: 0.75rem;\n }\n }\n }\n\n &--inline {\n flex-flow: row wrap;\n\n align-items: center;\n gap: spacing.space(1) spacing.space(2);\n\n @include media.on-tiny {\n flex-direction: column;\n align-items: flex-start;\n }\n }\n\n &__item-label:active {\n &::before {\n @include a11y.focus-outline;\n @include a11y.active-outline;\n }\n }\n\n input:focus + &__item-label {\n &::before {\n @include a11y.focus-outline;\n }\n }\n\n input:checked + &__item-label {\n &::before {\n @include colour.colour-background(\"input-foreground\");\n }\n\n &::after {\n display: block;\n }\n }\n\n &--small &__item:hover &__item-label {\n &::before {\n box-shadow: 0 0 0 0.125rem var(--input-border);\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"../variables/a11y\";\n@use \"colour\";\n\n@mixin focus-outline {\n @include colour.colour-outline(\n \"focus-outline\",\n a11y.$focus-outline-width,\n solid\n );\n outline-offset: a11y.$focus-outline-offset;\n}\n\n@mixin active-outline {\n outline-offset: 0;\n}\n","$focus-outline-width: 5px !default;\n$focus-outline-offset: 2px !default;\n"]}
|
|
@@ -37,6 +37,8 @@
|
|
|
37
37
|
|
|
38
38
|
&::before,
|
|
39
39
|
&::after {
|
|
40
|
+
content: "";
|
|
41
|
+
|
|
40
42
|
width: 2rem;
|
|
41
43
|
|
|
42
44
|
position: absolute;
|
|
@@ -44,8 +46,6 @@
|
|
|
44
46
|
left: 0;
|
|
45
47
|
|
|
46
48
|
@include colour.light;
|
|
47
|
-
|
|
48
|
-
content: "";
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
&::before {
|
|
@@ -113,6 +113,7 @@
|
|
|
113
113
|
|
|
114
114
|
&--inline {
|
|
115
115
|
flex-flow: row wrap;
|
|
116
|
+
|
|
116
117
|
align-items: center;
|
|
117
118
|
gap: spacing.space(1) spacing.space(2);
|
|
118
119
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tna-compound-filters__link:hover{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-compound-filters{margin-top:32px}.tna-compound-filters:first-child{margin-top:0}.tna-compound-filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;list-style:none}.tna-compound-filters__item{padding:0 2px 0 12px;display:flex;
|
|
1
|
+
.tna-compound-filters__link:hover{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-compound-filters{margin-top:32px}.tna-compound-filters:first-child{margin-top:0}.tna-compound-filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;list-style:none}.tna-compound-filters__item{padding:0 2px 0 12px;display:flex;align-items:center;gap:8px;line-height:1.75;border-radius:1rem;font-size:1rem;border:1px var(--keyline, rgb(38 38 42/0.25)) solid}.tna-compound-filters__item--remove{padding-right:0;padding-left:0;background:none;border:none;border-radius:0}.tna-compound-filters__link{width:1.5rem;height:1.5rem;position:relative;font-size:0;line-height:0;text-decoration:none;border-radius:100%}.tna-compound-filters__link::before,.tna-compound-filters__link::after{content:"";width:2px;height:1rem;margin-left:-1px;display:block;position:absolute;top:.25rem;left:50%;background-color:var(--font-base, #343338)}.tna-compound-filters__link::before{transform:rotate(45deg)}.tna-compound-filters__link::after{transform:rotate(-45deg)}/*# sourceMappingURL=compound-filters.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/compound-filters/compound-filters.scss","../../../../src/nationalarchives/tools/_typography.scss"],"names":[],"mappings":"AA0MA,kCACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAvKA,4CALA,gCCjCF,sBACE,gBAEA,kCACE,aCVJ,sBAGE,aACA,eACA,mBACA,cAEA,gBAEA,4BACE,qBAEA,aACA,QACA,mBCbF,eDgBE,iBF2DE,oDExDF,mBAEA,oCACE,gBACA,eAEA,gBACA,YACA,gBAIJ,4BACE,aACA,cAEA,kBAEA,qBACA,YACA,cAEA,mBAEA,uEAEE,UACA,YACA,iBAEA,cAEA,kBACA,WACA,SFXJ,2CEeI,WAGF,oCACE,wBAGF,mCACE","file":"compound-filters.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\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@mixin colour-font($colour, $important: false) {\n color: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n 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 var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n var(--#{$colour}, #{map.get(colour.$colour-palette-default, $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\n var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n $style\n if($important, !important, null);\n } @else {\n outline-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-dark($direction) {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-accent($direction) {\n @include colour-border(\n \"accent-background\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-error($direction) {\n @include colour-border(\n \"form-error\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n border-#{$direction}: borders.$thick-border-width #{brand-colour($brandColour)}\n solid;\n}\n\n// Use light theme colours (except for \"form-error\")\n%light {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n// Remove accent and contrast values (except for \"form-error\")\n%plain {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark(\"form-error\");\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n @include colour-background(\"background\");\n}\n\n@mixin plain {\n @extend %plain;\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\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\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\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\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 }\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\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\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-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-accent-text: #{colour.brand-colour(\"black\")} !important;\n --button-accent-background: #{colour.brand-colour(\"yellow\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.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-accent-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 --button-accent-text: #{colour.brand-colour(\"black\")} !important;\n --button-accent-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %black-accent;\n @extend %accent-lighter-text;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %pink-accent;\n @extend %accent-lighter-text;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %orange-accent;\n @extend %accent-lighter-text;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %green-accent;\n @extend %accent-lighter-text;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %blue-accent;\n @extend %accent-lighter-text;\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","@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/colour\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-compound-filters {\n @include spacing.space-above;\n\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: spacing.space(0.75) spacing.space(1);\n\n list-style: none;\n\n &__item {\n padding: 0 spacing.space(0.125) 0 spacing.space(0.75);\n\n display: flex;\n gap: spacing.space(0.5);\n align-items: center;\n\n @include typography.relative-font-size(16);\n line-height: 1.75;\n\n @include colour.colour-border(\"keyline\", 1px);\n border-radius: 1rem;\n\n &--remove {\n padding-right: 0;\n padding-left: 0;\n\n background: none;\n border: none;\n border-radius: 0;\n }\n }\n\n &__link {\n width: 1.5rem;\n height: 1.5rem;\n\n position: relative;\n\n text-decoration: none;\n font-size: 0;\n line-height: 0;\n\n border-radius: 100%;\n\n &::before,\n &::after {\n width: 2px;\n height: 1rem;\n margin-left: -1px;\n\n display: block;\n\n position: absolute;\n top: 0.25rem;\n left: 50%;\n\n @include colour.colour-background(\"font-base\");\n\n content: \"\";\n }\n\n &::before {\n transform: rotate(45deg);\n }\n\n &::after {\n transform: rotate(-45deg);\n }\n\n &:hover {\n @include colour.contrast;\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin relative-font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\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 @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n font-optical-sizing: auto;\n font-style: normal;\n font-variation-settings: \"wdth\" 100;\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 @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n font-optical-sizing: auto;\n font-style: normal;\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include relative-font-size(14);\n text-transform: uppercase;\n line-height: 1.1;\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 @include relative-font-size($font-size-default);\n line-height: $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\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include relative-font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include relative-font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include relative-font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include relative-font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include relative-font-size($font-size-medium);\n }\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/compound-filters/compound-filters.scss","../../../../src/nationalarchives/tools/_typography.scss"],"names":[],"mappings":"AA0MA,kCACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAvKA,4CALA,gCCjCF,sBACE,gBAEA,kCACE,aCVJ,sBAGE,aACA,eACA,mBACA,cAEA,gBAEA,4BACE,qBAEA,aACA,mBACA,QAEA,iBAEA,mBCjBF,eH2EI,oDEpDF,oCACE,gBACA,eAEA,gBAEA,YACA,gBAIJ,4BACE,aACA,cAEA,kBAEA,YACA,cAEA,qBAEA,mBAEA,uEAEE,WAEA,UACA,YACA,iBAEA,cAEA,kBACA,WACA,SFjBJ,2CEsBE,oCACE,wBAGF,mCACE","file":"compound-filters.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\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@mixin colour-font($colour, $important: false) {\n color: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n 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 var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n var(--#{$colour}, #{map.get(colour.$colour-palette-default, $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\n var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n $style\n if($important, !important, null);\n } @else {\n outline-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-dark($direction) {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-accent($direction) {\n @include colour-border(\n \"accent-background\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-error($direction) {\n @include colour-border(\n \"form-error\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n border-#{$direction}: borders.$thick-border-width #{brand-colour($brandColour)}\n solid;\n}\n\n// Use light theme colours (except for \"form-error\")\n%light {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n// Remove accent and contrast values (except for \"form-error\")\n%plain {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark(\"form-error\");\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n @include colour-background(\"background\");\n}\n\n@mixin plain {\n @extend %plain;\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\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\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\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\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 }\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\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\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-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-accent-text: #{colour.brand-colour(\"white\")} !important;\n --button-accent-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-accent-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 --button-accent-text: #{colour.brand-colour(\"black\")} !important;\n --button-accent-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %black-accent;\n @extend %accent-lighter-text;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %pink-accent;\n @extend %accent-lighter-text;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %orange-accent;\n @extend %accent-lighter-text;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %green-accent;\n @extend %accent-lighter-text;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %blue-accent;\n @extend %accent-lighter-text;\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","@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/colour\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-compound-filters {\n @include spacing.space-above;\n\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: spacing.space(0.75) spacing.space(1);\n\n list-style: none;\n\n &__item {\n padding: 0 spacing.space(0.125) 0 spacing.space(0.75);\n\n display: flex;\n align-items: center;\n gap: spacing.space(0.5);\n\n line-height: 1.75;\n\n border-radius: 1rem;\n\n @include typography.relative-font-size(16);\n\n @include colour.colour-border(\"keyline\", 1px);\n\n &--remove {\n padding-right: 0;\n padding-left: 0;\n\n background: none;\n\n border: none;\n border-radius: 0;\n }\n }\n\n &__link {\n width: 1.5rem;\n height: 1.5rem;\n\n position: relative;\n\n font-size: 0;\n line-height: 0;\n\n text-decoration: none;\n\n border-radius: 100%;\n\n &::before,\n &::after {\n content: \"\";\n\n width: 2px;\n height: 1rem;\n margin-left: -1px;\n\n display: block;\n\n position: absolute;\n top: 0.25rem;\n left: 50%;\n\n @include colour.colour-background(\"font-base\");\n }\n\n &::before {\n transform: rotate(45deg);\n }\n\n &::after {\n transform: rotate(-45deg);\n }\n\n &:hover {\n @include colour.contrast;\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin relative-font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\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 relative-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 relative-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 relative-font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include relative-font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include relative-font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include relative-font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include relative-font-size($font-size-medium);\n }\n }\n }\n}\n"]}
|
|
@@ -16,20 +16,23 @@
|
|
|
16
16
|
padding: 0 spacing.space(0.125) 0 spacing.space(0.75);
|
|
17
17
|
|
|
18
18
|
display: flex;
|
|
19
|
-
gap: spacing.space(0.5);
|
|
20
19
|
align-items: center;
|
|
20
|
+
gap: spacing.space(0.5);
|
|
21
21
|
|
|
22
|
-
@include typography.relative-font-size(16);
|
|
23
22
|
line-height: 1.75;
|
|
24
23
|
|
|
25
|
-
@include colour.colour-border("keyline", 1px);
|
|
26
24
|
border-radius: 1rem;
|
|
27
25
|
|
|
26
|
+
@include typography.relative-font-size(16);
|
|
27
|
+
|
|
28
|
+
@include colour.colour-border("keyline", 1px);
|
|
29
|
+
|
|
28
30
|
&--remove {
|
|
29
31
|
padding-right: 0;
|
|
30
32
|
padding-left: 0;
|
|
31
33
|
|
|
32
34
|
background: none;
|
|
35
|
+
|
|
33
36
|
border: none;
|
|
34
37
|
border-radius: 0;
|
|
35
38
|
}
|
|
@@ -41,14 +44,17 @@
|
|
|
41
44
|
|
|
42
45
|
position: relative;
|
|
43
46
|
|
|
44
|
-
text-decoration: none;
|
|
45
47
|
font-size: 0;
|
|
46
48
|
line-height: 0;
|
|
47
49
|
|
|
50
|
+
text-decoration: none;
|
|
51
|
+
|
|
48
52
|
border-radius: 100%;
|
|
49
53
|
|
|
50
54
|
&::before,
|
|
51
55
|
&::after {
|
|
56
|
+
content: "";
|
|
57
|
+
|
|
52
58
|
width: 2px;
|
|
53
59
|
height: 1rem;
|
|
54
60
|
margin-left: -1px;
|
|
@@ -60,8 +66,6 @@
|
|
|
60
66
|
left: 50%;
|
|
61
67
|
|
|
62
68
|
@include colour.colour-background("font-base");
|
|
63
|
-
|
|
64
|
-
content: "";
|
|
65
69
|
}
|
|
66
70
|
|
|
67
71
|
&::before {
|
|
@@ -44,7 +44,9 @@ if ($cookieBanner) {
|
|
|
44
44
|
### Work with cookies using the `Cookies` class
|
|
45
45
|
|
|
46
46
|
```js
|
|
47
|
-
|
|
47
|
+
import Cookies from "@nationalarchives/frontend/nationalarchives/lib/cookies.mjs";
|
|
48
|
+
|
|
49
|
+
const cookies = new Cookies();
|
|
48
50
|
|
|
49
51
|
if (cookies.isPolicyAccepted("usage")) {
|
|
50
52
|
// Add tracking code
|
|
@@ -54,7 +56,9 @@ if (cookies.isPolicyAccepted("usage")) {
|
|
|
54
56
|
#### Use cookie events
|
|
55
57
|
|
|
56
58
|
```js
|
|
57
|
-
|
|
59
|
+
import Cookies from "@nationalarchives/frontend/nationalarchives/lib/cookies.mjs";
|
|
60
|
+
|
|
61
|
+
const cookies = new Cookies();
|
|
58
62
|
|
|
59
63
|
cookies.on("acceptPolicy", function(policy) {
|
|
60
64
|
if (policy === "usage") {
|