@amsterdam/design-system-css 0.1.6 → 0.1.7

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 (91) hide show
  1. package/dist/accordion/accordion.css +1 -1
  2. package/dist/accordion/accordion.css.map +1 -1
  3. package/dist/alert/alert.css +1 -0
  4. package/dist/alert/alert.css.map +1 -0
  5. package/dist/aspect-ratio/aspect-ratio.css +1 -30
  6. package/dist/aspect-ratio/aspect-ratio.css.map +1 -1
  7. package/dist/blockquote/blockquote.css +1 -1
  8. package/dist/blockquote/blockquote.css.map +1 -1
  9. package/dist/breadcrumb/breadcrumb.css +1 -1
  10. package/dist/breadcrumb/breadcrumb.css.map +1 -1
  11. package/dist/button/button.css +1 -1
  12. package/dist/button/button.css.map +1 -1
  13. package/dist/checkbox/checkbox.css +1 -1
  14. package/dist/checkbox/checkbox.css.map +1 -1
  15. package/dist/form-label/form-label.css +1 -1
  16. package/dist/form-label/form-label.css.map +1 -1
  17. package/dist/heading/heading.css +1 -1
  18. package/dist/heading/heading.css.map +1 -1
  19. package/dist/index.css +1 -1
  20. package/dist/index.css.map +1 -1
  21. package/dist/link/link.css +1 -1
  22. package/dist/link/link.css.map +1 -1
  23. package/dist/page-heading/page-heading.css +1 -1
  24. package/dist/page-heading/page-heading.css.map +1 -1
  25. package/package.json +4 -4
  26. package/src/accordion/accordion.scss +6 -0
  27. package/src/alert/README.md +18 -0
  28. package/src/alert/alert.scss +69 -0
  29. package/src/aspect-ratio/README.md +17 -0
  30. package/src/aspect-ratio/aspect-ratio.scss +29 -0
  31. package/src/blockquote/blockquote.scss +2 -2
  32. package/src/breadcrumb/breadcrumb.scss +1 -0
  33. package/src/button/button.scss +6 -0
  34. package/src/checkbox/checkbox.scss +6 -0
  35. package/src/form-label/README.md +1 -1
  36. package/src/form-label/form-label.scss +6 -0
  37. package/src/heading/heading.scss +1 -0
  38. package/src/index.scss +12 -4
  39. package/src/link/link.scss +6 -0
  40. package/src/ordered-list/README.md +1 -1
  41. package/src/page-heading/README.md +1 -1
  42. package/src/page-heading/page-heading.scss +1 -0
  43. package/src/top-task-link/README.md +1 -1
  44. package/src/unordered-list/README.md +1 -1
  45. package/src/visually-hidden/README.md +2 -2
  46. package/dist/buttons/button/button.css +0 -729
  47. package/dist/buttons/button/button.css.map +0 -1
  48. package/dist/card/card.css +0 -56
  49. package/dist/card/card.css.map +0 -1
  50. package/dist/containers/accordion/accordion.css +0 -69
  51. package/dist/containers/accordion/accordion.css.map +0 -1
  52. package/dist/containers/footer/footer.css +0 -35
  53. package/dist/containers/footer/footer.css.map +0 -1
  54. package/dist/containers/visually-hidden/visually-hidden.css +0 -18
  55. package/dist/containers/visually-hidden/visually-hidden.css.map +0 -1
  56. package/dist/forms/checkbox/checkbox.css +0 -170
  57. package/dist/forms/checkbox/checkbox.css.map +0 -1
  58. package/dist/forms/form-label/form-label.css +0 -26
  59. package/dist/forms/form-label/form-label.css.map +0 -1
  60. package/dist/hero/hero.css +0 -1
  61. package/dist/hero/hero.css.map +0 -1
  62. package/dist/layout/grid-cell/grid-cell.css +0 -88
  63. package/dist/layout/grid-cell/grid-cell.css.map +0 -1
  64. package/dist/layout/page-grid/page-grid.css +0 -26
  65. package/dist/layout/page-grid/page-grid.css.map +0 -1
  66. package/dist/media/icon/icon.css +0 -122
  67. package/dist/media/icon/icon.css.map +0 -1
  68. package/dist/navigation/breadcrumb/breadcrumb.css +0 -67
  69. package/dist/navigation/breadcrumb/breadcrumb.css.map +0 -1
  70. package/dist/navigation/link/link.css +0 -111
  71. package/dist/navigation/link/link.css.map +0 -1
  72. package/dist/navigation/page-menu/page-menu.css +0 -83
  73. package/dist/navigation/page-menu/page-menu.css.map +0 -1
  74. package/dist/navigation/top-task-link/top-task-link.css +0 -59
  75. package/dist/navigation/top-task-link/top-task-link.css.map +0 -1
  76. package/dist/switch/switch.css +0 -59
  77. package/dist/switch/switch.css.map +0 -1
  78. package/dist/testula/testula.css +0 -9
  79. package/dist/testula/testula.css.map +0 -1
  80. package/dist/text/blockquote/blockquote.css +0 -43
  81. package/dist/text/blockquote/blockquote.css.map +0 -1
  82. package/dist/text/heading/heading.css +0 -67
  83. package/dist/text/heading/heading.css.map +0 -1
  84. package/dist/text/ordered-list/ordered-list.css +0 -54
  85. package/dist/text/ordered-list/ordered-list.css.map +0 -1
  86. package/dist/text/page-heading/page-heading.css +0 -34
  87. package/dist/text/page-heading/page-heading.css.map +0 -1
  88. package/dist/text/paragraph/paragraph.css +0 -53
  89. package/dist/text/paragraph/paragraph.css.map +0 -1
  90. package/dist/text/unordered-list/unordered-list.css +0 -54
  91. package/dist/text/unordered-list/unordered-list.css.map +0 -1
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/buttons/button/button.scss","../../../node_modules/@utrecht/components/button/css/index.scss","../../../node_modules/@utrecht/components/common/focus/_mixin.scss","../../../node_modules/@utrecht/components/button/css/_mixin.scss","../../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AA6BA;AC7BA;AAAA;AAAA;AAAA;AAAA;ADAA;AAAA;AAAA;AAAA;AAAA;AA6BA;ADpBA;AEAE;AAAA;AAAA;;AAAA;AAAA;AAAA;EAOA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAUA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAUA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAUA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAUA;EACA;AAAA;AAAA;AAAA;EAIA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EFzOF;IE0OI;IACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;IAMA;IACA;IACA;AAEA;;;;AFlPJ;EEuPE;EACA;EACA;EACA;;;AFtPF;AACE;EEyPA;;;AFrPF;EEyPE;;;AFrPF;EEyRE;EACA;EACA;;;AFvRF;AAAA;EEqPE;EACA;EACA;EACA;;;AFnPF;AACE;AC5BA;AAAA;AAAA;AAAA;EAIA;AAAA;EAGA;EACA;EACA;EACA;EACA;;;ADqBF;EE6PE;EACA;EACA;EACA;;;AFxPA;AACE;AAAA;ACzCF;AAAA;AAAA;AAAA;EAIA;AAAA;EAGA;EACA;EACA;EACA;EACA;;;ADmCA;EE+OA;EACA;EACA;EACA;AARA;ADxRA;AAAA;AAAA;AAAA;EAIA;AAAA;EAGA;EACA;EACA;EACA;EACA;;;ADwCA;AACA;AACA;ACtCA;EACA;EACA;;;ADiDF;AAAA;EEkOE;EACA;EACA;EACA;;;AFhOF;AAAA;EE2ME;EACA;EACA;;;AA6BA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAtBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAtBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;;;AAtBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;;;AAtBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;;;AAtBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;;;AAtBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;;;AAtBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;;;AAtBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;;;AAtBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;;;AAtBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;;;AC3WJ;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AJGA;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;;AAEA;AAAA;EAEE;;AAGF;EACE;;;AAQF;EACE;;;AAIJ;EACE;;;AAIA;EACE;;;AAIJ;EACE","file":"button.css"}
@@ -1,56 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright (c) 2023 Gemeente Amsterdam
4
- */
5
- .amsterdam-card {
6
- display: grid;
7
- gap: 0.5rem;
8
- outline-offset: var(--amsterdam-card-outline-offset);
9
- position: relative;
10
- touch-action: manipulation;
11
- /* Set native outline on card if card has focus visible within */
12
- /*
13
- Remove link focus outline only if :has is supported,
14
- which means the outline on the whole card is set
15
- */
16
- /*
17
- This trick, together with position: relative on the outer wrapper, makes the whole card clickable.
18
- Taken from https://inclusive-components.design/cards/
19
- */
20
- }
21
- .amsterdam-card:has(:focus-visible) {
22
- outline-color: -webkit-focus-ring-color;
23
- outline-style: auto;
24
- outline-width: 1px;
25
- }
26
- .amsterdam-card:has(:focus-visible) a:focus {
27
- outline: none;
28
- }
29
- .amsterdam-card a::after {
30
- bottom: 0;
31
- content: "";
32
- display: block;
33
- left: 0;
34
- position: absolute;
35
- right: 0;
36
- top: 0;
37
- }
38
-
39
- .amsterdam-card__heading-group {
40
- display: flex;
41
- flex-direction: column-reverse;
42
- gap: 0.5rem;
43
- }
44
-
45
- .amsterdam-card__link {
46
- color: var(--amsterdam-card-link-color);
47
- text-decoration: none;
48
- text-decoration-thickness: 2px;
49
- text-underline-offset: 3px;
50
- }
51
- .amsterdam-card__link:hover {
52
- color: var(--amsterdam-card-link-hover-color);
53
- text-decoration: underline;
54
- }
55
-
56
- /*# sourceMappingURL=card.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/card/card.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;EACA;EACA;AAEA;AAOA;AAAA;AAAA;AAAA;AAQA;AAAA;AAAA;AAAA;;AAdA;EACE;EACA;EACA;;AAOF;EACE;;AAOF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA","file":"card.css"}
@@ -1,69 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright (c) 2023 Gemeente Amsterdam
4
- */
5
- /**
6
- * @license EUPL-1.2+
7
- * Copyright (c) 2023 Gemeente Amsterdam
8
- */
9
- /*
10
- The breakpoint is 854px / 16 = 53.375rems
11
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
12
- */
13
- .amsterdam-accordion__header {
14
- display: flex;
15
- margin-block: 0;
16
- margin-inline: 0;
17
- }
18
-
19
- .amsterdam-accordion__button {
20
- background-color: transparent;
21
- border: 0;
22
- color: var(--amsterdam-accordion-button-color);
23
- cursor: pointer;
24
- display: flex;
25
- font-family: var(--amsterdam-accordion-button-font-family);
26
- font-size: var(--amsterdam-accordion-button-narrow-font-size);
27
- font-weight: var(--amsterdam-accordion-button-font-weight);
28
- justify-content: space-between;
29
- line-height: var(--amsterdam-accordion-button-line-height);
30
- padding-block: 0.75rem;
31
- padding-inline: 1rem;
32
- width: 100%;
33
- }
34
- @media screen and (width > 53.375rem) {
35
- .amsterdam-accordion__button {
36
- font-size: var(--amsterdam-accordion-button-wide-font-size);
37
- }
38
- }
39
- .amsterdam-accordion__button:focus {
40
- outline-offset: var(--amsterdam-accordion-button-focus-outline-offset);
41
- }
42
- .amsterdam-accordion__button:hover {
43
- box-shadow: var(--amsterdam-accordion-button-hover-box-shadow);
44
- }
45
- .amsterdam-accordion__button svg {
46
- transform: rotate(0deg);
47
- transition: transform 0.3s ease;
48
- }
49
- @media (prefers-reduced-motion) {
50
- .amsterdam-accordion__button svg {
51
- transition: none;
52
- }
53
- }
54
-
55
- .amsterdam-accordion__button[aria-expanded=true] svg {
56
- transform: rotate(180deg);
57
- }
58
-
59
- .amsterdam-accordion__panel {
60
- display: none;
61
- padding-block: 1rem;
62
- padding-inline: 1rem;
63
- }
64
-
65
- .amsterdam-accordion__panel--expanded {
66
- display: block;
67
- }
68
-
69
- /*# sourceMappingURL=accordion.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/containers/accordion/accordion.scss","../../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAfF;IAgBI;;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAKN;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE","file":"accordion.css"}
@@ -1,35 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright (c) 2023 Gemeente Amsterdam
4
- */
5
- /**
6
- * @license EUPL-1.2+
7
- * Copyright (c) 2023 Gemeente Amsterdam
8
- */
9
- /*
10
- The breakpoint is 854px / 16 = 53.375rems
11
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
12
- */
13
- .amsterdam-footer__top {
14
- background-color: var(--amsterdam-footer-top-background-color);
15
- padding-block: 2.5rem;
16
- padding-inline: 2rem; /* TODO: For now I've set a padding here, this should eventually be handled by PageGrid */
17
- }
18
-
19
- @media screen and (width > 53.375rem) {
20
- .amsterdam-footer__top {
21
- grid-template-columns: repeat(var(--amsterdam-page-grid-column-count-wide), 1fr);
22
- }
23
- }
24
- .amsterdam-footer__column {
25
- display: flex;
26
- flex-direction: column;
27
- gap: 2.5rem;
28
- }
29
-
30
- .amsterdam-footer__bottom {
31
- padding-block: 0.5rem;
32
- padding-inline: 2rem; /* TODO: For now I've set a padding here, this should eventually be handled by PageGrid */
33
- }
34
-
35
- /*# sourceMappingURL=footer.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/containers/footer/footer.scss","../../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADEA;EACE;EACA;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA","file":"footer.css"}
@@ -1,18 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright (c) 2023 Gemeente Amsterdam
4
- */
5
- .amsterdam-visually-hidden {
6
- clip: rect(1px, 1px, 1px, 1px);
7
- clip-path: inset(50%);
8
- height: 1px;
9
- margin-block: -1px;
10
- margin-inline: -1px;
11
- overflow: hidden;
12
- padding-block: 0;
13
- padding-inline: 0;
14
- position: absolute;
15
- width: 1px;
16
- }
17
-
18
- /*# sourceMappingURL=visually-hidden.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/containers/visually-hidden/visually-hidden.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"visually-hidden.css"}
@@ -1,170 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright (c) 2023 Gemeente Amsterdam
4
- */
5
- /**
6
- * @license EUPL-1.2+
7
- * Copyright (c) 2023 Gemeente Amsterdam
8
- */
9
- /*
10
- The breakpoint is 854px / 16 = 53.375rems
11
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
12
- */
13
- .amsterdam-checkbox__input {
14
- appearance: none;
15
- margin-block: 0;
16
- margin-inline: 0;
17
- opacity: 0%; /* to hide native input field in older iOS */
18
- }
19
- .amsterdam-checkbox__input:focus-visible + label {
20
- outline: auto;
21
- outline-offset: var(--amsterdam-checkbox-outline-offset);
22
- }
23
-
24
- .amsterdam-checkbox__checkmark {
25
- align-items: center;
26
- display: flex;
27
- flex-shrink: 0;
28
- height: calc(var(--amsterdam-checkbox-checkmark-narrow-size) * var(--amsterdam-checkbox-checkmark-multiplier));
29
- width: 1.5rem;
30
- }
31
- .amsterdam-checkbox__checkmark::after {
32
- border-color: var(--amsterdam-checkbox-checkmark-border-color);
33
- border-style: solid;
34
- border-width: 2px;
35
- box-sizing: border-box;
36
- content: "";
37
- height: 1.5rem;
38
- width: 100%;
39
- }
40
- @media screen and (width > 53.375rem) {
41
- .amsterdam-checkbox__checkmark {
42
- height: calc(var(--amsterdam-checkbox-checkmark-wide-size) * var(--amsterdam-checkbox-checkmark-multiplier));
43
- }
44
- }
45
-
46
- .amsterdam-checkbox__label {
47
- color: var(--amsterdam-checkbox-color);
48
- cursor: pointer;
49
- display: inline-flex;
50
- font-family: var(--amsterdam-checkbox-font-family);
51
- font-size: var(--amsterdam-checkbox-narrow-font-size);
52
- font-weight: 400;
53
- gap: 0.5rem;
54
- line-height: var(--amsterdam-checkbox-line-height);
55
- }
56
- .amsterdam-checkbox__label:hover {
57
- color: var(--amsterdam-checkbox-hover-color);
58
- text-decoration: underline;
59
- text-decoration-thickness: 2px;
60
- text-underline-offset: 3px;
61
- }
62
- .amsterdam-checkbox__label:hover .amsterdam-checkbox__checkmark::after {
63
- border-color: var(--amsterdam-checkbox-checkmark-hover-border-color);
64
- border-width: 3px;
65
- }
66
- @media screen and (width > 53.375rem) {
67
- .amsterdam-checkbox__label {
68
- font-size: var(--amsterdam-checkbox-wide-font-size);
69
- }
70
- }
71
-
72
- .amsterdam-checkbox__input:checked + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
73
- background-color: var(--amsterdam-checkbox-checkmark-checked-background-color);
74
- background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22%23ffffff%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M12.216%2027.016%200%2014.168l2.91-2.77%209.346%209.837L29.129%204%2032%206.8z%22%2F%3E%3C%2Fsvg%3E");
75
- background-position: center;
76
- background-repeat: no-repeat;
77
- background-size: 1rem;
78
- border: none;
79
- }
80
-
81
- .amsterdam-checkbox__input:indeterminate + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
82
- background-color: var(--amsterdam-checkbox-checkmark-indeterminate-background-color);
83
- background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0id2hpdGUiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMTMuNzE0aDMydjRIMHoiLz48L3N2Zz4=");
84
- background-position: center;
85
- background-repeat: no-repeat;
86
- background-size: 1rem;
87
- border: none;
88
- }
89
-
90
- .amsterdam-checkbox__input:invalid + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after,
91
- .amsterdam-checkbox__input[aria-invalid=true] + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
92
- border-color: var(--amsterdam-checkbox-checkmark-invalid-border-color);
93
- }
94
-
95
- .amsterdam-checkbox__input:disabled + .amsterdam-checkbox__label {
96
- color: var(--amsterdam-checkbox-disabled-color);
97
- cursor: not-allowed;
98
- }
99
- .amsterdam-checkbox__input:disabled + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
100
- border-color: var(--amsterdam-checkbox-checkmark-disabled-border-color);
101
- border-width: 2px;
102
- }
103
-
104
- .amsterdam-checkbox__input:invalid:checked + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after,
105
- .amsterdam-checkbox__input[aria-invalid=true]:checked + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
106
- background-color: var(--amsterdam-checkbox-checkmark-invalid-checked-background-color);
107
- }
108
-
109
- .amsterdam-checkbox__input:invalid:indeterminate + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after,
110
- .amsterdam-checkbox__input[aria-invalid=true]:indeterminate + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
111
- background-color: var(--amsterdam-checkbox-checkmark-invalid-indeterminate-background-color);
112
- }
113
-
114
- .amsterdam-checkbox__input:disabled + .amsterdam-checkbox__label:hover {
115
- text-decoration: none;
116
- }
117
-
118
- .amsterdam-checkbox__input:disabled:checked + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
119
- background-color: var(--amsterdam-checkbox-checkmark-disabled-checked-background-color);
120
- }
121
-
122
- .amsterdam-checkbox__input:disabled:indeterminate + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
123
- background-color: var(--amsterdam-checkbox-checkmark-disabled-indeterminate-background-color);
124
- }
125
-
126
- .amsterdam-checkbox__input:invalid:disabled + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after,
127
- .amsterdam-checkbox__input[aria-invalid=true]:disabled + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
128
- border-color: var(--amsterdam-checkbox-checkmark-disabled-border-color);
129
- }
130
-
131
- :is(.amsterdam-checkbox__input:invalid, .amsterdam-checkbox__input[aria-invalid=true]) + .amsterdam-checkbox__label:hover .amsterdam-checkbox__checkmark::after {
132
- border-color: var(--amsterdam-checkbox-checkmark-invalid-hover-border-color);
133
- }
134
-
135
- .amsterdam-checkbox__input:checked + .amsterdam-checkbox__label:hover .amsterdam-checkbox__checkmark::after {
136
- background-color: var(--amsterdam-checkbox-checkmark-checked-hover-background-color);
137
- }
138
-
139
- .amsterdam-checkbox__input:indeterminate + .amsterdam-checkbox__label:hover .amsterdam-checkbox__checkmark::after {
140
- background-color: var(--amsterdam-checkbox-checkmark-indeterminate-hover-background-color);
141
- }
142
-
143
- :is(.amsterdam-checkbox__input:invalid:checked, .amsterdam-checkbox__input[aria-invalid=true]:checked) + .amsterdam-checkbox__label:hover .amsterdam-checkbox__checkmark::after {
144
- background-color: var(--amsterdam-checkbox-checkmark-invalid-checked-hover-background-color);
145
- }
146
-
147
- :is(.amsterdam-checkbox__input:invalid:indeterminate, .amsterdam-checkbox__input[aria-invalid=true]:indeterminate) + .amsterdam-checkbox__label:hover .amsterdam-checkbox__checkmark::after {
148
- background-color: var(--amsterdam-checkbox-checkmark-invalid-indeterminate-hover-background-color);
149
- }
150
-
151
- .amsterdam-checkbox__input:disabled:checked + .amsterdam-checkbox__label:hover .amsterdam-checkbox__checkmark::after {
152
- background-color: var(--amsterdam-checkbox-checkmark-disabled-checked-hover-background-color);
153
- }
154
-
155
- .amsterdam-checkbox__input:disabled:indeterminate + .amsterdam-checkbox__label:hover .amsterdam-checkbox__checkmark::after {
156
- background-color: var(--amsterdam-checkbox-checkmark-disabled-indeterminate-hover-background-color);
157
- }
158
-
159
- :is(.amsterdam-checkbox__input:invalid:disabled, .amsterdam-checkbox__input[aria-invalid=true]:disabled) + .amsterdam-checkbox__label:hover .amsterdam-checkbox__checkmark::after {
160
- border-color: var(--amsterdam-checkbox-checkmark-disabled-border-color);
161
- }
162
-
163
- .amsterdam-checkbox__input:invalid:disabled:checked + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after,
164
- .amsterdam-checkbox__input:invalid:disabled:indeterminate + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after,
165
- .amsterdam-checkbox__input[aria-invalid=true]:disabled:checked + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after,
166
- .amsterdam-checkbox__input[aria-invalid=true]:disabled:indeterminate + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
167
- background-color: var(--amsterdam-checkbox-checkmark-disabled-checked-background-color);
168
- }
169
-
170
- /*# sourceMappingURL=checkbox.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/forms/checkbox/checkbox.scss","../../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAjBF;IAkBI;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EAtBF;IAuBI;;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAOF;AAAA;EACE;;;AAMF;EACE;EACA;;AAEA;EACE;EACA;;;AAQJ;AAAA;EACE;;;AAOF;AAAA;EACE;;;AAKJ;EACE;;;AAKA;EACE;;;AAMF;EACE;;;AAOF;AAAA;EAEE;;;AAOJ;EAIE;;;AAIF;EACE;;;AAIF;EACE;;;AAIF;EAIE;;;AAIF;EAIE;;;AAIF;EACE;;;AAIF;EAGE;;;AAIF;EAIE;;;AAUA;AAAA;AAAA;AAAA;EAEE","file":"checkbox.css"}
@@ -1,26 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright (c) 2023 Gemeente Amsterdam
4
- */
5
- /**
6
- * @license EUPL-1.2+
7
- * Copyright (c) 2023 Gemeente Amsterdam
8
- */
9
- /*
10
- The breakpoint is 854px / 16 = 53.375rems
11
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
12
- */
13
- .amsterdam-form-label {
14
- color: var(--amsterdam-form-label-color);
15
- font-family: var(--amsterdam-form-label-font-family);
16
- font-size: var(--amsterdam-form-label-narrow-font-size);
17
- font-weight: var(--amsterdam-form-label-font-weight);
18
- line-height: var(--amsterdam-form-label-line-height);
19
- }
20
- @media screen and (width > 53.375rem) {
21
- .amsterdam-form-label {
22
- font-size: var(--amsterdam-form-label-wide-font-size);
23
- }
24
- }
25
-
26
- /*# sourceMappingURL=form-label.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/forms/form-label/form-label.scss","../../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EAPF;IAQI","file":"form-label.css"}
@@ -1 +0,0 @@
1
- .amsterdam-hero{color:var(--amsterdam-hero-color);font-family:var(--amsterdam-hero-font-family);font-size:var(--amsterdam-hero-narrow-font-size);font-weight:var(--amsterdam-hero-font-weight);line-height:var(--amsterdam-hero-line-height);box-sizing:border-box;break-after:avoid;break-inside:avoid;margin-block:0;margin-inline:0}@media screen and (width > 53.375rem){.amsterdam-hero{font-size:var(--amsterdam-hero-wide-font-size)}}.amsterdam-hero--inverse-color{color:var(--amsterdam-hero-inverse-color)}/*# sourceMappingURL=hero.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/hero/hero.scss"],"names":[],"mappings":"AAeA,gBACE,kCACA,8CACA,iDACA,8CACA,8CAZA,sBACA,kBACA,mBACA,eACA,gBAUA,sCAPF,gBAQI,gDAMJ,+BACE","file":"hero.css"}
@@ -1,88 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright (c) 2023 Gemeente Amsterdam
4
- */
5
- /**
6
- * @license EUPL-1.2+
7
- * Copyright (c) 2023 Gemeente Amsterdam
8
- */
9
- /*
10
- The breakpoint is 854px / 16 = 53.375rems
11
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
12
- */
13
- @media screen and (width > 53.375rem) {
14
- .amsterdam-grid-column-start-1 {
15
- grid-column-start: 1;
16
- }
17
- .amsterdam-grid-column-span-1 {
18
- grid-column-end: span 1;
19
- }
20
- .amsterdam-grid-column-start-2 {
21
- grid-column-start: 2;
22
- }
23
- .amsterdam-grid-column-span-2 {
24
- grid-column-end: span 2;
25
- }
26
- .amsterdam-grid-column-start-3 {
27
- grid-column-start: 3;
28
- }
29
- .amsterdam-grid-column-span-3 {
30
- grid-column-end: span 3;
31
- }
32
- .amsterdam-grid-column-start-4 {
33
- grid-column-start: 4;
34
- }
35
- .amsterdam-grid-column-span-4 {
36
- grid-column-end: span 4;
37
- }
38
- .amsterdam-grid-column-start-5 {
39
- grid-column-start: 5;
40
- }
41
- .amsterdam-grid-column-span-5 {
42
- grid-column-end: span 5;
43
- }
44
- .amsterdam-grid-column-start-6 {
45
- grid-column-start: 6;
46
- }
47
- .amsterdam-grid-column-span-6 {
48
- grid-column-end: span 6;
49
- }
50
- .amsterdam-grid-column-start-7 {
51
- grid-column-start: 7;
52
- }
53
- .amsterdam-grid-column-span-7 {
54
- grid-column-end: span 7;
55
- }
56
- .amsterdam-grid-column-start-8 {
57
- grid-column-start: 8;
58
- }
59
- .amsterdam-grid-column-span-8 {
60
- grid-column-end: span 8;
61
- }
62
- .amsterdam-grid-column-start-9 {
63
- grid-column-start: 9;
64
- }
65
- .amsterdam-grid-column-span-9 {
66
- grid-column-end: span 9;
67
- }
68
- .amsterdam-grid-column-start-10 {
69
- grid-column-start: 10;
70
- }
71
- .amsterdam-grid-column-span-10 {
72
- grid-column-end: span 10;
73
- }
74
- .amsterdam-grid-column-start-11 {
75
- grid-column-start: 11;
76
- }
77
- .amsterdam-grid-column-span-11 {
78
- grid-column-end: span 11;
79
- }
80
- .amsterdam-grid-column-start-12 {
81
- grid-column-start: 12;
82
- }
83
- .amsterdam-grid-column-span-12 {
84
- grid-column-end: span 12;
85
- }
86
- }
87
-
88
- /*# sourceMappingURL=grid-cell.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/layout/grid-cell/grid-cell.scss","../../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADEA;EAEI;IACE,mBAFS;;EAKX;IACE;;EALF;IACE,mBAFS;;EAKX;IACE;;EALF;IACE,mBAFS;;EAKX;IACE;;EALF;IACE,mBAFS;;EAKX;IACE;;EALF;IACE,mBAFS;;EAKX;IACE;;EALF;IACE,mBAFS;;EAKX;IACE;;EALF;IACE,mBAFS;;EAKX;IACE;;EALF;IACE,mBAFS;;EAKX;IACE;;EALF;IACE,mBAFS;;EAKX;IACE;;EALF;IACE,mBAFS;;EAKX;IACE;;EALF;IACE,mBAFS;;EAKX;IACE;;EALF;IACE,mBAFS;;EAKX;IACE","file":"grid-cell.css"}
@@ -1,26 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright (c) 2023 Gemeente Amsterdam
4
- */
5
- /**
6
- * @license EUPL-1.2+
7
- * Copyright (c) 2023 Gemeente Amsterdam
8
- */
9
- /*
10
- The breakpoint is 854px / 16 = 53.375rems
11
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
12
- */
13
- .amsterdam-page-grid {
14
- column-gap: var(--amsterdam-page-grid-column-gap);
15
- display: grid;
16
- grid-template-columns: repeat(var(--amsterdam-page-grid-column-count-narrow), 1fr);
17
- max-width: var(--amsterdam-page-grid-max-width);
18
- }
19
-
20
- @media screen and (width > 53.375rem) {
21
- .amsterdam-page-grid {
22
- grid-template-columns: repeat(var(--amsterdam-page-grid-column-count-wide), 1fr);
23
- }
24
- }
25
-
26
- /*# sourceMappingURL=page-grid.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/layout/page-grid/page-grid.scss","../../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE","file":"page-grid.css"}
@@ -1,122 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright (c) 2023 Gemeente Amsterdam
4
- */
5
- /**
6
- * @license EUPL-1.2+
7
- * Copyright (c) 2023 Gemeente Amsterdam
8
- */
9
- /*
10
- The breakpoint is 854px / 16 = 53.375rems
11
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
12
- */
13
- .amsterdam-icon {
14
- align-items: center;
15
- display: inline-flex;
16
- }
17
-
18
- .amsterdam-icon svg {
19
- fill: currentColor;
20
- }
21
-
22
- .amsterdam-icon--size-3 {
23
- height: calc(var(--amsterdam-icon-size-3-icon-size-narrow) * var(--amsterdam-icon-size-3-container-multiplier));
24
- }
25
- @media screen and (width > 53.375rem) {
26
- .amsterdam-icon--size-3 {
27
- height: calc(var(--amsterdam-icon-size-3-icon-size-wide) * var(--amsterdam-icon-size-3-container-multiplier));
28
- }
29
- }
30
-
31
- .amsterdam-icon--size-3 svg {
32
- height: var(--amsterdam-icon-size-3-icon-size-narrow);
33
- width: var(--amsterdam-icon-size-3-icon-size-narrow);
34
- }
35
- @media screen and (width > 53.375rem) {
36
- .amsterdam-icon--size-3 svg {
37
- height: var(--amsterdam-icon-size-3-icon-size-wide);
38
- width: var(--amsterdam-icon-size-3-icon-size-wide);
39
- }
40
- }
41
-
42
- .amsterdam-icon--size-4 {
43
- height: calc(var(--amsterdam-icon-size-4-icon-size-narrow) * var(--amsterdam-icon-size-4-container-multiplier));
44
- }
45
- @media screen and (width > 53.375rem) {
46
- .amsterdam-icon--size-4 {
47
- height: calc(var(--amsterdam-icon-size-4-icon-size-wide) * var(--amsterdam-icon-size-4-container-multiplier));
48
- }
49
- }
50
-
51
- .amsterdam-icon--size-4 svg {
52
- height: var(--amsterdam-icon-size-4-icon-size-narrow);
53
- width: var(--amsterdam-icon-size-4-icon-size-narrow);
54
- }
55
- @media screen and (width > 53.375rem) {
56
- .amsterdam-icon--size-4 svg {
57
- height: var(--amsterdam-icon-size-4-icon-size-wide);
58
- width: var(--amsterdam-icon-size-4-icon-size-wide);
59
- }
60
- }
61
-
62
- .amsterdam-icon--size-5 {
63
- height: calc(var(--amsterdam-icon-size-5-icon-size-narrow) * var(--amsterdam-icon-size-5-container-multiplier));
64
- }
65
- @media screen and (width > 53.375rem) {
66
- .amsterdam-icon--size-5 {
67
- height: calc(var(--amsterdam-icon-size-5-icon-size-wide) * var(--amsterdam-icon-size-5-container-multiplier));
68
- }
69
- }
70
-
71
- .amsterdam-icon--size-5 svg {
72
- height: var(--amsterdam-icon-size-5-icon-size-narrow);
73
- width: var(--amsterdam-icon-size-5-icon-size-narrow);
74
- }
75
- @media screen and (width > 53.375rem) {
76
- .amsterdam-icon--size-5 svg {
77
- height: var(--amsterdam-icon-size-5-icon-size-wide);
78
- width: var(--amsterdam-icon-size-5-icon-size-wide);
79
- }
80
- }
81
-
82
- .amsterdam-icon--size-6 {
83
- height: calc(var(--amsterdam-icon-size-6-icon-size-narrow) * var(--amsterdam-icon-size-6-container-multiplier));
84
- }
85
- @media screen and (width > 53.375rem) {
86
- .amsterdam-icon--size-6 {
87
- height: calc(var(--amsterdam-icon-size-6-icon-size-wide) * var(--amsterdam-icon-size-6-container-multiplier));
88
- }
89
- }
90
-
91
- .amsterdam-icon--size-6 svg {
92
- height: var(--amsterdam-icon-size-6-icon-size-narrow);
93
- width: var(--amsterdam-icon-size-6-icon-size-narrow);
94
- }
95
- @media screen and (width > 53.375rem) {
96
- .amsterdam-icon--size-6 svg {
97
- height: var(--amsterdam-icon-size-6-icon-size-wide);
98
- width: var(--amsterdam-icon-size-6-icon-size-wide);
99
- }
100
- }
101
-
102
- .amsterdam-icon--size-7 {
103
- height: calc(var(--amsterdam-icon-size-7-icon-size-narrow) * var(--amsterdam-icon-size-7-container-multiplier));
104
- }
105
- @media screen and (width > 53.375rem) {
106
- .amsterdam-icon--size-7 {
107
- height: calc(var(--amsterdam-icon-size-7-icon-size-wide) * var(--amsterdam-icon-size-7-container-multiplier));
108
- }
109
- }
110
-
111
- .amsterdam-icon--size-7 svg {
112
- height: var(--amsterdam-icon-size-7-icon-size-narrow);
113
- width: var(--amsterdam-icon-size-7-icon-size-narrow);
114
- }
115
- @media screen and (width > 53.375rem) {
116
- .amsterdam-icon--size-7 svg {
117
- height: var(--amsterdam-icon-size-7-icon-size-wide);
118
- width: var(--amsterdam-icon-size-7-icon-size-wide);
119
- }
120
- }
121
-
122
- /*# sourceMappingURL=icon.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/media/icon/icon.scss","../../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADEA;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;;AAGJ;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;;AAIJ;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;;AAIJ;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;;AAIJ;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI;IACA","file":"icon.css"}