@gemeentenijmegen/components-css 0.0.1-alpha.110 → 0.0.1-alpha.111
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 +28 -7
- package/dist/index.min.css +2 -2
- package/header/index.scss +31 -9
- package/mega-menu/index.scss +1 -1
- package/package.json +3 -3
package/dist/header.css
CHANGED
|
@@ -5,17 +5,35 @@
|
|
|
5
5
|
*/
|
|
6
6
|
/* stylelint-disable-next-line block-no-empty */
|
|
7
7
|
.nijmegen-header {
|
|
8
|
-
|
|
9
|
-
border: 0 solid var(--nijmegen-header-border-color, transparent);
|
|
10
|
-
border-block-end-width: var(--nijmegen-header-border-block-end-width, 0);
|
|
8
|
+
position: relative;
|
|
11
9
|
writing-mode: horizontal-tb;
|
|
12
10
|
}
|
|
13
11
|
.nijmegen-header .nijmegen-search {
|
|
14
|
-
background-color: red;
|
|
15
12
|
inline-size: 100%;
|
|
16
13
|
}
|
|
17
14
|
|
|
15
|
+
.nijmegen-header__backdrop {
|
|
16
|
+
background-color: var(--utrecht-backdrop-background-color);
|
|
17
|
+
display: none;
|
|
18
|
+
height: 100vh; /* stylelint-disable-line property-disallowed-list */
|
|
19
|
+
opacity: var(--utrecht-backdrop-opacity);
|
|
20
|
+
position: fixed;
|
|
21
|
+
top: 0; /* stylelint-disable-line property-disallowed-list */
|
|
22
|
+
width: 100%; /* stylelint-disable-line property-disallowed-list */
|
|
23
|
+
z-index: 100;
|
|
24
|
+
}
|
|
25
|
+
.nijmegen-header__backdrop--visible {
|
|
26
|
+
display: block;
|
|
27
|
+
}
|
|
28
|
+
|
|
18
29
|
.nijmegen-header__content {
|
|
30
|
+
background-color: var(--nijmegen-header-background-color, #fff);
|
|
31
|
+
border: 0 solid var(--nijmegen-header-border-color, transparent);
|
|
32
|
+
border-block-end-width: var(--nijmegen-header-border-block-end-width, 0);
|
|
33
|
+
position: relative;
|
|
34
|
+
z-index: 101;
|
|
35
|
+
}
|
|
36
|
+
.nijmegen-header__content .nijmegen-header__content--inner {
|
|
19
37
|
align-items: center;
|
|
20
38
|
align-self: center;
|
|
21
39
|
display: flex;
|
|
@@ -35,7 +53,11 @@
|
|
|
35
53
|
}
|
|
36
54
|
|
|
37
55
|
.nijmegen-header__content--small {
|
|
56
|
+
background-color: var(--nijmegen-header-background-color, #fff);
|
|
57
|
+
border: 0 solid var(--nijmegen-header-border-color, transparent);
|
|
58
|
+
border-block-end-width: var(--nijmegen-header-border-block-end-width, 0);
|
|
38
59
|
position: relative;
|
|
60
|
+
z-index: 101;
|
|
39
61
|
}
|
|
40
62
|
.nijmegen-header__content--small--inner {
|
|
41
63
|
align-items: center;
|
|
@@ -49,7 +71,6 @@
|
|
|
49
71
|
padding-block-start: var(--nijmegen-header-content-padding-block-start, 0);
|
|
50
72
|
padding-inline-end: var(--nijmegen-header-content-padding-inline-end, 0);
|
|
51
73
|
padding-inline-start: var(--nijmegen-header-content-padding-inline-start, 0);
|
|
52
|
-
border-block-end-width: var(--nijmegen-header-border-block-end-width, 0);
|
|
53
74
|
}
|
|
54
75
|
@media (width >= 1024px) {
|
|
55
76
|
.nijmegen-header__content--small {
|
|
@@ -60,7 +81,7 @@
|
|
|
60
81
|
.nijmegen-header__mobile-menu {
|
|
61
82
|
background-color: var(--nijmegen-menu-background-color);
|
|
62
83
|
border: 0 solid var(--nijmegen-header-border-color, transparent);
|
|
63
|
-
border-block-
|
|
84
|
+
border-block-start-width: var(--nijmegen-header-border-block-end-width, 0);
|
|
64
85
|
display: none;
|
|
65
86
|
padding-block-end: var(--nijmegen-menu-padding-block-end);
|
|
66
87
|
padding-block-start: var(--nijmegen-menu-padding-block-start);
|
|
@@ -92,7 +113,7 @@
|
|
|
92
113
|
.nijmegen-header__panel {
|
|
93
114
|
display: none;
|
|
94
115
|
left: 0; /* stylelint-disable-line property-disallowed-list */
|
|
95
|
-
padding-block-start: 1.5rem;
|
|
116
|
+
padding-block-start: calc(1.5rem + 2px);
|
|
96
117
|
position: absolute;
|
|
97
118
|
width: 100%; /* stylelint-disable-line property-disallowed-list */
|
|
98
119
|
z-index: 10;
|
package/dist/index.min.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.nijmegen-header{background-color:var(--nijmegen-header-background-color,#fff);border:0 solid var(--nijmegen-header-border-color,transparent);border-block-end-width:var(--nijmegen-header-border-block-end-width,0);
|
|
1
|
+
.nijmegen-header{position:relative;writing-mode:horizontal-tb}.nijmegen-header .nijmegen-search{inline-size:100%}.nijmegen-header__backdrop{background-color:var(--utrecht-backdrop-background-color);display:none;height:100vh;opacity:var(--utrecht-backdrop-opacity);position:fixed;top:0;width:100%;z-index:100}.nijmegen-header__backdrop--visible{display:block}.nijmegen-header__content{background-color:var(--nijmegen-header-background-color,#fff);border:0 solid var(--nijmegen-header-border-color,transparent);border-block-end-width:var(--nijmegen-header-border-block-end-width,0);position:relative;z-index:101}.nijmegen-header__content .nijmegen-header__content--inner{align-items:center;align-self:center;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{background-color:var(--nijmegen-header-background-color,#fff);border:0 solid var(--nijmegen-header-border-color,transparent);border-block-end-width:var(--nijmegen-header-border-block-end-width,0);position:relative;z-index:101}.nijmegen-header__content--small--inner{align-items:center;align-self:center;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);border:0 solid var(--nijmegen-header-border-color,transparent);border-block-start-width:var(--nijmegen-header-border-block-end-width,0);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 .nijmegen-search,.nijmegen-header__mobile-menu nijmegen-search{display:block;max-inline-size:calc(100% - var(--nijmegen-header-content-padding-inline-end, 0) - var(--nijmegen-header-content-padding-inline-start, 0));padding-inline-end:var(--nijmegen-header-content-padding-inline-end,0);padding-inline-start:var(--nijmegen-header-content-padding-inline-start,0)}.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:calc(1.5rem + 2px);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>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(
|
|
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-start-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/index.scss
CHANGED
|
@@ -3,19 +3,39 @@
|
|
|
3
3
|
@import "./mixin";
|
|
4
4
|
|
|
5
5
|
.nijmegen-header {
|
|
6
|
-
|
|
7
|
-
border: 0 solid var(--nijmegen-header-border-color, transparent);
|
|
8
|
-
border-block-end-width: var(--nijmegen-header-border-block-end-width, 0);
|
|
6
|
+
position: relative;
|
|
9
7
|
writing-mode: horizontal-tb;
|
|
10
8
|
|
|
11
9
|
.nijmegen-search {
|
|
12
|
-
background-color: red;
|
|
13
10
|
inline-size: 100%;
|
|
14
11
|
}
|
|
15
12
|
}
|
|
16
13
|
|
|
14
|
+
.nijmegen-header__backdrop {
|
|
15
|
+
background-color: var(--utrecht-backdrop-background-color);
|
|
16
|
+
display: none;
|
|
17
|
+
height: 100vh; /* stylelint-disable-line property-disallowed-list */
|
|
18
|
+
opacity: var(--utrecht-backdrop-opacity);
|
|
19
|
+
position: fixed;
|
|
20
|
+
top: 0; /* stylelint-disable-line property-disallowed-list */
|
|
21
|
+
width: 100%; /* stylelint-disable-line property-disallowed-list */
|
|
22
|
+
z-index: 100;
|
|
23
|
+
|
|
24
|
+
&--visible {
|
|
25
|
+
display: block;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
17
29
|
.nijmegen-header__content {
|
|
18
|
-
|
|
30
|
+
background-color: var(--nijmegen-header-background-color, #fff);
|
|
31
|
+
border: 0 solid var(--nijmegen-header-border-color, transparent);
|
|
32
|
+
border-block-end-width: var(--nijmegen-header-border-block-end-width, 0);
|
|
33
|
+
position: relative;
|
|
34
|
+
z-index: 101;
|
|
35
|
+
|
|
36
|
+
.nijmegen-header__content--inner {
|
|
37
|
+
@include nijmegen-header-content;
|
|
38
|
+
}
|
|
19
39
|
|
|
20
40
|
@media (width <1024px) {
|
|
21
41
|
display: none;
|
|
@@ -23,12 +43,14 @@
|
|
|
23
43
|
}
|
|
24
44
|
|
|
25
45
|
.nijmegen-header__content--small {
|
|
46
|
+
background-color: var(--nijmegen-header-background-color, #fff);
|
|
47
|
+
border: 0 solid var(--nijmegen-header-border-color, transparent);
|
|
48
|
+
border-block-end-width: var(--nijmegen-header-border-block-end-width, 0);
|
|
26
49
|
position: relative;
|
|
50
|
+
z-index: 101;
|
|
27
51
|
|
|
28
52
|
&--inner {
|
|
29
53
|
@include nijmegen-header-content;
|
|
30
|
-
|
|
31
|
-
border-block-end-width: var(--nijmegen-header-border-block-end-width, 0);
|
|
32
54
|
}
|
|
33
55
|
|
|
34
56
|
@media (width >=1024px) {
|
|
@@ -39,7 +61,7 @@
|
|
|
39
61
|
.nijmegen-header__mobile-menu {
|
|
40
62
|
background-color: var(--nijmegen-menu-background-color);
|
|
41
63
|
border: 0 solid var(--nijmegen-header-border-color, transparent);
|
|
42
|
-
border-block-
|
|
64
|
+
border-block-start-width: var(--nijmegen-header-border-block-end-width, 0);
|
|
43
65
|
display: none;
|
|
44
66
|
padding-block-end: var(--nijmegen-menu-padding-block-end);
|
|
45
67
|
padding-block-start: var(--nijmegen-menu-padding-block-start);
|
|
@@ -78,7 +100,7 @@
|
|
|
78
100
|
.nijmegen-header__panel {
|
|
79
101
|
display: none;
|
|
80
102
|
left: 0; /* stylelint-disable-line property-disallowed-list */
|
|
81
|
-
padding-block-start: 1.5rem;
|
|
103
|
+
padding-block-start: calc(1.5rem + 2px);
|
|
82
104
|
position: absolute;
|
|
83
105
|
width: 100%; /* stylelint-disable-line property-disallowed-list */
|
|
84
106
|
z-index: 10;
|
package/mega-menu/index.scss
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
.nijmegen-mega-menu {
|
|
4
4
|
background-color: var(--nijmegen-mega-menu-background-color, #fff);
|
|
5
5
|
border: 0 solid var(--nijmegen-mega-menu-border-color, transparent);
|
|
6
|
-
border-block-
|
|
6
|
+
border-block-start-width: var(--nijmegen-mega-menu-border-block-end-width, 1px);
|
|
7
7
|
margin-block-end: var(--nijmegen-mega-menu-margin-block-end);
|
|
8
8
|
writing-mode: horizontal-tb;
|
|
9
9
|
}
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.0.1-alpha.
|
|
2
|
+
"version": "0.0.1-alpha.111",
|
|
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.124",
|
|
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": "738a0a6a92308311f21d17612712bcfd1bac757c"
|
|
39
39
|
}
|