@amsterdam/design-system-css 0.1.2 → 0.1.3
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/button/button.css +702 -0
- package/dist/button/button.css.map +1 -0
- package/dist/details/details.css +62 -0
- package/dist/details/details.css.map +1 -0
- package/dist/form-label/form-label.css +26 -0
- package/dist/form-label/form-label.css.map +1 -0
- package/dist/heading/heading.css +45 -95
- package/dist/heading/heading.css.map +1 -1
- package/dist/icon/icon.css +106 -21
- package/dist/icon/icon.css.map +1 -1
- package/dist/link/link.css +83 -55
- package/dist/link/link.css.map +1 -1
- package/dist/list/list.css +5 -0
- package/dist/list/list.css.map +1 -1
- package/dist/paragraph/paragraph.css +40 -44
- package/dist/paragraph/paragraph.css.map +1 -1
- package/dist/radio-button/radio-button.css +341 -0
- package/dist/radio-button/radio-button.css.map +1 -0
- package/dist/textbox/textbox.css +178 -0
- package/dist/textbox/textbox.css.map +1 -0
- package/package.json +7 -6
- package/src/button/README.md +24 -0
- package/src/button/button-css.md +12 -0
- package/src/button/button.scss +14 -0
- package/src/form-label/README.md +3 -0
- package/src/form-label/form-label.scss +17 -0
- package/src/heading/README.md +23 -0
- package/src/heading/heading-css.md +3 -0
- package/src/heading/heading.scss +40 -25
- package/src/icon/README.md +21 -0
- package/src/icon/icon.scss +87 -18
- package/src/link/README.md +1 -0
- package/src/link/link.scss +88 -32
- package/src/list/list.scss +11 -0
- package/src/paragraph/README.md +24 -0
- package/src/paragraph/paragraph-css.md +3 -0
- package/src/paragraph/paragraph.scss +35 -9
- package/utils/breakpoint.scss +7 -2
- package/utils/calculate-fluid-style.scss +6 -1
- package/dist/document/document.css +0 -22
- package/dist/document/document.css.map +0 -1
- package/dist/grid/grid.css +0 -340
- package/dist/grid/grid.css.map +0 -1
- package/dist/spacing/spacing.css +0 -249
- package/dist/spacing/spacing.css.map +0 -1
- package/src/document/document.scss +0 -16
- package/src/grid/grid.scss +0 -83
- package/src/spacing/spacing.scss +0 -60
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../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","../../src/button/button.scss"],"names":[],"mappings":"AAAA;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;ACFA;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE","file":"button.css"}
|
|
@@ -0,0 +1,62 @@
|
|
|
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-details__summary {
|
|
14
|
+
color: var(--amsterdam-details-summary-color);
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
display: flex;
|
|
17
|
+
font-family: var(--amsterdam-details-summary-font-family);
|
|
18
|
+
font-size: var(--amsterdam-details-summary-font-size-narrow);
|
|
19
|
+
font-weight: var(--amsterdam-details-summary-font-weight);
|
|
20
|
+
justify-content: space-between;
|
|
21
|
+
line-height: var(--amsterdam-details-summary-line-height);
|
|
22
|
+
padding-block: 0.75rem;
|
|
23
|
+
padding-inline: 1rem;
|
|
24
|
+
box-sizing: border-box;
|
|
25
|
+
}
|
|
26
|
+
@media screen and (width > 53.375rem) {
|
|
27
|
+
.amsterdam-details__summary {
|
|
28
|
+
font-size: var(--amsterdam-details-summary-font-size-wide);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
.amsterdam-details__summary:focus {
|
|
32
|
+
outline-offset: var(--amsterdam-details-summary-focus-outline-offset);
|
|
33
|
+
}
|
|
34
|
+
.amsterdam-details__summary:focus, .amsterdam-details__summary:hover {
|
|
35
|
+
box-shadow: var(--amsterdam-details-summary-hover-box-shadow);
|
|
36
|
+
}
|
|
37
|
+
.amsterdam-details__summary span svg {
|
|
38
|
+
transform: rotate(0deg);
|
|
39
|
+
transition: transform 0.3s ease;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.amsterdam-details__summary h1,
|
|
43
|
+
.amsterdam-details__summary h2,
|
|
44
|
+
.amsterdam-details__summary h3,
|
|
45
|
+
.amsterdam-details__summary h4 {
|
|
46
|
+
font-size: inherit;
|
|
47
|
+
font-weight: inherit;
|
|
48
|
+
line-height: inherit;
|
|
49
|
+
margin-block: 0;
|
|
50
|
+
margin-inline: 0;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.amsterdam-details[open] .amsterdam-details__summary span svg {
|
|
54
|
+
transform: rotate(180deg);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.amsterdam-details__content {
|
|
58
|
+
padding-block: 1rem;
|
|
59
|
+
padding-inline: 1rem;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/*# sourceMappingURL=details.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/details/details.scss","../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADKA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAbA;;AAeA;EAZF;IAaI;;;AAGF;EACE;;AAGF;EAEE;;AAGF;EACE;EAGA;;;AAMJ;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA;EACA;;;AAIA;EACE;;;AAIJ;EACE;EACA","file":"details.css"}
|
|
@@ -0,0 +1,26 @@
|
|
|
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-font-size-narrow);
|
|
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-font-size-wide);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/*# sourceMappingURL=form-label.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/form-label/form-label.scss","../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADCA;EACE;EACA;EACA;EACA;EACA;;AAEA;EAPF;IAQI","file":"form-label.css"}
|
package/dist/heading/heading.css
CHANGED
|
@@ -1,114 +1,64 @@
|
|
|
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
|
+
*/
|
|
1
13
|
.amsterdam-heading {
|
|
14
|
+
color: var(--amsterdam-heading-color);
|
|
15
|
+
font-family: var(--amsterdam-heading-font-family);
|
|
16
|
+
font-weight: var(--amsterdam-heading-font-weight);
|
|
17
|
+
box-sizing: border-box;
|
|
2
18
|
break-after: avoid;
|
|
3
19
|
break-inside: avoid;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
margin-block-end: 0;
|
|
7
|
-
margin-block-start: 0;
|
|
8
|
-
margin-inline-end: 0;
|
|
9
|
-
margin-inline-start: 0;
|
|
20
|
+
margin-block: 0;
|
|
21
|
+
margin-inline: 0;
|
|
10
22
|
}
|
|
11
23
|
|
|
12
24
|
.amsterdam-heading-1 {
|
|
13
|
-
font-size:
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
line-height: clamp(
|
|
21
|
-
2.1875rem,
|
|
22
|
-
calc(
|
|
23
|
-
2.1875rem + 0.028125 * (100vw - 20rem)
|
|
24
|
-
),
|
|
25
|
-
5rem
|
|
26
|
-
);
|
|
25
|
+
font-size: var(--amsterdam-heading-1-font-size-narrow);
|
|
26
|
+
line-height: var(--amsterdam-heading-1-line-height);
|
|
27
|
+
}
|
|
28
|
+
@media screen and (width > 53.375rem) {
|
|
29
|
+
.amsterdam-heading-1 {
|
|
30
|
+
font-size: var(--amsterdam-heading-1-font-size-wide);
|
|
31
|
+
}
|
|
27
32
|
}
|
|
28
33
|
|
|
29
34
|
.amsterdam-heading-2 {
|
|
30
|
-
font-size:
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
line-height: clamp(
|
|
38
|
-
2.125rem,
|
|
39
|
-
calc(
|
|
40
|
-
2.125rem + 0.0175 * (100vw - 20rem)
|
|
41
|
-
),
|
|
42
|
-
3.875rem
|
|
43
|
-
);
|
|
35
|
+
font-size: var(--amsterdam-heading-2-font-size-narrow);
|
|
36
|
+
line-height: var(--amsterdam-heading-2-line-height);
|
|
37
|
+
}
|
|
38
|
+
@media screen and (width > 53.375rem) {
|
|
39
|
+
.amsterdam-heading-2 {
|
|
40
|
+
font-size: var(--amsterdam-heading-2-font-size-wide);
|
|
41
|
+
}
|
|
44
42
|
}
|
|
45
43
|
|
|
46
44
|
.amsterdam-heading-3 {
|
|
47
|
-
font-size:
|
|
48
|
-
|
|
49
|
-
calc(
|
|
50
|
-
1.5rem + 0.01 * (100vw - 20rem)
|
|
51
|
-
),
|
|
52
|
-
2.5rem
|
|
53
|
-
);
|
|
54
|
-
line-height: clamp(
|
|
55
|
-
2rem,
|
|
56
|
-
calc(
|
|
57
|
-
2rem + 0.01 * (100vw - 20rem)
|
|
58
|
-
),
|
|
59
|
-
3rem
|
|
60
|
-
);
|
|
45
|
+
font-size: var(--amsterdam-heading-3-font-size-narrow);
|
|
46
|
+
line-height: var(--amsterdam-heading-3-line-height);
|
|
61
47
|
}
|
|
62
|
-
|
|
63
|
-
.amsterdam-heading-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
calc(
|
|
67
|
-
1.375rem + 0.00625 * (100vw - 20rem)
|
|
68
|
-
),
|
|
69
|
-
2rem
|
|
70
|
-
);
|
|
71
|
-
line-height: clamp(
|
|
72
|
-
1.9375rem,
|
|
73
|
-
calc(
|
|
74
|
-
1.9375rem + 0.004375 * (100vw - 20rem)
|
|
75
|
-
),
|
|
76
|
-
2.375rem
|
|
77
|
-
);
|
|
48
|
+
@media screen and (width > 53.375rem) {
|
|
49
|
+
.amsterdam-heading-3 {
|
|
50
|
+
font-size: var(--amsterdam-heading-3-font-size-wide);
|
|
51
|
+
}
|
|
78
52
|
}
|
|
79
53
|
|
|
80
|
-
.amsterdam-heading-
|
|
81
|
-
font-size:
|
|
82
|
-
|
|
83
|
-
calc(
|
|
84
|
-
1.125rem + 0.00375 * (100vw - 20rem)
|
|
85
|
-
),
|
|
86
|
-
1.5rem
|
|
87
|
-
);
|
|
88
|
-
line-height: clamp(
|
|
89
|
-
1.5625rem,
|
|
90
|
-
calc(
|
|
91
|
-
1.5625rem + 0.00375 * (100vw - 20rem)
|
|
92
|
-
),
|
|
93
|
-
1.9375rem
|
|
94
|
-
);
|
|
54
|
+
.amsterdam-heading-4 {
|
|
55
|
+
font-size: var(--amsterdam-heading-4-font-size-narrow);
|
|
56
|
+
line-height: var(--amsterdam-heading-4-line-height);
|
|
95
57
|
}
|
|
96
|
-
|
|
97
|
-
.amsterdam-heading-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
calc(
|
|
101
|
-
1rem + 0.00125 * (100vw - 20rem)
|
|
102
|
-
),
|
|
103
|
-
1.125rem
|
|
104
|
-
);
|
|
105
|
-
line-height: clamp(
|
|
106
|
-
1.375rem,
|
|
107
|
-
calc(
|
|
108
|
-
1.375rem + 0.000625 * (100vw - 20rem)
|
|
109
|
-
),
|
|
110
|
-
1.4375rem
|
|
111
|
-
);
|
|
58
|
+
@media screen and (width > 53.375rem) {
|
|
59
|
+
.amsterdam-heading-4 {
|
|
60
|
+
font-size: var(--amsterdam-heading-4-font-size-wide);
|
|
61
|
+
}
|
|
112
62
|
}
|
|
113
63
|
|
|
114
64
|
/*# sourceMappingURL=heading.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/heading/heading.scss"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/heading/heading.scss","../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADSA;EACE;EACA;EACA;EAVA;EACA;EACA;EACA;EACA;;;AAWF;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI","file":"heading.css"}
|
package/dist/icon/icon.css
CHANGED
|
@@ -1,37 +1,122 @@
|
|
|
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
|
+
*/
|
|
1
13
|
.amsterdam-icon {
|
|
2
14
|
align-items: center;
|
|
3
15
|
display: inline-flex;
|
|
4
|
-
/* TODO: this height should be provided by the text element its part of? */
|
|
5
|
-
height: clamp(
|
|
6
|
-
1.5rem,
|
|
7
|
-
calc(
|
|
8
|
-
1.5rem + 0.00125 * (100vw - 20rem)
|
|
9
|
-
),
|
|
10
|
-
1.625rem
|
|
11
|
-
);
|
|
12
|
-
/* TODO: 12px is not part of the design system, what should this be? */
|
|
13
|
-
margin-inline-end: 12px;
|
|
14
|
-
/* Offset icon by 3px, because Amsterdam Sans vertical alignment is off */
|
|
15
|
-
padding-block-end: 3px;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
.amsterdam-icon svg {
|
|
19
19
|
fill: currentColor;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
.amsterdam-icon-
|
|
23
|
-
height:
|
|
24
|
-
|
|
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
|
+
}
|
|
25
100
|
}
|
|
26
101
|
|
|
27
|
-
.amsterdam-icon-
|
|
28
|
-
height:
|
|
29
|
-
|
|
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
|
+
}
|
|
30
109
|
}
|
|
31
110
|
|
|
32
|
-
.amsterdam-icon-
|
|
33
|
-
height:
|
|
34
|
-
width:
|
|
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
|
+
}
|
|
35
120
|
}
|
|
36
121
|
|
|
37
122
|
/*# sourceMappingURL=icon.css.map */
|
package/dist/icon/icon.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/icon/icon.scss"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/icon/icon.scss","../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADCA;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"}
|
package/dist/link/link.css
CHANGED
|
@@ -1,69 +1,97 @@
|
|
|
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
|
+
*/
|
|
1
13
|
.amsterdam-link {
|
|
2
|
-
color: var(--amsterdam-color
|
|
3
|
-
|
|
4
|
-
font-size:
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
);
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
);
|
|
19
|
-
|
|
20
|
-
|
|
14
|
+
color: var(--amsterdam-link-color, blue);
|
|
15
|
+
font-family: var(--amsterdam-paragraph-font-family);
|
|
16
|
+
font-size: var(--amsterdam-link-font-size-narrow);
|
|
17
|
+
line-height: var(--amsterdam-link-line-height);
|
|
18
|
+
outline-offset: var(--amsterdam-link-outline-offset);
|
|
19
|
+
text-decoration: var(--amsterdam-link-text-decoration, underline);
|
|
20
|
+
text-decoration-color: var(--amsterdam-link-text-decoration-color, currentColor);
|
|
21
|
+
text-decoration-thickness: var(--amsterdam-link-text-decoration-thickness, 1px);
|
|
22
|
+
text-underline-offset: var(--amsterdam-link-text-underline-offset);
|
|
23
|
+
}
|
|
24
|
+
.amsterdam-link:hover, .amsterdam-link:active {
|
|
25
|
+
color: var(--amsterdam-link-hover-color);
|
|
26
|
+
text-decoration: var(--amsterdam-link-hover-text-decoration);
|
|
27
|
+
text-decoration-thickness: var(--amsterdam-link-hover-text-decoration-thickness, 1px);
|
|
28
|
+
}
|
|
29
|
+
.amsterdam-link:focus {
|
|
30
|
+
color: var(--amsterdam-link-focus-color);
|
|
31
|
+
text-decoration: var(--amsterdam-link-focus-text-decoration);
|
|
32
|
+
}
|
|
33
|
+
.amsterdam-link:visited {
|
|
34
|
+
color: var(--amsterdam-link-visited-color);
|
|
35
|
+
}
|
|
36
|
+
@media screen and (width > 53.375rem) {
|
|
37
|
+
.amsterdam-link {
|
|
38
|
+
font-size: var(--amsterdam-link-font-size-wide);
|
|
39
|
+
}
|
|
21
40
|
}
|
|
22
41
|
|
|
23
|
-
.amsterdam-link
|
|
24
|
-
|
|
25
|
-
outline-offset: var(--amsterdam-focus-outline-offset);
|
|
26
|
-
text-decoration: underline;
|
|
42
|
+
.amsterdam-link--standalone-bold {
|
|
43
|
+
font-weight: var(--amsterdam-link-standalone-bold-font-weight);
|
|
27
44
|
}
|
|
28
45
|
|
|
29
|
-
.amsterdam-link
|
|
30
|
-
|
|
31
|
-
font-
|
|
32
|
-
|
|
46
|
+
.amsterdam-link--inline {
|
|
47
|
+
font-family: var(--amsterdam-link-inline-font-family);
|
|
48
|
+
font-size: var(--amsterdam-link-inline-font-size);
|
|
49
|
+
text-underline-offset: var(--amsterdam-link-inline-text-underline-offset);
|
|
50
|
+
}
|
|
51
|
+
.amsterdam-link--inline:visited {
|
|
52
|
+
color: var(--amsterdam-link-inline-visited-color);
|
|
33
53
|
}
|
|
34
54
|
|
|
35
|
-
.amsterdam-link-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
55
|
+
.amsterdam-link--in-list {
|
|
56
|
+
align-items: flex-start;
|
|
57
|
+
display: inline-flex;
|
|
58
|
+
font-size: var(--amsterdam-link-in-list-font-size-narrow);
|
|
59
|
+
gap: var(--amsterdam-link-in-list-gap);
|
|
60
|
+
line-height: var(--amsterdam-link-in-list-line-height);
|
|
61
|
+
text-underline-offset: var(--amsterdam-link-in-list-text-underline-offset);
|
|
62
|
+
}
|
|
63
|
+
.amsterdam-link--in-list span.amsterdam-icon svg {
|
|
64
|
+
height: 16px;
|
|
65
|
+
width: 16px;
|
|
66
|
+
}
|
|
67
|
+
@media screen and (width > 53.375rem) {
|
|
68
|
+
.amsterdam-link--in-list {
|
|
69
|
+
font-size: var(--amsterdam-link-in-list-font-size-wide);
|
|
70
|
+
}
|
|
39
71
|
}
|
|
40
72
|
|
|
41
|
-
.amsterdam-link-
|
|
42
|
-
color: var(--amsterdam-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
73
|
+
.amsterdam-link--on-background-dark {
|
|
74
|
+
color: var(--amsterdam-link-on-background-dark-color);
|
|
75
|
+
text-decoration: var(--amsterdam-link-on-background-dark-text-decoration);
|
|
76
|
+
}
|
|
77
|
+
.amsterdam-link--on-background-dark:hover, .amsterdam-link--on-background-dark:active {
|
|
78
|
+
color: var(--amsterdam-link-on-background-dark-hover-color);
|
|
79
|
+
text-decoration: var(--amsterdam-link-on-background-dark-hover-text-decoration);
|
|
80
|
+
}
|
|
81
|
+
.amsterdam-link--on-background-dark:visited {
|
|
82
|
+
color: var(--amsterdam-link-on-background-dark-visited-color);
|
|
48
83
|
}
|
|
49
84
|
|
|
50
|
-
.amsterdam-link-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
1.5rem,
|
|
61
|
-
calc(
|
|
62
|
-
1.5rem + 0.00125 * (100vw - 20rem)
|
|
63
|
-
),
|
|
64
|
-
1.625rem
|
|
65
|
-
);
|
|
66
|
-
padding-block: 12px;
|
|
85
|
+
.amsterdam-link--on-background-light {
|
|
86
|
+
color: var(--amsterdam-link-on-background-light-color);
|
|
87
|
+
text-decoration: var(--amsterdam-link-on-background-light-text-decoration);
|
|
88
|
+
}
|
|
89
|
+
.amsterdam-link--on-background-light:hover, .amsterdam-link--on-background-light:active {
|
|
90
|
+
color: var(--amsterdam-link-on-background-light-hover-color);
|
|
91
|
+
text-decoration: var(--amsterdam-link-on-background-light-hover-text-decoration);
|
|
92
|
+
}
|
|
93
|
+
.amsterdam-link--on-background-light:visited {
|
|
94
|
+
color: var(--amsterdam-link-on-background-light-visited-color);
|
|
67
95
|
}
|
|
68
96
|
|
|
69
97
|
/*# sourceMappingURL=link.css.map */
|
package/dist/link/link.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/link/link.scss"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/link/link.scss","../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EA3BF;IA4BI;;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAGF;EAdF;IAeI;;;;AAIJ;EACE;EACA;;AAEA;EAEE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;;AAEA;EAEE;EACA;;AAGF;EACE","file":"link.css"}
|
package/dist/list/list.css
CHANGED
package/dist/list/list.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/list/list.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA","file":"list.css"}
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/list/list.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AASA;EACE;EACA;EACA;EANA","file":"list.css"}
|