@gemeentenijmegen/components-css 0.0.1-alpha.7 → 0.0.1-alpha.71

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 (43) hide show
  1. package/accordion/index.scss +10 -0
  2. package/action-card/index.scss +37 -0
  3. package/breadcrumb/index.scss +126 -0
  4. package/card/index.scss +145 -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/index.scss +22 -0
  13. package/link/index.scss +10 -9
  14. package/link-list/_mixin.scss +5 -1
  15. package/link-list/index.scss +9 -4
  16. package/listbox/index.scss +81 -0
  17. package/mega-menu/index.scss +62 -0
  18. package/menu.scss +5 -0
  19. package/metadata/index.scss +31 -0
  20. package/mobile-menu/_mixin.scss +11 -0
  21. package/mobile-menu/index.scss +177 -0
  22. package/package.json +9 -4
  23. package/pagination/_mixin.scss +41 -0
  24. package/pagination/index.scss +191 -0
  25. package/rollup.config.mjs +26 -0
  26. package/search/index.scss +133 -0
  27. package/search-results/index.scss +56 -0
  28. package/skip-link/index.scss +41 -0
  29. package/spacing/getSpacing.mjs +116 -0
  30. package/spacing/semantic-spacing-matrix.json +156 -0
  31. package/spacing/spacing-matrix.json +1056 -0
  32. package/spacing/src/_mixin.scss +1968 -0
  33. package/spacing/src/_nested.scss +64 -0
  34. package/spacing/src/index.scss +36 -0
  35. package/spacing/src/semantic/_mixin.scss +311 -0
  36. package/spacing/src/semantic/index.scss +17 -0
  37. package/steplist/index.scss +109 -0
  38. package/table/_mixin.scss +97 -0
  39. package/table/index.scss +33 -0
  40. package/table-of-contents/index.scss +21 -0
  41. package/toolbar-button/_mixin.scss +21 -0
  42. package/toolbar-button/index.js +29 -0
  43. package/toolbar-button/index.scss +51 -0
package/accordion/index.scss ADDED
@@ -0,0 +1,10 @@
1
+ .nijmegen-theme {
2
+ .utrecht-accordion__button {
3
+ align-items: flex-start;
4
+
5
+ .utrecht-accordion__button-icon {
6
+ position: relative;
7
+ top: 1px; /* stylelint-disable-line property-disallowed-list */
8
+ }
9
+ }
10
+ }
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,126 @@
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
+ }
17
+
18
+ .nijmegen-breadcrumb__list {
19
+ block-size: 100%;
20
+ display: flex;
21
+ gap: var(--nijmegen-breadcrumb-navigation-list-column-gap);
22
+ margin-block-end: 0;
23
+ margin-block-start: 0;
24
+ margin-inline: auto;
25
+ max-inline-size: var(--nijmegen-breadcrumb-navigation-list-max-inline-size);
26
+ padding-inline-end: var(--nijmegen-breadcrumb-navigation-list-padding-inline-end);
27
+ padding-inline-start: var(--nijmegen-breadcrumb-navigation-list-padding-inline-start);
28
+
29
+ @media (width <=576px) {
30
+ display: none;
31
+ }
32
+ }
33
+
34
+ ol.nijmegen-breadcrumb__list {
35
+ list-style: none;
36
+ }
37
+
38
+ .nijmegen-breadcrumb__item {
39
+ align-items: center;
40
+ display: flex;
41
+
42
+ &:not(:last-child) {
43
+ &::after {
44
+ background-color: var(--nijmegen-breadcrumb-navigation-separator-color);
45
+ content: "";
46
+ display: inline-block;
47
+ /* stylelint-disable-next-line property-disallowed-list */
48
+ height: var(--nijmegen-breadcrumb-navigation-separator-size);
49
+ margin-inline-start: var(--nijmegen-breadcrumb-navigation-list-column-gap);
50
+ mask-image: var(
51
+ --nijmegen-header-item-open-icon-image,
52
+ 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>')
53
+ );
54
+ mask-position: center;
55
+ mask-repeat: no-repeat;
56
+ mask-size: 100%;
57
+ width: var(--nijmegen-breadcrumb-navigation-separator-size); /* stylelint-disable-line property-disallowed-list */
58
+ }
59
+ }
60
+ }
61
+
62
+ .nijmegen-breadcrumb__link {
63
+ @include utrecht-link;
64
+
65
+ padding-block-end: var(--nijmegen-breadcrumb-navigation-link-padding-block-end);
66
+ padding-block-start: var(--nijmegen-breadcrumb-navigation-link-padding-block-start);
67
+ padding-inline-end: var(--nijmegen-breadcrumb-navigation-link-padding-inline-end);
68
+ padding-inline-start: var(--nijmegen-breadcrumb-navigation-link-padding-inline-start);
69
+ text-decoration: var(--nijmegen-breadcrumb-navigation-link-text-decoration);
70
+ }
71
+
72
+ .nijmegen-breadcrumb__link--mobile {
73
+ display: inline-flex;
74
+ gap: var(--nijmegen-breadcrumb-navigation-link-icon-column-gap);
75
+
76
+ @media (width >=576px) {
77
+ display: none;
78
+ }
79
+
80
+ &::before {
81
+ background-color: currentColor;
82
+ content: "";
83
+ display: inline-block;
84
+ /* stylelint-disable-next-line property-disallowed-list */
85
+ height: var(--nijmegen-breadcrumb-navigation-link-icon-size, 1.5rem);
86
+ mask-image: var(
87
+ --nijmegen-breadcrumb-navigation-link-icon-image,
88
+ 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>')
89
+ );
90
+ mask-position: center;
91
+ mask-repeat: no-repeat;
92
+ mask-size: 100%;
93
+ /* stylelint-disable-next-line property-disallowed-list */
94
+ width: var(--nijmegen-breadcrumb-navigation-link-icon-size, 1.5rem);
95
+ }
96
+ }
97
+
98
+ .nijmegen-breadcrumb__link--disabled {
99
+ color: var(--nijmegen-breadcrumb-navigation-link-current-color);
100
+ cursor: none;
101
+ pointer-events: none;
102
+ }
103
+
104
+ .nijmegen-breadcrumb__link--active,
105
+ .nijmegen-breadcrumb__link:active {
106
+ color: var(--nijmegen-breadcrumb-navigation-link-active-color);
107
+ text-decoration: var(--nijmegen-breadcrumb-navigation-link-active-text-decoration);
108
+ }
109
+
110
+ .nijmegen-breadcrumb__link--hover,
111
+ .nijmegen-breadcrumb__link:hover {
112
+ color: var(--nijmegen-breadcrumb-navigation-link-hover-color);
113
+ text-decoration: var(--nijmegen-breadcrumb-navigation-link-hover-text-decoration);
114
+ }
115
+
116
+ .nijmegen-breadcrumb__link--focus,
117
+ .nijmegen-breadcrumb__link:has(:focus) {
118
+ @include utrecht-link--focus;
119
+ @include utrecht-focus-ring;
120
+ }
121
+
122
+ .nijmegen-breadcrumb__link--focus-visible,
123
+ .nijmegen-breadcrumb__link:focus-visible {
124
+ @include utrecht-link--focus;
125
+ @include utrecht-focus-ring;
126
+ }
package/card/index.scss ADDED
@@ -0,0 +1,145 @@
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
+ max-width: var(--nijmegen-card-max-width, 328px); /* stylelint-disable-line property-disallowed-list */
17
+ position: relative;
18
+ }
19
+
20
+ .nijmegen-card__link {
21
+ color: inherit;
22
+ text-decoration: var(--nijmegen-card-heading-text-decoration);
23
+
24
+ &:focus-visible {
25
+ outline: none;
26
+ }
27
+
28
+ &::after {
29
+ content: "";
30
+ inset: 0;
31
+ position: absolute;
32
+ }
33
+ }
34
+
35
+ .nijmegen-card__figure {
36
+ aspect-ratio: 12 / 9;
37
+ border-radius: var(--nijmegen-card-border-radius) var(--nijmegen-card-border-radius) 0 0;
38
+ display: inline-flex;
39
+ margin: 0; /* stylelint-disable-line property-disallowed-list */
40
+ order: -1;
41
+ overflow: hidden;
42
+
43
+ img {
44
+ height: 100%; /* stylelint-disable-line property-disallowed-list */
45
+ object-fit: cover;
46
+ object-position: center center;
47
+ width: 100%; /* stylelint-disable-line property-disallowed-list */
48
+ }
49
+ }
50
+
51
+ .nijmegen-card__inner {
52
+ display: flex;
53
+ flex-direction: column;
54
+ gap: var(--nijmegen-card-content-row-gap);
55
+ padding-block-end: var(--nijmegen-card-padding-block-end);
56
+ padding-block-start: var(--nijmegen-card-padding-block-start);
57
+ padding-inline-end: var(--nijmegen-card-padding-inline-end);
58
+ padding-inline-start: var(--nijmegen-card-padding-inline-start);
59
+
60
+ ul {
61
+ @include utrecht-unordered-list;
62
+
63
+ display: flex;
64
+ flex-direction: column;
65
+ gap: var(--nijmegen-card-metadata-column-gap);
66
+ padding-inline-start: 0;
67
+ }
68
+ }
69
+
70
+ .nijmegen-card__meta-item {
71
+ align-items: center;
72
+ display: flex;
73
+ gap: var(--nijmegen-card-metadata-column-gap);
74
+
75
+ svg {
76
+ block-size: var(--nijmegen-card-icon-size);
77
+ }
78
+ }
79
+
80
+ .nijmegen-card__footer {
81
+ display: flex;
82
+ flex-direction: row-reverse;
83
+ justify-content: space-between;
84
+ margin-block-start: auto;
85
+ padding-block-end: var(--nijmegen-card-padding-block-end);
86
+ padding-inline-end: var(--nijmegen-card-padding-inline-end);
87
+ padding-inline-start: var(--nijmegen-card-padding-inline-start);
88
+ > svg {
89
+ stroke: var(--nijmegen-card-action-icon-color);
90
+ }
91
+ }
92
+
93
+ .nijmegen-card--hover,
94
+ .nijmegen-card:hover {
95
+ .nijmegen-card__link {
96
+ @include utrecht-link--hover;
97
+
98
+ color: var(--nijmegen-card-heading-hover-color);
99
+ text-decoration: var(--nijmegen-card-heading-hover-text-decoration);
100
+ }
101
+ }
102
+
103
+ .nijmegen-card--active,
104
+ .nijmegen-card:active {
105
+ .nijmegen-card__link {
106
+ @include utrecht-link--active;
107
+
108
+ color: var(--nijmegen-card-heading-active-color);
109
+ text-decoration: var(--nijmegen-card-heading-active-text-decoration);
110
+ }
111
+ }
112
+
113
+ .nijmegen-card--focus,
114
+ .nijmegen-card:has(:focus) {
115
+ @include utrecht-link--focus;
116
+
117
+ .nijmegen-card__link {
118
+ color: var(--nijmegen-card-heading-focus-visible-color);
119
+ text-decoration: var(--nijmegen-card-heading-focus-visible-text-decoration);
120
+ }
121
+ }
122
+
123
+ .nijmegen-card--focus-visible,
124
+ .nijmegen-card:has(:focus-visible) {
125
+ @include utrecht-link--focus;
126
+
127
+ .nijmegen-card__footer > svg {
128
+ stroke: var(--nijmegen-card-color);
129
+ }
130
+
131
+ .nijmegen-card__figure img {
132
+ border-radius: var(--nijmegen-card-border-radius) var(--nijmegen-card-border-radius) 0 0;
133
+ }
134
+
135
+ .nijmegen-card__link {
136
+ color: var(--nijmegen-card-heading-focus-visible-color);
137
+ text-decoration: var(--nijmegen-card-heading-focus-visible-text-decoration);
138
+
139
+ &::after {
140
+ @include utrecht-focus-ring;
141
+
142
+ border-radius: var(--nijmegen-card-border-radius);
143
+ }
144
+ }
145
+ }
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
+ }