@gemeentenijmegen/components-css 0.0.1-alpha.3 → 0.0.1-alpha.30

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