@prokodo/ui 1.0.5 → 1.0.6
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/components/RTE/RTE.css +2 -0
- package/dist/components/accordion/Accordion.css +4 -0
- package/dist/components/autocomplete/Autocomplete.css +2 -0
- package/dist/components/avatar/Avatar.css +3 -0
- package/dist/components/button/Button.css +4 -0
- package/dist/components/calendly/Calendly.css +2 -0
- package/dist/components/card/Card.css +7 -0
- package/dist/components/carousel/Carousel.css +2 -0
- package/dist/components/datePicker/DatePicker.css +2 -0
- package/dist/components/dialog/Dialog.css +2 -0
- package/dist/components/drawer/Drawer.css +3 -0
- package/dist/components/dynamic-list/DynamicList.css +5 -0
- package/dist/components/form/Form.css +184 -0
- package/dist/components/headline/Headline.css +2 -0
- package/dist/components/image-text/ImageText.css +8 -0
- package/dist/components/input/Input.css +2 -0
- package/dist/components/inputOTP/InputOTP.css +2 -0
- package/dist/components/list/List.css +4 -0
- package/dist/components/map/Map.css +2 -0
- package/dist/components/post-item/PostItem.css +165 -0
- package/dist/components/post-teaser/PostTeaser.css +8 -0
- package/dist/components/post-widget/PostWidget.css +5 -0
- package/dist/components/post-widget-carousel/PostWidgetCarousel.css +7 -0
- package/dist/components/quote/Quote.css +5 -0
- package/dist/components/rating/Rating.css +2 -0
- package/dist/components/rich-text/RichText.css +5 -0
- package/dist/components/select/Select.css +2 -0
- package/dist/components/sidenav/SideNav.css +4 -0
- package/dist/components/slider/Slider.css +2 -0
- package/dist/components/snackbar/Snackbar.css +2 -0
- package/dist/components/stepper/Stepper.css +2 -0
- package/dist/components/switch/Switch.css +2 -0
- package/dist/components/table/Table.css +6 -0
- package/dist/components/tabs/Tabs.css +2 -0
- package/dist/components/teaser/Teaser.css +8 -0
- package/dist/constants/project.js +1 -1
- package/dist/theme-tokens.css +723 -0
- package/package.json +3 -2
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
@import "../animated/Animated.css";
|
|
2
|
+
@import "../headline/Headline.css";
|
|
3
|
+
@import "../image/Image.css";
|
|
4
|
+
@import "../link/Link.css";
|
|
5
|
+
@import "../rich-text/RichText.css";
|
|
6
|
+
@import "../skeleton/Skeleton.css";
|
|
7
|
+
|
|
1
8
|
/* stylelint-disable */
|
|
2
9
|
/**
|
|
3
10
|
* Calculates a rem-based value by a given pixel size.
|
|
@@ -1,3 +1,18 @@
|
|
|
1
|
+
@import "../autocomplete/Autocomplete.css";
|
|
2
|
+
@import "../button/Button.css";
|
|
3
|
+
@import "../checkbox/Checkbox.css";
|
|
4
|
+
@import "../checkbox-group/CheckboxGroup.css";
|
|
5
|
+
@import "../datePicker/DatePicker.css";
|
|
6
|
+
@import "../dynamic-list/DynamicList.css";
|
|
7
|
+
@import "../grid/Grid.css";
|
|
8
|
+
@import "../headline/Headline.css";
|
|
9
|
+
@import "../input/Input.css";
|
|
10
|
+
@import "../inputOTP/InputOTP.css";
|
|
11
|
+
@import "../rating/Rating.css";
|
|
12
|
+
@import "../select/Select.css";
|
|
13
|
+
@import "../slider/Slider.css";
|
|
14
|
+
@import "../switch/Switch.css";
|
|
15
|
+
|
|
1
16
|
/* stylelint-disable */
|
|
2
17
|
/**
|
|
3
18
|
* Calculates a rem-based value by a given pixel size.
|
|
@@ -151,4 +166,173 @@
|
|
|
151
166
|
|
|
152
167
|
.prokodo-FormField {
|
|
153
168
|
padding-bottom: 1rem;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
/* stylelint-disable */
|
|
172
|
+
/**
|
|
173
|
+
* Calculates a rem-based value by a given pixel size.
|
|
174
|
+
*/
|
|
175
|
+
/* stylelint-disable */
|
|
176
|
+
/**
|
|
177
|
+
* Applies flex-column and gap.
|
|
178
|
+
*/
|
|
179
|
+
/*
|
|
180
|
+
As example (light, primary)
|
|
181
|
+
See defined modes in designsystem/config/gradients
|
|
182
|
+
*/
|
|
183
|
+
/**
|
|
184
|
+
* Mixin that renders a media query that target screens that are larger than the
|
|
185
|
+
* given size.
|
|
186
|
+
*/
|
|
187
|
+
/**
|
|
188
|
+
* Mixin that renders a media query that target screens that are smaller than the
|
|
189
|
+
* given size.
|
|
190
|
+
*/
|
|
191
|
+
/**
|
|
192
|
+
* Mixin that renders a media query that target screens in between the given range.
|
|
193
|
+
*/
|
|
194
|
+
/**
|
|
195
|
+
* Mixin that renders a media query that target screens that have height larger than the
|
|
196
|
+
* given size.
|
|
197
|
+
*/
|
|
198
|
+
/**
|
|
199
|
+
* Mixin that renders a media query that target screens that have height smaller than the
|
|
200
|
+
* given size.
|
|
201
|
+
*/
|
|
202
|
+
/* stylelint-disable */
|
|
203
|
+
/* M3/Elevation Light/1 */
|
|
204
|
+
/* M3/Elevation Light/2 */
|
|
205
|
+
/* M3/Elevation/5 */
|
|
206
|
+
/* M3/Elevation/1 Text */
|
|
207
|
+
/* Inner elevations */
|
|
208
|
+
/* stylelint-disable */
|
|
209
|
+
/**
|
|
210
|
+
* Visually hides an element but not removes them for screen readers.
|
|
211
|
+
*/
|
|
212
|
+
/**
|
|
213
|
+
* The inverse of the `hidden` helper to reset a previously hidden element to be
|
|
214
|
+
* visible for users.
|
|
215
|
+
*/
|
|
216
|
+
/**
|
|
217
|
+
* Creates a selector for :hover effects depending on the current user input
|
|
218
|
+
* device. If the input device is a mouse, this hover effect will appear.
|
|
219
|
+
* Keyboard and touch inputs are ignored.
|
|
220
|
+
*
|
|
221
|
+
* Example usage:
|
|
222
|
+
* .link {
|
|
223
|
+
* color: blue;
|
|
224
|
+
*
|
|
225
|
+
* @include when-hovered() {
|
|
226
|
+
* color: green;
|
|
227
|
+
* }
|
|
228
|
+
* }
|
|
229
|
+
*/
|
|
230
|
+
/**
|
|
231
|
+
* Creates a selector for :active effects depending on the current user input
|
|
232
|
+
* device. The state applies when the input device is a mouse or keyboard. Touch
|
|
233
|
+
* devices will not show a pressed state.
|
|
234
|
+
*
|
|
235
|
+
* Example usage:
|
|
236
|
+
* .link {
|
|
237
|
+
* box-shadow: none;
|
|
238
|
+
*
|
|
239
|
+
* @include when-pressed() {
|
|
240
|
+
* box-shadow: inset 0 2px 4px grey;
|
|
241
|
+
* }
|
|
242
|
+
* }
|
|
243
|
+
*/
|
|
244
|
+
/**
|
|
245
|
+
* Creates a selector for :focus effects depending on the current user input
|
|
246
|
+
* device. When the user navigates using a keyboard, the focus effect defined in
|
|
247
|
+
* here is applied. For other input devices they don't show up.
|
|
248
|
+
*
|
|
249
|
+
* Example usage:
|
|
250
|
+
* .link {
|
|
251
|
+
* text-decoration: none;
|
|
252
|
+
*
|
|
253
|
+
* @include when-focused() {
|
|
254
|
+
* text-decoration: underline;
|
|
255
|
+
* }
|
|
256
|
+
* }
|
|
257
|
+
*/
|
|
258
|
+
/**
|
|
259
|
+
* Creates a selector for :focus-within effects depending on the current user
|
|
260
|
+
* input device. When the user navigates using a keyboard, the focus effect
|
|
261
|
+
* defined in here is applied. For other input devices they don't show up.
|
|
262
|
+
*
|
|
263
|
+
* Example usage:
|
|
264
|
+
* .link {
|
|
265
|
+
* img {
|
|
266
|
+
* opacity: 0.75;
|
|
267
|
+
*
|
|
268
|
+
* @include when-focused-within() {
|
|
269
|
+
* opacity: 1;
|
|
270
|
+
* }
|
|
271
|
+
* }
|
|
272
|
+
* }
|
|
273
|
+
*/
|
|
274
|
+
/**
|
|
275
|
+
* Wrapper for media query "prefers-reduced-motion".
|
|
276
|
+
*/
|
|
277
|
+
/**
|
|
278
|
+
* This helper hides the outline but still makes it visible for
|
|
279
|
+
* Windows high-contrast users. Use this instead of `outline: 0;`.
|
|
280
|
+
*/
|
|
281
|
+
/**
|
|
282
|
+
* This helper hides the outline but still makes it visible for
|
|
283
|
+
* Windows high-contrast users. Use this instead of `outline: 0;`.
|
|
284
|
+
*/
|
|
285
|
+
/**
|
|
286
|
+
* Renders an alternative, but application consistent focus-ring.
|
|
287
|
+
*/
|
|
288
|
+
/**
|
|
289
|
+
* Specifies the outer layout for all contents across breakpoints. Apply this
|
|
290
|
+
* mixin to the container element, to center the contents on the screen within
|
|
291
|
+
* the layout offsets.
|
|
292
|
+
*/
|
|
293
|
+
/**
|
|
294
|
+
* This mixin specifies basic text-styles for components that render a richtext
|
|
295
|
+
* content.
|
|
296
|
+
*/
|
|
297
|
+
.prokodo-FormResponse {
|
|
298
|
+
padding: 0 1rem;
|
|
299
|
+
}
|
|
300
|
+
.prokodo-FormResponse__success {
|
|
301
|
+
color: var(--color-success);
|
|
302
|
+
font-weight: 700;
|
|
303
|
+
}
|
|
304
|
+
.prokodo-FormResponse__errors {
|
|
305
|
+
display: block;
|
|
306
|
+
margin-bottom: 0.75rem;
|
|
307
|
+
color: var(--color-grey-300);
|
|
308
|
+
}
|
|
309
|
+
.prokodo-FormResponse__errors__item {
|
|
310
|
+
display: block;
|
|
311
|
+
padding-bottom: 1rem;
|
|
312
|
+
font-weight: 500;
|
|
313
|
+
font-size: 1.125rem;
|
|
314
|
+
font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
315
|
+
font-style: normal;
|
|
316
|
+
line-height: 1.55;
|
|
317
|
+
letter-spacing: 0.03em;
|
|
318
|
+
text-transform: none;
|
|
319
|
+
text-align: left;
|
|
320
|
+
text-decoration: none;
|
|
321
|
+
}
|
|
322
|
+
@media screen and (min-width: 480px) {
|
|
323
|
+
.prokodo-FormResponse__errors__item {
|
|
324
|
+
font-size: 1.125rem;
|
|
325
|
+
line-height: 1.5;
|
|
326
|
+
}
|
|
327
|
+
}
|
|
328
|
+
@media screen and (min-width: 960px) {
|
|
329
|
+
.prokodo-FormResponse__errors__item {
|
|
330
|
+
font-size: 1.125rem;
|
|
331
|
+
line-height: 1.5;
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
.prokodo-FormResponse__errors__desc {
|
|
335
|
+
display: block;
|
|
336
|
+
padding: 0;
|
|
337
|
+
color: var(--color-error);
|
|
154
338
|
}
|
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
@import "../animated/Animated.css";
|
|
2
|
+
@import "../button/Button.css";
|
|
3
|
+
@import "../grid/Grid.css";
|
|
4
|
+
@import "../headline/Headline.css";
|
|
5
|
+
@import "../image/Image.css";
|
|
6
|
+
@import "../lottie/Lottie.css";
|
|
7
|
+
@import "../rich-text/RichText.css";
|
|
8
|
+
|
|
1
9
|
/* stylelint-disable */
|
|
2
10
|
/**
|
|
3
11
|
* Calculates a rem-based value by a given pixel size.
|
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
@import "../animated/Animated.css";
|
|
2
|
+
@import "../avatar/Avatar.css";
|
|
3
|
+
@import "../button/Button.css";
|
|
4
|
+
@import "../card/Card.css";
|
|
5
|
+
@import "../headline/Headline.css";
|
|
6
|
+
@import "../image/Image.css";
|
|
7
|
+
@import "../rich-text/RichText.css";
|
|
8
|
+
|
|
1
9
|
/* stylelint-disable */
|
|
2
10
|
/**
|
|
3
11
|
* Calculates a rem-based value by a given pixel size.
|
|
@@ -286,4 +294,161 @@
|
|
|
286
294
|
.prokodo-PostItem__button {
|
|
287
295
|
width: auto;
|
|
288
296
|
}
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
/* stylelint-disable */
|
|
300
|
+
/**
|
|
301
|
+
* Calculates a rem-based value by a given pixel size.
|
|
302
|
+
*/
|
|
303
|
+
/* stylelint-disable */
|
|
304
|
+
/**
|
|
305
|
+
* Applies flex-column and gap.
|
|
306
|
+
*/
|
|
307
|
+
/*
|
|
308
|
+
As example (light, primary)
|
|
309
|
+
See defined modes in designsystem/config/gradients
|
|
310
|
+
*/
|
|
311
|
+
/**
|
|
312
|
+
* Mixin that renders a media query that target screens that are larger than the
|
|
313
|
+
* given size.
|
|
314
|
+
*/
|
|
315
|
+
/**
|
|
316
|
+
* Mixin that renders a media query that target screens that are smaller than the
|
|
317
|
+
* given size.
|
|
318
|
+
*/
|
|
319
|
+
/**
|
|
320
|
+
* Mixin that renders a media query that target screens in between the given range.
|
|
321
|
+
*/
|
|
322
|
+
/**
|
|
323
|
+
* Mixin that renders a media query that target screens that have height larger than the
|
|
324
|
+
* given size.
|
|
325
|
+
*/
|
|
326
|
+
/**
|
|
327
|
+
* Mixin that renders a media query that target screens that have height smaller than the
|
|
328
|
+
* given size.
|
|
329
|
+
*/
|
|
330
|
+
/* stylelint-disable */
|
|
331
|
+
/* M3/Elevation Light/1 */
|
|
332
|
+
/* M3/Elevation Light/2 */
|
|
333
|
+
/* M3/Elevation/5 */
|
|
334
|
+
/* M3/Elevation/1 Text */
|
|
335
|
+
/* Inner elevations */
|
|
336
|
+
/* stylelint-disable */
|
|
337
|
+
/**
|
|
338
|
+
* Visually hides an element but not removes them for screen readers.
|
|
339
|
+
*/
|
|
340
|
+
/**
|
|
341
|
+
* The inverse of the `hidden` helper to reset a previously hidden element to be
|
|
342
|
+
* visible for users.
|
|
343
|
+
*/
|
|
344
|
+
/**
|
|
345
|
+
* Creates a selector for :hover effects depending on the current user input
|
|
346
|
+
* device. If the input device is a mouse, this hover effect will appear.
|
|
347
|
+
* Keyboard and touch inputs are ignored.
|
|
348
|
+
*
|
|
349
|
+
* Example usage:
|
|
350
|
+
* .link {
|
|
351
|
+
* color: blue;
|
|
352
|
+
*
|
|
353
|
+
* @include when-hovered() {
|
|
354
|
+
* color: green;
|
|
355
|
+
* }
|
|
356
|
+
* }
|
|
357
|
+
*/
|
|
358
|
+
/**
|
|
359
|
+
* Creates a selector for :active effects depending on the current user input
|
|
360
|
+
* device. The state applies when the input device is a mouse or keyboard. Touch
|
|
361
|
+
* devices will not show a pressed state.
|
|
362
|
+
*
|
|
363
|
+
* Example usage:
|
|
364
|
+
* .link {
|
|
365
|
+
* box-shadow: none;
|
|
366
|
+
*
|
|
367
|
+
* @include when-pressed() {
|
|
368
|
+
* box-shadow: inset 0 2px 4px grey;
|
|
369
|
+
* }
|
|
370
|
+
* }
|
|
371
|
+
*/
|
|
372
|
+
/**
|
|
373
|
+
* Creates a selector for :focus effects depending on the current user input
|
|
374
|
+
* device. When the user navigates using a keyboard, the focus effect defined in
|
|
375
|
+
* here is applied. For other input devices they don't show up.
|
|
376
|
+
*
|
|
377
|
+
* Example usage:
|
|
378
|
+
* .link {
|
|
379
|
+
* text-decoration: none;
|
|
380
|
+
*
|
|
381
|
+
* @include when-focused() {
|
|
382
|
+
* text-decoration: underline;
|
|
383
|
+
* }
|
|
384
|
+
* }
|
|
385
|
+
*/
|
|
386
|
+
/**
|
|
387
|
+
* Creates a selector for :focus-within effects depending on the current user
|
|
388
|
+
* input device. When the user navigates using a keyboard, the focus effect
|
|
389
|
+
* defined in here is applied. For other input devices they don't show up.
|
|
390
|
+
*
|
|
391
|
+
* Example usage:
|
|
392
|
+
* .link {
|
|
393
|
+
* img {
|
|
394
|
+
* opacity: 0.75;
|
|
395
|
+
*
|
|
396
|
+
* @include when-focused-within() {
|
|
397
|
+
* opacity: 1;
|
|
398
|
+
* }
|
|
399
|
+
* }
|
|
400
|
+
* }
|
|
401
|
+
*/
|
|
402
|
+
/**
|
|
403
|
+
* Wrapper for media query "prefers-reduced-motion".
|
|
404
|
+
*/
|
|
405
|
+
/**
|
|
406
|
+
* This helper hides the outline but still makes it visible for
|
|
407
|
+
* Windows high-contrast users. Use this instead of `outline: 0;`.
|
|
408
|
+
*/
|
|
409
|
+
/**
|
|
410
|
+
* This helper hides the outline but still makes it visible for
|
|
411
|
+
* Windows high-contrast users. Use this instead of `outline: 0;`.
|
|
412
|
+
*/
|
|
413
|
+
/**
|
|
414
|
+
* Renders an alternative, but application consistent focus-ring.
|
|
415
|
+
*/
|
|
416
|
+
/**
|
|
417
|
+
* Specifies the outer layout for all contents across breakpoints. Apply this
|
|
418
|
+
* mixin to the container element, to center the contents on the screen within
|
|
419
|
+
* the layout offsets.
|
|
420
|
+
*/
|
|
421
|
+
/**
|
|
422
|
+
* This mixin specifies basic text-styles for components that render a richtext
|
|
423
|
+
* content.
|
|
424
|
+
*/
|
|
425
|
+
.prokodo-PostItemAuthor {
|
|
426
|
+
display: flex;
|
|
427
|
+
align-items: center;
|
|
428
|
+
padding-right: 1.5rem;
|
|
429
|
+
}
|
|
430
|
+
.prokodo-PostItemAuthor__name {
|
|
431
|
+
padding-left: 0.75rem;
|
|
432
|
+
color: var(--color-grey-500);
|
|
433
|
+
font-weight: 500;
|
|
434
|
+
font-size: 1.125rem;
|
|
435
|
+
font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
436
|
+
font-style: normal;
|
|
437
|
+
line-height: 1.55;
|
|
438
|
+
letter-spacing: 0.03em;
|
|
439
|
+
text-transform: none;
|
|
440
|
+
text-align: left;
|
|
441
|
+
text-decoration: none;
|
|
442
|
+
}
|
|
443
|
+
@media screen and (min-width: 480px) {
|
|
444
|
+
.prokodo-PostItemAuthor__name {
|
|
445
|
+
font-size: 1.125rem;
|
|
446
|
+
line-height: 1.5;
|
|
447
|
+
}
|
|
448
|
+
}
|
|
449
|
+
@media screen and (min-width: 960px) {
|
|
450
|
+
.prokodo-PostItemAuthor__name {
|
|
451
|
+
font-size: 1.125rem;
|
|
452
|
+
line-height: 1.5;
|
|
453
|
+
}
|
|
289
454
|
}
|
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
@import "../card/Card.css";
|
|
2
|
+
@import "../chip/Chip.css";
|
|
3
|
+
@import "../headline/Headline.css";
|
|
4
|
+
@import "../icon/Icon.css";
|
|
5
|
+
@import "../image/Image.css";
|
|
6
|
+
@import "../link/Link.css";
|
|
7
|
+
@import "../rich-text/RichText.css";
|
|
8
|
+
|
|
1
9
|
/* stylelint-disable */
|
|
2
10
|
/**
|
|
3
11
|
* Calculates a rem-based value by a given pixel size.
|
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
@import "../button/Button.css";
|
|
2
|
+
@import "../card/Card.css";
|
|
3
|
+
@import "../carousel/Carousel.css";
|
|
4
|
+
@import "../headline/Headline.css";
|
|
5
|
+
@import "../image/Image.css";
|
|
6
|
+
@import "../link/Link.css";
|
|
7
|
+
|
|
1
8
|
/* stylelint-disable */
|
|
2
9
|
/**
|
|
3
10
|
* Calculates a rem-based value by a given pixel size.
|
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
@import "../card/Card.css";
|
|
2
|
+
@import "../headline/Headline.css";
|
|
3
|
+
@import "../icon/Icon.css";
|
|
4
|
+
@import "../image/Image.css";
|
|
5
|
+
@import "../link/Link.css";
|
|
6
|
+
@import "../lottie/Lottie.css";
|
|
7
|
+
@import "../rich-text/RichText.css";
|
|
8
|
+
|
|
1
9
|
/* stylelint-disable */
|
|
2
10
|
/**
|
|
3
11
|
* Calculates a rem-based value by a given pixel size.
|