@gemeentenijmegen/components-css 0.0.1-alpha.93 → 0.0.1-alpha.95
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/dist/header.css +60 -34
- package/dist/index.min.css +2 -2
- package/header/_mixin.scss +5 -10
- package/header/index.scss +42 -13
- package/mega-menu/index.scss +6 -7
- package/mobile-menu/index.scss +4 -1
- package/package.json +3 -3
package/dist/header.css
CHANGED
|
@@ -1,12 +1,17 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @license EUPL-1.2
|
|
3
|
+
* Copyright (c) 2020-2024 Frameless B.V.
|
|
4
|
+
* Copyright (c) 2021-2024 Gemeente Utrecht
|
|
5
|
+
*/
|
|
6
|
+
/* stylelint-disable-next-line block-no-empty */
|
|
2
7
|
.nijmegen-header {
|
|
3
8
|
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
9
|
writing-mode: horizontal-tb;
|
|
9
10
|
}
|
|
11
|
+
.nijmegen-header .nijmegen-search {
|
|
12
|
+
background-color: red;
|
|
13
|
+
inline-size: 100%;
|
|
14
|
+
}
|
|
10
15
|
|
|
11
16
|
.nijmegen-header__content {
|
|
12
17
|
align-items: center;
|
|
@@ -16,18 +21,12 @@
|
|
|
16
21
|
flex-direction: row;
|
|
17
22
|
justify-content: space-between;
|
|
18
23
|
margin-inline: auto;
|
|
19
|
-
|
|
20
|
-
padding-block-
|
|
21
|
-
padding-
|
|
22
|
-
padding-inline-
|
|
23
|
-
|
|
24
|
-
|
|
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
|
-
}
|
|
24
|
+
max-inline-size: var(--nijmegen-header-content-max-inline-size, 100%);
|
|
25
|
+
padding-block-end: var(--nijmegen-header-content-padding-block-end, 0);
|
|
26
|
+
padding-block-start: var(--nijmegen-header-content-padding-block-start, 0);
|
|
27
|
+
padding-inline-end: var(--nijmegen-header-content-padding-inline-end, 0);
|
|
28
|
+
padding-inline-start: var(--nijmegen-header-content-padding-inline-start, 0);
|
|
29
|
+
border-block-end-width: var(--nijmegen-header-border-block-end-width, 0);
|
|
31
30
|
}
|
|
32
31
|
@media (width < 1024px) {
|
|
33
32
|
.nijmegen-header__content {
|
|
@@ -35,8 +34,10 @@
|
|
|
35
34
|
}
|
|
36
35
|
}
|
|
37
36
|
|
|
37
|
+
.nijmegen-header__content--small {
|
|
38
|
+
position: relative;
|
|
39
|
+
}
|
|
38
40
|
.nijmegen-header__content--small--inner {
|
|
39
|
-
border-block-end-width: var(--nijmegen-header-border-block-end-width, 0);
|
|
40
41
|
align-items: center;
|
|
41
42
|
align-self: center;
|
|
42
43
|
border: 0 solid var(--nijmegen-header-border-color, transparent);
|
|
@@ -44,18 +45,12 @@
|
|
|
44
45
|
flex-direction: row;
|
|
45
46
|
justify-content: space-between;
|
|
46
47
|
margin-inline: auto;
|
|
47
|
-
|
|
48
|
-
padding-block-
|
|
49
|
-
padding-
|
|
50
|
-
padding-inline-
|
|
51
|
-
|
|
52
|
-
|
|
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
|
-
}
|
|
48
|
+
max-inline-size: var(--nijmegen-header-content-max-inline-size, 100%);
|
|
49
|
+
padding-block-end: var(--nijmegen-header-content-padding-block-end, 0);
|
|
50
|
+
padding-block-start: var(--nijmegen-header-content-padding-block-start, 0);
|
|
51
|
+
padding-inline-end: var(--nijmegen-header-content-padding-inline-end, 0);
|
|
52
|
+
padding-inline-start: var(--nijmegen-header-content-padding-inline-start, 0);
|
|
53
|
+
border-block-end-width: var(--nijmegen-header-border-block-end-width, 0);
|
|
59
54
|
}
|
|
60
55
|
@media (width >= 1024px) {
|
|
61
56
|
.nijmegen-header__content--small {
|
|
@@ -64,7 +59,13 @@
|
|
|
64
59
|
}
|
|
65
60
|
|
|
66
61
|
.nijmegen-header__mobile-menu {
|
|
62
|
+
background-color: var(--nijmegen-menu-background-color);
|
|
67
63
|
display: none;
|
|
64
|
+
padding-block-end: var(--nijmegen-menu-padding-block-end);
|
|
65
|
+
padding-block-start: var(--nijmegen-menu-padding-block-start);
|
|
66
|
+
position: absolute;
|
|
67
|
+
width: 100%; /* stylelint-disable-line property-disallowed-list */
|
|
68
|
+
z-index: 10;
|
|
68
69
|
}
|
|
69
70
|
.nijmegen-header__mobile-menu--visible {
|
|
70
71
|
display: block;
|
|
@@ -86,12 +87,26 @@
|
|
|
86
87
|
padding-block-start: 1.5rem;
|
|
87
88
|
position: absolute;
|
|
88
89
|
width: 100%; /* stylelint-disable-line property-disallowed-list */
|
|
89
|
-
z-index:
|
|
90
|
+
z-index: 10;
|
|
91
|
+
}
|
|
92
|
+
.nijmegen-header__panel--small {
|
|
93
|
+
width: auto; /* stylelint-disable-line property-disallowed-list */
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.nijmegen-header-action--relative {
|
|
97
|
+
position: relative;
|
|
98
|
+
}
|
|
99
|
+
.nijmegen-header-action--relative .nijmegen-header__panel {
|
|
100
|
+
left: auto; /* stylelint-disable-line property-disallowed-list */
|
|
101
|
+
right: 0; /* stylelint-disable-line property-disallowed-list */
|
|
102
|
+
}
|
|
103
|
+
.nijmegen-header-action--relative .nijmegen-header__panel .nijmegen-listbox {
|
|
104
|
+
min-inline-size: 240px;
|
|
90
105
|
}
|
|
91
106
|
|
|
92
107
|
.nijmegen-header-item {
|
|
93
|
-
all: unset;
|
|
94
|
-
align-items: end;
|
|
108
|
+
all: unset; /* stylelint-disable-line order/properties-alphabetical-order */
|
|
109
|
+
align-items: end; /* stylelint-disable-line order/properties-alphabetical-order */
|
|
95
110
|
color: var(--nijmegen-header-item-color, #000);
|
|
96
111
|
column-gap: var(--nijmegen-header-item-column-gap, 0);
|
|
97
112
|
cursor: pointer;
|
|
@@ -168,7 +183,18 @@
|
|
|
168
183
|
text-decoration: var(--nijmegen-header-item-active-text-decoration, none);
|
|
169
184
|
}
|
|
170
185
|
.nijmegen-header-item:focus-visible, .nijmegen-header-item--focus-visible {
|
|
186
|
+
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
187
|
+
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
188
|
+
* can combine it with the focus ring box shadow.
|
|
189
|
+
*/
|
|
190
|
+
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
191
|
+
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
192
|
+
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
193
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
194
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
195
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
196
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
197
|
+
z-index: 1;
|
|
171
198
|
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
199
|
color: var(--nijmegen-header-item-focus-visible-color, #000);
|
|
174
200
|
}
|
package/dist/index.min.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.nijmegen-header{background-color:var(--nijmegen-header-background-color,#fff);
|
|
1
|
+
.nijmegen-header{background-color:var(--nijmegen-header-background-color,#fff);writing-mode:horizontal-tb}.nijmegen-header .nijmegen-search{background-color:red;inline-size:100%}.nijmegen-header__content{align-items:center;align-self:center;border:0 solid var(--nijmegen-header-border-color,transparent);border-block-end-width:var(--nijmegen-header-border-block-end-width,0);display:flex;flex-direction:row;justify-content:space-between;margin-inline:auto;max-inline-size:var(--nijmegen-header-content-max-inline-size,100%);padding-block-end:var(--nijmegen-header-content-padding-block-end,0);padding-block-start:var(--nijmegen-header-content-padding-block-start,0);padding-inline-end:var(--nijmegen-header-content-padding-inline-end,0);padding-inline-start:var(--nijmegen-header-content-padding-inline-start,0)}@media (width < 1024px){.nijmegen-header__content{display:none}}.nijmegen-header__content--small{position:relative}.nijmegen-header__content--small--inner{align-items:center;align-self:center;border:0 solid var(--nijmegen-header-border-color,transparent);border-block-end-width:var(--nijmegen-header-border-block-end-width,0);display:flex;flex-direction:row;justify-content:space-between;margin-inline:auto;max-inline-size:var(--nijmegen-header-content-max-inline-size,100%);padding-block-end:var(--nijmegen-header-content-padding-block-end,0);padding-block-start:var(--nijmegen-header-content-padding-block-start,0);padding-inline-end:var(--nijmegen-header-content-padding-inline-end,0);padding-inline-start:var(--nijmegen-header-content-padding-inline-start,0)}@media (width >= 1024px){.nijmegen-header__content--small{display:none}}.nijmegen-header__mobile-menu{background-color:var(--nijmegen-menu-background-color);display:none;padding-block-end:var(--nijmegen-menu-padding-block-end);padding-block-start:var(--nijmegen-menu-padding-block-start);position:absolute;width:100%;z-index:10}.nijmegen-header__mobile-menu--visible{display:block}.nijmegen-header__actions,.nijmegen-header__navigation{column-gap:var(--nijmegen-header-content-column-gap,0);display:flex;flex-direction:row;justify-content:space-between;list-style:none;padding-inline-start:0}.nijmegen-header__panel{display:none;left:0;padding-block-start:1.5rem;position:absolute;width:100%;z-index:10}.nijmegen-header__panel--small{width:auto}.nijmegen-header-action--relative{position:relative}.nijmegen-header-action--relative .nijmegen-header__panel{left:auto;right:0}.nijmegen-header-action--relative .nijmegen-header__panel .nijmegen-listbox{min-inline-size:240px}.nijmegen-header-item{all:unset;align-items:end;color:var(--nijmegen-header-item-color,#000);column-gap:var(--nijmegen-header-item-column-gap,0);cursor:pointer;display:flex;flex-direction:row;font-family:var(--nijmegen-header-item-font-family,inherit);font-size:var(--nijmegen-header-item-font-size,1rem);font-weight:var(--nijmegen-header-item-font-weight,400);justify-content:space-between;line-height:var(--nijmegen-header-item-line-height,1.5);text-decoration:none;user-select:none}.nijmegen-header-item[aria-expanded]:after{background-color:var(--nijmegen-header-item-color,#000);content:"";display:inline-block;height:var(--nijmegen-header-item-icon-size,1.5rem);mask-position:center;mask-repeat:no-repeat;mask-size:100%;width:var(--nijmegen-header-item-icon-size,1.5rem)}.nijmegen-header-item--active,.nijmegen-header-item[aria-expanded=true]{-webkit-text-stroke-width:1px}.nijmegen-header-item--active+.nijmegen-header__panel,.nijmegen-header-item[aria-expanded=true]+.nijmegen-header__panel{display:block}.nijmegen-header-item[aria-expanded=false]:after{mask-image:var(--nijmegen-header-item-open-icon-image,url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="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 d="M0 0h24v24H0z" stroke="none"/><path d="m6 9 6 6 6-6"/></svg>'))}.nijmegen-header-item[aria-expanded=true]:after{mask-image:var(--nijmegen-header-item-open-icon-image,url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="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 d="M0 0h24v24H0z" stroke="none"/><path d="m6 15 6-6 6 6"/></svg>'))}.nijmegen-header-item[class*=nijmegen-header-item--icon-]:before{background-color:var(--nijmegen-header-item-color,#000);content:"";display:inline-block;height:var(--nijmegen-header-item-icon-size,1.5rem);mask-position:center;mask-repeat:no-repeat;mask-size:100%;width:var(--nijmegen-header-item-icon-size,1.5rem)}.nijmegen-header-item[class*=nijmegen-header-item--icon-][aria-expanded]:after{all:unset}.nijmegen-header-item[class*=nijmegen-header-item--icon-][aria-expanded=true]:before{mask-image:var(--nijmegen-header-item-close-icon-image,url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="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 d="M0 0h24v24H0z" stroke="none"/><path d="M18 6 6 18M6 6l12 12"/></svg>'))}.nijmegen-header-item--icon-search:before{mask-image:var(--nijmegen-header-item-search-icon-image,url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="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 d="M0 0h24v24H0z" stroke="none"/><path d="M3 10a7 7 0 1 0 14 0 7 7 0 1 0-14 0M21 21l-6-6"/></svg>'))}@media (width < 1280px){.nijmegen-header-item--icon-user span{display:none}}.nijmegen-header-item--icon-user:before{mask-image:var(--nijmegen-header-item-search-icon-image,url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="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 d="M0 0h24v24H0z" stroke="none"/><path d="M8 7a4 4 0 1 0 8 0 4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"/></svg>'))}.nijmegen-header-item--hover,.nijmegen-header-item:hover{color:var(--nijmegen-header-item-hover-color,#000);text-decoration:var(--nijmegen-header-item-hover-text-decoration,none)}.nijmegen-header-item--hover:after,.nijmegen-header-item--hover:before,.nijmegen-header-item:hover:after,.nijmegen-header-item:hover:before{background-color:var(--nijmegen-header-item-hover-color,#000)}.nijmegen-header-item--active,.nijmegen-header-item:active{color:var(--nijmegen-header-item-active-color,#000);text-decoration:var(--nijmegen-header-item-active-text-decoration,none)}.nijmegen-header-item--focus-visible,.nijmegen-header-item:focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);background-color:var(--nijmegen-header-item-focus-visible-background-color,#fff);box-shadow:var(--_utrecht-focus-ring-box-shadow);color:var(--nijmegen-header-item-focus-visible-color,#000);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert);z-index:1}.utrecht-link .utrecht-icon{inset-block-start:var(--utrecht-icon-inset-block-start,.35rem)}.utrecht-link .utrecht-icon+span{padding-inline-start:.25rem}.utrecht-link span+.utrecht-icon{padding-inline-start:.25rem}.nijmegen-toolbar-button{--_utrecht-button-background-color:var(
|
|
2
2
|
--_utrecht-button-hint-background-color,var(--_utrecht-button-appearance-background-color,var(--utrecht-button-background-color))
|
|
3
3
|
);--_utrecht-button-color:var(
|
|
4
4
|
--_utrecht-button-hint-color,var(--_utrecht-button-appearance-color,var(--utrecht-button-color))
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
)
|
|
113
113
|
);--_utrecht-button-border-width:var(--_utrecht-button-appearance-border-width,var(--utrecht-button-border-width,0));--_utrecht-button-border-block-end-width:var(
|
|
114
114
|
--utrecht-button-border-bottom-width,var(--_utrecht-button-border-width,0)
|
|
115
|
-
);--_utrecht-button-font-size:var(--_utrecht-button-appearance-font-size,var(--utrecht-button-font-size));--_utrecht-button-line-height:var(--_utrecht-button-appearance-line-height,var(--utrecht-button-line-height));--utrecht-icon-size:var(--utrecht-button-icon-size,1em);--_utrecht-button-appearance-active-background-color:var(--utrecht-button-subtle-active-background-color);--_utrecht-button-appearance-active-border-color:var(--utrecht-button-subtle-active-border-color);--_utrecht-button-appearance-active-color:var(--utrecht-button-subtle-active-color);--_utrecht-button-appearance-background-color:var(--utrecht-button-subtle-background-color);--_utrecht-button-appearance-border-color:var(--utrecht-button-subtle-border-color);--_utrecht-button-appearance-border-width:var(--utrecht-button-subtle-border-width);--_utrecht-button-appearance-color:var(--utrecht-button-subtle-color);--_utrecht-button-appearance-font-size:var(--utrecht-button-subtle-font-size);--_utrecht-button-appearance-font-weight:var(--utrecht-button-subtle-font-weight);--_utrecht-button-appearance-line-height:var(--utrecht-button-subtle-line-height);--_utrecht-button-appearance-disabled-background-color:var(--utrecht-button-subtle-disabled-background-color);--_utrecht-button-appearance-disabled-border-color:var(--utrecht-button-subtle-disabled-border-color);--_utrecht-button-appearance-disabled-color:var(--utrecht-button-subtle-disabled-color);--_utrecht-button-appearance-focus-background-color:var(--utrecht-button-subtle-focus-background-color);--_utrecht-button-appearance-focus-border-color:var(--utrecht-button-subtle-focus-border-color);--_utrecht-button-appearance-focus-color:var(--utrecht-button-subtle-focus-color);--_utrecht-button-appearance-hover-background-color:var(--utrecht-button-subtle-hover-background-color);--_utrecht-button-appearance-hover-border-color:var(--utrecht-button-subtle-hover-border-color);--_utrecht-button-appearance-hover-color:var(--utrecht-button-subtle-hover-color);--_utrecht-button-appearance-pressed-background-color:var(--utrecht-button-subtle-pressed-background-color);--_utrecht-button-appearance-pressed-border-color:var(--utrecht-button-subtle-pressed-border-color);--_utrecht-button-appearance-pressed-color:var(--utrecht-button-subtle-pressed-color);align-items:center;background-color:var(--_utrecht-button-background-color);block-size:fit-content;border-block-end-color:var(--_utrecht-button-border-bottom-color);border-block-end-width:var(--_utrecht-button-border-block-end-width);border-color:var(--_utrecht-button-border-color);border-radius:var(--utrecht-button-border-radius);border-style:solid;border-width:var(--_utrecht-button-border-width);box-sizing:border-box;color:var(--_utrecht-button-color);column-gap:var(--utrecht-button-column-gap);column-gap:var(--nijmegen-toolbar-button-column-gap);cursor:var(--utrecht-action-activate-cursor,revert);cursor:pointer;display:inline-flex;font-family:var(--utrecht-button-font-family,var(--utrecht-document-font-family));font-size:var(--_utrecht-button-font-size,var(--utrecht-document-font-family,inherit));font-weight:var(--_utrecht-button-appearance-font-weight,var(--utrecht-button-font-weight));inline-size:var(--utrecht-button-inline-size,auto);justify-content:center;line-height:var(--_utrecht-button-line-height);max-inline-size:var(--utrecht-button-max-inline-size,fit-content);min-block-size:var(--utrecht-button-min-block-size,44px);min-inline-size:var(--utrecht-button-min-inline-size,44px);padding-block-end:var(--utrecht-button-padding-block-end);padding-block-end:var(--nijmegen-toolbar-button-padding-block-end);padding-block-start:var(--utrecht-button-padding-block-start);padding-block-start:var(--nijmegen-toolbar-button-padding-block-start);padding-inline-end:var(--utrecht-button-padding-inline-end);padding-inline-end:var(--nijmegen-toolbar-button-padding-inline-end);padding-inline-start:var(--utrecht-button-padding-inline-start);padding-inline-start:var(--nijmegen-toolbar-button-padding-inline-start);scale:1;text-transform:var(--utrecht-button-text-transform);-webkit-user-select:none;user-select:none}.nijmegen-toolbar-button.nijmegen-toolbar-button--icon-menu:before{mask-image:var(--nijmegen-toolbar-button-menu-icon-image,url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0h24v24H0z" stroke="none"/><path d="M4 6h16M4 12h16M4 18h16"/></svg>'))}.nijmegen-toolbar-button.nijmegen-toolbar-button--icon-menu:before{background-color:var(--_utrecht-button-appearance-color);content:"";display:inline-block;flex-shrink:0;height:var(--nijmegen-toobar-button-menu-icon-height,1.5rem);mask-position:center;mask-repeat:no-repeat;mask-size:100%;width:var(--nijmegen-toobar-button-menu-icon-width,1.5rem)}.nijmegen-toolbar-button.nijmegen-toolbar-button--icon-menu[aria-expanded=true]:before{mask-image:var(--nijmegen-toolbar-button-close-icon-image,url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="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 d="M0 0h24v24H0z" stroke="none"/><path d="M18 6 6 18M6 6l12 12"/></svg>'))}.nijmegen-toolbar-button.nijmegen-toolbar-button--icon-search:before{mask-image:var(--nijmegen-toolbar-button-search-icon-image,url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="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 d="M0 0h24v24H0z" stroke="none"/><path d="M3 10a7 7 0 1 0 14 0 7 7 0 1 0-14 0M21 21l-6-6"/></svg>'))}.nijmegen-toolbar-button.nijmegen-toolbar-button--icon-search:before{background-color:var(--_utrecht-button-appearance-color);content:"";display:inline-block;flex-shrink:0;height:var(--nijmegen-toobar-button-menu-icon-height,1.5rem);mask-position:center;mask-repeat:no-repeat;mask-size:100%;width:var(--nijmegen-toobar-button-menu-icon-width,1.5rem)}.nijmegen-toolbar-button.nijmegen-toolbar-button--icon-search[aria-expanded=true]:before{mask-image:var(--nijmegen-toolbar-button-close-icon-image,url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="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 d="M0 0h24v24H0z" stroke="none"/><path d="M18 6 6 18M6 6l12 12"/></svg>'))}.nijmegen-toolbar-button.nijmegen-toolbar-button--focus-visible,.nijmegen-toolbar-button:focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);background-color:var(--_utrecht-button-focus-background-color);border-color:var(--_utrecht-button-focus-border-color);box-shadow:var(--_utrecht-focus-ring-box-shadow);color:var(--_utrecht-button-focus-color);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert);scale:var(--utrecht-button-focus-scale,1);z-index:1}.nijmegen-toolbar-button.nijmegen-toolbar-button--active,.nijmegen-toolbar-button:active:not(:disabled,[aria-disabled=true]){background-color:var(--_utrecht-button-active-background-color);border-color:var(--_utrecht-button-active-border-color);color:var(--_utrecht-button-active-color)}.nijmegen-toolbar-button.nijmegen-toolbar-button--hover,.nijmegen-toolbar-button:hover:not(:disabled,[aria-disabled=true]){background-color:var(--_utrecht-button-hover-background-color);border-color:var(--_utrecht-button-hover-border-color);color:var(--_utrecht-button-hover-color);scale:var(--utrecht-button-hover-scale,1)}.nijmegen-mega-menu{background-color:var(--nijmegen-mega-menu-background-color,#fff);border:0 solid var(--nijmegen-mega-menu-border-color,transparent);border-block-end-width:var(--nijmegen-mega-menu-border-block-end-width,1px);margin-block-end:var(--nijmegen-mega-menu-margin-block-end);writing-mode:horizontal-tb}.nijmegen-mega-menu__container{margin-inline:auto;max-inline-size:var(--nijmegen-header-content-max-inline-size,100%)}.nijmegen-mega-menu__content{column-gap:var(--nijmegen-mega-menu-content-column-gap,0);display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;margin-inline:auto;padding-block-end:var(--nijmegen-mega-menu-content-padding-block-end,0);padding-block-start:var(--nijmegen-mega-menu-content-padding-block-start,0);padding-inline-end:var(--nijmegen-mega-menu-content-padding-inline-end,0);padding-inline-start:var(--nijmegen-mega-menu-content-padding-inline-start,0);row-gap:var(--nijmegen-mega-menu-content-row-gap,0)}.nijmegen-mega-menu__content .utrecht-heading-4{font-size:1.25rem}.nijmegen-mega-menu__content>*{flex-basis:100%}@media (width >= 768px){.nijmegen-mega-menu__content>*{flex-basis:calc(33.33333% - var(--nijmegen-mega-menu-content-column-gap, 0)*2/3)}.nijmegen-mega-menu__content>:only-child{flex-basis:100%}}@media (width >= 992px){.nijmegen-mega-menu__content>*{flex-basis:calc(25% - var(--nijmegen-mega-menu-content-column-gap, 0)*3/4)}.nijmegen-mega-menu__content>:only-child{flex-basis:100%}}.nijmegen-mega-menu__content.nijmegen-mega-menu__content--full-width>*{flex-basis:100%}.nijmegen-mega-menu__content ul{padding-block-start:1rem;row-gap:1rem}.nijmegen-mobile-menu{background-color:var(--nijmegen-menu-background-color);margin-block-end:var(--nijmegen-mobile-menu-margin-block-end);position:relative}.nijmegen-mobile-menu__list{display:flex;flex-direction:column;line-height:var(--nijmegen-menu-link-line-height);list-style:none;padding-inline-start:0}.nijmegen-mobile-menu__link{background-color:var(--nijmegen-menu-background-color);box-sizing:border-box;color:var(--nijmegen-menu-link-color);cursor:pointer;display:flex;font-family:var(--nijmegen-menu-link-font-family);font-size:var(--nijmegen-menu-link-font-size);font-weight:var(--nijmegen-menu-link-font-weight);justify-content:space-between;padding-block-end:var(--nijmegen-menu-link-padding-block-end);padding-block-start:var(--nijmegen-menu-link-padding-block-start);padding-inline-end:var(--nijmegen-menu-link-padding-inline-end);padding-inline-start:var(--nijmegen-menu-link-padding-inline-start);position:relative;text-decoration:none;width:100%}.nijmegen-mobile-menu__link:is(button){appearance:none;border:0}.nijmegen-mobile-menu__link.nijmegen-mobile-menu__link--focus,.nijmegen-mobile-menu__link:focus{--_utrecht-link-state-color:var(--utrecht-link-focus-color);text-decoration-skip:none;background-color:var(--utrecht-link-focus-background-color,transparent);text-decoration-skip-ink:none}.nijmegen-mobile-menu__link.nijmegen-mobile-menu__link--focus-visible,.nijmegen-mobile-menu__link:focus-visible{--_utrecht-link-state-color:var(--utrecht-link-focus-color);text-decoration-skip:none;--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);--_utrecht-link-state-text-decoration:var(
|
|
115
|
+
);--_utrecht-button-font-size:var(--_utrecht-button-appearance-font-size,var(--utrecht-button-font-size));--_utrecht-button-line-height:var(--_utrecht-button-appearance-line-height,var(--utrecht-button-line-height));--utrecht-icon-size:var(--utrecht-button-icon-size,1em);--_utrecht-button-appearance-active-background-color:var(--utrecht-button-subtle-active-background-color);--_utrecht-button-appearance-active-border-color:var(--utrecht-button-subtle-active-border-color);--_utrecht-button-appearance-active-color:var(--utrecht-button-subtle-active-color);--_utrecht-button-appearance-background-color:var(--utrecht-button-subtle-background-color);--_utrecht-button-appearance-border-color:var(--utrecht-button-subtle-border-color);--_utrecht-button-appearance-border-width:var(--utrecht-button-subtle-border-width);--_utrecht-button-appearance-color:var(--utrecht-button-subtle-color);--_utrecht-button-appearance-font-size:var(--utrecht-button-subtle-font-size);--_utrecht-button-appearance-font-weight:var(--utrecht-button-subtle-font-weight);--_utrecht-button-appearance-line-height:var(--utrecht-button-subtle-line-height);--_utrecht-button-appearance-disabled-background-color:var(--utrecht-button-subtle-disabled-background-color);--_utrecht-button-appearance-disabled-border-color:var(--utrecht-button-subtle-disabled-border-color);--_utrecht-button-appearance-disabled-color:var(--utrecht-button-subtle-disabled-color);--_utrecht-button-appearance-focus-background-color:var(--utrecht-button-subtle-focus-background-color);--_utrecht-button-appearance-focus-border-color:var(--utrecht-button-subtle-focus-border-color);--_utrecht-button-appearance-focus-color:var(--utrecht-button-subtle-focus-color);--_utrecht-button-appearance-hover-background-color:var(--utrecht-button-subtle-hover-background-color);--_utrecht-button-appearance-hover-border-color:var(--utrecht-button-subtle-hover-border-color);--_utrecht-button-appearance-hover-color:var(--utrecht-button-subtle-hover-color);--_utrecht-button-appearance-pressed-background-color:var(--utrecht-button-subtle-pressed-background-color);--_utrecht-button-appearance-pressed-border-color:var(--utrecht-button-subtle-pressed-border-color);--_utrecht-button-appearance-pressed-color:var(--utrecht-button-subtle-pressed-color);align-items:center;background-color:var(--_utrecht-button-background-color);block-size:fit-content;border-block-end-color:var(--_utrecht-button-border-bottom-color);border-block-end-width:var(--_utrecht-button-border-block-end-width);border-color:var(--_utrecht-button-border-color);border-radius:var(--utrecht-button-border-radius);border-style:solid;border-width:var(--_utrecht-button-border-width);box-sizing:border-box;color:var(--_utrecht-button-color);column-gap:var(--utrecht-button-column-gap);column-gap:var(--nijmegen-toolbar-button-column-gap);cursor:var(--utrecht-action-activate-cursor,revert);cursor:pointer;display:inline-flex;font-family:var(--utrecht-button-font-family,var(--utrecht-document-font-family));font-size:var(--_utrecht-button-font-size,var(--utrecht-document-font-family,inherit));font-weight:var(--_utrecht-button-appearance-font-weight,var(--utrecht-button-font-weight));inline-size:var(--utrecht-button-inline-size,auto);justify-content:center;line-height:var(--_utrecht-button-line-height);max-inline-size:var(--utrecht-button-max-inline-size,fit-content);min-block-size:var(--utrecht-button-min-block-size,44px);min-inline-size:var(--utrecht-button-min-inline-size,44px);padding-block-end:var(--utrecht-button-padding-block-end);padding-block-end:var(--nijmegen-toolbar-button-padding-block-end);padding-block-start:var(--utrecht-button-padding-block-start);padding-block-start:var(--nijmegen-toolbar-button-padding-block-start);padding-inline-end:var(--utrecht-button-padding-inline-end);padding-inline-end:var(--nijmegen-toolbar-button-padding-inline-end);padding-inline-start:var(--utrecht-button-padding-inline-start);padding-inline-start:var(--nijmegen-toolbar-button-padding-inline-start);scale:1;text-transform:var(--utrecht-button-text-transform);-webkit-user-select:none;user-select:none}.nijmegen-toolbar-button.nijmegen-toolbar-button--icon-menu:before{mask-image:var(--nijmegen-toolbar-button-menu-icon-image,url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0h24v24H0z" stroke="none"/><path d="M4 6h16M4 12h16M4 18h16"/></svg>'))}.nijmegen-toolbar-button.nijmegen-toolbar-button--icon-menu:before{background-color:var(--_utrecht-button-appearance-color);content:"";display:inline-block;flex-shrink:0;height:var(--nijmegen-toobar-button-menu-icon-height,1.5rem);mask-position:center;mask-repeat:no-repeat;mask-size:100%;width:var(--nijmegen-toobar-button-menu-icon-width,1.5rem)}.nijmegen-toolbar-button.nijmegen-toolbar-button--icon-menu[aria-expanded=true]:before{mask-image:var(--nijmegen-toolbar-button-close-icon-image,url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="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 d="M0 0h24v24H0z" stroke="none"/><path d="M18 6 6 18M6 6l12 12"/></svg>'))}.nijmegen-toolbar-button.nijmegen-toolbar-button--icon-search:before{mask-image:var(--nijmegen-toolbar-button-search-icon-image,url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="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 d="M0 0h24v24H0z" stroke="none"/><path d="M3 10a7 7 0 1 0 14 0 7 7 0 1 0-14 0M21 21l-6-6"/></svg>'))}.nijmegen-toolbar-button.nijmegen-toolbar-button--icon-search:before{background-color:var(--_utrecht-button-appearance-color);content:"";display:inline-block;flex-shrink:0;height:var(--nijmegen-toobar-button-menu-icon-height,1.5rem);mask-position:center;mask-repeat:no-repeat;mask-size:100%;width:var(--nijmegen-toobar-button-menu-icon-width,1.5rem)}.nijmegen-toolbar-button.nijmegen-toolbar-button--icon-search[aria-expanded=true]:before{mask-image:var(--nijmegen-toolbar-button-close-icon-image,url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="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 d="M0 0h24v24H0z" stroke="none"/><path d="M18 6 6 18M6 6l12 12"/></svg>'))}.nijmegen-toolbar-button.nijmegen-toolbar-button--focus-visible,.nijmegen-toolbar-button:focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);background-color:var(--_utrecht-button-focus-background-color);border-color:var(--_utrecht-button-focus-border-color);box-shadow:var(--_utrecht-focus-ring-box-shadow);color:var(--_utrecht-button-focus-color);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert);scale:var(--utrecht-button-focus-scale,1);z-index:1}.nijmegen-toolbar-button.nijmegen-toolbar-button--active,.nijmegen-toolbar-button:active:not(:disabled,[aria-disabled=true]){background-color:var(--_utrecht-button-active-background-color);border-color:var(--_utrecht-button-active-border-color);color:var(--_utrecht-button-active-color)}.nijmegen-toolbar-button.nijmegen-toolbar-button--hover,.nijmegen-toolbar-button:hover:not(:disabled,[aria-disabled=true]){background-color:var(--_utrecht-button-hover-background-color);border-color:var(--_utrecht-button-hover-border-color);color:var(--_utrecht-button-hover-color);scale:var(--utrecht-button-hover-scale,1)}.nijmegen-mega-menu{background-color:var(--nijmegen-mega-menu-background-color,#fff);border:0 solid var(--nijmegen-mega-menu-border-color,transparent);border-block-end-width:var(--nijmegen-mega-menu-border-block-end-width,1px);margin-block-end:var(--nijmegen-mega-menu-margin-block-end);writing-mode:horizontal-tb}.nijmegen-mega-menu__container{margin-inline:auto;max-inline-size:var(--nijmegen-header-content-max-inline-size,100%)}.nijmegen-mega-menu__content{column-gap:var(--nijmegen-mega-menu-content-column-gap,0);display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;margin-inline:auto;padding-block-end:var(--nijmegen-mega-menu-content-padding-block-end,0);padding-block-start:var(--nijmegen-mega-menu-content-padding-block-start,0);padding-inline-end:var(--nijmegen-mega-menu-content-padding-inline-end,0);padding-inline-start:var(--nijmegen-mega-menu-content-padding-inline-start,0);row-gap:var(--nijmegen-mega-menu-content-row-gap,0)}.nijmegen-mega-menu__content .utrecht-heading-4{font-size:1.25rem}.nijmegen-mega-menu__content>div{display:flex;flex-direction:column;gap:var(--nijmegen-mega-menu-list-row-gap)}.nijmegen-mega-menu__content>*{flex-basis:100%}@media (width >= 768px){.nijmegen-mega-menu__content>*{flex-basis:calc(33.33333% - var(--nijmegen-mega-menu-content-column-gap, 0)*2/3)}.nijmegen-mega-menu__content>:only-child{flex-basis:100%}}@media (width >= 992px){.nijmegen-mega-menu__content>*{flex-basis:calc(25% - var(--nijmegen-mega-menu-content-column-gap, 0)*3/4)}.nijmegen-mega-menu__content>:only-child{flex-basis:100%}}.nijmegen-mega-menu__content.nijmegen-mega-menu__content--full-width>*{flex-basis:100%}.nijmegen-mobile-menu{background-color:var(--nijmegen-menu-background-color);display:flex;flex-direction:column;gap:1rem;position:relative}.nijmegen-mobile-menu__list{display:flex;flex-direction:column;line-height:var(--nijmegen-menu-link-line-height);list-style:none;margin:0;padding-inline-start:0}.nijmegen-mobile-menu__link{background-color:var(--nijmegen-menu-background-color);box-sizing:border-box;color:var(--nijmegen-menu-link-color);cursor:pointer;display:flex;font-family:var(--nijmegen-menu-link-font-family);font-size:var(--nijmegen-menu-link-font-size);font-weight:var(--nijmegen-menu-link-font-weight);justify-content:space-between;padding-block-end:var(--nijmegen-menu-link-padding-block-end);padding-block-start:var(--nijmegen-menu-link-padding-block-start);padding-inline-end:var(--nijmegen-menu-link-padding-inline-end);padding-inline-start:var(--nijmegen-menu-link-padding-inline-start);position:relative;text-decoration:none;width:100%}.nijmegen-mobile-menu__link:is(button){appearance:none;border:0}.nijmegen-mobile-menu__link.nijmegen-mobile-menu__link--focus,.nijmegen-mobile-menu__link:focus{--_utrecht-link-state-color:var(--utrecht-link-focus-color);text-decoration-skip:none;background-color:var(--utrecht-link-focus-background-color,transparent);text-decoration-skip-ink:none}.nijmegen-mobile-menu__link.nijmegen-mobile-menu__link--focus-visible,.nijmegen-mobile-menu__link:focus-visible{--_utrecht-link-state-color:var(--utrecht-link-focus-color);text-decoration-skip:none;--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);--_utrecht-link-state-text-decoration:var(
|
|
116
116
|
--utrecht-link-focus-visible-text-decoration,var(--utrecht-link-focus-text-decoration)
|
|
117
117
|
);--_utrecht-link-state-text-decoration-thickness:var(
|
|
118
118
|
--utrecht-link-focus-visible-text-decoration-thickness,var(--utrecht-link-focus-text-decoration-thickness)
|
package/header/_mixin.scss
CHANGED
|
@@ -6,16 +6,11 @@
|
|
|
6
6
|
flex-direction: row;
|
|
7
7
|
justify-content: space-between;
|
|
8
8
|
margin-inline: auto;
|
|
9
|
-
|
|
10
|
-
padding-block-
|
|
11
|
-
padding-
|
|
12
|
-
padding-inline-
|
|
13
|
-
|
|
14
|
-
padding-block-end: var(--nijmegen-header-content-padding-block-end, 0);
|
|
15
|
-
padding-block-start: var(--nijmegen-header-content-padding-block-start, 0);
|
|
16
|
-
padding-inline-end: var(--nijmegen-header-content-padding-inline-end, 0);
|
|
17
|
-
padding-inline-start: var(--nijmegen-header-content-padding-inline-start, 0);
|
|
18
|
-
}
|
|
9
|
+
max-inline-size: var(--nijmegen-header-content-max-inline-size, 100%);
|
|
10
|
+
padding-block-end: var(--nijmegen-header-content-padding-block-end, 0);
|
|
11
|
+
padding-block-start: var(--nijmegen-header-content-padding-block-start, 0);
|
|
12
|
+
padding-inline-end: var(--nijmegen-header-content-padding-inline-end, 0);
|
|
13
|
+
padding-inline-start: var(--nijmegen-header-content-padding-inline-start, 0);
|
|
19
14
|
}
|
|
20
15
|
|
|
21
16
|
@mixin nijmegen-header-icon-base {
|
package/header/index.scss
CHANGED
|
@@ -1,29 +1,34 @@
|
|
|
1
|
-
/* stylelint-disable order/properties-alphabetical-order */
|
|
2
|
-
|
|
3
1
|
@import "~@gemeentenijmegen/layout-css/src/variables";
|
|
2
|
+
@import "~@utrecht/focus-ring-css/src/mixin";
|
|
4
3
|
@import "./mixin";
|
|
5
4
|
|
|
6
5
|
.nijmegen-header {
|
|
7
6
|
background-color: var(--nijmegen-header-background-color, #fff);
|
|
8
|
-
margin-inline-end: auto;
|
|
9
|
-
margin-inline-start: auto;
|
|
10
|
-
max-width: var(--nijmegen-header-content-max-inline-size, 100%); /* stylelint-disable-line property-disallowed-list */
|
|
11
|
-
width: 100%; /* stylelint-disable-line property-disallowed-list */
|
|
12
7
|
writing-mode: horizontal-tb;
|
|
8
|
+
|
|
9
|
+
.nijmegen-search {
|
|
10
|
+
background-color: red;
|
|
11
|
+
inline-size: 100%;
|
|
12
|
+
}
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
.nijmegen-header__content {
|
|
16
16
|
@include nijmegen-header-content;
|
|
17
17
|
|
|
18
|
+
border-block-end-width: var(--nijmegen-header-border-block-end-width, 0);
|
|
19
|
+
|
|
18
20
|
@media (width <1024px) {
|
|
19
21
|
display: none;
|
|
20
22
|
}
|
|
21
23
|
}
|
|
22
24
|
|
|
23
25
|
.nijmegen-header__content--small {
|
|
26
|
+
position: relative;
|
|
27
|
+
|
|
24
28
|
&--inner {
|
|
25
|
-
border-block-end-width: var(--nijmegen-header-border-block-end-width, 0);
|
|
26
29
|
@include nijmegen-header-content;
|
|
30
|
+
|
|
31
|
+
border-block-end-width: var(--nijmegen-header-border-block-end-width, 0);
|
|
27
32
|
}
|
|
28
33
|
|
|
29
34
|
@media (width >=1024px) {
|
|
@@ -32,7 +37,13 @@
|
|
|
32
37
|
}
|
|
33
38
|
|
|
34
39
|
.nijmegen-header__mobile-menu {
|
|
40
|
+
background-color: var(--nijmegen-menu-background-color);
|
|
35
41
|
display: none;
|
|
42
|
+
padding-block-end: var(--nijmegen-menu-padding-block-end);
|
|
43
|
+
padding-block-start: var(--nijmegen-menu-padding-block-start);
|
|
44
|
+
position: absolute;
|
|
45
|
+
width: 100%; /* stylelint-disable-line property-disallowed-list */
|
|
46
|
+
z-index: 10;
|
|
36
47
|
|
|
37
48
|
&--visible {
|
|
38
49
|
display: block;
|
|
@@ -55,12 +66,31 @@
|
|
|
55
66
|
padding-block-start: 1.5rem;
|
|
56
67
|
position: absolute;
|
|
57
68
|
width: 100%; /* stylelint-disable-line property-disallowed-list */
|
|
58
|
-
z-index:
|
|
69
|
+
z-index: 10;
|
|
70
|
+
|
|
71
|
+
&--small {
|
|
72
|
+
width: auto; /* stylelint-disable-line property-disallowed-list */
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.nijmegen-header-action {
|
|
77
|
+
&--relative {
|
|
78
|
+
position: relative;
|
|
79
|
+
|
|
80
|
+
.nijmegen-header__panel {
|
|
81
|
+
left: auto; /* stylelint-disable-line property-disallowed-list */
|
|
82
|
+
right: 0; /* stylelint-disable-line property-disallowed-list */
|
|
83
|
+
|
|
84
|
+
.nijmegen-listbox {
|
|
85
|
+
min-inline-size: 240px;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
59
89
|
}
|
|
60
90
|
|
|
61
91
|
.nijmegen-header-item {
|
|
62
|
-
all: unset;
|
|
63
|
-
align-items: end;
|
|
92
|
+
all: unset; /* stylelint-disable-line order/properties-alphabetical-order */
|
|
93
|
+
align-items: end; /* stylelint-disable-line order/properties-alphabetical-order */
|
|
64
94
|
color: var(--nijmegen-header-item-color, #000);
|
|
65
95
|
column-gap: var(--nijmegen-header-item-column-gap, 0);
|
|
66
96
|
cursor: pointer;
|
|
@@ -160,10 +190,9 @@
|
|
|
160
190
|
|
|
161
191
|
&:focus-visible,
|
|
162
192
|
&--focus-visible {
|
|
193
|
+
@include utrecht-focus-ring;
|
|
194
|
+
|
|
163
195
|
background-color: var(--nijmegen-header-item-focus-visible-background-color, #fff);
|
|
164
|
-
border: var(--nijmegen-header-item-focus-visible-border-line-width, 1px)
|
|
165
|
-
var(--nijmegen-header-item-focus-visible-border-line-style, dashed)
|
|
166
|
-
var(--nijmegen-header-item-focus-visible-border-color, #082d26);
|
|
167
196
|
color: var(--nijmegen-header-item-focus-visible-color, #000);
|
|
168
197
|
}
|
|
169
198
|
}
|
package/mega-menu/index.scss
CHANGED
|
@@ -30,6 +30,12 @@
|
|
|
30
30
|
font-size: 1.25rem;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
+
> div {
|
|
34
|
+
display: flex;
|
|
35
|
+
flex-direction: column;
|
|
36
|
+
gap: var(--nijmegen-mega-menu-list-row-gap);
|
|
37
|
+
}
|
|
38
|
+
|
|
33
39
|
> * {
|
|
34
40
|
flex-basis: 100%;
|
|
35
41
|
@media (width >= $nijmegen-breakpoint-md) {
|
|
@@ -52,11 +58,4 @@
|
|
|
52
58
|
flex-basis: 100%;
|
|
53
59
|
}
|
|
54
60
|
}
|
|
55
|
-
|
|
56
|
-
ul {
|
|
57
|
-
padding-block-start: 1rem;
|
|
58
|
-
|
|
59
|
-
// row-gap: var(--nijmegen-mega-menu-content-row-gap, 0); todo if token is updated
|
|
60
|
-
row-gap: 1rem;
|
|
61
|
-
}
|
|
62
61
|
}
|
package/mobile-menu/index.scss
CHANGED
|
@@ -5,7 +5,9 @@
|
|
|
5
5
|
|
|
6
6
|
.nijmegen-mobile-menu {
|
|
7
7
|
background-color: var(--nijmegen-menu-background-color);
|
|
8
|
-
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-direction: column;
|
|
10
|
+
gap: 1rem;
|
|
9
11
|
position: relative;
|
|
10
12
|
}
|
|
11
13
|
|
|
@@ -14,6 +16,7 @@
|
|
|
14
16
|
flex-direction: column;
|
|
15
17
|
line-height: var(--nijmegen-menu-link-line-height);
|
|
16
18
|
list-style: none;
|
|
19
|
+
margin: 0; /* stylelint-disable-line property-disallowed-list */
|
|
17
20
|
padding-inline-start: 0;
|
|
18
21
|
}
|
|
19
22
|
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.0.1-alpha.
|
|
2
|
+
"version": "0.0.1-alpha.95",
|
|
3
3
|
"author": "Community for NL Design System",
|
|
4
4
|
"description": "CSS Components for a design system based on the NL Design System architecture",
|
|
5
5
|
"license": "EUPL-1.2",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"url": "git@github.com:GemeenteNijmegen/design-system.git"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@gemeentenijmegen/layout-css": "0.0.1-alpha.
|
|
27
|
+
"@gemeentenijmegen/layout-css": "0.0.1-alpha.108",
|
|
28
28
|
"@rollup/plugin-terser": "0.4.4",
|
|
29
29
|
"@utrecht/button-css": "2.3.1",
|
|
30
30
|
"@utrecht/focus-ring-css": "2.3.1",
|
|
@@ -35,5 +35,5 @@
|
|
|
35
35
|
"rollup": "4.12.1",
|
|
36
36
|
"rollup-plugin-postcss": "4.0.2"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "c03ffda643e7af7a6e59d618ccfe35a414a83d1a"
|
|
39
39
|
}
|