@gemeentenijmegen/components-css 0.0.1-alpha.9 → 0.0.1-alpha.91

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 (44) hide show
  1. package/accordion/index.scss +9 -0
  2. package/action-card/index.scss +37 -0
  3. package/breadcrumb/index.scss +130 -0
  4. package/card/index.scss +152 -0
  5. package/dist/header.css +174 -0
  6. package/dist/index.min.css +148 -2
  7. package/footer/index.scss +116 -0
  8. package/header/_mixin.scss +31 -0
  9. package/header/index.scss +169 -0
  10. package/hero/index.scss +108 -0
  11. package/image/index.scss +17 -0
  12. package/image-text-block/index.scss +48 -0
  13. package/index.scss +23 -0
  14. package/link/index.scss +10 -9
  15. package/link-list/_mixin.scss +8 -1
  16. package/link-list/index.scss +17 -4
  17. package/listbox/index.scss +81 -0
  18. package/mega-menu/index.scss +62 -0
  19. package/menu.scss +5 -0
  20. package/metadata/index.scss +31 -0
  21. package/mobile-menu/_mixin.scss +11 -0
  22. package/mobile-menu/index.scss +177 -0
  23. package/package.json +9 -4
  24. package/pagination/_mixin.scss +41 -0
  25. package/pagination/index.scss +191 -0
  26. package/rollup.config.mjs +26 -0
  27. package/search/index.scss +141 -0
  28. package/search-results/index.scss +56 -0
  29. package/skip-link/index.scss +41 -0
  30. package/spacing/getSpacing.mjs +116 -0
  31. package/spacing/semantic-spacing-matrix.json +156 -0
  32. package/spacing/spacing-matrix.json +1056 -0
  33. package/spacing/src/_mixin.scss +1968 -0
  34. package/spacing/src/_nested.scss +47 -0
  35. package/spacing/src/index.scss +36 -0
  36. package/spacing/src/semantic/_mixin.scss +311 -0
  37. package/spacing/src/semantic/index.scss +17 -0
  38. package/steplist/index.scss +114 -0
  39. package/table/_mixin.scss +97 -0
  40. package/table/index.scss +33 -0
  41. package/table-of-contents/index.scss +21 -0
  42. package/toolbar-button/_mixin.scss +21 -0
  43. package/toolbar-button/index.js +29 -0
  44. package/toolbar-button/index.scss +51 -0
package/toolbar-button/index.js ADDED
@@ -0,0 +1,29 @@
1
+ class ToolbarButton {
2
+ component;
3
+ #toolbarButtonClass = '.nijmegen-theme nijmegen-toolbar-button';
4
+
5
+ constructor() {
6
+ this.component = document.querySelectorAll(this.#toolbarButtonClass);
7
+ if (this.component) {
8
+ this.#initToolbarButtonListeners();
9
+ }
10
+ }
11
+
12
+ #initToolbarButtonListeners() {
13
+ this.component.forEach((button) => {
14
+ button.addEventListener(
15
+ 'click',
16
+ (event) => {
17
+ this.toolbarButtonClickHandler(event);
18
+ },
19
+ { once: true },
20
+ );
21
+ });
22
+ }
23
+
24
+ static toolbarButtonClickHandler(event) {
25
+ event.target.ariaExpanded = event.target.ariaExpanded === 'true' ? 'false' : 'true';
26
+ }
27
+ }
28
+
29
+ export default ToolbarButton;
package/toolbar-button/index.scss ADDED
@@ -0,0 +1,51 @@
1
+ @import "~@utrecht/button-css/src/mixin";
2
+ @import "~@utrecht/focus-ring-css/src/mixin";
3
+ @import "./mixin";
4
+ .nijmegen-toolbar-button {
5
+ @include utrecht-button;
6
+ @include utrecht-button-appearance-properties("utrecht-button", "subtle");
7
+
8
+ column-gap: var(--nijmegen-toolbar-button-column-gap);
9
+ cursor: pointer;
10
+ padding-block-end: var(--nijmegen-toolbar-button-padding-block-end);
11
+ padding-block-start: var(--nijmegen-toolbar-button-padding-block-start);
12
+ padding-inline-end: var(--nijmegen-toolbar-button-padding-inline-end);
13
+ padding-inline-start: var(--nijmegen-toolbar-button-padding-inline-start);
14
+
15
+ &.nijmegen-toolbar-button--icon {
16
+ &-menu {
17
+ &::before {
18
+ mask-image: var(
19
+ --nijmegen-toolbar-button-menu-icon-image,
20
+ 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" className="icon icon-tabler icons-tabler-outline icon-tabler-menu-2" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M4 6l16 0" /> <path d="M4 12l16 0" /> <path d="M4 18l16 0" /> </svg>')
21
+ );
22
+ }
23
+ @include toolbar-button-icon;
24
+ }
25
+ &-search {
26
+ &::before {
27
+ mask-image: var(
28
+ --nijmegen-toolbar-button-search-icon-image,
29
+ 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>')
30
+ );
31
+ }
32
+ @include toolbar-button-icon;
33
+ }
34
+ }
35
+
36
+ &:focus-visible,
37
+ &.nijmegen-toolbar-button--focus-visible {
38
+ @include utrecht-button--focus;
39
+ @include utrecht-button--focus-visible;
40
+ }
41
+
42
+ &:active:not(:disabled, [aria-disabled="true"]),
43
+ &.nijmegen-toolbar-button--active {
44
+ @include utrecht-button--active;
45
+ }
46
+
47
+ &:hover:not(:disabled, [aria-disabled="true"]),
48
+ &.nijmegen-toolbar-button--hover {
49
+ @include utrecht-button--hover;
50
+ }
51
+ }