@ons/design-system 70.0.6 → 70.0.8

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.
Files changed (308) hide show
  1. package/README.md +11 -17
  2. package/components/access-code/_macro.spec.js +145 -145
  3. package/components/access-code/access-code.dom.js +5 -5
  4. package/components/access-code/access-code.js +16 -16
  5. package/components/access-code/access-code.scss +22 -22
  6. package/components/access-code/access-code.spec.js +17 -17
  7. package/components/accordion/_macro.spec.js +154 -154
  8. package/components/accordion/accordion.dom.js +10 -10
  9. package/components/accordion/accordion.js +50 -50
  10. package/components/accordion/accordion.spec.js +104 -104
  11. package/components/address-input/_macro.spec.js +420 -420
  12. package/components/address-input/autosuggest.address.dom.js +5 -5
  13. package/components/address-input/autosuggest.address.error.js +77 -77
  14. package/components/address-input/autosuggest.address.js +357 -357
  15. package/components/address-input/autosuggest.address.setter.js +95 -95
  16. package/components/address-input/autosuggest.address.spec.js +668 -651
  17. package/components/address-input/example-address-input-editable.njk +1 -1
  18. package/components/address-input/example-address-input.njk +1 -1
  19. package/components/address-output/_address-output.scss +3 -3
  20. package/components/address-output/_macro.spec.js +84 -84
  21. package/components/autosuggest/_autosuggest.scss +114 -114
  22. package/components/autosuggest/_macro.spec.js +255 -255
  23. package/components/autosuggest/autosuggest.dom.js +5 -5
  24. package/components/autosuggest/autosuggest.helpers.js +11 -11
  25. package/components/autosuggest/autosuggest.helpers.spec.js +73 -73
  26. package/components/autosuggest/autosuggest.js +20 -20
  27. package/components/autosuggest/autosuggest.spec.js +542 -536
  28. package/components/autosuggest/autosuggest.ui.js +478 -475
  29. package/components/autosuggest/fuse-config.js +17 -17
  30. package/components/back-to-top/_back-to-top.scss +27 -27
  31. package/components/back-to-top/_macro.spec.js +49 -49
  32. package/components/back-to-top/back-to-top.dom.js +5 -5
  33. package/components/back-to-top/back-to-top.js +52 -52
  34. package/components/back-to-top/back-to-top.spec.js +106 -106
  35. package/components/back-to-top/example-back-to-top.njk +6 -6
  36. package/components/breadcrumbs/_breadcrumbs.scss +63 -65
  37. package/components/breadcrumbs/_macro.spec.js +91 -91
  38. package/components/browser-banner/_browser-banner.scss +23 -23
  39. package/components/browser-banner/_macro.spec.js +92 -92
  40. package/components/button/_button.scss +482 -483
  41. package/components/button/_macro.spec.js +363 -363
  42. package/components/button/button.dom.js +15 -15
  43. package/components/button/button.js +53 -53
  44. package/components/button/button.spec.js +248 -240
  45. package/components/call-to-action/_call-to-action.scss +5 -5
  46. package/components/call-to-action/_macro.spec.js +28 -28
  47. package/components/card/_card.scss +23 -23
  48. package/components/card/_macro.spec.js +180 -180
  49. package/components/char-check-limit/_macro.spec.js +48 -48
  50. package/components/char-check-limit/character-check.js +58 -58
  51. package/components/char-check-limit/character-check.spec.js +173 -173
  52. package/components/char-check-limit/character-limit.js +40 -40
  53. package/components/checkboxes/_checkbox-macro.spec.js +355 -355
  54. package/components/checkboxes/_checkbox.scss +180 -180
  55. package/components/checkboxes/_checkboxes.scss +37 -27
  56. package/components/checkboxes/_macro.spec.js +261 -261
  57. package/components/checkboxes/checkbox-with-autoselect.js +32 -32
  58. package/components/checkboxes/checkbox-with-fieldset.js +21 -21
  59. package/components/checkboxes/checkboxes-with-reveal.js +10 -10
  60. package/components/checkboxes/checkboxes.dom.js +27 -27
  61. package/components/checkboxes/checkboxes.spec.js +183 -183
  62. package/components/content-pagination/_content-pagination.scss +41 -41
  63. package/components/content-pagination/_macro.spec.js +159 -159
  64. package/components/cookies-banner/_cookies-banner.scss +22 -22
  65. package/components/cookies-banner/_macro.spec.js +177 -177
  66. package/components/cookies-banner/cookies-banner.dom.js +7 -7
  67. package/components/cookies-banner/cookies-banner.js +76 -76
  68. package/components/cookies-banner/cookies-banner.spec.js +72 -68
  69. package/components/date-input/_macro.spec.js +338 -338
  70. package/components/description-list/_description-list.scss +23 -23
  71. package/components/description-list/_macro.spec.js +144 -144
  72. package/components/details/_details.scss +109 -109
  73. package/components/details/_macro.spec.js +132 -132
  74. package/components/details/details.dom.js +6 -6
  75. package/components/details/details.js +60 -60
  76. package/components/details/details.spec.js +106 -106
  77. package/components/document-list/_macro.spec.js +444 -444
  78. package/components/document-list/document-list.scss +145 -149
  79. package/components/download-resources/_download-resources.scss +109 -108
  80. package/components/download-resources/download-resources.js +907 -900
  81. package/components/download-resources/download-resources.spec.js +461 -461
  82. package/components/duration/_macro.spec.js +291 -291
  83. package/components/error/_macro.spec.js +72 -72
  84. package/components/external-link/_external-link.scss +19 -19
  85. package/components/external-link/_macro.spec.js +68 -68
  86. package/components/feedback/_feedback.scss +31 -31
  87. package/components/feedback/_macro.spec.js +72 -72
  88. package/components/field/_field-group.scss +10 -10
  89. package/components/field/_field.scss +16 -16
  90. package/components/field/_macro.spec.js +80 -80
  91. package/components/fieldset/_fieldset.scss +27 -27
  92. package/components/fieldset/_macro.spec.js +161 -161
  93. package/components/footer/_footer.scss +45 -45
  94. package/components/footer/_macro.spec.js +452 -452
  95. package/components/header/_header.scss +202 -202
  96. package/components/header/_macro.spec.js +833 -829
  97. package/components/helpers/_grid.scss +4 -4
  98. package/components/hero/_hero.scss +48 -48
  99. package/components/hero/_macro.spec.js +59 -59
  100. package/components/icon/_icon.scss +44 -44
  101. package/components/icon/_macro.spec.js +110 -110
  102. package/components/image/_image.scss +11 -11
  103. package/components/image/_macro.spec.js +81 -81
  104. package/components/input/_input-type.scss +86 -89
  105. package/components/input/_input.scss +123 -124
  106. package/components/input/_macro.spec.js +604 -604
  107. package/components/input/character-check.dom.js +5 -5
  108. package/components/input/input.dom.js +5 -5
  109. package/components/input/input.js +10 -10
  110. package/components/input/input.spec.js +18 -18
  111. package/components/label/_label.scss +24 -24
  112. package/components/label/_macro.spec.js +173 -170
  113. package/components/language-selector/_macro.spec.js +97 -97
  114. package/components/language-selector/language.scss +7 -7
  115. package/components/list/_list.scss +84 -84
  116. package/components/list/_macro.njk +2 -2
  117. package/components/list/_macro.spec.js +583 -583
  118. package/components/message/_macro.njk +5 -5
  119. package/components/message/_macro.spec.js +74 -74
  120. package/components/message/_message.scss +39 -39
  121. package/components/message-list/_macro.spec.js +86 -86
  122. package/components/message-list/_message-list.scss +16 -16
  123. package/components/modal/_macro.spec.js +69 -69
  124. package/components/modal/_modal.scss +36 -36
  125. package/components/modal/modal.dom.js +6 -6
  126. package/components/modal/modal.js +89 -89
  127. package/components/modal/modal.spec.js +50 -50
  128. package/components/mutually-exclusive/_macro.spec.js +140 -140
  129. package/components/mutually-exclusive/mutually-exclusive.checkboxes.spec.js +188 -188
  130. package/components/mutually-exclusive/mutually-exclusive.date.spec.js +211 -211
  131. package/components/mutually-exclusive/mutually-exclusive.dom.js +5 -5
  132. package/components/mutually-exclusive/mutually-exclusive.duration.spec.js +210 -210
  133. package/components/mutually-exclusive/mutually-exclusive.email.spec.js +90 -90
  134. package/components/mutually-exclusive/mutually-exclusive.js +137 -137
  135. package/components/mutually-exclusive/mutually-exclusive.multiple-options.checkboxes.spec.js +197 -197
  136. package/components/mutually-exclusive/mutually-exclusive.number.spec.js +96 -96
  137. package/components/mutually-exclusive/mutually-exclusive.textarea.spec.js +102 -102
  138. package/components/navigation/_macro.spec.js +360 -354
  139. package/components/navigation/_navigation.scss +122 -123
  140. package/components/navigation/navigation.dom.js +35 -35
  141. package/components/navigation/navigation.js +49 -49
  142. package/components/navigation/navigation.spec.js +249 -249
  143. package/components/pagination/_macro.spec.js +342 -335
  144. package/components/pagination/_pagination.scss +58 -58
  145. package/components/panel/_macro.spec.js +372 -372
  146. package/components/panel/_panel.scss +200 -199
  147. package/components/password/_macro.spec.js +95 -95
  148. package/components/password/password.dom.js +5 -5
  149. package/components/password/password.js +10 -10
  150. package/components/password/password.spec.js +26 -26
  151. package/components/phase-banner/_macro.spec.js +86 -86
  152. package/components/phase-banner/_phase-banner.scss +16 -16
  153. package/components/question/_macro.spec.js +235 -235
  154. package/components/question/_question.scss +24 -24
  155. package/components/quote/_macro.spec.js +52 -52
  156. package/components/quote/_quote.scss +24 -24
  157. package/components/radios/_macro.spec.js +524 -524
  158. package/components/radios/_radio.scss +49 -48
  159. package/components/radios/_radios.scss +14 -20
  160. package/components/radios/check-radios.js +21 -21
  161. package/components/radios/clear-radios.js +45 -45
  162. package/components/radios/radio-with-fieldset.js +22 -22
  163. package/components/radios/radios.dom.js +32 -32
  164. package/components/radios/radios.spec.js +251 -251
  165. package/components/related-content/_macro.spec.js +109 -109
  166. package/components/related-content/_related-content.scss +12 -12
  167. package/components/related-content/_section-macro.spec.js +20 -20
  168. package/components/relationships/_macro.spec.js +94 -94
  169. package/components/relationships/_relationships.scss +9 -9
  170. package/components/relationships/relationships.dom.js +5 -5
  171. package/components/relationships/relationships.js +18 -18
  172. package/components/relationships/relationships.spec.js +71 -71
  173. package/components/reply/_macro.spec.js +47 -47
  174. package/components/reply/reply-input.js +15 -15
  175. package/components/reply/reply.dom.js +5 -5
  176. package/components/reply/reply.spec.js +57 -57
  177. package/components/section-navigation/_macro.spec.js +210 -210
  178. package/components/section-navigation/_section-navigation.scss +76 -76
  179. package/components/select/_macro.spec.js +166 -166
  180. package/components/share-page/_macro.spec.js +68 -68
  181. package/components/skip-to-content/_macro.spec.js +54 -54
  182. package/components/skip-to-content/_skip.scss +30 -30
  183. package/components/skip-to-content/skip-to-content.dom.js +6 -6
  184. package/components/skip-to-content/skip-to-content.js +7 -7
  185. package/components/skip-to-content/skip-to-content.spec.js +21 -21
  186. package/components/status/_macro.spec.js +53 -53
  187. package/components/status/_status.scss +32 -32
  188. package/components/summary/_macro.spec.js +551 -535
  189. package/components/summary/_summary.scss +191 -195
  190. package/components/table/_macro.spec.js +499 -499
  191. package/components/table/_table.scss +204 -201
  192. package/components/table/scrollable-table.dom.js +5 -5
  193. package/components/table/scrollable-table.js +60 -60
  194. package/components/table/sortable-table.dom.js +5 -5
  195. package/components/table/sortable-table.js +135 -135
  196. package/components/table/table.spec.js +144 -140
  197. package/components/table-of-contents/_macro.spec.js +125 -125
  198. package/components/table-of-contents/_toc.scss +9 -9
  199. package/components/table-of-contents/toc.dom.js +5 -5
  200. package/components/table-of-contents/toc.js +30 -30
  201. package/components/table-of-contents/toc.spec.js +88 -88
  202. package/components/tabs/_macro.spec.js +92 -92
  203. package/components/tabs/_tabs.scss +120 -115
  204. package/components/tabs/tabs.dom.js +5 -5
  205. package/components/tabs/tabs.js +266 -266
  206. package/components/tabs/tabs.spec.js +268 -268
  207. package/components/text-indent/_macro.spec.js +33 -33
  208. package/components/text-indent/_text-indent.scss +3 -3
  209. package/components/textarea/_macro.spec.js +238 -238
  210. package/components/textarea/textarea.dom.js +5 -5
  211. package/components/textarea/textarea.spec.js +78 -74
  212. package/components/timeline/_macro.spec.js +83 -83
  213. package/components/timeline/_timeline.scss +26 -26
  214. package/components/timeout-modal/_macro.spec.js +47 -47
  215. package/components/timeout-modal/timeout-modal.dom.js +9 -9
  216. package/components/timeout-modal/timeout-modal.js +66 -66
  217. package/components/timeout-modal/timeout-modal.spec.js +157 -157
  218. package/components/timeout-panel/_macro.spec.js +41 -41
  219. package/components/timeout-panel/timeout-panel.dom.js +8 -8
  220. package/components/timeout-panel/timeout-panel.spec.js +118 -118
  221. package/components/upload/_macro.spec.js +52 -52
  222. package/components/upload/_upload.scss +28 -28
  223. package/components/video/_macro.spec.js +42 -42
  224. package/components/video/_video.scss +16 -16
  225. package/components/video/video.dom.js +5 -5
  226. package/components/video/video.js +32 -32
  227. package/components/video/video.spec.js +103 -97
  228. package/css/main.css +1 -1
  229. package/favicons/android-chrome-192x192.png +0 -0
  230. package/favicons/android-chrome-512x512.png +0 -0
  231. package/favicons/apple-touch-icon.png +0 -0
  232. package/favicons/favicon-16x16.png +0 -0
  233. package/favicons/favicon-32x32.png +0 -0
  234. package/favicons/favicon.ico +0 -0
  235. package/favicons/manifest.json +25 -25
  236. package/favicons/maskable_icon.png +0 -0
  237. package/favicons/opengraph.png +0 -0
  238. package/favicons/twitter.png +0 -0
  239. package/img/large/alison-pritchard-featured.jpg +0 -0
  240. package/img/large/alison-pritchard.jpg +0 -0
  241. package/img/large/census-monuments-lights-featured.jpg +0 -0
  242. package/img/large/census-monuments-lights.jpg +0 -0
  243. package/img/large/mother-and-daughter-in-ireland.jpg +0 -0
  244. package/img/large/mum-and-child-healthcare-belfast.jpg +0 -0
  245. package/img/large/ons-award-winners.jpg +0 -0
  246. package/img/large/placeholder-card.png +0 -0
  247. package/img/large/placeholder-news-medium.png +0 -0
  248. package/img/large/placeholder-news.png +0 -0
  249. package/img/large/placeholder-portrait.png +0 -0
  250. package/img/large/students.jpg +0 -0
  251. package/img/large/woman-in-purple-dress-shirt.jpg +0 -0
  252. package/img/small/alison-pritchard-featured.jpg +0 -0
  253. package/img/small/alison-pritchard.jpg +0 -0
  254. package/img/small/census-monuments-lights-featured.jpg +0 -0
  255. package/img/small/census-monuments-lights.jpg +0 -0
  256. package/img/small/mother-and-daughter-in-ireland.jpg +0 -0
  257. package/img/small/mum-and-child-healthcare-belfast.jpg +0 -0
  258. package/img/small/ons-award-winners.jpg +0 -0
  259. package/img/small/placeholder-card.png +0 -0
  260. package/img/small/placeholder-news-medium.png +0 -0
  261. package/img/small/placeholder-news.png +0 -0
  262. package/img/small/placeholder-portrait.png +0 -0
  263. package/img/small/students.jpg +0 -0
  264. package/img/small/woman-in-purple-dress-shirt.jpg +0 -0
  265. package/js/abortable-fetch.js +23 -23
  266. package/js/analytics.js +53 -53
  267. package/js/cookies-functions.js +135 -135
  268. package/js/cookies-settings.dom.js +7 -7
  269. package/js/cookies-settings.js +77 -77
  270. package/js/cookies-settings.spec.js +106 -106
  271. package/js/domready.js +8 -8
  272. package/js/fetch.js +14 -14
  273. package/js/inpagelink.dom.js +5 -5
  274. package/js/inpagelink.js +19 -19
  275. package/js/polyfills.js +0 -1
  276. package/js/print-button.js +6 -6
  277. package/js/timeout.js +211 -211
  278. package/layout/_template.njk +5 -7
  279. package/package.json +131 -127
  280. package/scripts/main.es5.js +1 -1
  281. package/scripts/main.js +1 -1
  282. package/scss/base/_forms.scss +10 -10
  283. package/scss/base/_global.scss +45 -44
  284. package/scss/base/_typography.scss +20 -20
  285. package/scss/helpers/_functions.scss +18 -15
  286. package/scss/helpers/_mixins.scss +59 -53
  287. package/scss/helpers/_mq.scss +62 -65
  288. package/scss/objects/_container.scss +20 -20
  289. package/scss/objects/_page.scss +33 -33
  290. package/scss/objects/_spacing.scss +10 -10
  291. package/scss/overrides/hcm.scss +237 -237
  292. package/scss/overrides/rtl.scss +95 -95
  293. package/scss/print.scss +47 -47
  294. package/scss/utilities/_border.scss +7 -7
  295. package/scss/utilities/_colors.scss +6 -6
  296. package/scss/utilities/_display.scss +8 -8
  297. package/scss/utilities/_float.scss +7 -7
  298. package/scss/utilities/_grid.scss +144 -144
  299. package/scss/utilities/_highlight.scss +4 -4
  300. package/scss/utilities/_margin.scss +17 -17
  301. package/scss/utilities/_pad.scss +15 -15
  302. package/scss/utilities/_typography.scss +35 -33
  303. package/scss/utilities/_utilities.scss +8 -8
  304. package/scss/utilities/_visibility.scss +25 -25
  305. package/scss/vars/_colors.scss +116 -116
  306. package/scss/vars/_forms.scss +22 -22
  307. package/scss/vars/_grid.scss +11 -9
  308. package/scss/vars/_typography.scss +54 -54
package/components/header/_header.scss CHANGED
@@ -1,244 +1,244 @@
1
1
  // Block
2
2
  .ons-header {
3
- @include font-smoothing;
4
-
5
- display: block;
6
- margin: 0;
7
- position: relative;
8
-
9
- // Elements
10
- &__top {
11
- background: var(--ons-color-header-masthead);
12
- width: 100%;
13
- }
14
- &__grid-top {
15
- padding: 1rem 0;
16
- row-gap: 0.5rem;
17
-
18
- @include mq(xs) {
19
- padding: 0.75rem 0;
20
- }
21
- }
22
- &__main {
23
- background: var(--ons-color-header);
24
- padding: 0.56rem 0;
25
-
26
- &--border {
27
- border-bottom: 3px solid var(--ons-color-header);
28
- border-top: 3px solid var(--ons-color-header);
29
- padding: 0.934rem 0;
30
- }
31
- }
32
- &__title {
33
- @extend .ons-u-fs-r--b;
34
- @extend .ons-u-fs-xl\@xxs;
35
-
36
- color: var(--ons-color-white);
37
-
38
- @include mq(m) {
39
- margin-bottom: 1rem;
40
- margin-top: 0.8rem;
41
- }
42
-
43
- &-link {
44
- display: block;
45
- text-decoration: none;
46
- &:focus {
47
- .ons-header__title {
48
- color: var(--ons-color-text-link-focus);
49
- }
50
- }
51
- &:hover {
52
- text-decoration: underline solid var(--ons-color-text-inverse-link) 2px;
53
- }
54
- }
55
- }
56
- &__description {
57
- @extend .ons-u-fs-s;
58
- @extend .ons-u-fs-r\@s;
59
-
60
- color: var(--ons-color-white);
3
+ @include font-smoothing;
4
+
5
+ display: block;
61
6
  margin: 0;
7
+ position: relative;
62
8
 
63
- @include mq(m) {
64
- margin: 0 0 1.1rem;
9
+ // Elements
10
+ &__top {
11
+ background: var(--ons-color-header-masthead);
12
+ width: 100%;
65
13
  }
66
- }
67
- // Modifier - variants
68
- &--description {
69
- .ons-header {
70
- &__title {
71
- @extend .ons-u-fs-m;
72
- @extend .ons-u-fs-xxl\@m;
14
+ &__grid-top {
15
+ padding: 1rem 0;
16
+ row-gap: 0.5rem;
73
17
 
74
- margin-bottom: 0;
75
- }
18
+ @include mq(xs) {
19
+ padding: 0.75rem 0;
20
+ }
76
21
  }
77
- }
22
+ &__main {
23
+ background: var(--ons-color-header);
24
+ padding: 0.56rem 0;
78
25
 
79
- &--internal &,
80
- &--neutral & {
81
- &__top {
82
- background: var(--ons-color-header-masthead-internal);
83
- .ons-icon--logo {
84
- display: block;
85
- .ons-icon--logo__group--text,
86
- .ons-icon--logo__group--primary {
87
- fill: var(--ons-color-white);
26
+ &--border {
27
+ border-bottom: 3px solid var(--ons-color-header);
28
+ border-top: 3px solid var(--ons-color-header);
29
+ padding: 0.934rem 0;
88
30
  }
89
- }
90
31
  }
91
- &__org-logo-link:focus {
92
- background-color: transparent;
93
- box-shadow: none;
94
- outline: 3px solid var(--ons-color-focus);
95
- .ons-icon--logo {
96
- fill: var(--ons-color-text-link-focus);
97
- }
32
+ &__title {
33
+ @extend .ons-u-fs-r--b;
34
+ @extend .ons-u-fs-xl\@xxs;
35
+
36
+ color: var(--ons-color-white);
37
+
38
+ @include mq(m) {
39
+ margin-bottom: 1rem;
40
+ margin-top: 0.8rem;
41
+ }
42
+
43
+ &-link {
44
+ display: block;
45
+ text-decoration: none;
46
+ &:focus {
47
+ .ons-header__title {
48
+ color: var(--ons-color-text-link-focus);
49
+ }
50
+ }
51
+ &:hover {
52
+ text-decoration: underline solid var(--ons-color-text-inverse-link) 2px;
53
+ }
54
+ }
98
55
  }
99
- &__grid-top {
100
- color: var(--ons-color-text-inverse);
101
- min-height: 36px;
102
- a {
103
- color: var(--ons-color-text-inverse);
104
- &:hover {
105
- text-decoration: underline solid var(--ons-color-text-inverse-link-hover) 3px;
56
+ &__description {
57
+ @extend .ons-u-fs-s;
58
+ @extend .ons-u-fs-r\@s;
59
+
60
+ color: var(--ons-color-white);
61
+ margin: 0;
62
+
63
+ @include mq(m) {
64
+ margin: 0 0 1.1rem;
106
65
  }
107
- }
108
66
  }
109
- }
67
+ // Modifier - variants
68
+ &--description {
69
+ .ons-header {
70
+ &__title {
71
+ @extend .ons-u-fs-m;
72
+ @extend .ons-u-fs-xxl\@m;
110
73
 
111
- &--neutral & {
112
- &__top {
113
- background: var(--ons-color-header-masthead-neutral);
74
+ margin-bottom: 0;
75
+ }
76
+ }
114
77
  }
115
78
 
116
- &__grid-top {
117
- a {
118
- color: var(--ons-color-service-links);
119
- &:hover {
120
- text-decoration: underline solid var(--ons-color-service-links) 3px;
79
+ &--internal &,
80
+ &--neutral & {
81
+ &__top {
82
+ background: var(--ons-color-header-masthead-internal);
83
+ .ons-icon--logo {
84
+ display: block;
85
+ .ons-icon--logo__group--text,
86
+ .ons-icon--logo__group--primary {
87
+ fill: var(--ons-color-white);
88
+ }
89
+ }
90
+ }
91
+ &__org-logo-link:focus {
92
+ background-color: transparent;
93
+ box-shadow: none;
94
+ outline: 3px solid var(--ons-color-focus);
95
+ .ons-icon--logo {
96
+ fill: var(--ons-color-text-link-focus);
97
+ }
98
+ }
99
+ &__grid-top {
100
+ color: var(--ons-color-text-inverse);
101
+ min-height: 36px;
102
+ a {
103
+ color: var(--ons-color-text-inverse);
104
+ &:hover {
105
+ text-decoration: underline solid var(--ons-color-text-inverse-link-hover) 3px;
106
+ }
107
+ }
121
108
  }
122
- }
123
109
  }
124
110
 
125
- &__main {
126
- background: var(--ons-color-header-neutral);
111
+ &--neutral & {
112
+ &__top {
113
+ background: var(--ons-color-header-masthead-neutral);
114
+ }
115
+
116
+ &__grid-top {
117
+ a {
118
+ color: var(--ons-color-service-links);
119
+ &:hover {
120
+ text-decoration: underline solid var(--ons-color-service-links) 3px;
121
+ }
122
+ }
123
+ }
127
124
 
128
- &--border {
129
- border-bottom: 3px solid var(--ons-color-header-neutral);
130
- border-top: 3px solid var(--ons-color-header-neutral);
131
- }
125
+ &__main {
126
+ background: var(--ons-color-header-neutral);
127
+
128
+ &--border {
129
+ border-bottom: 3px solid var(--ons-color-header-neutral);
130
+ border-top: 3px solid var(--ons-color-header-neutral);
131
+ }
132
+ }
133
+
134
+ &__title {
135
+ color: var(--ons-color-header-title);
136
+ &-link {
137
+ &:hover {
138
+ text-decoration: underline solid var(--ons-color-branded-text) 2px;
139
+ }
140
+ }
141
+ }
132
142
  }
133
143
 
134
- &__title {
135
- color: var(--ons-color-header-title);
136
- &-link {
144
+ .ons-icon--logo {
145
+ display: block;
146
+ width: 100%;
147
+ }
148
+
149
+ &__org-logo-link,
150
+ &__title-logo-link {
151
+ display: block;
152
+ font-size: 0;
137
153
  &:hover {
138
- text-decoration: underline solid var(--ons-color-branded-text) 2px;
154
+ text-decoration: none;
139
155
  }
140
- }
141
156
  }
142
- }
143
-
144
- .ons-icon--logo {
145
- display: block;
146
- width: 100%;
147
- }
148
157
 
149
- &__org-logo-link,
150
- &__title-logo-link {
151
- display: block;
152
- font-size: 0;
153
- &:hover {
154
- text-decoration: none;
158
+ &__org-logo-link {
159
+ &:focus {
160
+ .ons-icon--logo {
161
+ fill: var(--ons-color-black) !important;
162
+ .ons-icon--logo__group {
163
+ fill: var(--ons-color-black) !important;
164
+ }
165
+ }
166
+ }
155
167
  }
156
- }
157
168
 
158
- &__org-logo-link {
159
- &:focus {
160
- .ons-icon--logo {
161
- fill: var(--ons-color-black) !important;
162
- .ons-icon--logo__group {
163
- fill: var(--ons-color-black) !important;
169
+ &__org-logo--large {
170
+ @include mq(xxs, 454px) {
171
+ display: none;
164
172
  }
165
- }
166
173
  }
167
- }
168
174
 
169
- &__org-logo--large {
170
- @include mq(xxs, 454px) {
171
- display: none;
175
+ &__org-logo--small {
176
+ @include mq(455px) {
177
+ display: none;
178
+ }
172
179
  }
173
- }
174
180
 
175
- &__org-logo--small {
176
- @include mq(455px) {
177
- display: none;
181
+ &__org-logo--multi {
182
+ display: inline-flex;
183
+ column-gap: 1rem;
184
+ align-items: center;
178
185
  }
179
- }
180
186
 
181
- &__org-logo--multi {
182
- display: inline-flex;
183
- column-gap: 1rem;
184
- align-items: center;
185
- }
187
+ &-service-nav {
188
+ display: inline-block;
186
189
 
187
- &-service-nav {
188
- display: inline-block;
190
+ &--mobile {
191
+ background: var(--ons-color-branded-tint);
192
+ padding: 1rem;
193
+ width: 100%;
194
+ }
189
195
 
190
- &--mobile {
191
- background: var(--ons-color-branded-tint);
192
- padding: 1rem;
193
- width: 100%;
194
- }
196
+ .ons-header--neutral & {
197
+ &--mobile {
198
+ background: var(--ons-color-grey-5);
199
+ }
200
+ }
195
201
 
196
- .ons-header--neutral & {
197
- &--mobile {
198
- background: var(--ons-color-grey-5);
199
- }
200
- }
202
+ &__list {
203
+ list-style: none;
204
+ margin: 0;
205
+ padding: 0;
206
+ }
207
+
208
+ &__item {
209
+ display: inline-block;
210
+ margin: 0 0 0 1rem;
211
+ &--mobile {
212
+ display: block;
213
+ margin: 0 0 0.5rem;
214
+ }
215
+ &:first-child {
216
+ margin-left: 0;
217
+ }
218
+ .ons-icon {
219
+ clip-path: circle(9px at center);
220
+ margin-right: 0.5rem;
221
+ }
222
+ }
201
223
 
202
- &__list {
203
- list-style: none;
204
- margin: 0;
205
- padding: 0;
224
+ .ons-language-links {
225
+ border-top: 1px solid var(--ons-color-branded);
226
+ margin: 1.5rem 0 0;
227
+ padding: 1rem 0 0;
228
+
229
+ &__item {
230
+ margin: 0 0 0.5rem;
231
+ }
232
+ }
233
+ }
234
+ &__lang-adjustment {
235
+ @include mq(l) {
236
+ margin-right: 21rem;
237
+ margin-top: -5px !important;
238
+ }
206
239
  }
207
240
 
208
- &__item {
209
- display: inline-block;
210
- margin: 0 0 0 1rem;
211
- &--mobile {
212
- display: block;
213
- margin: 0 0 0.5rem;
214
- }
215
- &:first-child {
216
- margin-left: 0;
217
- }
218
- .ons-icon {
219
- clip-path: circle(9px at center);
220
- margin-right: 0.5rem;
221
- }
222
- }
223
-
224
- .ons-language-links {
225
- border-top: 1px solid var(--ons-color-branded);
226
- margin: 1.5rem 0 0;
227
- padding: 1rem 0 0;
228
-
229
- &__item {
230
- margin: 0 0 0.5rem;
231
- }
232
- }
233
- }
234
- &__lang-adjustment {
235
- @include mq(l) {
236
- margin-right: 21rem;
237
- margin-top: -5px !important;
238
- }
239
- }
240
-
241
- .ons-btn {
242
- top: 0 !important;
243
- }
241
+ .ons-btn {
242
+ top: 0 !important;
243
+ }
244
244
  }