@amsterdam/design-system-css 0.13.1 → 0.14.1

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 (148) hide show
  1. package/CHANGELOG.md +39 -2
  2. package/README.md +1 -1
  3. package/dist/alert/alert.css +1 -1
  4. package/dist/alert/alert.css.map +1 -1
  5. package/dist/aspect-ratio/aspect-ratio.css +1 -1
  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/breakout/breakout.css.map +1 -1
  12. package/dist/date-input/date-input.css +1 -1
  13. package/dist/date-input/date-input.css.map +1 -1
  14. package/dist/description-list/description-list.css +1 -1
  15. package/dist/description-list/description-list.css.map +1 -1
  16. package/dist/dialog/dialog.css +1 -1
  17. package/dist/dialog/dialog.css.map +1 -1
  18. package/dist/error-message/error-message.css +1 -1
  19. package/dist/error-message/error-message.css.map +1 -1
  20. package/dist/figure/figure.css +1 -0
  21. package/dist/figure/figure.css.map +1 -0
  22. package/dist/file-input/file-input.css +1 -1
  23. package/dist/file-input/file-input.css.map +1 -1
  24. package/dist/file-list/file-list.css +1 -0
  25. package/dist/file-list/file-list.css.map +1 -0
  26. package/dist/footer/footer.css +1 -0
  27. package/dist/footer/footer.css.map +1 -0
  28. package/dist/gap/gap.css.map +1 -1
  29. package/dist/grid/grid.css.map +1 -1
  30. package/dist/header/header.css +1 -1
  31. package/dist/header/header.css.map +1 -1
  32. package/dist/heading/heading.css +1 -1
  33. package/dist/heading/heading.css.map +1 -1
  34. package/dist/icon/icon.css +1 -1
  35. package/dist/icon/icon.css.map +1 -1
  36. package/dist/image/image.css +1 -1
  37. package/dist/image/image.css.map +1 -1
  38. package/dist/index.css +1 -1
  39. package/dist/index.css.map +1 -1
  40. package/dist/link-list/link-list.css +1 -1
  41. package/dist/link-list/link-list.css.map +1 -1
  42. package/dist/logo/logo.css +1 -1
  43. package/dist/logo/logo.css.map +1 -1
  44. package/dist/margin/margin.css.map +1 -1
  45. package/dist/ordered-list/ordered-list.css +1 -1
  46. package/dist/ordered-list/ordered-list.css.map +1 -1
  47. package/dist/overlap/overlap.css +1 -1
  48. package/dist/overlap/overlap.css.map +1 -1
  49. package/dist/page-heading/page-heading.css +1 -1
  50. package/dist/page-heading/page-heading.css.map +1 -1
  51. package/dist/page-menu/page-menu.css +1 -1
  52. package/dist/page-menu/page-menu.css.map +1 -1
  53. package/dist/pagination/pagination.css +1 -1
  54. package/dist/pagination/pagination.css.map +1 -1
  55. package/dist/paragraph/paragraph.css +1 -1
  56. package/dist/paragraph/paragraph.css.map +1 -1
  57. package/dist/password-input/password-input.css +1 -1
  58. package/dist/password-input/password-input.css.map +1 -1
  59. package/dist/radio/radio.css +1 -1
  60. package/dist/radio/radio.css.map +1 -1
  61. package/dist/screen/screen.css +1 -1
  62. package/dist/screen/screen.css.map +1 -1
  63. package/dist/search-field/search-field.css +1 -1
  64. package/dist/search-field/search-field.css.map +1 -1
  65. package/dist/spotlight/spotlight.css +1 -1
  66. package/dist/spotlight/spotlight.css.map +1 -1
  67. package/dist/switch/switch.css +1 -1
  68. package/dist/switch/switch.css.map +1 -1
  69. package/dist/table-of-contents/table-of-contents.css +1 -1
  70. package/dist/table-of-contents/table-of-contents.css.map +1 -1
  71. package/dist/tabs/tabs.css +1 -1
  72. package/dist/tabs/tabs.css.map +1 -1
  73. package/dist/text-area/text-area.css +1 -1
  74. package/dist/text-area/text-area.css.map +1 -1
  75. package/dist/text-input/text-input.css +1 -1
  76. package/dist/text-input/text-input.css.map +1 -1
  77. package/dist/time-input/time-input.css +1 -1
  78. package/dist/time-input/time-input.css.map +1 -1
  79. package/dist/top-task-link/top-task-link.css +1 -1
  80. package/dist/top-task-link/top-task-link.css.map +1 -1
  81. package/dist/unordered-list/unordered-list.css +1 -1
  82. package/dist/unordered-list/unordered-list.css.map +1 -1
  83. package/documentation/coding-conventions.md +5 -1
  84. package/package.json +4 -4
  85. package/src/components/accordion/accordion.scss +1 -1
  86. package/src/components/alert/alert.scss +1 -0
  87. package/src/components/aspect-ratio/README.md +15 -11
  88. package/src/components/aspect-ratio/aspect-ratio.scss +5 -26
  89. package/src/components/blockquote/blockquote.scss +5 -5
  90. package/src/components/breadcrumb/breadcrumb.scss +4 -4
  91. package/src/components/breakout/breakout.scss +3 -3
  92. package/src/components/button/button.scss +1 -1
  93. package/src/components/character-count/character-count.scss +1 -1
  94. package/src/components/checkbox/checkbox.scss +3 -3
  95. package/src/components/column/column.scss +1 -1
  96. package/src/components/date-input/date-input.scss +4 -4
  97. package/src/components/description-list/description-list.scss +34 -12
  98. package/src/components/dialog/dialog.scss +1 -1
  99. package/src/components/error-message/error-message.scss +6 -4
  100. package/src/components/field-set/field-set.scss +4 -4
  101. package/src/components/figure/README.md +5 -0
  102. package/src/components/figure/figure.scss +33 -0
  103. package/src/components/file-input/file-input.scss +4 -3
  104. package/src/components/file-list/README.md +5 -0
  105. package/src/components/file-list/file-list.scss +55 -0
  106. package/src/components/footer/README.md +6 -6
  107. package/src/components/footer/footer.scss +8 -0
  108. package/src/components/gap/gap.scss +3 -2
  109. package/src/components/grid/_mixins.scss +2 -0
  110. package/src/components/grid/grid.scss +2 -2
  111. package/src/components/header/README.md +7 -5
  112. package/src/components/header/header.scss +183 -53
  113. package/src/components/heading/heading.scss +5 -5
  114. package/src/components/icon/icon.scss +4 -0
  115. package/src/components/icon-button/icon-button.scss +2 -2
  116. package/src/components/image/README.md +27 -5
  117. package/src/components/image/image.scss +4 -4
  118. package/src/components/image-slider/image-slider.scss +1 -1
  119. package/src/components/index.scss +66 -63
  120. package/src/components/label/label.scss +2 -2
  121. package/src/components/link/link.scss +1 -1
  122. package/src/components/link-list/link-list.scss +5 -5
  123. package/src/components/logo/README.md +1 -1
  124. package/src/components/logo/logo.scss +1 -0
  125. package/src/components/margin/margin.scss +3 -2
  126. package/src/components/ordered-list/ordered-list.scss +4 -4
  127. package/src/components/overlap/overlap.scss +2 -1
  128. package/src/components/page-heading/page-heading.scss +5 -5
  129. package/src/components/page-menu/page-menu.scss +6 -9
  130. package/src/components/pagination/pagination.scss +4 -4
  131. package/src/components/paragraph/paragraph.scss +4 -4
  132. package/src/components/password-input/password-input.scss +4 -4
  133. package/src/components/radio/radio.scss +28 -6
  134. package/src/components/row/row.scss +1 -1
  135. package/src/components/screen/screen.scss +1 -6
  136. package/src/components/search-field/search-field.scss +2 -28
  137. package/src/components/select/select.scss +2 -2
  138. package/src/components/skip-link/README.md +11 -13
  139. package/src/components/spotlight/README.md +2 -0
  140. package/src/components/spotlight/spotlight.scss +4 -4
  141. package/src/components/switch/switch.scss +3 -8
  142. package/src/components/table-of-contents/table-of-contents.scss +4 -4
  143. package/src/components/tabs/tabs.scss +24 -5
  144. package/src/components/text-area/text-area.scss +4 -4
  145. package/src/components/text-input/text-input.scss +4 -4
  146. package/src/components/time-input/time-input.scss +4 -4
  147. package/src/components/top-task-link/top-task-link.scss +4 -9
  148. package/src/components/unordered-list/unordered-list.scss +4 -4
package/src/components/screen/screen.scss CHANGED
@@ -3,16 +3,11 @@
3
3
  * Copyright Gemeente Amsterdam
4
4
  */
5
5
 
6
- @mixin reset {
7
- box-sizing: border-box;
8
- }
9
-
10
6
  .ams-screen {
11
7
  background-color: var(--ams-screen-background-color);
8
+ box-sizing: border-box;
12
9
  margin-inline: auto;
13
10
  position: relative;
14
-
15
- @include reset;
16
11
  }
17
12
 
18
13
  .ams-screen--full-height {
package/src/components/search-field/search-field.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  * Copyright Gemeente Amsterdam
4
4
  */
5
5
 
6
- @import "../../common/text-rendering";
6
+ @use "../../common/text-rendering" as *;
7
7
 
8
8
  .ams-search-field {
9
9
  display: flex;
@@ -15,13 +15,13 @@
15
15
  appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
16
16
  border: 0;
17
17
  border-radius: 0; // Reset rounded borders on iOS devices
18
- box-sizing: border-box;
19
18
  margin-block: 0;
20
19
  }
21
20
 
22
21
  .ams-search-field__input {
23
22
  background-color: var(--ams-search-field-input-background-color);
24
23
  box-shadow: var(--ams-search-field-input-box-shadow);
24
+ box-sizing: border-box;
25
25
  color: var(--ams-search-field-input-color);
26
26
  font-family: var(--ams-search-field-input-font-family);
27
27
  font-size: var(--ams-search-field-input-font-size);
@@ -68,29 +68,3 @@
68
68
  inline-size: var(--ams-search-field-input-cancel-button-inline-size);
69
69
  margin-inline-start: 0.5rem;
70
70
  }
71
-
72
- @mixin reset-button {
73
- border: 0;
74
- margin-block: 0; // [1]
75
- margin-inline: 0; // [1]
76
-
77
- // [1] Remove the margin in older Safari.
78
- }
79
-
80
- .ams-search-field__button {
81
- background-color: var(--ams-search-field-button-background-color);
82
- color: var(--ams-search-field-button-color);
83
- cursor: pointer;
84
- outline-offset: var(--ams-search-field-button-outline-offset);
85
-
86
- // TODO Check if these paddings are necessary
87
- padding-block: var(--ams-search-field-button-padding-block);
88
- padding-inline: var(--ams-search-field-button-padding-inline);
89
- touch-action: manipulation;
90
-
91
- @include reset-button;
92
-
93
- &:hover {
94
- background-color: var(--ams-search-field-button-hover-background-color);
95
- }
96
- }
package/src/components/select/select.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  * Copyright Gemeente Amsterdam
4
4
  */
5
5
 
6
- @mixin reset {
6
+ @mixin reset-select {
7
7
  appearance: none; // Reset native appearance to hide default chevron
8
8
  border: 0;
9
9
  border-radius: 0; // Reset rounded borders for Safari on MacOS
@@ -23,7 +23,7 @@
23
23
  padding-inline: var(--ams-select-padding-inline);
24
24
  touch-action: manipulation;
25
25
 
26
- @include reset;
26
+ @include reset-select;
27
27
 
28
28
  &:not([multiple]) {
29
29
  background-image: var(--ams-select-background-image);
package/src/components/skip-link/README.md CHANGED
@@ -2,22 +2,20 @@
2
2
 
3
3
  # Skip Link
4
4
 
5
- Use a Skip Link to navigate to the main content quickly with the keyboard.
6
- A Skip Link allows skipping recurring navigation blocks, such as the main menu or breadcrumb trail.
5
+ Allows skipping past recurring navigation blocks at the top of a page.
7
6
 
8
- The Skip Link is placed above the header.
9
- The link is hidden until activated with the tab key.
10
- When the link is shown, it pushes the entire page down.
7
+ ## Design
8
+
9
+ The Skip Link sits above the header and is as wide as the Screen container.
10
+ It remains hidden until activated with the ‘Tab’ key.
11
+ After appearing, it pushes the entire page down.
11
12
 
12
13
  ## Guidelines
13
14
 
14
- - Place the Skip Link as the first element in `<body>` unless you have a cookie banner.
15
- In that case, place the Skip Link immediately after the cookie banner.
16
- - Use the Skip Link to navigate to the main content.
17
- On an article page, for example, it could be the title of the article; on a search page, it could be the search field.
15
+ - Place the Skip Link as the first element in the Screen.
16
+ - Target the Skip Link to the main content.
17
+ On an article page, for example, it could be the title of the article.
18
+ On a search page, it could be the search field.
18
19
  - Set `id="example-id"` on the container of that element and then use `href="#example-id"` on the Skip Link.
19
- - You can use more than one Skip Link for complex pages with multiple sections.
20
- In most cases, this is not necessary.
20
+ - Complex pages with multiple sections may benefit from more than one Skip Link.
21
21
  - Skip Links are unnecessary on a simple page with only text and minimal navigation.
22
- The purpose of a Skip Link is to bypass recurring navigation blocks.
23
- If those blocks are not present, a Skip Link is not needed.
package/src/components/spotlight/README.md CHANGED
@@ -7,6 +7,8 @@ Emphasizes a section on a page through a distinctive background colour.
7
7
  ## Guidelines
8
8
 
9
9
  - Display the Spotlight at the entire width of the [Screen](/docs/components-layout-screen--docs); do not position it on the [Grid](/docs/components-layout-grid--docs).
10
+ - Add a Grid with medium vertical padding inside the Spotlight to add whitespace around the content, even for a single element.
11
+ - The default background is purple, but the colours can be chosen freely – they do not convey a meaning or theme in itself.
10
12
  - Refer to [this overview on Stijlweb](https://amsterdam.nl/stijlweb/basiselementen/kleuren/#PagCls_15671872) to determine whether you can use black or white text on the background colour of your choice.
11
13
 
12
14
  ## Relevant WCAG requirements
package/src/components/spotlight/spotlight.scss CHANGED
@@ -3,6 +3,10 @@
3
3
  * Copyright Gemeente Amsterdam
4
4
  */
5
5
 
6
+ .ams-spotlight {
7
+ background-color: var(--ams-spotlight-background-color);
8
+ }
9
+
6
10
  .ams-spotlight--blue {
7
11
  background-color: var(--ams-spotlight-blue-background-color);
8
12
  }
@@ -27,10 +31,6 @@
27
31
  background-color: var(--ams-spotlight-orange-background-color);
28
32
  }
29
33
 
30
- .ams-spotlight--purple {
31
- background-color: var(--ams-spotlight-purple-background-color);
32
- }
33
-
34
34
  .ams-spotlight--yellow {
35
35
  background-color: var(--ams-spotlight-yellow-background-color);
36
36
  }
package/src/components/switch/switch.scss CHANGED
@@ -3,12 +3,8 @@
3
3
  * Copyright Gemeente Amsterdam
4
4
  */
5
5
 
6
- @import "../../common/input-label-focus";
7
- @import "../../common/hide-input";
8
-
9
- @mixin reset {
10
- box-sizing: border-box;
11
- }
6
+ @use "../../common/input-label-focus" as *;
7
+ @use "../../common/hide-input" as *;
12
8
 
13
9
  .ams-switch__input {
14
10
  @include hide-input;
@@ -23,13 +19,12 @@
23
19
  // Using a transparent border to make sure the component is visible in forced colors mode.
24
20
  border: var(--ams-switch-track-border-width) solid transparent;
25
21
  border-radius: calc(var(--ams-switch-thumb-inline-size) * 2);
22
+ box-sizing: border-box;
26
23
  cursor: pointer;
27
24
  display: inline-block;
28
25
  inline-size: var(--ams-switch-inline-size);
29
26
  outline-offset: var(--ams-switch-outline-offset);
30
27
  transition: background-color 0.2s ease-in-out;
31
-
32
- @include reset;
33
28
  }
34
29
 
35
30
  .ams-switch__label::before {
package/src/components/table-of-contents/table-of-contents.scss CHANGED
@@ -3,10 +3,9 @@
3
3
  * Copyright Gemeente Amsterdam
4
4
  */
5
5
 
6
- @import "../../common/text-rendering";
6
+ @use "../../common/text-rendering" as *;
7
7
 
8
- @mixin reset {
9
- box-sizing: border-box;
8
+ @mixin reset-ul {
10
9
  margin-block: 0;
11
10
  padding-inline: 0;
12
11
  }
@@ -22,13 +21,14 @@
22
21
  }
23
22
 
24
23
  .ams-table-of-contents__list {
24
+ box-sizing: border-box;
25
25
  display: flex;
26
26
  flex-direction: column;
27
27
  gap: var(--ams-table-of-contents-list-gap);
28
28
  list-style: none;
29
29
 
30
30
  @include text-rendering;
31
- @include reset;
31
+ @include reset-ul;
32
32
 
33
33
  .ams-table-of-contents__list {
34
34
  padding-block-start: var(--ams-table-of-contents-list-list-padding-block-start);
package/src/components/tabs/tabs.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  * Copyright Gemeente Amsterdam
4
4
  */
5
5
 
6
- @import "../../common/breakpoint";
6
+ @use "../../common/breakpoint" as *;
7
7
 
8
8
  @mixin reset-button {
9
9
  background-color: transparent;
@@ -20,8 +20,7 @@
20
20
  }
21
21
 
22
22
  .ams-tabs__list {
23
- background-color: var(--ams-tabs-list-background-color);
24
- border-block-end: var(--ams-tabs-list-border-block-end);
23
+ box-shadow: var(--ams-tabs-list-box-shadow);
25
24
  display: flex;
26
25
  overflow-x: auto;
27
26
  }
@@ -29,6 +28,7 @@
29
28
  .ams-tabs__button {
30
29
  color: var(--ams-tabs-button-color);
31
30
  cursor: var(--ams-tabs-button-cursor);
31
+ display: grid;
32
32
  font-family: var(--ams-tabs-button-font-family);
33
33
  font-size: var(--ams-tabs-button-font-size);
34
34
  font-weight: var(--ams-tabs-button-font-weight);
@@ -41,7 +41,7 @@
41
41
 
42
42
  &:disabled {
43
43
  color: var(--ams-tabs-button-disabled-color);
44
- cursor: var(--ams-tab-button-disabled-cursor);
44
+ cursor: var(--ams-tabs-button-disabled-cursor);
45
45
 
46
46
  @media (forced-colors: active) {
47
47
  color: GrayText;
@@ -54,11 +54,30 @@
54
54
  }
55
55
 
56
56
  &[aria-selected="true"] {
57
- background-color: var(--ams-tabs-button-selected-background-color);
57
+ box-shadow: var(--ams-tabs-button-selected-box-shadow);
58
58
  color: var(--ams-tabs-button-selected-color);
59
+ font-weight: var(--ams-tabs-button-selected-font-weight);
59
60
 
60
61
  @media (forced-colors: active) {
61
62
  background-color: SelectedItem;
62
63
  }
63
64
  }
64
65
  }
66
+
67
+ .ams-tabs__button-label,
68
+ .ams-tabs__button-label-hidden {
69
+ grid-area: 1 / 1;
70
+ }
71
+
72
+ // This hidden label is used to prevent a layout shift when the tab is selected
73
+ // and the button text becomes bold.
74
+ .ams-tabs__button-label-hidden {
75
+ font-weight: var(--ams-tabs-button-selected-font-weight);
76
+ pointer-events: none;
77
+ user-select: none;
78
+ visibility: hidden;
79
+ }
80
+
81
+ .ams-tabs__panel {
82
+ overflow-x: auto;
83
+ }
package/src/components/text-area/text-area.scss CHANGED
@@ -3,20 +3,20 @@
3
3
  * Copyright Gemeente Amsterdam
4
4
  */
5
5
 
6
- @import "../../common/text-rendering";
6
+ @use "../../common/text-rendering" as *;
7
7
 
8
- @mixin reset {
8
+ @mixin reset-textarea {
9
9
  -webkit-appearance: none; // Reset appearance for Safari < 15.4
10
10
  appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
11
11
  border: 0;
12
12
  border-radius: 0; // Reset rounded borders on iOS devices
13
- box-sizing: border-box;
14
13
  margin-block: 0;
15
14
  }
16
15
 
17
16
  .ams-text-area {
18
17
  background-color: var(--ams-text-area-background-color);
19
18
  box-shadow: var(--ams-text-area-box-shadow);
19
+ box-sizing: border-box;
20
20
  color: var(--ams-text-area-color);
21
21
  font-family: var(--ams-text-area-font-family);
22
22
  font-size: var(--ams-text-area-font-size);
@@ -31,7 +31,7 @@
31
31
  touch-action: manipulation;
32
32
 
33
33
  @include text-rendering;
34
- @include reset;
34
+ @include reset-textarea;
35
35
 
36
36
  &:hover {
37
37
  box-shadow: var(--ams-text-area-hover-box-shadow);
package/src/components/text-input/text-input.scss CHANGED
@@ -3,20 +3,20 @@
3
3
  * Copyright Gemeente Amsterdam
4
4
  */
5
5
 
6
- @import "../../common/text-rendering";
6
+ @use "../../common/text-rendering" as *;
7
7
 
8
- @mixin reset {
8
+ @mixin reset-input {
9
9
  -webkit-appearance: none; // Reset appearance for Safari < 15.4
10
10
  appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
11
11
  border: 0;
12
12
  border-radius: 0; // Reset rounded borders on iOS devices
13
- box-sizing: border-box;
14
13
  margin-block: 0;
15
14
  }
16
15
 
17
16
  .ams-text-input {
18
17
  background-color: var(--ams-text-input-background-color);
19
18
  box-shadow: var(--ams-text-input-box-shadow);
19
+ box-sizing: border-box;
20
20
  color: var(--ams-text-input-color);
21
21
  font-family: var(--ams-text-input-font-family);
22
22
  font-size: var(--ams-text-input-font-size);
@@ -29,7 +29,7 @@
29
29
  touch-action: manipulation;
30
30
 
31
31
  @include text-rendering;
32
- @include reset;
32
+ @include reset-input;
33
33
 
34
34
  &:hover {
35
35
  box-shadow: var(--ams-text-input-hover-box-shadow);
package/src/components/time-input/time-input.scss CHANGED
@@ -3,14 +3,13 @@
3
3
  * Copyright Gemeente Amsterdam
4
4
  */
5
5
 
6
- @import "../../common/text-rendering";
6
+ @use "../../common/text-rendering" as *;
7
7
 
8
- @mixin reset {
8
+ @mixin reset-input {
9
9
  -webkit-appearance: none; // Reset appearance for Safari < 15.4
10
10
  appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
11
11
  border: 0;
12
12
  border-radius: 0; // Reset rounded borders on iOS devices
13
- box-sizing: border-box;
14
13
  inline-size: auto; // Reset inline size of 10em set by Android devices
15
14
  margin-block: 0;
16
15
  }
@@ -18,6 +17,7 @@
18
17
  .ams-time-input {
19
18
  background-color: var(--ams-time-input-background-color);
20
19
  box-shadow: var(--ams-time-input-box-shadow);
20
+ box-sizing: border-box;
21
21
  color: var(--ams-time-input-color);
22
22
  font-family: var(--ams-time-input-font-family);
23
23
  font-size: var(--ams-time-input-font-size);
@@ -37,7 +37,7 @@
37
37
  touch-action: manipulation;
38
38
 
39
39
  @include text-rendering;
40
- @include reset;
40
+ @include reset-input;
41
41
 
42
42
  &:hover {
43
43
  box-shadow: var(--ams-time-input-hover-box-shadow);
package/src/components/top-task-link/top-task-link.scss CHANGED
@@ -3,8 +3,8 @@
3
3
  * Copyright Gemeente Amsterdam
4
4
  */
5
5
 
6
- @import "../../common/hyphenation";
7
- @import "../../common/text-rendering";
6
+ @use "../../common/hyphenation" as *;
7
+ @use "../../common/text-rendering" as *;
8
8
 
9
9
  .ams-top-task-link {
10
10
  break-inside: avoid;
@@ -15,11 +15,8 @@
15
15
  text-decoration: none;
16
16
  }
17
17
 
18
- @mixin reset {
19
- box-sizing: border-box;
20
- }
21
-
22
18
  .ams-top-task-link__label {
19
+ box-sizing: border-box;
23
20
  color: var(--ams-top-task-link-label-color);
24
21
  font-family: var(--ams-top-task-link-label-font-family);
25
22
  font-size: var(--ams-top-task-link-label-font-size);
@@ -31,7 +28,6 @@
31
28
 
32
29
  @include hyphenation;
33
30
  @include text-rendering;
34
- @include reset;
35
31
  }
36
32
 
37
33
  .ams-top-task-link:hover .ams-top-task-link__label {
@@ -40,11 +36,10 @@
40
36
  }
41
37
 
42
38
  .ams-top-task-link__description {
39
+ box-sizing: border-box;
43
40
  color: var(--ams-top-task-link-description-color);
44
41
  font-family: var(--ams-top-task-link-description-font-family);
45
42
  font-size: var(--ams-top-task-link-description-font-size);
46
43
  font-weight: var(--ams-top-task-link-description-font-weight);
47
44
  line-height: var(--ams-top-task-link-description-line-height);
48
-
49
- @include reset;
50
45
  }
package/src/components/unordered-list/unordered-list.scss CHANGED
@@ -3,21 +3,21 @@
3
3
  * Copyright Gemeente Amsterdam
4
4
  */
5
5
 
6
- @import "../../common/text-rendering";
6
+ @use "../../common/text-rendering" as *;
7
7
 
8
- @mixin reset {
9
- box-sizing: border-box;
8
+ @mixin reset-ul {
10
9
  list-style: none;
11
10
  margin-block: 0;
12
11
  padding-inline-start: 0;
13
12
  }
14
13
 
15
14
  .ams-unordered-list {
15
+ box-sizing: border-box;
16
16
  display: grid;
17
17
  gap: var(--ams-unordered-list-gap);
18
18
 
19
19
  @include text-rendering;
20
- @include reset;
20
+ @include reset-ul;
21
21
  }
22
22
 
23
23
  .ams-unordered-list:not(.ams-unordered-list--no-markers) {