@gemeentenijmegen/components-css 0.0.1-alpha.95 → 0.0.1-alpha.97
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 +7 -0
- package/dist/index.min.css +1 -1
- package/header/index.scss +13 -0
- package/package.json +3 -3
package/dist/header.css
CHANGED
|
@@ -67,6 +67,13 @@
|
|
|
67
67
|
width: 100%; /* stylelint-disable-line property-disallowed-list */
|
|
68
68
|
z-index: 10;
|
|
69
69
|
}
|
|
70
|
+
.nijmegen-header__mobile-menu nijmegen-search,
|
|
71
|
+
.nijmegen-header__mobile-menu .nijmegen-search {
|
|
72
|
+
display: block;
|
|
73
|
+
max-inline-size: calc(100% - var(--nijmegen-header-content-padding-inline-end, 0) - var(--nijmegen-header-content-padding-inline-start, 0));
|
|
74
|
+
padding-inline-end: var(--nijmegen-header-content-padding-inline-end, 0);
|
|
75
|
+
padding-inline-start: var(--nijmegen-header-content-padding-inline-start, 0);
|
|
76
|
+
}
|
|
70
77
|
.nijmegen-header__mobile-menu--visible {
|
|
71
78
|
display: block;
|
|
72
79
|
}
|
package/dist/index.min.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
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(
|
|
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 .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: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))
|
package/header/index.scss
CHANGED
|
@@ -45,6 +45,19 @@
|
|
|
45
45
|
width: 100%; /* stylelint-disable-line property-disallowed-list */
|
|
46
46
|
z-index: 10;
|
|
47
47
|
|
|
48
|
+
nijmegen-search,
|
|
49
|
+
.nijmegen-search {
|
|
50
|
+
display: block;
|
|
51
|
+
max-inline-size: calc(
|
|
52
|
+
100% - var(--nijmegen-header-content-padding-inline-end, 0) - var(
|
|
53
|
+
--nijmegen-header-content-padding-inline-start,
|
|
54
|
+
0
|
|
55
|
+
)
|
|
56
|
+
);
|
|
57
|
+
padding-inline-end: var(--nijmegen-header-content-padding-inline-end, 0);
|
|
58
|
+
padding-inline-start: var(--nijmegen-header-content-padding-inline-start, 0);
|
|
59
|
+
}
|
|
60
|
+
|
|
48
61
|
&--visible {
|
|
49
62
|
display: block;
|
|
50
63
|
}
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.0.1-alpha.
|
|
2
|
+
"version": "0.0.1-alpha.97",
|
|
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.110",
|
|
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": "0264dbbdc415ff8cd95a54c6ba121c36d1e16fda"
|
|
39
39
|
}
|