@gemeentenijmegen/components-css 0.0.1-alpha.9 → 0.0.1-alpha.91

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 (44) hide show
  1. package/accordion/index.scss +9 -0
  2. package/action-card/index.scss +37 -0
  3. package/breadcrumb/index.scss +130 -0
  4. package/card/index.scss +152 -0
  5. package/dist/header.css +174 -0
  6. package/dist/index.min.css +148 -2
  7. package/footer/index.scss +116 -0
  8. package/header/_mixin.scss +31 -0
  9. package/header/index.scss +169 -0
  10. package/hero/index.scss +108 -0
  11. package/image/index.scss +17 -0
  12. package/image-text-block/index.scss +48 -0
  13. package/index.scss +23 -0
  14. package/link/index.scss +10 -9
  15. package/link-list/_mixin.scss +8 -1
  16. package/link-list/index.scss +17 -4
  17. package/listbox/index.scss +81 -0
  18. package/mega-menu/index.scss +62 -0
  19. package/menu.scss +5 -0
  20. package/metadata/index.scss +31 -0
  21. package/mobile-menu/_mixin.scss +11 -0
  22. package/mobile-menu/index.scss +177 -0
  23. package/package.json +9 -4
  24. package/pagination/_mixin.scss +41 -0
  25. package/pagination/index.scss +191 -0
  26. package/rollup.config.mjs +26 -0
  27. package/search/index.scss +141 -0
  28. package/search-results/index.scss +56 -0
  29. package/skip-link/index.scss +41 -0
  30. package/spacing/getSpacing.mjs +116 -0
  31. package/spacing/semantic-spacing-matrix.json +156 -0
  32. package/spacing/spacing-matrix.json +1056 -0
  33. package/spacing/src/_mixin.scss +1968 -0
  34. package/spacing/src/_nested.scss +47 -0
  35. package/spacing/src/index.scss +36 -0
  36. package/spacing/src/semantic/_mixin.scss +311 -0
  37. package/spacing/src/semantic/index.scss +17 -0
  38. package/steplist/index.scss +114 -0
  39. package/table/_mixin.scss +97 -0
  40. package/table/index.scss +33 -0
  41. package/table-of-contents/index.scss +21 -0
  42. package/toolbar-button/_mixin.scss +21 -0
  43. package/toolbar-button/index.js +29 -0
  44. package/toolbar-button/index.scss +51 -0
package/accordion/index.scss ADDED
@@ -0,0 +1,9 @@
1
+ /* Nijmegen overrides */
2
+ .utrecht-accordion__button {
3
+ align-items: flex-start; /* Nijmegen override */
4
+
5
+ .utrecht-accordion__button-icon {
6
+ position: relative;
7
+ top: 1px; /* stylelint-disable-line property-disallowed-list */ /* Nijmegen override */
8
+ }
9
+ }
package/action-card/index.scss ADDED
@@ -0,0 +1,37 @@
1
+ .nijmegen-action-card {
2
+ background-color: var(--nijmegen-action-card-background-color);
3
+ border-color: var(--nijmegen-action-card-border-color);
4
+ border-style: solid;
5
+ border-width: var(--nijmegen-action-card-border-width);
6
+ display: flex;
7
+ flex-direction: column;
8
+ gap: var(--nijmegen-action-card-row-gap);
9
+ padding-block-end: var(--nijmegen-action-card-padding-block-end);
10
+ padding-block-start: var(--nijmegen-action-card-padding-block-start);
11
+ padding-inline-end: var(--nijmegen-action-card-padding-inline-end);
12
+ padding-inline-start: var(--nijmegen-action-card-padding-inline-start);
13
+
14
+ @media (width >=1024px) {
15
+ padding-block-end: var(--nijmegen-action-card-large-vw-padding-block-end);
16
+ padding-block-start: var(--nijmegen-action-card-large-vw-padding-block-start);
17
+ padding-inline-end: var(--nijmegen-action-card-large-vw-padding-inline-end);
18
+ padding-inline-start: var(--nijmegen-action-card-large-vw-padding-inline-start);
19
+ }
20
+
21
+ @media (width <576px) {
22
+ .utrecht-button-group {
23
+ flex-direction: column;
24
+
25
+ .utrecht-button {
26
+ inline-size: 100%;
27
+ max-inline-size: 100%;
28
+ }
29
+ }
30
+ }
31
+ }
32
+
33
+ .nijmegen-action-card__content {
34
+ display: flex;
35
+ flex-direction: column;
36
+ gap: var(--nijmegen-action-card-conten-row-gap);
37
+ }
package/breadcrumb/index.scss ADDED
@@ -0,0 +1,130 @@
1
+ /* stylelint-disable no-descending-specificity */
2
+
3
+ @import "~@utrecht/link-css/src/mixin";
4
+ @import "~@utrecht/focus-ring-css/src/mixin";
5
+
6
+ .nijmegen-breadcrumb {
7
+ @media (width >=576px) {
8
+ background-color: var(--nijmegen-breadcrumb-navigation-background-color);
9
+ }
10
+
11
+ font-family: var(--nijmegen-breadcrumb-navigation-font-family);
12
+ font-size: var(--nijmegen-breadcrumb-navigation-font-size);
13
+ font-weight: var(--nijmegen-breadcrumb-navigation-font-weight);
14
+ line-height: var(--nijmegen-breadcrumb-navigation-line-height);
15
+ margin-block-end: var(--nijmegen-breadcrumb-margin-block-end);
16
+ overflow: hidden;
17
+ }
18
+
19
+ .nijmegen-breadcrumb__list {
20
+ block-size: 100%;
21
+ display: flex;
22
+ gap: var(--nijmegen-breadcrumb-navigation-list-column-gap);
23
+ margin-block-end: 0;
24
+ margin-block-start: 0;
25
+ margin-inline: auto;
26
+ max-inline-size: var(--nijmegen-breadcrumb-navigation-list-max-inline-size);
27
+ padding-inline-end: var(--nijmegen-breadcrumb-navigation-list-padding-inline-end);
28
+ padding-inline-start: var(--nijmegen-breadcrumb-navigation-list-padding-inline-start);
29
+
30
+ @media (width <=576px) {
31
+ display: none;
32
+ }
33
+ }
34
+
35
+ ol.nijmegen-breadcrumb__list {
36
+ list-style: none;
37
+ }
38
+
39
+ .nijmegen-breadcrumb__item {
40
+ align-items: center;
41
+ display: flex;
42
+
43
+ &:not(:last-child) {
44
+ &::after {
45
+ background-color: var(--nijmegen-breadcrumb-navigation-separator-color);
46
+ content: "";
47
+ display: inline-block;
48
+ /* stylelint-disable-next-line property-disallowed-list */
49
+ height: var(--nijmegen-breadcrumb-navigation-separator-size);
50
+ margin-inline-start: var(--nijmegen-breadcrumb-navigation-list-column-gap);
51
+ mask-image: var(
52
+ --nijmegen-header-item-open-icon-image,
53
+ url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>')
54
+ );
55
+ mask-position: center;
56
+ mask-repeat: no-repeat;
57
+ mask-size: 100%;
58
+ width: var(--nijmegen-breadcrumb-navigation-separator-size); /* stylelint-disable-line property-disallowed-list */
59
+ }
60
+ }
61
+ }
62
+
63
+ .nijmegen-breadcrumb__link {
64
+ @include utrecht-link;
65
+
66
+ padding-block-end: var(--nijmegen-breadcrumb-navigation-link-padding-block-end);
67
+ padding-block-start: var(--nijmegen-breadcrumb-navigation-link-padding-block-start);
68
+ padding-inline-end: var(--nijmegen-breadcrumb-navigation-link-padding-inline-end);
69
+ padding-inline-start: var(--nijmegen-breadcrumb-navigation-link-padding-inline-start);
70
+ text-decoration: var(--nijmegen-breadcrumb-navigation-link-text-decoration);
71
+ white-space: nowrap;
72
+ }
73
+
74
+ .nijmegen-breadcrumb__link--mobile {
75
+ display: inline-flex;
76
+ gap: var(--nijmegen-breadcrumb-navigation-link-icon-column-gap);
77
+ padding-inline-end: var(--nijmegen-breadcrumb-navigation-list-padding-inline-end);
78
+ padding-inline-start: var(--nijmegen-breadcrumb-navigation-list-padding-inline-start);
79
+
80
+ @media (width >=576px) {
81
+ display: none;
82
+ }
83
+
84
+ &::before {
85
+ background-color: currentColor;
86
+ content: "";
87
+ display: inline-block;
88
+ /* stylelint-disable-next-line property-disallowed-list */
89
+ height: var(--nijmegen-breadcrumb-navigation-link-icon-size, 1.5rem);
90
+ mask-image: var(
91
+ --nijmegen-breadcrumb-navigation-link-icon-image,
92
+ url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-left"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /><path d="M5 12l6 6" /><path d="M5 12l6 -6" /></svg>')
93
+ );
94
+ mask-position: center;
95
+ mask-repeat: no-repeat;
96
+ mask-size: 100%;
97
+ /* stylelint-disable-next-line property-disallowed-list */
98
+ width: var(--nijmegen-breadcrumb-navigation-link-icon-size, 1.5rem);
99
+ }
100
+ }
101
+
102
+ .nijmegen-breadcrumb__link--disabled {
103
+ color: var(--nijmegen-breadcrumb-navigation-link-current-color);
104
+ cursor: none;
105
+ pointer-events: none;
106
+ }
107
+
108
+ .nijmegen-breadcrumb__link--active,
109
+ .nijmegen-breadcrumb__link:active {
110
+ color: var(--nijmegen-breadcrumb-navigation-link-active-color);
111
+ text-decoration: var(--nijmegen-breadcrumb-navigation-link-active-text-decoration);
112
+ }
113
+
114
+ .nijmegen-breadcrumb__link--hover,
115
+ .nijmegen-breadcrumb__link:hover {
116
+ color: var(--nijmegen-breadcrumb-navigation-link-hover-color);
117
+ text-decoration: var(--nijmegen-breadcrumb-navigation-link-hover-text-decoration);
118
+ }
119
+
120
+ .nijmegen-breadcrumb__link--focus,
121
+ .nijmegen-breadcrumb__link:has(:focus) {
122
+ @include utrecht-link--focus;
123
+ @include utrecht-focus-ring;
124
+ }
125
+
126
+ .nijmegen-breadcrumb__link--focus-visible,
127
+ .nijmegen-breadcrumb__link:focus-visible {
128
+ @include utrecht-link--focus;
129
+ @include utrecht-focus-ring;
130
+ }
package/card/index.scss ADDED
@@ -0,0 +1,152 @@
1
+ /* stylelint-disable no-descending-specificity */
2
+
3
+ @import "~@utrecht/link-css/src/mixin";
4
+ @import "~@utrecht/focus-ring-css/src/mixin";
5
+ @import "~@utrecht/unordered-list-css/src/mixin";
6
+
7
+ .nijmegen-card {
8
+ background-color: var(--nijmegen-card-background-color);
9
+ border-color: var(--nijmegen-card-border-color);
10
+ border-radius: var(--nijmegen-card-border-radius);
11
+ border-style: solid;
12
+ border-width: var(--nijmegen-card-border-width);
13
+ color: var(--nijmegen-card-color);
14
+ display: flex;
15
+ flex-direction: column;
16
+ height: 100%; /* stylelint-disable-line property-disallowed-list */
17
+ position: relative;
18
+
19
+ /* stylelint-disable */
20
+ #storybook-root &,
21
+ #storybook-docs & {
22
+ max-width: var(--nijmegen-card-max-width, 328px);
23
+ }
24
+ /* stylelint-enable */
25
+ }
26
+
27
+ .nijmegen-card__link {
28
+ color: inherit;
29
+ text-decoration: var(--nijmegen-card-heading-text-decoration);
30
+
31
+ &:focus-visible {
32
+ outline: none;
33
+ }
34
+
35
+ &::after {
36
+ content: "";
37
+ inset: 0;
38
+ position: absolute;
39
+ }
40
+ }
41
+
42
+ .nijmegen-card__figure {
43
+ aspect-ratio: 12 / 9;
44
+ border-radius: var(--nijmegen-card-border-radius) var(--nijmegen-card-border-radius) 0 0;
45
+ display: inline-flex;
46
+ margin: 0; /* stylelint-disable-line property-disallowed-list */
47
+ order: -1;
48
+ overflow: hidden;
49
+
50
+ img {
51
+ height: 100%; /* stylelint-disable-line property-disallowed-list */
52
+ object-fit: cover;
53
+ object-position: center center;
54
+ width: 100%; /* stylelint-disable-line property-disallowed-list */
55
+ }
56
+ }
57
+
58
+ .nijmegen-card__inner {
59
+ display: flex;
60
+ flex-direction: column;
61
+ gap: var(--nijmegen-card-content-row-gap);
62
+ padding-block-end: var(--nijmegen-card-padding-block-end);
63
+ padding-block-start: var(--nijmegen-card-padding-block-start);
64
+ padding-inline-end: var(--nijmegen-card-padding-inline-end);
65
+ padding-inline-start: var(--nijmegen-card-padding-inline-start);
66
+
67
+ ul {
68
+ @include utrecht-unordered-list;
69
+
70
+ display: flex;
71
+ flex-direction: column;
72
+ gap: var(--nijmegen-card-metadata-column-gap);
73
+ padding-inline-start: 0;
74
+ }
75
+ }
76
+
77
+ .nijmegen-card__meta-item {
78
+ align-items: center;
79
+ display: flex;
80
+ gap: var(--nijmegen-card-metadata-column-gap);
81
+
82
+ svg {
83
+ block-size: var(--nijmegen-card-icon-size);
84
+ }
85
+ }
86
+
87
+ .nijmegen-card__footer {
88
+ display: flex;
89
+ flex-direction: row-reverse;
90
+ justify-content: space-between;
91
+ margin-block-start: auto;
92
+ padding-block-end: var(--nijmegen-card-padding-block-end);
93
+ padding-inline-end: var(--nijmegen-card-padding-inline-end);
94
+ padding-inline-start: var(--nijmegen-card-padding-inline-start);
95
+ > svg {
96
+ stroke: var(--nijmegen-card-action-icon-color);
97
+ }
98
+ }
99
+
100
+ .nijmegen-card--hover,
101
+ .nijmegen-card:hover {
102
+ .nijmegen-card__link {
103
+ @include utrecht-link--hover;
104
+
105
+ color: var(--nijmegen-card-heading-hover-color);
106
+ text-decoration: var(--nijmegen-card-heading-hover-text-decoration);
107
+ }
108
+ }
109
+
110
+ .nijmegen-card--active,
111
+ .nijmegen-card:active {
112
+ .nijmegen-card__link {
113
+ @include utrecht-link--active;
114
+
115
+ color: var(--nijmegen-card-heading-active-color);
116
+ text-decoration: var(--nijmegen-card-heading-active-text-decoration);
117
+ }
118
+ }
119
+
120
+ .nijmegen-card--focus,
121
+ .nijmegen-card:has(:focus) {
122
+ @include utrecht-link--focus;
123
+
124
+ .nijmegen-card__link {
125
+ color: var(--nijmegen-card-heading-focus-visible-color);
126
+ text-decoration: var(--nijmegen-card-heading-focus-visible-text-decoration);
127
+ }
128
+ }
129
+
130
+ .nijmegen-card--focus-visible,
131
+ .nijmegen-card:has(:focus-visible) {
132
+ @include utrecht-link--focus;
133
+
134
+ .nijmegen-card__footer > svg {
135
+ stroke: var(--nijmegen-card-color);
136
+ }
137
+
138
+ .nijmegen-card__figure img {
139
+ border-radius: var(--nijmegen-card-border-radius) var(--nijmegen-card-border-radius) 0 0;
140
+ }
141
+
142
+ .nijmegen-card__link {
143
+ color: var(--nijmegen-card-heading-focus-visible-color);
144
+ text-decoration: var(--nijmegen-card-heading-focus-visible-text-decoration);
145
+
146
+ &::after {
147
+ @include utrecht-focus-ring;
148
+
149
+ border-radius: var(--nijmegen-card-border-radius);
150
+ }
151
+ }
152
+ }
package/dist/header.css ADDED
@@ -0,0 +1,174 @@
1
+ /* stylelint-disable order/properties-alphabetical-order */
2
+ .nijmegen-header {
3
+ background-color: var(--nijmegen-header-background-color, #fff);
4
+ margin-inline-end: auto;
5
+ margin-inline-start: auto;
6
+ max-width: var(--nijmegen-header-content-max-inline-size, 100%); /* stylelint-disable-line property-disallowed-list */
7
+ width: 100%; /* stylelint-disable-line property-disallowed-list */
8
+ writing-mode: horizontal-tb;
9
+ }
10
+
11
+ .nijmegen-header__content {
12
+ align-items: center;
13
+ align-self: center;
14
+ border: 0 solid var(--nijmegen-header-border-color, transparent);
15
+ display: flex;
16
+ flex-direction: row;
17
+ justify-content: space-between;
18
+ margin-inline: auto;
19
+ padding-block-end: var(--nijmegen-header-content-large-vw-padding-block-end, 0);
20
+ padding-block-start: var(--nijmegen-header-content-large-vw-padding-block-start, 0);
21
+ padding-inline-end: var(--nijmegen-header-content-large-vw-padding-inline-end, 0);
22
+ padding-inline-start: var(--nijmegen-header-content-large-vw-padding-inline-start, 0);
23
+ }
24
+ @media (width < 1024px) {
25
+ .nijmegen-header__content {
26
+ padding-block-end: var(--nijmegen-header-content-padding-block-end, 0);
27
+ padding-block-start: var(--nijmegen-header-content-padding-block-start, 0);
28
+ padding-inline-end: var(--nijmegen-header-content-padding-inline-end, 0);
29
+ padding-inline-start: var(--nijmegen-header-content-padding-inline-start, 0);
30
+ }
31
+ }
32
+ @media (width < 1024px) {
33
+ .nijmegen-header__content {
34
+ display: none;
35
+ }
36
+ }
37
+
38
+ .nijmegen-header__content--small--inner {
39
+ border-block-end-width: var(--nijmegen-header-border-block-end-width, 0);
40
+ align-items: center;
41
+ align-self: center;
42
+ border: 0 solid var(--nijmegen-header-border-color, transparent);
43
+ display: flex;
44
+ flex-direction: row;
45
+ justify-content: space-between;
46
+ margin-inline: auto;
47
+ padding-block-end: var(--nijmegen-header-content-large-vw-padding-block-end, 0);
48
+ padding-block-start: var(--nijmegen-header-content-large-vw-padding-block-start, 0);
49
+ padding-inline-end: var(--nijmegen-header-content-large-vw-padding-inline-end, 0);
50
+ padding-inline-start: var(--nijmegen-header-content-large-vw-padding-inline-start, 0);
51
+ }
52
+ @media (width < 1024px) {
53
+ .nijmegen-header__content--small--inner {
54
+ padding-block-end: var(--nijmegen-header-content-padding-block-end, 0);
55
+ padding-block-start: var(--nijmegen-header-content-padding-block-start, 0);
56
+ padding-inline-end: var(--nijmegen-header-content-padding-inline-end, 0);
57
+ padding-inline-start: var(--nijmegen-header-content-padding-inline-start, 0);
58
+ }
59
+ }
60
+ @media (width >= 1024px) {
61
+ .nijmegen-header__content--small {
62
+ display: none;
63
+ }
64
+ }
65
+
66
+ .nijmegen-header__mobile-menu {
67
+ display: none;
68
+ }
69
+ .nijmegen-header__mobile-menu--visible {
70
+ display: block;
71
+ }
72
+
73
+ .nijmegen-header__navigation,
74
+ .nijmegen-header__actions {
75
+ column-gap: var(--nijmegen-header-content-column-gap, 0);
76
+ display: flex;
77
+ flex-direction: row;
78
+ justify-content: space-between;
79
+ list-style: none;
80
+ padding-inline-start: 0;
81
+ }
82
+
83
+ .nijmegen-header__panel {
84
+ display: none;
85
+ left: 0; /* stylelint-disable-line property-disallowed-list */
86
+ padding-block-start: 1.5rem;
87
+ position: absolute;
88
+ width: 100%; /* stylelint-disable-line property-disallowed-list */
89
+ z-index: 1;
90
+ }
91
+
92
+ .nijmegen-header-item {
93
+ all: unset;
94
+ align-items: end;
95
+ color: var(--nijmegen-header-item-color, #000);
96
+ column-gap: var(--nijmegen-header-item-column-gap, 0);
97
+ cursor: pointer;
98
+ display: flex;
99
+ flex-direction: row;
100
+ font-family: var(--nijmegen-header-item-font-family, inherit);
101
+ font-size: var(--nijmegen-header-item-font-size, 1rem);
102
+ font-weight: var(--nijmegen-header-item-font-weight, 400);
103
+ justify-content: space-between;
104
+ line-height: var(--nijmegen-header-item-line-height, 1.5);
105
+ text-decoration: none;
106
+ user-select: none;
107
+ }
108
+ .nijmegen-header-item[aria-expanded]::after {
109
+ background-color: var(--nijmegen-header-item-color, #000);
110
+ content: "";
111
+ display: inline-block;
112
+ /* stylelint-disable-next-line property-disallowed-list */
113
+ height: var(--nijmegen-header-item-icon-size, 1.5rem);
114
+ mask-position: center;
115
+ mask-repeat: no-repeat;
116
+ mask-size: 100%;
117
+ width: var(--nijmegen-header-item-icon-size, 1.5rem); /* stylelint-disable-line property-disallowed-list */
118
+ }
119
+ .nijmegen-header-item--active, .nijmegen-header-item[aria-expanded=true] {
120
+ -webkit-text-stroke-width: 1px;
121
+ }
122
+ .nijmegen-header-item--active + .nijmegen-header__panel, .nijmegen-header-item[aria-expanded=true] + .nijmegen-header__panel {
123
+ display: block;
124
+ }
125
+ .nijmegen-header-item[aria-expanded=false]::after {
126
+ mask-image: var(--nijmegen-header-item-open-icon-image, url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 9l6 6l6 -6" /></svg>'));
127
+ }
128
+ .nijmegen-header-item[aria-expanded=true]::after {
129
+ mask-image: var(--nijmegen-header-item-open-icon-image, url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-up"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 15l6 -6l6 6" /></svg>'));
130
+ }
131
+ .nijmegen-header-item[class*=nijmegen-header-item--icon-]::before {
132
+ background-color: var(--nijmegen-header-item-color, #000);
133
+ content: "";
134
+ display: inline-block;
135
+ /* stylelint-disable-next-line property-disallowed-list */
136
+ height: var(--nijmegen-header-item-icon-size, 1.5rem);
137
+ mask-position: center;
138
+ mask-repeat: no-repeat;
139
+ mask-size: 100%;
140
+ width: var(--nijmegen-header-item-icon-size, 1.5rem); /* stylelint-disable-line property-disallowed-list */
141
+ }
142
+ .nijmegen-header-item[class*=nijmegen-header-item--icon-][aria-expanded]::after {
143
+ all: unset;
144
+ }
145
+ .nijmegen-header-item[class*=nijmegen-header-item--icon-][aria-expanded=true]::before {
146
+ mask-image: var(--nijmegen-header-item-close-icon-image, url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>'));
147
+ }
148
+ .nijmegen-header-item--icon-search::before {
149
+ mask-image: var(--nijmegen-header-item-search-icon-image, url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-search"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>'));
150
+ }
151
+ @media (width < 1280px) {
152
+ .nijmegen-header-item--icon-user span {
153
+ display: none;
154
+ }
155
+ }
156
+ .nijmegen-header-item--icon-user::before {
157
+ mask-image: var(--nijmegen-header-item-search-icon-image, url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-user"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" /><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /></svg>'));
158
+ }
159
+ .nijmegen-header-item:hover, .nijmegen-header-item--hover {
160
+ color: var(--nijmegen-header-item-hover-color, #000);
161
+ text-decoration: var(--nijmegen-header-item-hover-text-decoration, none);
162
+ }
163
+ .nijmegen-header-item:hover::before, .nijmegen-header-item:hover::after, .nijmegen-header-item--hover::before, .nijmegen-header-item--hover::after {
164
+ background-color: var(--nijmegen-header-item-hover-color, #000);
165
+ }
166
+ .nijmegen-header-item:active, .nijmegen-header-item--active {
167
+ color: var(--nijmegen-header-item-active-color, #000);
168
+ text-decoration: var(--nijmegen-header-item-active-text-decoration, none);
169
+ }
170
+ .nijmegen-header-item:focus-visible, .nijmegen-header-item--focus-visible {
171
+ background-color: var(--nijmegen-header-item-focus-visible-background-color, #fff);
172
+ border: var(--nijmegen-header-item-focus-visible-border-line-width, 1px) var(--nijmegen-header-item-focus-visible-border-line-style, dashed) var(--nijmegen-header-item-focus-visible-border-color, #082d26);
173
+ color: var(--nijmegen-header-item-focus-visible-color, #000);
174
+ }