@conduction/components 2.2.28 → 2.2.30

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 (34) hide show
  1. package/README.md +2 -0
  2. package/lib/components/Pagination/Pagination.module.css +158 -0
  3. package/lib/components/badgeCounter/BadgeCounter.module.css +27 -0
  4. package/lib/components/card/cardHeader/CardHeader.module.css +36 -0
  5. package/lib/components/card/cardWrapper/CardWrapper.module.css +47 -0
  6. package/lib/components/card/detailsCard/DetailsCard.module.css +56 -0
  7. package/lib/components/card/downloadCard/DownloadCard.module.css +27 -0
  8. package/lib/components/card/horizontalImageCard/HorizontalImageCard.module.css +38 -0
  9. package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.module.css +68 -0
  10. package/lib/components/card/infoCard/InfoCard.module.css +26 -0
  11. package/lib/components/codeBlock/CodeBlock.module.css +6 -0
  12. package/lib/components/container/Container.module.css +12 -0
  13. package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.css +222 -0
  14. package/lib/components/displaySwitch/DisplaySwitch.module.css +3 -0
  15. package/{src/components/formFields/checkbox/Checkbox.module.css → lib/components/formFields/checkbox/checkbox.module.css} +0 -1
  16. package/lib/components/formFields/createKeyValue/CreateKeyValue.module.css +65 -0
  17. package/lib/components/formFields/date/Date.module.css +12 -0
  18. package/lib/components/formFields/errorMessage/ErrorMessage.module.css +9 -0
  19. package/lib/components/formFields/select/select.module.css +58 -0
  20. package/lib/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.module.css +41 -0
  21. package/lib/components/imageDivider/imageDivider.module.css +5 -0
  22. package/lib/components/jumbotron/Jumbotron.module.css +88 -0
  23. package/lib/components/logo/Logo.module.css +31 -0
  24. package/lib/components/metaIcon/MetaIcon.module.css +29 -0
  25. package/lib/components/notificationPopUp/NotificationPopUp.module.css +70 -0
  26. package/lib/components/quoteWrapper/QuoteWrapper.module.css +12 -0
  27. package/lib/components/tabs/Tabs.module.css +247 -0
  28. package/lib/components/tag/Tag.module.css +44 -0
  29. package/lib/components/toolTip/ToolTip.module.css +35 -0
  30. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css +235 -0
  31. package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.module.css +80 -0
  32. package/package.json +5 -2
  33. package/src/components/formFields/checkbox/checkbox.module.css +212 -0
  34. package/tsconfig.json +11 -3
package/src/components/formFields/checkbox/checkbox.module.css ADDED
@@ -0,0 +1,212 @@
1
+ :root {
2
+ --conduciton-input-checkbox-checkmark-url: url("data:image/svg+xml,%3Csvg id='eXTGSQIndRe1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 13 13' shape-rendering='geometricPrecision' text-rendering='geometricPrecision'%3E%3Cg transform='translate(-85.642166-156.631362)'%3E%3Cpath d='M86.73927,163.90021l1.92835-2.05763l4.165103,4.176559c-.692268.524-1.562158,1.361078-1.562158,2.198156L86.73927,163.90021Z' fill='%23fff' stroke-width='0'/%3E%3Cpath d='M95.2777,158.04542l2.26736,1.67416-6.27449,8.49772-1.917847-1.798161L95.2777,158.04542Z' fill='%23fff' stroke-width='0'/%3E%3C/g%3E%3C/svg%3E%0A");
3
+ --conduction-input-checkbox-color: #ffffff;
4
+ --conduction-input-checkbox-border-width: 1px;
5
+ --conduction-input-checkbox-border-style: solid;
6
+ --conduction-input-checkbox-border-color: #767676;
7
+ --conduction-input-checkbox-border-radius: 3px;
8
+ /* --conduction-input-checkbox-box-shadow: ; */
9
+
10
+ --conduction-input-checkbox-focus-outline-width: 2px;
11
+ --conduction-input-checkbox-focus-outline-style: solid;
12
+ --conduction-input-checkbox-focus-outline-color: #000000;
13
+ --conduction-input-checkbox-focus-outline-offset: 2px;
14
+
15
+ --conduction-input-checkbox-hover-color: #ffffff;
16
+ --conduction-input-checkbox-hover-border-width: 1px;
17
+ --conduction-input-checkbox-hover-border-style: solid;
18
+ --conduction-input-checkbox-hover-border-color: #4f4f4f;
19
+ --conduction-input-checkbox-hover-border-radius: 3px;
20
+ /* --conduction-input-checkbox-hover-box-shadow: ; */
21
+
22
+ --conduction-input-checkbox-checked-color: #0075ff;
23
+ --conduction-input-checkbox-checked-border-width: 1px;
24
+ --conduction-input-checkbox-checked-border-style: solid;
25
+ --conduction-input-checkbox-checked-border-color: #0075ff;
26
+ --conduction-input-checkbox-checked-border-radius: 3px;
27
+
28
+ --conduction-input-checkbox-checked-hover-color: #005cc8;
29
+ --conduction-input-checkbox-checked-hover-border-width: 1px;
30
+ --conduction-input-checkbox-checked-hover-border-style: solid;
31
+ --conduction-input-checkbox-checked-hover-border-color: #005cc8;
32
+ --conduction-input-checkbox-checked-hover-border-radius: 3px;
33
+
34
+ --conduction-input-checkbox-disabled-color: #d0d0d0;
35
+ --conduction-input-checkbox-disabled-border-width: 1px;
36
+ --conduction-input-checkbox-disabled-border-style: solid;
37
+ --conduction-input-checkbox-disabled-border-color: #d0d0d0;
38
+ --conduction-input-checkbox-disabled-border-radius: 3px;
39
+
40
+ --conduction-input-checkbox-disabled-hover-color: #d0d0d0;
41
+ --conduction-input-checkbox-disabled-hover-border-width: 1px;
42
+ --conduction-input-checkbox-disabled-hover-border-style: solid;
43
+ --conduction-input-checkbox-disabled-hover-border-color: #d0d0d0;
44
+ --conduction-input-checkbox-disabled-hover-border-radius: 3px;
45
+
46
+ --conduction-input-checkbox-label-color: #000000;
47
+ --conduction-input-checkbox-label-font-size: var(--skeleton-font-size-md);
48
+ --conduction-input-checkbox-label-font-weight: var(--skeleton-font-weight-normal);
49
+ --conduction-input-checkbox-label-container-padding: 3px;
50
+ --conduction-input-checkbox-label-container-margin: 5px;
51
+ /* --conduction-input-checkbox-label-font-family: ; */
52
+ }
53
+
54
+ .checkbox {
55
+ position: absolute;
56
+ overflow: hidden;
57
+ clip: rect(0 0 0 0);
58
+ height: 1px;
59
+ width: 1px;
60
+ margin: -1px;
61
+ padding: 0;
62
+ border: 0;
63
+ }
64
+
65
+ .checkbox + label {
66
+ position: relative;
67
+ font-size: var(--conduction-input-checkbox-label-font-size, var(--utrecht-document-font-size));
68
+ font-weight: var(--conduction-input-checkbox-label-font-weight, var(--utrehct-document-font-weight));
69
+ font-family: var(--conduction-input-checkbox-label-font-family, var(--utrecht-document-font-family));
70
+ cursor: pointer;
71
+ display: inline-flex;
72
+ align-items: center;
73
+ height: 16px;
74
+ color: var(--conduction-input-checkbox-label-color, var(--utrecht-document-color));
75
+ padding: var(--conduction-input-checkbox-label-container-padding);
76
+ }
77
+
78
+ .checkbox + label::before {
79
+ content: " ";
80
+ display: inline-block;
81
+ vertical-align: middle;
82
+ margin: var(--conduction-input-checkbox-label-container-margin);
83
+ width: 13px;
84
+ height: 13px;
85
+ background-color: var(--conduction-input-checkbox-color);
86
+ border-width: var(--conduction-input-checkbox-border-width);
87
+ border-style: var(--conduction-input-checkbox-border-style);
88
+ border-color: var(--conduction-input-checkbox-border-color);
89
+ border-radius: var(--conduction-input-checkbox-border-radius);
90
+ box-shadow: var(--conduction-input-checkbox-box-shadow);
91
+ box-sizing: border-box;
92
+ }
93
+
94
+ .checkbox:focus + label::before,
95
+ .checkbox:hover:focus + label::before,
96
+ .checkbox:checked:focus + label::before,
97
+ .checkbox:checked:hover:focus + label::before {
98
+ outline-width: var(--conduction-input-checkbox-focus-outline-width);
99
+ outline-style: var(--conduction-input-checkbox-focus-outline-style);
100
+ outline-color: var(--conduction-input-checkbox-focus-outline-color);
101
+ outline-offset: var(--conduction-input-checkbox-focus-outline-offset);
102
+ margin: var(--conduction-input-checkbox-label-container-margin);
103
+ box-sizing: border-box;
104
+ }
105
+
106
+ .checkbox:hover + label::before {
107
+ content: " ";
108
+ display: inline-block;
109
+ vertical-align: middle;
110
+ margin: var(--conduction-input-checkbox-label-container-margin);
111
+ width: 13px;
112
+ height: 13px;
113
+ background-color: var(--conduction-input-checkbox-hover-color);
114
+ border-width: var(--conduction-input-checkbox-hover-border-width, var(--conduction-input-checkbox-border-width));
115
+ border-style: var(--conduction-input-checkbox-hover-border-style, var(--conduction-input-checkbox-border-style));
116
+ border-color: var(--conduction-input-checkbox-hover-border-color, var(--conduction-input-checkbox-border-color));
117
+ border-radius: var(--conduction-input-checkbox-hover-border-radius, var(--conduction-input-checkbox-border-radius));
118
+ box-shadow: var(--conduction-input-checkbox-hover-box-shadow, var(--conduction-input-checkbox-box-shadow));
119
+ }
120
+
121
+ /* Checked */
122
+
123
+ .checkbox:checked + label::before {
124
+ content: " ";
125
+ display: inline-block;
126
+ vertical-align: middle;
127
+ margin: var(--conduction-input-checkbox-label-container-margin);
128
+ width: 13px;
129
+ height: 13px;
130
+ background-color: var(--conduction-input-checkbox-checked-color);
131
+ border-width: var(--conduction-input-checkbox-checked-border-width);
132
+ border-style: var(--conduction-input-checkbox-checked-border-style);
133
+ border-color: var(--conduction-input-checkbox-checked-border-color);
134
+ border-radius: var(--conduction-input-checkbox-checked-border-radius);
135
+ box-shadow: var(--conduction-input-checkbox-checked-box-shadow);
136
+ }
137
+
138
+ .checkbox:checked:hover + label::before {
139
+ content: " ";
140
+ display: inline-block;
141
+ vertical-align: middle;
142
+ margin: var(--conduction-input-checkbox-label-container-margin);
143
+ width: 13px;
144
+ height: 13px;
145
+ background-color: var(--conduction-input-checkbox-checked-hover-color, var(--conduction-input-checkbox-checked-color));
146
+ border-width: var(--conduction-input-checkbox-checked-hover-border-width, var(--conduction-input-checkbox-checked-border-width));
147
+ border-style: var(--conduction-input-checkbox-checked-hover-border-style, var(--conduction-input-checkbox-checked-border-style));
148
+ border-color: var(--conduction-input-checkbox-checked-hover-border-color, var(--conduction-input-checkbox-checked-border-color));
149
+ border-radius: var(--conduction-input-checkbox-checked-hover-border-radius, var(--conduction-input-checkbox-checked-border-radius));
150
+ box-shadow: var(--conduction-input-checkbox-checked-hover-box-shadow, var(--conduction-input-checkbox-checked-box-shadow));
151
+ }
152
+
153
+ .checkbox:checked + label::after {
154
+ content: " ";
155
+ background-image: var(--conduciton-input-checkbox-checkmark-url);
156
+ background-repeat: no-repeat;
157
+ background-size: 13px 13px;
158
+ background-position: calc(var(--conduction-input-checkbox-label-container-padding) + var(--conduction-input-checkbox-label-container-margin)) center;
159
+ position: absolute;
160
+ display: flex;
161
+ justify-content: center;
162
+ align-items: center;
163
+ margin-left: 0px;
164
+ left: 0px;
165
+ top: 0px;
166
+ text-align: center;
167
+ background-color: transparent;
168
+ font-size: 10px;
169
+ height: 100%;
170
+ width: 100%;
171
+ }
172
+
173
+ /* Disabled */
174
+
175
+ .checkbox:disabled:hover + label {
176
+ cursor: default;
177
+ }
178
+
179
+ .checkbox:disabled + label::before {
180
+ content: " ";
181
+ display: inline-block;
182
+ vertical-align: middle;
183
+ margin: var(--conduction-input-checkbox-label-container-margin);
184
+ width: 13px;
185
+ height: 13px;
186
+ background-color: var(--conduction-input-checkbox-disabled-color);
187
+ border-width: var(--conduction-input-checkbox-disabled-border-width);
188
+ border-style: var(--conduction-input-checkbox-disabled-border-style);
189
+ border-color: var(--conduction-input-checkbox-disabled-border-color);
190
+ border-radius: var(--conduction-input-checkbox-disabled-border-radius);
191
+ box-shadow: var(--conduction-input-checkbox-disabled-box-shadow);
192
+ }
193
+
194
+ .checkbox:disabled:hover + label::before {
195
+ content: " ";
196
+ display: inline-block;
197
+ vertical-align: middle;
198
+ margin: var(--conduction-input-checkbox-label-container-margin);
199
+ width: 13px;
200
+ height: 13px;
201
+ background-color: var(--conduction-input-checkbox-disabled-hover-color, var(--conduction-input-checkbox-disabled-color));
202
+ border-width: var(--conduction-input-checkbox-disabled-hover-border-width, var(--conduction-input-checkbox-disabled-border-width));
203
+ border-style: var(--conduction-input-checkbox-disabled-hover-border-style, var(--conduction-input-checkbox-disabled-border-style));
204
+ border-color: var(--conduction-input-checkbox-disabled-hover-border-color, var(--conduction-input-checkbox-disabled-border-color));
205
+ border-radius: var(--conduction-input-checkbox-disabled-hover-border-radius, var(--conduction-input-checkbox-disabled-border-radius));
206
+ box-shadow: var(--conduction-input-checkbox-disabled-hover-box-shadow, var(--conduction-input-checkbox-disabled-box-shadow));
207
+ cursor: default;
208
+ }
209
+
210
+ .checkbox:disabled:checked + label::after {
211
+ cursor: default;
212
+ }
package/tsconfig.json CHANGED
@@ -15,7 +15,15 @@
15
15
  "strict": true,
16
16
  "skipLibCheck": true
17
17
  },
18
- "hooks": ["copy-files"],
19
- "include": ["src", "src/**/*.css"],
20
- "exclude": ["node_modules", "**/__tests__/*", "lib/**/*"]
18
+ "hooks": [
19
+ "copy-files"
20
+ ],
21
+ "include": [
22
+ "src",
23
+ "src/**/*.css"
24
+ ],
25
+ "exclude": [
26
+ "node_modules",
27
+ "**/__tests__/*"
28
+ ]
21
29
  }