@amsterdam/design-system-css 0.1.3 → 0.1.4

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.
@@ -0,0 +1,69 @@
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-font-size-narrow);
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-font-size-wide);
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 */
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../src/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,3 +1,7 @@
1
+ /**
2
+ * @license EUPL-1.2+
3
+ * Copyright (c) 2023 Gemeente Amsterdam
4
+ */
1
5
  /**
2
6
  * @license EUPL-1.2
3
7
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
@@ -1 +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"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/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","file":"button.css"}
@@ -1 +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"}
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;ADEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EAPF;IAQI","file":"form-label.css"}
@@ -1 +1 @@
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"}
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;ADUA;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"}
@@ -1 +1 @@
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"}
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;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"}
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/paragraph/paragraph.scss","../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADOA;EACE;EACA;EACA;EACA;EACA;EAVA;EACA;EACA;;AAUA;EAPF;IAQI;;;;AAMJ;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI","file":"paragraph.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/paragraph/paragraph.scss","../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADQA;EACE;EACA;EACA;EACA;EACA;EAVA;EACA;EACA;;AAUA;EAPF;IAQI;;;;AAMJ;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI","file":"paragraph.css"}
@@ -0,0 +1,47 @@
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-unordered-list {
14
+ color: var(--amsterdam-unordered-list-color);
15
+ display: flex;
16
+ flex-direction: column;
17
+ font-family: var(--amsterdam-unordered-list-font-family);
18
+ font-size: var(--amsterdam-unordered-list-font-size-narrow);
19
+ font-weight: var(--amsterdam-unordered-list-font-weight);
20
+ gap: var(--amsterdam-unordered-list-gap);
21
+ line-height: var(--amsterdam-unordered-list-line-height);
22
+ list-style: var(--amsterdam-unordered-list-list-style);
23
+ box-sizing: border-box;
24
+ margin-block: 0;
25
+ -webkit-text-size-adjust: 100%;
26
+ }
27
+ @media screen and (width > 53.375rem) {
28
+ .amsterdam-unordered-list {
29
+ font-size: var(--amsterdam-unordered-list-font-size-wide);
30
+ }
31
+ }
32
+
33
+ .amsterdam-unordered-list__item {
34
+ padding-inline: var(--amsterdam-unordered-list-item-padding-inline);
35
+ }
36
+
37
+ .amsterdam-unordered-list .amsterdam-unordered-list {
38
+ list-style-type: var(--amsterdam-unordered-list-unordered-list-list-style-type);
39
+ padding-block: var(--amsterdam-unordered-list-unordered-list-padding-block);
40
+ padding-inline: var(--amsterdam-unordered-list-unordered-list-padding-inline);
41
+ }
42
+
43
+ .amsterdam-unordered-list .amsterdam-unordered-list .amsterdam-unordered-list__item {
44
+ padding-inline: var(--amsterdam-unordered-list-unordered-list-item-padding-inline);
45
+ }
46
+
47
+ /*# sourceMappingURL=unordered-list.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../src/unordered-list/unordered-list.scss","../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADQA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAdA;EACA;EACA;;AAcA;EAXF;IAYI;;;;AAMJ;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE","file":"unordered-list.css"}
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.1.3",
2
+ "version": "0.1.4",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "CSS files for components for the City of Amsterdam based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
@@ -18,11 +18,11 @@
18
18
  "clean": "rimraf dist/"
19
19
  },
20
20
  "devDependencies": {
21
- "@amsterdam/design-system-tokens": "0.1.2",
21
+ "@amsterdam/design-system-tokens": "0.1.3",
22
22
  "sass": "1.63.6"
23
23
  },
24
24
  "dependencies": {
25
25
  "@utrecht/components": "1.0.0-alpha.492"
26
26
  },
27
- "gitHead": "c11658e889d52c6a48a058bbbe332d4fe170c3c4"
27
+ "gitHead": "43a949072edf58e9f8d198a2eca9b5457f01ccc8"
28
28
  }
@@ -0,0 +1,19 @@
1
+ # Accordion
2
+
3
+ Het accordion component is een klikbare (verticaal gestapelde) lijst van koppen om bijbehorende inhoud te verbergen of te vertonen. Met een accordion toon je inhoud op een progressieve manier aan gebruikers.
4
+
5
+ Een accordion bestaat uit meerdere accordionsecties. Gebruik minimaal 3 en maximaal 10 secties onder elkaar. Je kunt door een accordion navigeren met je toetsenbord:
6
+
7
+ | key | element |
8
+ | -------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
9
+ | Enter of Space | Open of sluit de accordionsectie die de focus heeft |
10
+ | Tab | Ga naar het volgende element dat focus kan hebben |
11
+ | Shift + Tab | Ga naar het volgende element dat focus kan hebben |
12
+ | Pijltje naar beneden | Als een accordionsectie focus heeft: ga naar de volgende sectie. Als de laatste sectie focus heeft, ga naar de eerste sectie |
13
+ | Pijltje omhoog | Als een accordionsectie focus heeft: ga naar de vorige sectie. Als de eerste sectie focus heeft, ga naar de laatste sectie |
14
+ | Home | Als een accordionsectie focus heeft: ga naar de eerste sectie |
15
+ | End | Als een accordionsectie focus heeft: ga naar de laatste sectie |
16
+
17
+ ## Referenties
18
+
19
+ - [W3C - Accordion Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)
@@ -0,0 +1,63 @@
1
+ /**
2
+ * @license EUPL-1.2+
3
+ * Copyright (c) 2023 Gemeente Amsterdam
4
+ */
5
+
6
+ @import "../../utils/breakpoint";
7
+
8
+ .amsterdam-accordion__header {
9
+ display: flex;
10
+ margin-block: 0;
11
+ margin-inline: 0;
12
+ }
13
+
14
+ .amsterdam-accordion__button {
15
+ background-color: transparent;
16
+ border: 0;
17
+ color: var(--amsterdam-accordion-button-color);
18
+ cursor: pointer;
19
+ display: flex;
20
+ font-family: var(--amsterdam-accordion-button-font-family);
21
+ font-size: var(--amsterdam-accordion-button-font-size-narrow);
22
+ font-weight: var(--amsterdam-accordion-button-font-weight);
23
+ justify-content: space-between;
24
+ line-height: var(--amsterdam-accordion-button-line-height);
25
+ padding-block: 0.75rem;
26
+ padding-inline: 1rem;
27
+ width: 100%;
28
+
29
+ @media screen and (width > $amsterdam-breakpoint) {
30
+ font-size: var(--amsterdam-accordion-button-font-size-wide);
31
+ }
32
+
33
+ &:focus {
34
+ outline-offset: var(--amsterdam-accordion-button-focus-outline-offset);
35
+ }
36
+
37
+ &:hover {
38
+ box-shadow: var(--amsterdam-accordion-button-hover-box-shadow);
39
+ }
40
+
41
+ svg {
42
+ transform: rotate(0deg);
43
+ transition: transform 0.3s ease;
44
+
45
+ @media (prefers-reduced-motion) {
46
+ transition: none;
47
+ }
48
+ }
49
+ }
50
+
51
+ .amsterdam-accordion__button[aria-expanded="true"] svg {
52
+ transform: rotate(180deg);
53
+ }
54
+
55
+ .amsterdam-accordion__panel {
56
+ display: none;
57
+ padding-block: 1rem;
58
+ padding-inline: 1rem;
59
+ }
60
+
61
+ .amsterdam-accordion__panel--expanded {
62
+ display: block;
63
+ }
@@ -1,3 +1,8 @@
1
+ /**
2
+ * @license EUPL-1.2+
3
+ * Copyright (c) 2023 Gemeente Amsterdam
4
+ */
5
+
1
6
  @import "../../node_modules/@utrecht/components/button/css";
2
7
  @import "../../utils/breakpoint";
3
8
 
@@ -2,6 +2,7 @@
2
2
  * @license EUPL-1.2+
3
3
  * Copyright (c) 2023 Gemeente Amsterdam
4
4
  */
5
+
5
6
  @import "../../utils/breakpoint";
6
7
 
7
8
  .amsterdam-form-label {
@@ -2,6 +2,7 @@
2
2
  * @license EUPL-1.2+
3
3
  * Copyright (c) 2023 Gemeente Amsterdam
4
4
  */
5
+
5
6
  @import "../../utils/breakpoint";
6
7
 
7
8
  @mixin reset {
@@ -16,6 +16,4 @@ Iconen staan standaard links van de tekst en zijn verticaal in het midden van de
16
16
 
17
17
  ## Grootte
18
18
 
19
- <!-- (TODO: linken naar typografie docs) -->
20
-
21
- De iconen gebruiken dezelfde tekstniveaus als alle typografische componenten om hun grootte te bepalen. Hierdoor zijn icoon en tekst makkelijk op elkaar af te stemmen.
19
+ De iconen gebruiken dezelfde tekstniveaus als alle typografische componenten om hun grootte te bepalen. Hierdoor zijn icoon en tekst makkelijk op elkaar af te stemmen. [Bekijk de documentatie over typografie voor meer informatie](/docs/docs-designrichtlijnen-typografie--docs#tekstniveaus).
@@ -2,6 +2,7 @@
2
2
  * @license EUPL-1.2+
3
3
  * Copyright (c) 2023 Gemeente Amsterdam
4
4
  */
5
+
5
6
  @import "../../utils/breakpoint";
6
7
 
7
8
  .amsterdam-icon {
@@ -1 +1,26 @@
1
1
  # Link
2
+
3
+ ## Introductie
4
+
5
+ Nederlandse term: koppeling
6
+
7
+ Links worden gebruikt als navigatie-elementen en kunnen op zichzelf of inline met tekst worden gebruikt. Het is de lichtgewicht variant voor navigatie.
8
+
9
+ ## Bezochte stijl
10
+
11
+ Bezochte koppelingen geven aan dat een gebruiker de koppeling al heeft geopend. Gebruikte stijlen raden we af bij koppelingen, omdat ze de pagina vaak onoverzichtelijk maken. Het maakt navigeren door een pagina moeilijker. De inline koppeling heeft wel een bezochte stijl. Het vormt geen onderdeel van navigatie elementen die veel gescand worden.
12
+
13
+ ## Referenties
14
+
15
+ - [Links to cross-origin destinations are unsafe](https://developer.chrome.com/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/): Vermijd `target="_blank"` of gebruik `rel="noopener"` als het moet.
16
+ - [_A comprehensive guide to designing perfect links in UX_, op Prototypr](https://blog.prototypr.io/a-guide-to-designing-perfect-links-in-ux-414558f35730): best practices rondom links.
17
+ - [_Writing Hyperlinks: Salient, Descriptive, Start with Keyword_ door Norman Nielsen Group](https://www.nngroup.com/articles/writing-links/): hoe schrijf je goede links? Een uitgebreid artikel over links.
18
+ - [_Hover, focus, active_, door Wunder](https://wunder.io/wunderpedia/accessibility/accessible-uis/hover-focus-active/): goede uitleg over de states die elementen zoals de link en button hebben in browsers.
19
+ - [MDN: `<a>`: The Anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a): uitgebreid overzicht van alle mogelijkheden van links in HTML.
20
+
21
+ ### Relevante WCAG-regels
22
+
23
+ - [WCAG 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum)
24
+ - [WCAG 2.4.4](https://www.w3.org/TR/WCAG21/#link-purpose-in-context)
25
+ - [WCAG 2.5.3](https://www.w3.org/TR/WCAG21/#label-in-name)
26
+ - [WCAG 3.1.2](https://www.w3.org/TR/WCAG21/#language-of-parts)
@@ -2,6 +2,7 @@
2
2
  * @license EUPL-1.2+
3
3
  * Copyright (c) 2023 Gemeente Amsterdam
4
4
  */
5
+
5
6
  @import "../../utils/breakpoint";
6
7
 
7
8
  @mixin reset {
@@ -0,0 +1,15 @@
1
+ # Unordered List
2
+
3
+ ## Introductie
4
+
5
+ Een lijst is een verticale groep gerelateerde inhoud.
6
+
7
+ ## Specificaties
8
+
9
+ Deze lijst kan 2 niveaus hebben. Het eerste niveau bestaat uit vierkantjes. Het tweede niveau bestaat uit halve kastlijntjes. Tekst in de lijstitems springt een vaste afstand in.
10
+
11
+ ## Terminologie
12
+
13
+ - **unordered list**: uitgeschreven versie van de HTML afkorting `<ul>`
14
+ - **list item**: uitgeschreven van van [HTML `<li>`](https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element). Ook [in ARIA is het `role="listitem"`](https://www.w3.org/TR/wai-aria-1.2/#listitem)
15
+ - **marker**: zoals in de [CSS pseudo-selector `::marker`](https://drafts.csswg.org/css-pseudo-4/#marker-pseudo)
@@ -0,0 +1,44 @@
1
+ /**
2
+ * @license EUPL-1.2+
3
+ * Copyright (c) 2023 Gemeente Amsterdam
4
+ */
5
+
6
+ @import "../../utils/breakpoint";
7
+
8
+ @mixin reset {
9
+ box-sizing: border-box;
10
+ margin-block: 0;
11
+ -webkit-text-size-adjust: 100%;
12
+ }
13
+
14
+ .amsterdam-unordered-list {
15
+ color: var(--amsterdam-unordered-list-color);
16
+ display: flex;
17
+ flex-direction: column;
18
+ font-family: var(--amsterdam-unordered-list-font-family);
19
+ font-size: var(--amsterdam-unordered-list-font-size-narrow);
20
+ font-weight: var(--amsterdam-unordered-list-font-weight);
21
+ gap: var(--amsterdam-unordered-list-gap);
22
+ line-height: var(--amsterdam-unordered-list-line-height);
23
+ list-style: var(--amsterdam-unordered-list-list-style);
24
+
25
+ @media screen and (width > $amsterdam-breakpoint) {
26
+ font-size: var(--amsterdam-unordered-list-font-size-wide);
27
+ }
28
+
29
+ @include reset;
30
+ }
31
+
32
+ .amsterdam-unordered-list__item {
33
+ padding-inline: var(--amsterdam-unordered-list-item-padding-inline);
34
+ }
35
+
36
+ .amsterdam-unordered-list .amsterdam-unordered-list {
37
+ list-style-type: var(--amsterdam-unordered-list-unordered-list-list-style-type);
38
+ padding-block: var(--amsterdam-unordered-list-unordered-list-padding-block);
39
+ padding-inline: var(--amsterdam-unordered-list-unordered-list-padding-inline);
40
+ }
41
+
42
+ .amsterdam-unordered-list .amsterdam-unordered-list .amsterdam-unordered-list__item {
43
+ padding-inline: var(--amsterdam-unordered-list-unordered-list-item-padding-inline);
44
+ }
@@ -1,62 +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-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 */
@@ -1 +0,0 @@
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"}
@@ -1,341 +0,0 @@
1
- /**
2
- * @license EUPL-1.2
3
- * Copyright (c) 2021 Robbert Broersma
4
- */
5
- /**
6
- * @license EUPL-1.2
7
- * Copyright (c) 2021 Robbert Broersma
8
- */
9
- /**
10
- * @license EUPL-1.2
11
- * Copyright (c) 2021 Gemeente Utrecht
12
- * Copyright (c) 2021 Robbert Broersma
13
- */
14
- /* stylelint-disable-next-line block-no-empty */
15
- /* stylelint-disable-next-line block-no-empty */
16
- .utrecht-radio-button {
17
- /*
18
- * For the `radial-gradient()` use a 5% gradient size to improve anti-aliasing.
19
- * With a 0% gradient, the circle will have jagged edges.
20
- */
21
- -webkit-appearance: none;
22
- -moz-appearance: none;
23
- appearance: none;
24
- margin-block-end: 0;
25
- margin-block-start: 0;
26
- margin-inline-end: 0;
27
- margin-inline-start: 0;
28
- --_utrecht-radio-button-background-color: var(
29
- --_utrecht-radio-button-interactive-background-color,
30
- var(--_utrecht-radio-button-state-background-color, var(--utrecht-radio-button-background-color))
31
- );
32
- --_utrecht-radio-button-border-color: var(
33
- --_utrecht-radio-button-interactive-border-color,
34
- var(--_utrecht-radio-button-state-border-color, var(--utrecht-radio-button-border-color, currentColor))
35
- );
36
- --_utrecht-radio-button-border-width: var(
37
- --_utrecht-radio-button-interactive-border-width,
38
- var(--_utrecht-radio-button-state-border-width, var(--utrecht-radio-button-border-width))
39
- );
40
- --_utrecht-radio-button-color: var(
41
- --_utrecht-radio-button-interactive-color,
42
- var(--_utrecht-radio-button-state-color, var(--utrecht-radio-button-color, currentColor))
43
- );
44
- --_utrecht-radio-button-icon-size: 0;
45
- background-color: var(--_utrecht-radio-button-background-color);
46
- background-image: radial-gradient(circle, var(--_utrecht-radio-button-color, transparent) calc(var(--_utrecht-radio-button-icon-size, 50%) - 5%), var(--_utrecht-radio-button-background-color, currentColor) var(--_utrecht-radio-button-icon-size, 50%));
47
- background-position: center;
48
- background-repeat: no-repeat;
49
- background-size: contain;
50
- block-size: var(--utrecht-radio-button-size, 1em);
51
- border-color: var(--_utrecht-radio-button-border-color);
52
- border-radius: 50%;
53
- border-style: solid;
54
- border-width: var(--_utrecht-radio-button-border-width);
55
- cursor: var(--utrecht-action-activate-cursor);
56
- inline-size: var(--utrecht-radio-button-size, 1em);
57
- margin-inline-end: var(--utrecht-radio-button-margin-inline-end);
58
- -webkit-print-color-adjust: exact;
59
- print-color-adjust: exact;
60
- -webkit-user-select: none;
61
- user-select: none;
62
- vertical-align: top;
63
- }
64
-
65
- .utrecht-radio-button--checked {
66
- --_utrecht-radio-button-icon-size: var(--utrecht-radio-button-icon-size, 50%);
67
- --_utrecht-radio-button-state-background-color: var(--utrecht-radio-button-checked-background-color);
68
- --_utrecht-radio-button-state-border-color: var(--utrecht-radio-button-checked-border-color);
69
- --_utrecht-radio-button-state-border-width: var(--utrecht-radio-button-checked-border-width);
70
- --_utrecht-radio-button-state-color: var(--utrecht-radio-button-checked-color);
71
- --_utrecht-radio-button-state-active-background-color: var(--utrecht-radio-button-checked-active-background-color);
72
- --_utrecht-radio-button-state-active-border-color: var(--utrecht-radio-button-checked-active-border-color);
73
- --_utrecht-radio-button-state-active-border-width: var(--utrecht-radio-button-checked-active-border-width);
74
- --_utrecht-radio-button-state-active-color: var(--utrecht-radio-button-checked-active-color);
75
- --_utrecht-radio-button-state-focus-background-color: var(--utrecht-radio-button-checked-focus-background-color);
76
- --_utrecht-radio-button-state-focus-border-color: var(--utrecht-radio-button-checked-focus-border-color);
77
- --_utrecht-radio-button-state-focus-border-width: var(--utrecht-radio-button-checked-focus-border-width);
78
- --_utrecht-radio-button-state-focus-color: var(--utrecht-radio-button-checked-focus-color);
79
- --_utrecht-radio-button-state-hover-background-color: var(--utrecht-radio-button-checked-hover-background-color);
80
- --_utrecht-radio-button-state-hover-border-color: var(--utrecht-radio-button-checked-hover-border-color);
81
- --_utrecht-radio-button-state-hover-border-width: var(--utrecht-radio-button-checked-hover-border-width);
82
- --_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
83
- }
84
-
85
- .utrecht-radio-button--hover {
86
- --_utrecht-radio-button-interactive-background-color: var(
87
- --_utrecht-radio-button-state-hover-background-color,
88
- var(--utrecht-radio-button-hover-background-color)
89
- );
90
- --_utrecht-radio-button-interactive-border-color: var(
91
- --_utrecht-radio-button-state-hover-border-color,
92
- var(--utrecht-radio-button-hover-border-color)
93
- );
94
- --_utrecht-radio-button-interactive-border-width: var(
95
- --_utrecht-radio-button-state-hover-border-width,
96
- var(--utrecht-radio-button-hover-border-width)
97
- );
98
- --_utrecht-radio-button-interactive-color: var(
99
- --_utrecht-radio-button-state-hover-color,
100
- var(--utrecht-radio-button-hover-color)
101
- );
102
- }
103
-
104
- .utrecht-radio-button--focus {
105
- --_utrecht-radio-button-interactive-background-color: var(
106
- --utrecht-radio-button-focus-background-color,
107
- var(--utrecht-radio-button-focus-background-color)
108
- );
109
- --_utrecht-radio-button-interactive-border-color: var(
110
- --utrecht-radio-button-focus-border-color,
111
- var(--utrecht-radio-button-focus-border-color)
112
- );
113
- --_utrecht-radio-button-interactive-border-width: var(
114
- --utrecht-radio-button-focus-border-width,
115
- var(--utrecht-radio-button-focus-border-width)
116
- );
117
- --_utrecht-radio-button-interactive-color: var(
118
- --utrecht-radio-button-focus-color,
119
- var(--utrecht-radio-button-focus-color)
120
- );
121
- }
122
-
123
- .utrecht-radio-button--focus-visible {
124
- /* - The browser default focus ring should apply when these CSS custom properties are not set.
125
- * - Make the `box-shadow` value available, so components that have their own `box-shadow`
126
- * can combine it with the focus ring box shadow.
127
- */
128
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
129
- var(--utrecht-focus-inverse-outline-color, transparent);
130
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
131
- outline-color: var(--utrecht-focus-outline-color, revert);
132
- outline-offset: var(--utrecht-focus-outline-offset, revert);
133
- outline-style: var(--utrecht-focus-outline-style, revert);
134
- outline-width: var(--utrecht-focus-outline-width, revert);
135
- }
136
-
137
- .utrecht-radio-button--active {
138
- --_utrecht-radio-button-interactive-background-color: var(
139
- --_utrecht-radio-button-state-active-background-color,
140
- var(--utrecht-radio-button-active-background-color)
141
- );
142
- --_utrecht-radio-button-interactive-border-color: var(
143
- --_utrecht-radio-button-state-active-border-color,
144
- var(--utrecht-radio-button-active-border-color)
145
- );
146
- --_utrecht-radio-button-interactive-border-width: var(
147
- --_utrecht-radio-button-state-active-border-width,
148
- var(--utrecht-radio-button-active-border-width)
149
- );
150
- --_utrecht-radio-button-interactive-color: var(
151
- --_utrecht-radio-button-state-active-color,
152
- var(--utrecht-radio-button-active-color)
153
- );
154
- }
155
-
156
- .utrecht-radio-button--disabled {
157
- /*
158
- * The disabled radio button should have:
159
- * - should have no active effect
160
- * - should have no focus effect
161
- * - should have no hover effect
162
- * - should have a working focus-visible effect, in case someone sets `<input type="radio" disabled tabindex="0">`
163
- */
164
- --_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
165
- --_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
166
- --_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
167
- --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
168
- /* no focus effect */
169
- --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
170
- --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
171
- --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
172
- --_utrecht-radio-button-focus-color: var(--_utrecht-radio-button-color);
173
- /* no active effect */
174
- --_utrecht-radio-button-active-background-color: var(--_utrecht-radio-button-background-color);
175
- --_utrecht-radio-button-active-border-color: var(--_utrecht-radio-button-border-color);
176
- --_utrecht-radio-button-active-border-width: var(--_utrecht-radio-button-border-width);
177
- --_utrecht-radio-button-active-color: var(--_utrecht-radio-button-color);
178
- /* no hover effect */
179
- --_utrecht-radio-button-hover-background-color: var(--_utrecht-radio-button-background-color);
180
- --_utrecht-radio-button-hover-border-color: var(--_utrecht-radio-button-border-color);
181
- --_utrecht-radio-button-hover-border-width: var(--_utrecht-radio-button-border-width);
182
- --_utrecht-radio-button-hover-color: var(--_utrecht-radio-button-color);
183
- cursor: var(--utrecht-action-disabled-cursor);
184
- }
185
-
186
- .utrecht-radio-button--invalid {
187
- border-color: var(--utrecht-radio-button-invalid-border-color, var(--utrecht-radio-button-border-color));
188
- border-width: var(--utrecht-radio-button-invalid-border-width, var(--utrecht-radio-button-border-width));
189
- color: var(--utrecht-radio-button-invalid-color, var(--utrecht-radio-button-color));
190
- }
191
-
192
- .utrecht-radio-button--html-input {
193
- /* override the `:focus` selector above */
194
- /* stylelint-disable-next-line no-descending-specificity */
195
- }
196
- .utrecht-radio-button--html-input:checked {
197
- --_utrecht-radio-button-icon-size: var(--utrecht-radio-button-icon-size, 50%);
198
- --_utrecht-radio-button-state-background-color: var(--utrecht-radio-button-checked-background-color);
199
- --_utrecht-radio-button-state-border-color: var(--utrecht-radio-button-checked-border-color);
200
- --_utrecht-radio-button-state-border-width: var(--utrecht-radio-button-checked-border-width);
201
- --_utrecht-radio-button-state-color: var(--utrecht-radio-button-checked-color);
202
- --_utrecht-radio-button-state-active-background-color: var(--utrecht-radio-button-checked-active-background-color);
203
- --_utrecht-radio-button-state-active-border-color: var(--utrecht-radio-button-checked-active-border-color);
204
- --_utrecht-radio-button-state-active-border-width: var(--utrecht-radio-button-checked-active-border-width);
205
- --_utrecht-radio-button-state-active-color: var(--utrecht-radio-button-checked-active-color);
206
- --_utrecht-radio-button-state-focus-background-color: var(--utrecht-radio-button-checked-focus-background-color);
207
- --_utrecht-radio-button-state-focus-border-color: var(--utrecht-radio-button-checked-focus-border-color);
208
- --_utrecht-radio-button-state-focus-border-width: var(--utrecht-radio-button-checked-focus-border-width);
209
- --_utrecht-radio-button-state-focus-color: var(--utrecht-radio-button-checked-focus-color);
210
- --_utrecht-radio-button-state-hover-background-color: var(--utrecht-radio-button-checked-hover-background-color);
211
- --_utrecht-radio-button-state-hover-border-color: var(--utrecht-radio-button-checked-hover-border-color);
212
- --_utrecht-radio-button-state-hover-border-width: var(--utrecht-radio-button-checked-hover-border-width);
213
- --_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
214
- }
215
- .utrecht-radio-button--html-input:disabled {
216
- /*
217
- * The disabled radio button should have:
218
- * - should have no active effect
219
- * - should have no focus effect
220
- * - should have no hover effect
221
- * - should have a working focus-visible effect, in case someone sets `<input type="radio" disabled tabindex="0">`
222
- */
223
- --_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
224
- --_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
225
- --_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
226
- --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
227
- /* no focus effect */
228
- --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
229
- --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
230
- --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
231
- --_utrecht-radio-button-focus-color: var(--_utrecht-radio-button-color);
232
- /* no active effect */
233
- --_utrecht-radio-button-active-background-color: var(--_utrecht-radio-button-background-color);
234
- --_utrecht-radio-button-active-border-color: var(--_utrecht-radio-button-border-color);
235
- --_utrecht-radio-button-active-border-width: var(--_utrecht-radio-button-border-width);
236
- --_utrecht-radio-button-active-color: var(--_utrecht-radio-button-color);
237
- /* no hover effect */
238
- --_utrecht-radio-button-hover-background-color: var(--_utrecht-radio-button-background-color);
239
- --_utrecht-radio-button-hover-border-color: var(--_utrecht-radio-button-border-color);
240
- --_utrecht-radio-button-hover-border-width: var(--_utrecht-radio-button-border-width);
241
- --_utrecht-radio-button-hover-color: var(--_utrecht-radio-button-color);
242
- cursor: var(--utrecht-action-disabled-cursor);
243
- }
244
- .utrecht-radio-button--html-input:invalid, .utrecht-radio-button--html-input[aria-invalid=true] {
245
- border-color: var(--utrecht-radio-button-invalid-border-color, var(--utrecht-radio-button-border-color));
246
- border-width: var(--utrecht-radio-button-invalid-border-width, var(--utrecht-radio-button-border-width));
247
- color: var(--utrecht-radio-button-invalid-color, var(--utrecht-radio-button-color));
248
- }
249
- .utrecht-radio-button--html-input:focus:not([aria-disabled=true], :disabled) {
250
- --_utrecht-radio-button-interactive-background-color: var(
251
- --utrecht-radio-button-focus-background-color,
252
- var(--utrecht-radio-button-focus-background-color)
253
- );
254
- --_utrecht-radio-button-interactive-border-color: var(
255
- --utrecht-radio-button-focus-border-color,
256
- var(--utrecht-radio-button-focus-border-color)
257
- );
258
- --_utrecht-radio-button-interactive-border-width: var(
259
- --utrecht-radio-button-focus-border-width,
260
- var(--utrecht-radio-button-focus-border-width)
261
- );
262
- --_utrecht-radio-button-interactive-color: var(
263
- --utrecht-radio-button-focus-color,
264
- var(--utrecht-radio-button-focus-color)
265
- );
266
- }
267
- .utrecht-radio-button--html-input:focus-visible {
268
- /* - The browser default focus ring should apply when these CSS custom properties are not set.
269
- * - Make the `box-shadow` value available, so components that have their own `box-shadow`
270
- * can combine it with the focus ring box shadow.
271
- */
272
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
273
- var(--utrecht-focus-inverse-outline-color, transparent);
274
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
275
- outline-color: var(--utrecht-focus-outline-color, revert);
276
- outline-offset: var(--utrecht-focus-outline-offset, revert);
277
- outline-style: var(--utrecht-focus-outline-style, revert);
278
- outline-width: var(--utrecht-focus-outline-width, revert);
279
- }
280
- .utrecht-radio-button--html-input:hover:not([aria-disabled=true], :disabled) {
281
- --_utrecht-radio-button-interactive-background-color: var(
282
- --_utrecht-radio-button-state-hover-background-color,
283
- var(--utrecht-radio-button-hover-background-color)
284
- );
285
- --_utrecht-radio-button-interactive-border-color: var(
286
- --_utrecht-radio-button-state-hover-border-color,
287
- var(--utrecht-radio-button-hover-border-color)
288
- );
289
- --_utrecht-radio-button-interactive-border-width: var(
290
- --_utrecht-radio-button-state-hover-border-width,
291
- var(--utrecht-radio-button-hover-border-width)
292
- );
293
- --_utrecht-radio-button-interactive-color: var(
294
- --_utrecht-radio-button-state-hover-color,
295
- var(--utrecht-radio-button-hover-color)
296
- );
297
- }
298
- .utrecht-radio-button--html-input:active:not([aria-disabled=true], :disabled) {
299
- --_utrecht-radio-button-interactive-background-color: var(
300
- --_utrecht-radio-button-state-active-background-color,
301
- var(--utrecht-radio-button-active-background-color)
302
- );
303
- --_utrecht-radio-button-interactive-border-color: var(
304
- --_utrecht-radio-button-state-active-border-color,
305
- var(--utrecht-radio-button-active-border-color)
306
- );
307
- --_utrecht-radio-button-interactive-border-width: var(
308
- --_utrecht-radio-button-state-active-border-width,
309
- var(--utrecht-radio-button-active-border-width)
310
- );
311
- --_utrecht-radio-button-interactive-color: var(
312
- --_utrecht-radio-button-state-active-color,
313
- var(--utrecht-radio-button-active-color)
314
- );
315
- }
316
-
317
- .amsterdam-radio-button {
318
- --_amsterdam-radio-button-background-color: var(--amsterdam-radio-button-background-color, currentColor);
319
- }
320
-
321
- .amsterdam-radio-button:checked {
322
- background-image: radial-gradient(circle, var(--_amsterdam-radio-button-background-color, transparent) 50%, currentColor 60%);
323
- }
324
-
325
- .amsterdam-radio-button:hover {
326
- box-shadow: var(--amsterdam-radio-button-hover-box-shadow);
327
- }
328
-
329
- .amsterdam-radio-button:checked:hover {
330
- background-color: var(--amsterdam-radio-button-hover-background-color);
331
- border-color: var(--amsterdam-radio-button-hover-border-color);
332
- box-shadow: none;
333
- }
334
-
335
- .amsterdam-radio-button:disabled:checked {
336
- --_amsterdam-radio-button-background-color: var(--amsterdam-radio-button-disabled-background-color);
337
- background-color: var(--amsterdam-radio-button-disabled-background-color);
338
- border-color: var(--amsterdam-radio-button-disabled-border-color);
339
- }
340
-
341
- /*# sourceMappingURL=radio-button.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["../../node_modules/@utrecht/components/radio-button/css/index.scss","../../node_modules/@utrecht/components/radio-button/css/_mixin.scss","../../node_modules/@utrecht/components/common/focus/_mixin.scss","../../src/radio-button/radio-button.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AA6BA;ADwHA;AD9IA;ACWE;AAAA;AAAA;AAAA;EAVA;EACA;EACA;EACA;EACA;EACA;EACA;EAUA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;EAEA;EACA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADpDF;ECwDE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADpEF;EC2IE;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;;;ADnJF;EC4JE;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;;;ADpKF;AEdE;AAAA;AAAA;AAAA;EAIA;AAAA;EAGA;EACA;EACA;EACA;EACA;;;AFOF;ECwGE;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;;;ADhHF;ACwDE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EAEA;;;ADlFF;EC0FE;EACA;EACA;;;ADxFF;ACiLE;AACA;;AAvBA;EA/HA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAmHA;AA/GA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EAEA;;AAqFA;EA7EA;EACA;EACA;;AAqFA;EArCA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;;AA+BA;ACjNA;AAAA;AAAA;AAAA;EAIA;AAAA;EAGA;EACA;EACA;EACA;EACA;;AD0MA;EApEA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;;AA4DA;EA/FA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;;;AE5IF;EACE;;;AAGF;EACE;;;AAOF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EAEA;EACA","file":"radio-button.css"}
@@ -1,178 +0,0 @@
1
- /**
2
- * @license EUPL-1.2
3
- * Copyright (c) 2021 Robbert Broersma
4
- */
5
- /**
6
- * @license EUPL-1.2
7
- * Copyright (c) 2021 Gemeente Utrecht
8
- * Copyright (c) 2021 Robbert Broersma
9
- */
10
- /* stylelint-disable-next-line block-no-empty */
11
- /**
12
- * @license EUPL-1.2
13
- * Copyright (c) 2021 Robbert Broersma
14
- */
15
- /**
16
- * @license EUPL-1.2
17
- * Copyright (c) 2021 Gemeente Utrecht
18
- * Copyright (c) 2021 Robbert Broersma
19
- */
20
- /* stylelint-disable-next-line block-no-empty */
21
- .utrecht-textbox {
22
- background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
23
- border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
24
- border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
25
- border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
26
- border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
27
- border-style: solid;
28
- box-sizing: border-box;
29
- color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
30
- font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
31
- font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
32
- font-weight: initial; /* harden */
33
- height: initial; /* harden */
34
- line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
35
- max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
36
- padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
37
- padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
38
- padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
39
- padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
40
- width: 100%;
41
- }
42
-
43
- .utrecht-textbox--invalid {
44
- --_utrecht-textbox-border-width: var(
45
- --utrecht-textbox-invalid-border-width,
46
- var(
47
- --utrecht-form-control-invalid-border-width,
48
- var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
49
- )
50
- );
51
- background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
52
- border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
53
- border-width: var(--_utrecht-textbox-border-width);
54
- border-bottom-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
55
- color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
56
- }
57
-
58
- .utrecht-textbox--disabled {
59
- background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
60
- border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
61
- color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
62
- cursor: var(--utrecht-action-disabled-cursor);
63
- }
64
-
65
- .utrecht-textbox--focus {
66
- background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
67
- border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
68
- color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
69
- }
70
-
71
- .utrecht-textbox--focus-visible {
72
- /* - The browser default focus ring should apply when these CSS custom properties are not set.
73
- * - Make the `box-shadow` value available, so components that have their own `box-shadow`
74
- * can combine it with the focus ring box shadow.
75
- */
76
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
77
- var(--utrecht-focus-inverse-outline-color, transparent);
78
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
79
- outline-color: var(--utrecht-focus-outline-color, revert);
80
- outline-offset: var(--utrecht-focus-outline-offset, revert);
81
- outline-style: var(--utrecht-focus-outline-style, revert);
82
- outline-width: var(--utrecht-focus-outline-width, revert);
83
- }
84
-
85
- .utrecht-textbox--read-only {
86
- background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
87
- border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
88
- color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
89
- }
90
-
91
- .utrecht-textbox__placeholder {
92
- color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
93
- font-style: var(--utrecht-form-control-placeholder-font-style);
94
- opacity: 100%;
95
- }
96
-
97
- .utrecht-textbox--numeric {
98
- -moz-appearance: textfield; /* avoid spinner input in Firefox */
99
- font-variant-numeric: lining-nums tabular-nums;
100
- }
101
-
102
- .utrecht-textbox--password {
103
- font-variant-ligatures: none;
104
- font-variant-numeric: slashed-zero;
105
- }
106
-
107
- .utrecht-textbox--url {
108
- font-variant-ligatures: none;
109
- }
110
-
111
- .utrecht-textbox--html-input:disabled {
112
- background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
113
- border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
114
- color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
115
- cursor: var(--utrecht-action-disabled-cursor);
116
- }
117
- .utrecht-textbox--html-input:focus {
118
- background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
119
- border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
120
- color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
121
- /* - The browser default focus ring should apply when these CSS custom properties are not set.
122
- * - Make the `box-shadow` value available, so components that have their own `box-shadow`
123
- * can combine it with the focus ring box shadow.
124
- */
125
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
126
- var(--utrecht-focus-inverse-outline-color, transparent);
127
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
128
- outline-color: var(--utrecht-focus-outline-color, revert);
129
- outline-offset: var(--utrecht-focus-outline-offset, revert);
130
- outline-style: var(--utrecht-focus-outline-style, revert);
131
- outline-width: var(--utrecht-focus-outline-width, revert);
132
- }
133
- .utrecht-textbox--html-input:focus:not(:focus-visible) {
134
- /* undo focus ring */
135
- box-shadow: none;
136
- outline-style: revert;
137
- }
138
- .utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true] {
139
- --_utrecht-textbox-border-width: var(
140
- --utrecht-textbox-invalid-border-width,
141
- var(
142
- --utrecht-form-control-invalid-border-width,
143
- var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
144
- )
145
- );
146
- background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
147
- border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
148
- border-width: var(--_utrecht-textbox-border-width);
149
- border-bottom-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
150
- color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
151
- }
152
- .utrecht-textbox--html-input:read-only {
153
- background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
154
- border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
155
- color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
156
- }
157
- .utrecht-textbox--html-input::placeholder {
158
- color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
159
- font-style: var(--utrecht-form-control-placeholder-font-style);
160
- opacity: 100%;
161
- }
162
- .utrecht-textbox--html-input[type=password i] {
163
- font-variant-ligatures: none;
164
- font-variant-numeric: slashed-zero;
165
- }
166
- .utrecht-textbox--html-input[type=url i], .utrecht-textbox--html-input[type=email i], .utrecht-textbox--html-input[inputMode=email i], .utrecht-textbox--html-input[inputMode=url i] {
167
- font-variant-ligatures: none;
168
- }
169
- .utrecht-textbox--html-input[pattern="\\d*"], .utrecht-textbox--html-input[pattern="[0-9]*"], .utrecht-textbox--html-input[type=number i], .utrecht-textbox--html-input[type=tel i], .utrecht-textbox--html-input[inputMode=numeric i], .utrecht-textbox--html-input[inputMode=decimal i], .utrecht-textbox--html-input[inputMode=tel i] {
170
- -moz-appearance: textfield; /* avoid spinner input in Firefox */
171
- font-variant-numeric: lining-nums tabular-nums;
172
- }
173
-
174
- .amsterdam-textbox:hover {
175
- box-shadow: var(--amsterdam-textbox-hover-box-shadow);
176
- }
177
-
178
- /*# sourceMappingURL=textbox.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["../../node_modules/@utrecht/components/textbox/css/index.scss","../../node_modules/@utrecht/components/common/focus/_mixin.scss","../../node_modules/@utrecht/components/textbox/css/_mixin.scss","../../src/textbox/textbox.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AA6BA;AC7BA;AAAA;AAAA;AAAA;ADAA;AAAA;AAAA;AAAA;AAAA;AA6BA;ADrBA;EEAE;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EAIA;;;AFvBF;EE2BE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQA;EAOA;EAOA;EACA;EAUA;;;AFxDF;EE+DE;EAOA;EAOA;EAIA;;;AF7EF;EEmFE;EAOA;EAOA;;;AF5FF;AChBE;AAAA;AAAA;AAAA;EAIA;AAAA;EAGA;EACA;EACA;EACA;EACA;;;ADSF;EEmGE;EAOA;EAOA;;;AF7GF;EEoHE;EAIA;EACA;;;AFrHF;EEyHE;EACA;;;AFtHF;EE0HE;EACA;;;AFvHF;EE2HE;;;AAIA;EA7FA;EAOA;EAOA;EAIA;;AAmFE;EA7EF;EAOA;EAOA;AD5GA;AAAA;AAAA;AAAA;EAIA;AAAA;EAGA;EACA;EACA;EACA;EACA;;ACqKE;ADjKF;EACA;EACA;;AC4KA;EA/JA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQA;EAOA;EAOA;EACA;EAUA;;AAmIA;EA3EA;EAOA;EAOA;;AAiEA;EA1DA;EAIA;EACA;;AFtGA;EE+GA;EACA;;AF7GA;EEiHA;;AF3GA;EEiGA;EACA;;;AC5JA;EACE","file":"textbox.css"}