@nationalarchives/frontend 0.2.9 → 0.2.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/nationalarchives/all+analytics.js +2 -0
- package/nationalarchives/all+analytics.js.map +1 -0
- package/nationalarchives/all+analytics.mjs +35 -0
- package/nationalarchives/all.css +1 -1
- package/nationalarchives/all.css.map +1 -1
- package/nationalarchives/analytics.js +1 -1
- package/nationalarchives/analytics.js.map +1 -1
- package/nationalarchives/analytics.mjs +10 -5
- package/nationalarchives/components/accordion/accordion.css.map +1 -1
- package/nationalarchives/components/breadcrumbs/breadcrumbs.css +1 -1
- package/nationalarchives/components/breadcrumbs/breadcrumbs.css.map +1 -1
- package/nationalarchives/components/breadcrumbs/breadcrumbs.scss +0 -7
- package/nationalarchives/components/button/button.css.map +1 -1
- package/nationalarchives/components/card/card.css +1 -1
- package/nationalarchives/components/card/card.css.map +1 -1
- package/nationalarchives/components/card/card.scss +89 -119
- package/nationalarchives/components/card/fixtures.json +55 -31
- package/nationalarchives/components/card/macro-options.json +31 -6
- package/nationalarchives/components/card/template.njk +34 -22
- package/nationalarchives/components/checkboxes/checkboxes.css +1 -1
- package/nationalarchives/components/checkboxes/checkboxes.css.map +1 -1
- 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/details/details.css.map +1 -1
- package/nationalarchives/components/error-summary/error-summary.css +1 -1
- package/nationalarchives/components/error-summary/error-summary.css.map +1 -1
- package/nationalarchives/components/footer/footer.css.map +1 -1
- package/nationalarchives/components/gallery/gallery.css.map +1 -1
- package/nationalarchives/components/global-header/global-header.css.map +1 -1
- package/nationalarchives/components/header/header.css.map +1 -1
- package/nationalarchives/components/hero/fixtures.json +22 -22
- package/nationalarchives/components/hero/hero.css +1 -1
- package/nationalarchives/components/hero/hero.css.map +1 -1
- package/nationalarchives/components/hero/hero.scss +4 -0
- package/nationalarchives/components/hero/template.njk +18 -18
- package/nationalarchives/components/index-grid/index-grid.css.map +1 -1
- package/nationalarchives/components/pagination/pagination.css.map +1 -1
- package/nationalarchives/components/phase-banner/phase-banner.css.map +1 -1
- package/nationalarchives/components/radios/radios.css +1 -1
- package/nationalarchives/components/radios/radios.css.map +1 -1
- package/nationalarchives/components/records-list/records-list.css.map +1 -1
- package/nationalarchives/components/search-field/search-field.css +1 -1
- package/nationalarchives/components/search-field/search-field.css.map +1 -1
- package/nationalarchives/components/select/select.css +1 -1
- package/nationalarchives/components/select/select.css.map +1 -1
- package/nationalarchives/components/sidebar/sidebar.css.map +1 -1
- package/nationalarchives/components/tabs/tabs.css.map +1 -1
- package/nationalarchives/components/text-input/text-input.css +1 -1
- package/nationalarchives/components/text-input/text-input.css.map +1 -1
- package/nationalarchives/components/textarea/textarea.css +1 -1
- package/nationalarchives/components/textarea/textarea.css.map +1 -1
- package/nationalarchives/components/warning/warning.css.map +1 -1
- package/nationalarchives/global-header-package.css +1 -1
- package/nationalarchives/global-header-package.css.map +1 -1
- package/nationalarchives/ie.css +1 -0
- package/nationalarchives/ie.css.map +1 -0
- package/nationalarchives/ie.scss +92 -0
- package/nationalarchives/prototype-kit.css +1 -1
- package/nationalarchives/prototype-kit.css.map +1 -1
- package/nationalarchives/templates/fixtures.json +3 -3
- package/nationalarchives/templates/index-grid.njk +9 -10
- package/nationalarchives/templates/list.njk +9 -10
- package/nationalarchives/templates/plain.njk +9 -10
- package/nationalarchives/utilities/_imports.scss +8 -1
- package/nationalarchives/variables/_colour.scss +7 -3
- package/nationalarchives/variables/_typography.scss +11 -0
- package/package.json +1 -1
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"headingLevel": 3,
|
|
9
9
|
"body": "<p>Card body</p>"
|
|
10
10
|
},
|
|
11
|
-
"html": "<article class=\"tna-card\"><
|
|
11
|
+
"html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
|
|
12
12
|
},
|
|
13
13
|
{
|
|
14
14
|
"name": "with supertitle",
|
|
@@ -18,7 +18,18 @@
|
|
|
18
18
|
"headingLevel": 3,
|
|
19
19
|
"body": "<p>Card body</p>"
|
|
20
20
|
},
|
|
21
|
-
"html": "<article class=\"tna-card\"><
|
|
21
|
+
"html": "<article class=\"tna-card\"><hgroup class=\"tna-hgroup-m tna-card__heading\"><p class=\"tna-hgroup__supertitle\">Card supertitle</p><h3 class=\"tna-hgroup__title\">Card title</h3></hgroup><div class=\"tna-card__body\"><p>Card body</p></div></article>"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"name": "with plain supertitle",
|
|
25
|
+
"options": {
|
|
26
|
+
"supertitle": "Card supertitle",
|
|
27
|
+
"title": "Card title",
|
|
28
|
+
"headingLevel": 3,
|
|
29
|
+
"body": "<p>Card body</p>",
|
|
30
|
+
"plainSupertitle": true
|
|
31
|
+
},
|
|
32
|
+
"html": "<article class=\"tna-card\"><hgroup class=\"tna-hgroup-m tna-card__heading\"><p class=\"tna-hgroup__supertitle tna-hgroup__supertitle--plain\">Card supertitle</p><h3 class=\"tna-hgroup__title\">Card title</h3></hgroup><div class=\"tna-card__body\"><p>Card body</p></div></article>"
|
|
22
33
|
},
|
|
23
34
|
{
|
|
24
35
|
"name": "heading size",
|
|
@@ -28,7 +39,7 @@
|
|
|
28
39
|
"headingSize": "xl",
|
|
29
40
|
"body": "<p>Card body</p>"
|
|
30
41
|
},
|
|
31
|
-
"html": "<article class=\"tna-card\"><
|
|
42
|
+
"html": "<article class=\"tna-card\"><h3 class=\"tna-heading-xl tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
|
|
32
43
|
},
|
|
33
44
|
{
|
|
34
45
|
"name": "heading level",
|
|
@@ -37,7 +48,7 @@
|
|
|
37
48
|
"headingLevel": 1,
|
|
38
49
|
"body": "<p>Card body</p>"
|
|
39
50
|
},
|
|
40
|
-
"html": "<article class=\"tna-card\"><
|
|
51
|
+
"html": "<article class=\"tna-card\"><h1 class=\"tna-heading-m tna-card__heading\">Card title</h1><div class=\"tna-card__body\"><p>Card body</p></div></article>"
|
|
41
52
|
},
|
|
42
53
|
{
|
|
43
54
|
"name": "with link",
|
|
@@ -47,7 +58,7 @@
|
|
|
47
58
|
"href": "#",
|
|
48
59
|
"body": "<p>Card body</p>"
|
|
49
60
|
},
|
|
50
|
-
"html": "<article class=\"tna-card\"><
|
|
61
|
+
"html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
|
|
51
62
|
},
|
|
52
63
|
{
|
|
53
64
|
"name": "with meta",
|
|
@@ -70,7 +81,7 @@
|
|
|
70
81
|
],
|
|
71
82
|
"body": "<p>Card body</p>"
|
|
72
83
|
},
|
|
73
|
-
"html": "<article class=\"tna-card\"><
|
|
84
|
+
"html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><dl class=\"tna-card__meta tna-dl-chips tna-dl-chips--plain\"><dt></dt><dd><span class=\"tna-dl-chips__item\"><i class=\"fa-solid fa-fw fa-calendar\" aria-hidden=\"true\"></i>24th September 2023</span></dd><dt></dt><dd><span class=\"tna-dl-chips__item\"><i class=\"fa-solid fa-fw fa-ticket\" aria-hidden=\"true\"></i>From £16</span></dd><dt></dt><dd><span class=\"tna-dl-chips__item\"><i class=\"fa-solid fa-fw fa-location-dot\" aria-hidden=\"true\"></i>Online</span></dd></dl><p>Card body</p></div></article>"
|
|
74
85
|
},
|
|
75
86
|
{
|
|
76
87
|
"name": "with accented meta",
|
|
@@ -94,7 +105,7 @@
|
|
|
94
105
|
"accentMeta": true,
|
|
95
106
|
"body": "<p>Card body</p>"
|
|
96
107
|
},
|
|
97
|
-
"html": "<article class=\"tna-card\"><
|
|
108
|
+
"html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><dl class=\"tna-card__meta tna-dl-chips\"><dt></dt><dd><span class=\"tna-dl-chips__item\"><i class=\"fa-solid fa-fw fa-calendar\" aria-hidden=\"true\"></i>24th September 2023</span></dd><dt></dt><dd><span class=\"tna-dl-chips__item\"><i class=\"fa-solid fa-fw fa-ticket\" aria-hidden=\"true\"></i>From £16</span></dd><dt></dt><dd><span class=\"tna-dl-chips__item\"><i class=\"fa-solid fa-fw fa-location-dot\" aria-hidden=\"true\"></i>Online</span></dd></dl><p>Card body</p></div></article>"
|
|
98
109
|
},
|
|
99
110
|
{
|
|
100
111
|
"name": "with text",
|
|
@@ -103,7 +114,7 @@
|
|
|
103
114
|
"headingLevel": 3,
|
|
104
115
|
"text": "Card body"
|
|
105
116
|
},
|
|
106
|
-
"html": "<article class=\"tna-card\"><
|
|
117
|
+
"html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
|
|
107
118
|
},
|
|
108
119
|
{
|
|
109
120
|
"name": "with image",
|
|
@@ -116,7 +127,7 @@
|
|
|
116
127
|
"imageHeight": 360,
|
|
117
128
|
"body": "<p>Card body</p>"
|
|
118
129
|
},
|
|
119
|
-
"html": "<article class=\"tna-card\"><
|
|
130
|
+
"html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m 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></article>"
|
|
120
131
|
},
|
|
121
132
|
{
|
|
122
133
|
"name": "with lazily loaded image",
|
|
@@ -130,7 +141,7 @@
|
|
|
130
141
|
"lazyImage": true,
|
|
131
142
|
"body": "<p>Card body</p>"
|
|
132
143
|
},
|
|
133
|
-
"html": "<article class=\"tna-card\"><
|
|
144
|
+
"html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m 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\" loading=\"lazy\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></article>"
|
|
134
145
|
},
|
|
135
146
|
{
|
|
136
147
|
"name": "with image and alternative sources",
|
|
@@ -149,7 +160,7 @@
|
|
|
149
160
|
],
|
|
150
161
|
"body": "<p>Card body</p>"
|
|
151
162
|
},
|
|
152
|
-
"html": "<article class=\"tna-card\"><
|
|
163
|
+
"html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m 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></article>"
|
|
153
164
|
},
|
|
154
165
|
{
|
|
155
166
|
"name": "with link and image",
|
|
@@ -163,7 +174,7 @@
|
|
|
163
174
|
"href": "#",
|
|
164
175
|
"body": "<p>Card body</p>"
|
|
165
176
|
},
|
|
166
|
-
"html": "<article class=\"tna-card\"><
|
|
177
|
+
"html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m 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></article>"
|
|
167
178
|
},
|
|
168
179
|
{
|
|
169
180
|
"name": "with actions",
|
|
@@ -178,7 +189,7 @@
|
|
|
178
189
|
}
|
|
179
190
|
]
|
|
180
191
|
},
|
|
181
|
-
"html": "<article class=\"tna-card\"><
|
|
192
|
+
"html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\">Card action</a></div></div></article>"
|
|
182
193
|
},
|
|
183
194
|
{
|
|
184
195
|
"name": "with actions with titles",
|
|
@@ -194,7 +205,7 @@
|
|
|
194
205
|
}
|
|
195
206
|
]
|
|
196
207
|
},
|
|
197
|
-
"html": "<article class=\"tna-card\"><
|
|
208
|
+
"html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" title=\"Go and do the action\">Card action</a></div></div></article>"
|
|
198
209
|
},
|
|
199
210
|
{
|
|
200
211
|
"name": "with actions with classes",
|
|
@@ -210,7 +221,7 @@
|
|
|
210
221
|
}
|
|
211
222
|
]
|
|
212
223
|
},
|
|
213
|
-
"html": "<article class=\"tna-card\"><
|
|
224
|
+
"html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action card__test-class\">Card action</a></div></div></article>"
|
|
214
225
|
},
|
|
215
226
|
{
|
|
216
227
|
"name": "with actions with attributes",
|
|
@@ -228,7 +239,7 @@
|
|
|
228
239
|
}
|
|
229
240
|
]
|
|
230
241
|
},
|
|
231
|
-
"html": "<article class=\"tna-card\"><
|
|
242
|
+
"html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" data-testattribute=\"foobar\">Card action</a></div></div></article>"
|
|
232
243
|
},
|
|
233
244
|
{
|
|
234
245
|
"name": "with a label",
|
|
@@ -242,7 +253,7 @@
|
|
|
242
253
|
"label": "New",
|
|
243
254
|
"body": "<p>Card body</p>"
|
|
244
255
|
},
|
|
245
|
-
"html": "<article class=\"tna-card\"><
|
|
256
|
+
"html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m 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></article>"
|
|
246
257
|
},
|
|
247
258
|
{
|
|
248
259
|
"name": "with a coloured label",
|
|
@@ -257,7 +268,7 @@
|
|
|
257
268
|
"labelColour": "green",
|
|
258
269
|
"body": "<p>Card body</p>"
|
|
259
270
|
},
|
|
260
|
-
"html": "<article class=\"tna-card\"><
|
|
271
|
+
"html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m 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></article>"
|
|
261
272
|
},
|
|
262
273
|
{
|
|
263
274
|
"name": "with a contrast style",
|
|
@@ -267,7 +278,7 @@
|
|
|
267
278
|
"body": "<p>Card body</p>",
|
|
268
279
|
"style": "contrast"
|
|
269
280
|
},
|
|
270
|
-
"html": "<article class=\"tna-card tna-background-contrast\"><
|
|
281
|
+
"html": "<article class=\"tna-card tna-card--padded tna-background-contrast\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
|
|
271
282
|
},
|
|
272
283
|
{
|
|
273
284
|
"name": "with a tint style",
|
|
@@ -277,7 +288,7 @@
|
|
|
277
288
|
"body": "<p>Card body</p>",
|
|
278
289
|
"style": "tint"
|
|
279
290
|
},
|
|
280
|
-
"html": "<article class=\"tna-card tna-background-tint\"><
|
|
291
|
+
"html": "<article class=\"tna-card tna-card--padded tna-background-tint\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
|
|
281
292
|
},
|
|
282
293
|
{
|
|
283
294
|
"name": "with a accent style",
|
|
@@ -287,7 +298,7 @@
|
|
|
287
298
|
"body": "<p>Card body</p>",
|
|
288
299
|
"style": "accent"
|
|
289
300
|
},
|
|
290
|
-
"html": "<article class=\"tna-card tna-background-accent\"><
|
|
301
|
+
"html": "<article class=\"tna-card tna-card--padded tna-background-accent\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
|
|
291
302
|
},
|
|
292
303
|
{
|
|
293
304
|
"name": "with an unknown style",
|
|
@@ -297,7 +308,7 @@
|
|
|
297
308
|
"body": "<p>Card body</p>",
|
|
298
309
|
"style": "foobar"
|
|
299
310
|
},
|
|
300
|
-
"html": "<article class=\"tna-card
|
|
311
|
+
"html": "<article class=\"tna-card tna-card--padded\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
|
|
301
312
|
},
|
|
302
313
|
{
|
|
303
314
|
"name": "horizontal card",
|
|
@@ -307,7 +318,20 @@
|
|
|
307
318
|
"body": "<p>Card body</p>",
|
|
308
319
|
"horizontal": true
|
|
309
320
|
},
|
|
310
|
-
"html": "<article class=\"tna-card tna-card--horizontal\"><
|
|
321
|
+
"html": "<article class=\"tna-card tna-card--horizontal\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
|
|
322
|
+
},
|
|
323
|
+
{
|
|
324
|
+
"name": "horizontal card with other horizontal options",
|
|
325
|
+
"options": {
|
|
326
|
+
"title": "Card title",
|
|
327
|
+
"headingLevel": 3,
|
|
328
|
+
"body": "<p>Card body</p>",
|
|
329
|
+
"horizontal": true,
|
|
330
|
+
"horizontalOnSmall": true,
|
|
331
|
+
"horizontalFlipped": true,
|
|
332
|
+
"horizontalSmallImage": true
|
|
333
|
+
},
|
|
334
|
+
"html": "<article class=\"tna-card tna-card--horizontal tna-card--horizontal-on-small tna-card--flipped tna-card--horizontal-small-image\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
|
|
311
335
|
},
|
|
312
336
|
{
|
|
313
337
|
"name": "fully clickable",
|
|
@@ -318,7 +342,7 @@
|
|
|
318
342
|
"body": "<p>Card body</p>",
|
|
319
343
|
"fullAreaClick": true
|
|
320
344
|
},
|
|
321
|
-
"html": "<article class=\"tna-card tna-card--full-click\"><
|
|
345
|
+
"html": "<article class=\"tna-card tna-card--full-click\"><h3 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
|
|
322
346
|
},
|
|
323
347
|
{
|
|
324
348
|
"name": "fully clickable without href",
|
|
@@ -328,7 +352,7 @@
|
|
|
328
352
|
"body": "<p>Card body</p>",
|
|
329
353
|
"fullAreaClick": true
|
|
330
354
|
},
|
|
331
|
-
"html": "<article class=\"tna-card\"><
|
|
355
|
+
"html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
|
|
332
356
|
},
|
|
333
357
|
{
|
|
334
358
|
"name": "fully clickable with actions",
|
|
@@ -345,7 +369,7 @@
|
|
|
345
369
|
}
|
|
346
370
|
]
|
|
347
371
|
},
|
|
348
|
-
"html": "<article class=\"tna-card\"><
|
|
372
|
+
"html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\">Card action</a></div></div></article>"
|
|
349
373
|
},
|
|
350
374
|
{
|
|
351
375
|
"name": "with a different element",
|
|
@@ -355,7 +379,7 @@
|
|
|
355
379
|
"body": "<p>Card body</p>",
|
|
356
380
|
"htmlElement": "div"
|
|
357
381
|
},
|
|
358
|
-
"html": "<div class=\"tna-card\"><
|
|
382
|
+
"html": "<div class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>"
|
|
359
383
|
},
|
|
360
384
|
{
|
|
361
385
|
"name": "with classes for href items",
|
|
@@ -366,7 +390,7 @@
|
|
|
366
390
|
"body": "<p>Card body</p>",
|
|
367
391
|
"hrefClasses": "card__test-class"
|
|
368
392
|
},
|
|
369
|
-
"html": "<article class=\"tna-card\"><
|
|
393
|
+
"html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m 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></article>"
|
|
370
394
|
},
|
|
371
395
|
{
|
|
372
396
|
"name": "with attributes for href items",
|
|
@@ -379,7 +403,7 @@
|
|
|
379
403
|
"data-testattribute": "foobar"
|
|
380
404
|
}
|
|
381
405
|
},
|
|
382
|
-
"html": "<article class=\"tna-card\"><
|
|
406
|
+
"html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m 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></article>"
|
|
383
407
|
},
|
|
384
408
|
{
|
|
385
409
|
"name": "with classes",
|
|
@@ -389,7 +413,7 @@
|
|
|
389
413
|
"body": "<p>Card body</p>",
|
|
390
414
|
"classes": "card__test-class"
|
|
391
415
|
},
|
|
392
|
-
"html": "<article class=\"tna-card card__test-class\"><
|
|
416
|
+
"html": "<article class=\"tna-card card__test-class\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
|
|
393
417
|
},
|
|
394
418
|
{
|
|
395
419
|
"name": "with attributes",
|
|
@@ -401,7 +425,7 @@
|
|
|
401
425
|
"data-testattribute": "foobar"
|
|
402
426
|
}
|
|
403
427
|
},
|
|
404
|
-
"html": "<article class=\"tna-card\" data-testattribute=\"foobar\"><
|
|
428
|
+
"html": "<article class=\"tna-card\" data-testattribute=\"foobar\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></article>"
|
|
405
429
|
}
|
|
406
430
|
]
|
|
407
431
|
}
|
|
@@ -154,12 +154,6 @@
|
|
|
154
154
|
}
|
|
155
155
|
]
|
|
156
156
|
},
|
|
157
|
-
{
|
|
158
|
-
"name": "accentMeta",
|
|
159
|
-
"type": "boolean",
|
|
160
|
-
"required": false,
|
|
161
|
-
"description": "If true, meta tags adopt an accented style."
|
|
162
|
-
},
|
|
163
157
|
{
|
|
164
158
|
"name": "body",
|
|
165
159
|
"type": "string",
|
|
@@ -222,16 +216,47 @@
|
|
|
222
216
|
"required": false,
|
|
223
217
|
"description": "If true, change the card to a horizontal layout, placing the image to the left of the content. This layout changes back to vertical on smaller devices."
|
|
224
218
|
},
|
|
219
|
+
{
|
|
220
|
+
"name": "horizontalOnSmall",
|
|
221
|
+
"type": "boolean",
|
|
222
|
+
"required": false,
|
|
223
|
+
"description": "If true, use a horizontal layout on small devices."
|
|
224
|
+
},
|
|
225
|
+
{
|
|
226
|
+
"name": "horizontalFlipped",
|
|
227
|
+
"type": "boolean",
|
|
228
|
+
"required": false,
|
|
229
|
+
"description": "If true, place the image on the right when using horizontal layouts."
|
|
230
|
+
},
|
|
231
|
+
{
|
|
232
|
+
"name": "horizontalSmallImage",
|
|
233
|
+
"type": "boolean",
|
|
234
|
+
"required": false,
|
|
235
|
+
"description": "If true, use a smaller image when using horizontal layouts."
|
|
236
|
+
},
|
|
225
237
|
{
|
|
226
238
|
"name": "style",
|
|
227
239
|
"type": "string",
|
|
228
240
|
"required": false,
|
|
229
241
|
"description": "The style of card to use which can be either `contrast` for an inverted card, `tint` for a tinted one or `accent` for a card that matches the page’s accent colour."
|
|
230
242
|
},
|
|
243
|
+
{
|
|
244
|
+
"name": "plainSupertitle",
|
|
245
|
+
"type": "boolean",
|
|
246
|
+
"required": false,
|
|
247
|
+
"description": "If true, remove the accent or contrast colour from the card supertitle."
|
|
248
|
+
},
|
|
249
|
+
{
|
|
250
|
+
"name": "accentMeta",
|
|
251
|
+
"type": "boolean",
|
|
252
|
+
"required": false,
|
|
253
|
+
"description": "If true, meta tags adopt an accented style."
|
|
254
|
+
},
|
|
231
255
|
{
|
|
232
256
|
"name": "htmlElement",
|
|
233
257
|
"type": "string",
|
|
234
258
|
"required": false,
|
|
259
|
+
"default": "article",
|
|
235
260
|
"description": "HTML element of the card."
|
|
236
261
|
},
|
|
237
262
|
{
|
|
@@ -6,6 +6,18 @@
|
|
|
6
6
|
{%- if params.horizontal -%}
|
|
7
7
|
{%- set containerClasses = containerClasses.concat('tna-card--horizontal') -%}
|
|
8
8
|
{%- endif -%}
|
|
9
|
+
{%- if params.horizontalOnSmall -%}
|
|
10
|
+
{%- set containerClasses = containerClasses.concat('tna-card--horizontal-on-small') -%}
|
|
11
|
+
{%- endif -%}
|
|
12
|
+
{%- if params.horizontalFlipped -%}
|
|
13
|
+
{%- set containerClasses = containerClasses.concat('tna-card--flipped') -%}
|
|
14
|
+
{%- endif -%}
|
|
15
|
+
{%- if params.horizontalSmallImage -%}
|
|
16
|
+
{%- set containerClasses = containerClasses.concat('tna-card--horizontal-small-image') -%}
|
|
17
|
+
{%- endif -%}
|
|
18
|
+
{%- if params.style -%}
|
|
19
|
+
{%- set containerClasses = containerClasses.concat('tna-card--padded') -%}
|
|
20
|
+
{%- endif -%}
|
|
9
21
|
{%- if params.style == "contrast" -%}
|
|
10
22
|
{%- set containerClasses = containerClasses.concat('tna-background-contrast') -%}
|
|
11
23
|
{%- elseif params.style == "tint" -%}
|
|
@@ -15,26 +27,25 @@
|
|
|
15
27
|
{%- endif -%}
|
|
16
28
|
{%- set classes = containerClasses | join(' ') -%}
|
|
17
29
|
<{{ htmlElement }} class="tna-card{% if classes %} {{ classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
|
|
18
|
-
<div class="tna-card__inner">
|
|
19
30
|
{%- if params.supertitle %}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
{%- if params.href %}
|
|
24
|
-
<a href="{{ params.href }}" class="tna-card__heading-link{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>{{ params.title }}</a>
|
|
25
|
-
{%- else %}
|
|
26
|
-
{{ params.title }}
|
|
27
|
-
{%- endif %}
|
|
28
|
-
</h{{ params.headingLevel }}>
|
|
29
|
-
</hgroup>
|
|
30
|
-
{%- else %}
|
|
31
|
-
<h{{ params.headingLevel }} class="tna-heading-{{ params.headingSize or 'm' }} tna-card__heading">
|
|
31
|
+
<hgroup class="tna-hgroup-{{ params.headingSize or 'm' }} tna-card__heading">
|
|
32
|
+
<p class="tna-hgroup__supertitle{% if params.plainSupertitle %} tna-hgroup__supertitle--plain{% endif %}">{{ params.supertitle }}</p>
|
|
33
|
+
<h{{ params.headingLevel }} class="tna-hgroup__title">
|
|
32
34
|
{%- if params.href %}
|
|
33
35
|
<a href="{{ params.href }}" class="tna-card__heading-link{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>{{ params.title }}</a>
|
|
34
36
|
{%- else %}
|
|
35
37
|
{{ params.title }}
|
|
36
38
|
{%- endif %}
|
|
37
39
|
</h{{ params.headingLevel }}>
|
|
40
|
+
</hgroup>
|
|
41
|
+
{%- else %}
|
|
42
|
+
<h{{ params.headingLevel }} class="tna-heading-{{ params.headingSize or 'm' }} tna-card__heading">
|
|
43
|
+
{%- if params.href %}
|
|
44
|
+
<a href="{{ params.href }}" class="tna-card__heading-link{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>{{ params.title }}</a>
|
|
45
|
+
{%- else %}
|
|
46
|
+
{{ params.title }}
|
|
47
|
+
{%- endif %}
|
|
48
|
+
</h{{ params.headingLevel }}>
|
|
38
49
|
{%- endif %}
|
|
39
50
|
{%- if params.imageSrc %}
|
|
40
51
|
{%- if params.href and (not params.fullAreaClick or params.actions) %}
|
|
@@ -62,6 +73,7 @@
|
|
|
62
73
|
</div>
|
|
63
74
|
{%- endif %}
|
|
64
75
|
{%- endif %}
|
|
76
|
+
{%- if params.meta or params.text or params.body or params.actions %}
|
|
65
77
|
<div class="tna-card__body">
|
|
66
78
|
{%- if params.meta %}
|
|
67
79
|
<dl class="tna-card__meta tna-dl-chips{{ '' if params.accentMeta else ' tna-dl-chips--plain' }}">
|
|
@@ -83,15 +95,15 @@
|
|
|
83
95
|
{%- else %}
|
|
84
96
|
{{ params.body | safe }}
|
|
85
97
|
{%- endif %}
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
98
|
+
{%- if params.actions %}
|
|
99
|
+
<div class="tna-card__actions">
|
|
100
|
+
{%- for item in params.actions %}
|
|
101
|
+
<a href="{{ item.href }}" class="tna-card__action{% if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
|
|
102
|
+
{{ item.text }}
|
|
103
|
+
</a>
|
|
104
|
+
{%- endfor %}
|
|
105
|
+
</div>
|
|
106
|
+
{%- endif %}
|
|
94
107
|
</div>
|
|
95
108
|
{%- endif %}
|
|
96
|
-
</div>
|
|
97
109
|
</{{ htmlElement }}>
|
|
@@ -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;--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);--form-error-text: #c20000;--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: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(140, 150, 148);--accent-list-marker: rgb(1 1 1/0.58);--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);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-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: #ddd;--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.
|
|
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;--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);--form-error-text: #c20000;--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: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(140, 150, 148);--accent-list-marker: rgb(1 1 1/0.58);--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);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-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: #ddd;--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.8);--link: #34d;--link-visited: #848;--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);--form-error-text: #c20000;--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: rgb(1, 1, 1);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.8);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(0, 176, 255);--contrast-link-visited: #a8f;--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: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(140, 150, 148);--accent-list-marker: rgb(1 1 1/0.58);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.8);--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);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-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__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":"AAsLA,uEAxKM,kvDA2KJ,+BAHF,uEAxJM,6tDCxBN,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,UDDN,6DA0BI,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,yDGpFF,eCZqB,IDgBrB,iBFoHE,gDDpCA,yDGpFF,eCZqB,IH0InB,kDDpFF,uDCwFE,iDACE,cAKF,gEACE","file":"checkboxes.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width transparent solid;\n } @else {\n border: borders.$thick-border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\n \"form-error-border\",\n \"focus-outline\"\n );\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n // @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-list-marker: var(--font-base);\n --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"brown\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"pink\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"orange\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"green\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"blue\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n@mixin image-loader-background {\n @if not features.$disable-image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n }\n}\n","@use \"../../variables/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.always-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 &__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-without-offset {\n @include colour.colour-outline(\n \"focus-outline\",\n a11y.$focus-outline-width,\n solid\n );\n}\n\n@mixin focus-outline {\n @include focus-outline-without-offset;\n outline-offset: a11y.$focus-outline-offset;\n}\n\n@mixin active-outline {\n outline-offset: 0;\n}\n\n@mixin no-focus-outline-on-click {\n .tna-template--clicked &:focus {\n outline: none;\n }\n}\n","$focus-outline-width: 5px !default;\n$focus-outline-offset: 2px !default;\n$focus-outline-padding: $focus-outline-width + $focus-outline-offset;\n"]}
|
|
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":"AAsLA,uEAxKM,kvDA2KJ,+BAHF,uEAxJM,4tDCxBN,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,UDDN,6DA0BI,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,yDGpFF,eCZqB,IDgBrB,iBFoHE,gDDpCA,yDGpFF,eCZqB,IH0InB,kDDpFF,uDCwFE,iDACE,cAKF,gEACE","file":"checkboxes.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width transparent solid;\n } @else {\n border: borders.$thick-border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\n \"form-error-border\",\n \"focus-outline\"\n );\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n // @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-list-marker: var(--font-base);\n --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"brown\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"pink\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"orange\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"green\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"blue\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n@mixin image-loader-background {\n @if not features.$disable-image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n }\n}\n","@use \"../../variables/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.always-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 &__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-without-offset {\n @include colour.colour-outline(\n \"focus-outline\",\n a11y.$focus-outline-width,\n solid\n );\n}\n\n@mixin focus-outline {\n @include focus-outline-without-offset;\n outline-offset: a11y.$focus-outline-offset;\n}\n\n@mixin active-outline {\n outline-offset: 0;\n}\n\n@mixin no-focus-outline-on-click {\n .tna-template--clicked &:focus {\n outline: none;\n }\n}\n","$focus-outline-width: 5px !default;\n$focus-outline-offset: 2px !default;\n$focus-outline-padding: $focus-outline-width + $focus-outline-offset;\n"]}
|