hr-design-system-handlebars 1.110.9 → 1.110.11
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/CHANGELOG.md +25 -0
- package/dist/assets/index.css +61 -48
- package/dist/views/components/forms/choice.hbs +6 -5
- package/dist/views/components/forms/controls.hbs +3 -3
- package/dist/views/components/forms/error_icon.hbs +1 -1
- package/dist/views/components/forms/input.hbs +5 -26
- package/dist/views/components/forms/message.hbs +17 -0
- package/dist/views/components/forms/select.hbs +4 -4
- package/dist/views/components/forms/success_icon.hbs +3 -0
- package/dist/views/components/forms/textarea.hbs +4 -4
- package/dist/views/components/forms/webform.hbs +4 -2
- package/dist/views_static/components/forms/choice.hbs +6 -5
- package/dist/views_static/components/forms/controls.hbs +3 -3
- package/dist/views_static/components/forms/error_icon.hbs +1 -1
- package/dist/views_static/components/forms/input.hbs +5 -26
- package/dist/views_static/components/forms/message.hbs +17 -0
- package/dist/views_static/components/forms/select.hbs +4 -4
- package/dist/views_static/components/forms/success_icon.hbs +3 -0
- package/dist/views_static/components/forms/textarea.hbs +4 -4
- package/dist/views_static/components/forms/webform.hbs +4 -2
- package/package.json +1 -1
- package/src/assets/css/custom-utilities.css +1 -1
- package/src/assets/tailwind.css +11 -0
- package/src/stories/views/components/content/copytext/copytext-form.stories.js +3 -1
- package/src/stories/views/components/forms/choice.hbs +6 -5
- package/src/stories/views/components/forms/controls.hbs +3 -3
- package/src/stories/views/components/forms/error_icon.hbs +1 -1
- package/src/stories/views/components/forms/input.hbs +5 -26
- package/src/stories/views/components/forms/message.hbs +17 -0
- package/src/stories/views/components/forms/select.hbs +4 -4
- package/src/stories/views/components/forms/success_icon.hbs +3 -0
- package/src/stories/views/components/forms/textarea.hbs +4 -4
- package/src/stories/views/components/forms/webform.hbs +4 -2
- package/tailwind.config.js +3 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,28 @@
|
|
|
1
|
+
# v1.110.11 (Wed Oct 16 2024)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Forms colors and spacing v2 [#1115](https://github.com/mumprod/hr-design-system-handlebars/pull/1115) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v1.110.10 (Wed Oct 16 2024)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- Dpe 3308 error&success message [#1114](https://github.com/mumprod/hr-design-system-handlebars/pull/1114) ([@StefanVesper](https://github.com/StefanVesper) [@vascoeduardo](https://github.com/vascoeduardo))
|
|
18
|
+
|
|
19
|
+
#### Authors: 2
|
|
20
|
+
|
|
21
|
+
- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
|
|
22
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
1
26
|
# v1.110.9 (Wed Oct 16 2024)
|
|
2
27
|
|
|
3
28
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -1722,6 +1722,9 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
1722
1722
|
.min-h-3 {
|
|
1723
1723
|
min-height: 0.75rem;
|
|
1724
1724
|
}
|
|
1725
|
+
.min-h-6 {
|
|
1726
|
+
min-height: 1.5rem;
|
|
1727
|
+
}
|
|
1725
1728
|
.min-h-\[88px\] {
|
|
1726
1729
|
min-height: 88px;
|
|
1727
1730
|
}
|
|
@@ -2030,6 +2033,9 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2030
2033
|
.cursor-pointer {
|
|
2031
2034
|
cursor: pointer;
|
|
2032
2035
|
}
|
|
2036
|
+
.cursor-text {
|
|
2037
|
+
cursor: text;
|
|
2038
|
+
}
|
|
2033
2039
|
.resize {
|
|
2034
2040
|
resize: both;
|
|
2035
2041
|
}
|
|
@@ -2265,10 +2271,6 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2265
2271
|
.rounded-lg {
|
|
2266
2272
|
border-radius: 0.5rem;
|
|
2267
2273
|
}
|
|
2268
|
-
.rounded-b {
|
|
2269
|
-
border-bottom-right-radius: 0.25rem;
|
|
2270
|
-
border-bottom-left-radius: 0.25rem;
|
|
2271
|
-
}
|
|
2272
2274
|
.rounded-l {
|
|
2273
2275
|
border-top-left-radius: 0.25rem;
|
|
2274
2276
|
border-bottom-left-radius: 0.25rem;
|
|
@@ -2330,9 +2332,6 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2330
2332
|
.border-t {
|
|
2331
2333
|
border-top-width: 1px;
|
|
2332
2334
|
}
|
|
2333
|
-
.border-t-0 {
|
|
2334
|
-
border-top-width: 0px;
|
|
2335
|
-
}
|
|
2336
2335
|
.border-t-\[3px\] {
|
|
2337
2336
|
border-top-width: 3px;
|
|
2338
2337
|
}
|
|
@@ -2396,6 +2395,14 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2396
2395
|
border-color: #000000;
|
|
2397
2396
|
border-color: var(--color-footer-heading);
|
|
2398
2397
|
}
|
|
2398
|
+
.border-form-highlight {
|
|
2399
|
+
border-color: #006eb7;
|
|
2400
|
+
border-color: var(--color-form-highlight);
|
|
2401
|
+
}
|
|
2402
|
+
.border-form-highlight-dark {
|
|
2403
|
+
border-color: #006eb7;
|
|
2404
|
+
border-color: var(--color-form-highlight-dark);
|
|
2405
|
+
}
|
|
2399
2406
|
.border-gray-200 {
|
|
2400
2407
|
--tw-border-opacity: 1;
|
|
2401
2408
|
border-color: rgba(229, 231, 235, 1);
|
|
@@ -2421,14 +2428,6 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2421
2428
|
border-color: rgba(96, 96, 96, 1);
|
|
2422
2429
|
border-color: rgba(96, 96, 96, var(--tw-border-opacity));
|
|
2423
2430
|
}
|
|
2424
|
-
.border-link {
|
|
2425
|
-
border-color: #006eb7;
|
|
2426
|
-
border-color: var(--color-link);
|
|
2427
|
-
}
|
|
2428
|
-
.border-link-dark {
|
|
2429
|
-
border-color: #006eb7;
|
|
2430
|
-
border-color: var(--color-link-dark);
|
|
2431
|
-
}
|
|
2432
2431
|
.border-navigation-border-color {
|
|
2433
2432
|
border-color: #fff;
|
|
2434
2433
|
border-color: var(--color-navigation-border-color);
|
|
@@ -2437,11 +2436,6 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2437
2436
|
border-color: #005293;
|
|
2438
2437
|
border-color: var(--color-primary-ds);
|
|
2439
2438
|
}
|
|
2440
|
-
.border-red-400 {
|
|
2441
|
-
--tw-border-opacity: 1;
|
|
2442
|
-
border-color: rgba(248, 113, 113, 1);
|
|
2443
|
-
border-color: rgba(248, 113, 113, var(--tw-border-opacity));
|
|
2444
|
-
}
|
|
2445
2439
|
.border-servicenavigation-border-color {
|
|
2446
2440
|
border-color: #fff;
|
|
2447
2441
|
border-color: var(--color-servicenavigation-border-color);
|
|
@@ -2649,16 +2643,6 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2649
2643
|
background-color: #005293;
|
|
2650
2644
|
background-color: var(--color-primary-ds);
|
|
2651
2645
|
}
|
|
2652
|
-
.bg-red-100 {
|
|
2653
|
-
--tw-bg-opacity: 1;
|
|
2654
|
-
background-color: rgba(254, 226, 226, 1);
|
|
2655
|
-
background-color: rgba(254, 226, 226, var(--tw-bg-opacity));
|
|
2656
|
-
}
|
|
2657
|
-
.bg-red-500 {
|
|
2658
|
-
--tw-bg-opacity: 1;
|
|
2659
|
-
background-color: rgba(239, 68, 68, 1);
|
|
2660
|
-
background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
|
|
2661
|
-
}
|
|
2662
2646
|
.bg-slate-200 {
|
|
2663
2647
|
--tw-bg-opacity: 1;
|
|
2664
2648
|
background-color: rgba(226, 232, 240, 1);
|
|
@@ -2747,9 +2731,6 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2747
2731
|
.fill-\[\#606060\] {
|
|
2748
2732
|
fill: #606060;
|
|
2749
2733
|
}
|
|
2750
|
-
.fill-blue-500 {
|
|
2751
|
-
fill: #3b82f6;
|
|
2752
|
-
}
|
|
2753
2734
|
.fill-blue-congress-hex {
|
|
2754
2735
|
fill: #005293;
|
|
2755
2736
|
}
|
|
@@ -2778,6 +2759,10 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2778
2759
|
fill: #000000;
|
|
2779
2760
|
fill: var(--color-footer-text);
|
|
2780
2761
|
}
|
|
2762
|
+
.fill-form-highlight {
|
|
2763
|
+
fill: #006eb7;
|
|
2764
|
+
fill: var(--color-form-highlight);
|
|
2765
|
+
}
|
|
2781
2766
|
.fill-link {
|
|
2782
2767
|
fill: #006eb7;
|
|
2783
2768
|
fill: var(--color-link);
|
|
@@ -3311,6 +3296,11 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3311
3296
|
color: #005293;
|
|
3312
3297
|
color: var(--color-primary-ds);
|
|
3313
3298
|
}
|
|
3299
|
+
.text-red-700 {
|
|
3300
|
+
--tw-text-opacity: 1;
|
|
3301
|
+
color: rgba(185, 28, 28, 1);
|
|
3302
|
+
color: rgba(185, 28, 28, var(--tw-text-opacity));
|
|
3303
|
+
}
|
|
3314
3304
|
.text-search-footer-text {
|
|
3315
3305
|
color: #000000;
|
|
3316
3306
|
color: var(--color-search-footer-text);
|
|
@@ -3355,6 +3345,10 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3355
3345
|
color: #ffffff;
|
|
3356
3346
|
color: var(--color-ticker-teaser-label-byline);
|
|
3357
3347
|
}
|
|
3348
|
+
.text-toggle-confirmation {
|
|
3349
|
+
color: #2c7e13;
|
|
3350
|
+
color: var(--color-toggle-confirmation);
|
|
3351
|
+
}
|
|
3358
3352
|
.text-toplineColor {
|
|
3359
3353
|
color: #006dc1;
|
|
3360
3354
|
color: var(--color-topline);
|
|
@@ -3575,7 +3569,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3575
3569
|
border-bottom-color: var(--color-secondary-ds);
|
|
3576
3570
|
}
|
|
3577
3571
|
.counter-reset {
|
|
3578
|
-
counter-reset:
|
|
3572
|
+
counter-reset: cnt1729089548088;
|
|
3579
3573
|
}
|
|
3580
3574
|
.placeholder-text-xs::-webkit-input-placeholder {
|
|
3581
3575
|
font-size: 0.75rem;
|
|
@@ -3989,7 +3983,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3989
3983
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
3990
3984
|
}
|
|
3991
3985
|
.-ordered {
|
|
3992
|
-
counter-increment:
|
|
3986
|
+
counter-increment: cnt1729089548088 1;
|
|
3993
3987
|
}
|
|
3994
3988
|
.-ordered::before {
|
|
3995
3989
|
position: absolute;
|
|
@@ -4007,7 +4001,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
4007
4001
|
--tw-text-opacity: 1;
|
|
4008
4002
|
color: rgba(0, 0, 0, 1);
|
|
4009
4003
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
4010
|
-
content: counter(
|
|
4004
|
+
content: counter(cnt1729089548088);
|
|
4011
4005
|
}
|
|
4012
4006
|
/*! ****************************/
|
|
4013
4007
|
/*! DataPolicy stuff */
|
|
@@ -4124,7 +4118,7 @@ select + label {
|
|
|
4124
4118
|
}
|
|
4125
4119
|
@supports selector(:has(+ *)) {
|
|
4126
4120
|
select + label {
|
|
4127
|
-
top:
|
|
4121
|
+
top: 1px !important;
|
|
4128
4122
|
--tw-translate-y: 0.75rem !important;
|
|
4129
4123
|
--tw-scale-x: 1 !important;
|
|
4130
4124
|
--tw-scale-y: 1 !important;
|
|
@@ -4340,6 +4334,8 @@ input[type='radio']:checked::after {
|
|
|
4340
4334
|
--structure-nav-text-mobile: var(--color-primary-ds);
|
|
4341
4335
|
|
|
4342
4336
|
--color-error: #cc1a14;
|
|
4337
|
+
--color-form-highlight: var(--color-link);
|
|
4338
|
+
--color-form-highlight-dark: var(--color-link-dark);
|
|
4343
4339
|
|
|
4344
4340
|
--feature-box-height: 0;
|
|
4345
4341
|
}
|
|
@@ -5000,6 +4996,9 @@ input[type='radio']:checked::after {
|
|
|
5000
4996
|
/* Font */
|
|
5001
4997
|
--font-title: RobotoCond, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
|
5002
4998
|
--font-weight-title: 700;
|
|
4999
|
+
|
|
5000
|
+
--color-form-highlight: var(--color-secondary-ds);
|
|
5001
|
+
--color-form-highlight-dark: var(--color-secondary-ds);
|
|
5003
5002
|
}
|
|
5004
5003
|
[data-theme='hr-sinfonieorchester'] .ardplayer.ardplayer-light-mode {
|
|
5005
5004
|
--ardplayer-color-primary-base: #AB2F2D;
|
|
@@ -5421,6 +5420,9 @@ input[type='radio']:checked::after {
|
|
|
5421
5420
|
--search-border-color-desktop: var(--color-navigation-icons);
|
|
5422
5421
|
|
|
5423
5422
|
--feature-box-height: 96px;
|
|
5423
|
+
|
|
5424
|
+
--color-form-highlight: var(--color-secondary-ds);
|
|
5425
|
+
--color-form-highlight-dark: var(--color-secondary-ds);
|
|
5424
5426
|
}
|
|
5425
5427
|
[data-theme='hr2'] .ardplayer.ardplayer-light-mode {
|
|
5426
5428
|
--ardplayer-color-primary-base: #8C033D;
|
|
@@ -5537,6 +5539,9 @@ input[type='radio']:checked::after {
|
|
|
5537
5539
|
--search-border-color-desktop: #606060;
|
|
5538
5540
|
|
|
5539
5541
|
--feature-box-height: 96px;
|
|
5542
|
+
|
|
5543
|
+
--color-form-highlight: var(--color-secondary-ds);
|
|
5544
|
+
--color-form-highlight-dark: var(--color-secondary-ds);
|
|
5540
5545
|
}
|
|
5541
5546
|
[data-theme='hr3'] .ardplayer.ardplayer-light-mode {
|
|
5542
5547
|
--ardplayer-color-primary-base: #c20016;
|
|
@@ -5917,13 +5922,13 @@ input[type='radio']:checked::after {
|
|
|
5917
5922
|
.last-of-type\:pb-3:last-of-type {
|
|
5918
5923
|
padding-bottom: 0.75rem;
|
|
5919
5924
|
}
|
|
5920
|
-
.checked\:border-
|
|
5925
|
+
.checked\:border-form-highlight:checked {
|
|
5921
5926
|
border-color: #006eb7;
|
|
5922
|
-
border-color: var(--color-
|
|
5927
|
+
border-color: var(--color-form-highlight);
|
|
5923
5928
|
}
|
|
5924
|
-
.checked\:bg-
|
|
5929
|
+
.checked\:bg-form-highlight:checked {
|
|
5925
5930
|
background-color: #006eb7;
|
|
5926
|
-
background-color: var(--color-
|
|
5931
|
+
background-color: var(--color-form-highlight);
|
|
5927
5932
|
}
|
|
5928
5933
|
.checked\:bg-white:checked {
|
|
5929
5934
|
--tw-bg-opacity: 1;
|
|
@@ -6186,9 +6191,9 @@ input[type='radio']:checked::after {
|
|
|
6186
6191
|
.peer:focus ~ .peer-focus\:border-r {
|
|
6187
6192
|
border-right-width: 1px;
|
|
6188
6193
|
}
|
|
6189
|
-
.peer:focus ~ .peer-focus\:text-
|
|
6194
|
+
.peer:focus ~ .peer-focus\:text-form-highlight {
|
|
6190
6195
|
color: #006eb7;
|
|
6191
|
-
color: var(--color-
|
|
6196
|
+
color: var(--color-form-highlight);
|
|
6192
6197
|
}
|
|
6193
6198
|
.aria-hidden\:hidden[aria-hidden="true"] {
|
|
6194
6199
|
display: none;
|
|
@@ -7295,6 +7300,10 @@ input[type='radio']:checked::after {
|
|
|
7295
7300
|
padding-left: 0px;
|
|
7296
7301
|
}
|
|
7297
7302
|
|
|
7303
|
+
.md\:pl-3 {
|
|
7304
|
+
padding-left: 0.75rem;
|
|
7305
|
+
}
|
|
7306
|
+
|
|
7298
7307
|
.md\:pl-5 {
|
|
7299
7308
|
padding-left: 1.25rem;
|
|
7300
7309
|
}
|
|
@@ -8188,9 +8197,9 @@ input[type='radio']:checked::after {
|
|
|
8188
8197
|
border-color: #cc1a14;
|
|
8189
8198
|
border-color: var(--color-error);
|
|
8190
8199
|
}
|
|
8191
|
-
.dark\:border-
|
|
8200
|
+
.dark\:border-form-highlight-dark:where(.dark, .dark *) {
|
|
8192
8201
|
border-color: #006eb7;
|
|
8193
|
-
border-color: var(--color-
|
|
8202
|
+
border-color: var(--color-form-highlight-dark);
|
|
8194
8203
|
}
|
|
8195
8204
|
.dark\:border-text-dark:where(.dark, .dark *) {
|
|
8196
8205
|
border-color: #f0f0f0;
|
|
@@ -8219,6 +8228,10 @@ input[type='radio']:checked::after {
|
|
|
8219
8228
|
background-color: #006eb7;
|
|
8220
8229
|
background-color: var(--color-podcast-text);
|
|
8221
8230
|
}
|
|
8231
|
+
.dark\:fill-form-highlight-dark:where(.dark, .dark *) {
|
|
8232
|
+
fill: #006eb7;
|
|
8233
|
+
fill: var(--color-form-highlight-dark);
|
|
8234
|
+
}
|
|
8222
8235
|
.dark\:fill-link-dark:where(.dark, .dark *) {
|
|
8223
8236
|
fill: #006eb7;
|
|
8224
8237
|
fill: var(--color-link-dark);
|
|
@@ -8249,9 +8262,9 @@ input[type='radio']:checked::after {
|
|
|
8249
8262
|
.dark\:border-t-transparent:where(.dark, .dark *) {
|
|
8250
8263
|
border-top-color: transparent;
|
|
8251
8264
|
}
|
|
8252
|
-
.peer:focus ~ .peer-focus\:dark\:text-
|
|
8253
|
-
color: #
|
|
8254
|
-
color: var(--color-
|
|
8265
|
+
.peer:focus ~ .peer-focus\:dark\:text-form-highlight-dark:where(.dark, .dark *) {
|
|
8266
|
+
color: #006eb7;
|
|
8267
|
+
color: var(--color-form-highlight-dark);
|
|
8255
8268
|
}
|
|
8256
8269
|
@media print {
|
|
8257
8270
|
|
|
@@ -1,17 +1,18 @@
|
|
|
1
|
+
{{~changeRandom~}}
|
|
1
2
|
<div class="relative flex flex-col w-full {{#unless _inGroup}} mb-6 md:mb-12{{/unless}} gap-y-4 md:gap-y-5"
|
|
2
3
|
{{#unless _inGroup}}
|
|
3
4
|
{{#if _required}}
|
|
4
5
|
ax-load
|
|
5
|
-
x-data="inputHandler('input{{
|
|
6
|
+
x-data="inputHandler('input{{getRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}','', '', '{{_name}}')"
|
|
6
7
|
x-init="validateChoice()"
|
|
7
8
|
x-ignore
|
|
8
9
|
{{/if}}
|
|
9
10
|
{{/unless}}
|
|
10
11
|
>
|
|
11
|
-
<div class="flex flex-row items-center w-full
|
|
12
|
-
<input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-
|
|
12
|
+
<div class="flex flex-row items-center w-full cursor-pointer ">
|
|
13
|
+
<input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-form-highlight dark:border-form-highlight-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-form-highlight checked:border-form-highlight"," checked:bg-white checked:border-form-highlight rounded-full",""]'}}"
|
|
13
14
|
{{#if _required}}
|
|
14
|
-
:class="{' border-
|
|
15
|
+
:class="{' border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
|
|
15
16
|
{{/if}}
|
|
16
17
|
{{#if _inGroup }}
|
|
17
18
|
{{#if _required}}
|
|
@@ -59,7 +60,7 @@
|
|
|
59
60
|
{{/if}}
|
|
60
61
|
{{/if~}}
|
|
61
62
|
>
|
|
62
|
-
<label for="input{{getRandom}}" class="items-center justify-center text-xs text-text dark:text-text-dark md:text-sm font-headingSerif ">
|
|
63
|
+
<label for="input{{getRandom}}" class="min-h-6 pt-0.5 items-center justify-center pl-2 text-xs cursor-pointer md:pl-3 text-text dark:text-text-dark md:text-sm font-headingSerif ">
|
|
63
64
|
{{#if _hasBody}}
|
|
64
65
|
{{decorator_body}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
|
|
65
66
|
{{else}}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
<div class="flex items-center justify-between">
|
|
2
|
-
<div class="text-xs text-gray-scorpion dark:text-text-dark font-headingSerif">Pflichtfeld*</div>
|
|
3
|
-
<div class="flex items-center">
|
|
1
|
+
<div class="flex flex-col-reverse items-center justify-between sm:flex-row gap-y-6">
|
|
2
|
+
<div class="w-full text-xs basis-full text-gray-scorpion dark:text-text-dark font-headingSerif">Pflichtfeld*</div>
|
|
3
|
+
<div class="flex items-center justify-end w-full basis-full">
|
|
4
4
|
<label class="order-2 cursor-pointer {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">
|
|
5
5
|
<span class="hidden" :class="{'hidden': !isPosting}">{{> components/base/image/icon _icon="reload" _addClass="w-5 h-5 fill-white dark:fill-text-dark animate-spin"}}</span>
|
|
6
6
|
<span class="" :class="{'hidden': isPosting}">{{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}</span>
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
x-init="validateField()"
|
|
5
5
|
x-ignore
|
|
6
6
|
>
|
|
7
|
-
<input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-
|
|
8
|
-
:class="{'border-
|
|
7
|
+
<input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
|
|
8
|
+
:class="{'border-form-highlight dark:form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
|
|
9
9
|
x-model="input{{getRandom}}"
|
|
10
10
|
id="input{{getRandom}}"
|
|
11
11
|
x-bind:data-is-valid="valid ? 'true' : 'false'"
|
|
@@ -42,11 +42,11 @@
|
|
|
42
42
|
data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
|
|
43
43
|
>
|
|
44
44
|
|
|
45
|
-
<label for="input{{getRandom}}" class="{{_labelClass}} absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion dark:text-text-dark
|
|
45
|
+
<label for="input{{getRandom}}" class="{{_labelClass}} cursor-text absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion dark:text-text-dark
|
|
46
46
|
|
|
47
47
|
peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
|
|
48
48
|
|
|
49
|
-
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-
|
|
49
|
+
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark origin-top-left transform transition-transform">
|
|
50
50
|
{{#if _hasBody}}
|
|
51
51
|
{{decorator_body}}
|
|
52
52
|
{{else}}
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
</label>
|
|
62
62
|
|
|
63
63
|
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
|
|
64
|
-
{{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
|
|
64
|
+
{{> components/forms/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
|
|
65
65
|
</div>
|
|
66
66
|
|
|
67
67
|
<div class="flex items-end justify-between h-5 font-heading">
|
|
@@ -72,25 +72,4 @@
|
|
|
72
72
|
<div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
|
|
73
73
|
|
|
74
74
|
</div>
|
|
75
|
-
<div class="hidden">
|
|
76
|
-
<div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
|
|
77
|
-
DEBUG
|
|
78
|
-
</div>
|
|
79
|
-
<div class="px-4 py-3 bg-red-100 border border-t-0 border-red-400 rounded-b text-error">
|
|
80
|
-
<div>name:<span x-text="name" class="font-bold" ></span></div>
|
|
81
|
-
<div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-error'"></span></div>
|
|
82
|
-
<div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-error'"></span></div>
|
|
83
|
-
<div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-error'"></span></div>
|
|
84
|
-
|
|
85
|
-
<div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-error'"></span></div>
|
|
86
|
-
<div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-error'"></span></div>
|
|
87
|
-
<div>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>
|
|
88
|
-
<div>input:<span x-text="input{{getRandom}}" class="font-bold" ></span></div>
|
|
89
|
-
<div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
|
|
90
|
-
<div>valueMissing:<span x-text="valueMissing" class="font-bold" ></span></div>
|
|
91
|
-
<div>typeMismatch:<span x-text="typeMismatch" class="font-bold" ></span></div>
|
|
92
|
-
<div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-error'"></span></div>
|
|
93
|
-
|
|
94
|
-
</div>
|
|
95
|
-
</div>
|
|
96
75
|
</div>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<div class="flex flex-row items-center justify-between w-full">
|
|
2
|
+
<div class="flex items-center gap-x-2 md:gap-x-3">
|
|
3
|
+
{{#if _success}}
|
|
4
|
+
{{> components/forms/success_icon}}
|
|
5
|
+
<span class="font-bold text-green-800">{{_messageText}}</span>
|
|
6
|
+
{{else}}
|
|
7
|
+
{{> components/forms/error_icon}}
|
|
8
|
+
<span class="font-bold text-red-700">{{_messageText}}</span>
|
|
9
|
+
{{/if}}
|
|
10
|
+
</div>
|
|
11
|
+
{{#unless _success}}
|
|
12
|
+
{{#> components/button/button _variant="primary"_size="lg" _css="" _type="reset"}}
|
|
13
|
+
<span class="text-base ds-button-label ">Nochmal versuchen</span>
|
|
14
|
+
{{/components/button/button}}
|
|
15
|
+
{{/unless}}
|
|
16
|
+
|
|
17
|
+
</div>
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
x-ignore
|
|
5
5
|
>
|
|
6
6
|
<select
|
|
7
|
-
class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none text-text dark:bg-black dark:text-text-dark border-
|
|
8
|
-
:class="{'border-
|
|
7
|
+
class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer text-text dark:bg-black dark:text-text-dark border-form-highlight dark:border-form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
|
|
8
|
+
:class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
|
|
9
9
|
x-model="select{{getRandom}}"
|
|
10
10
|
id="select{{getRandom}}"
|
|
11
11
|
title="{{#if _locaKey}}{{loca _locaKey}}{{else}}{{#if _Label}}{{_label}}{{#if _required}}*{{/if}}{{/if}}{{/if}}"
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
</select>
|
|
39
39
|
<label for="select{{getRandom}}"
|
|
40
40
|
class="absolute pointer-events-none left-[16px] top-0 translate-y-3 translate-x-0 scale-100 text-gray-scorpion dark:text-text-dark
|
|
41
|
-
peer-focus:text-
|
|
41
|
+
peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px
|
|
42
42
|
origin-top-left transform transition-transform
|
|
43
43
|
">
|
|
44
44
|
{{_label}}{{#if _required}}*{{/if}}
|
|
@@ -52,6 +52,6 @@
|
|
|
52
52
|
{{/if}}
|
|
53
53
|
</div>
|
|
54
54
|
<div class="absolute right-0 p-4 py-3 transform border-l peer-focus:border-r peer-focus:border-l-0 pointer-events-none top-1.5 peer-focus:rotate-180">
|
|
55
|
-
{{> components/base/image/icon _icon="arrow-down" _addClass="w-3 h-3 fill-
|
|
55
|
+
{{> components/base/image/icon _icon="arrow-down" _addClass="w-3 h-3 fill-form-highlight dark:fill-form-highlight-dark "}}
|
|
56
56
|
</div>
|
|
57
57
|
</div>
|
|
@@ -34,9 +34,9 @@
|
|
|
34
34
|
maxlength="{{_maxLength}}"
|
|
35
35
|
{{/if~}}
|
|
36
36
|
{{#if _required}}required{{/if}}
|
|
37
|
-
class="relative w-full px-4 pb-px text-black placeholder-transparent bg-white border-
|
|
37
|
+
class="relative w-full px-4 pb-px text-black placeholder-transparent bg-white border-form-highlight dark:border-form-highlight-dark min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none"
|
|
38
38
|
{{#if _required}}
|
|
39
|
-
:class="{'border-
|
|
39
|
+
:class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
|
|
40
40
|
{{/if}}
|
|
41
41
|
>{{~#if _formField.isValid~}}
|
|
42
42
|
{{{_formField.forHtmlContent}}}
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
|
|
51
51
|
peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
|
|
52
52
|
|
|
53
|
-
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-
|
|
53
|
+
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark origin-top-left transform transition-transform">
|
|
54
54
|
{{#if _locaKey}}
|
|
55
55
|
{{loca _locaKey}}
|
|
56
56
|
{{else}}
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
</label>
|
|
62
62
|
{{#if _required}}
|
|
63
63
|
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
|
|
64
|
-
{{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
|
|
64
|
+
{{> components/forms/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
|
|
65
65
|
</div>
|
|
66
66
|
{{/if}}
|
|
67
67
|
<div class="flex items-end justify-between h-5 font-heading">
|
|
@@ -25,11 +25,13 @@
|
|
|
25
25
|
{{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }}
|
|
26
26
|
|
|
27
27
|
{{> components/forms/controls }}
|
|
28
|
+
|
|
28
29
|
<template id="successMessage">
|
|
29
|
-
|
|
30
|
+
{{> components/forms/message _success=true _messageText="Das Formular wurde erforlgreich versendet." }}
|
|
30
31
|
</template>
|
|
32
|
+
|
|
31
33
|
<template id="errorMessage">
|
|
32
|
-
|
|
34
|
+
{{> components/forms/message _success=false _messageText="Das Formular konnte nicht versendet werden." }}
|
|
33
35
|
</template>
|
|
34
36
|
|
|
35
37
|
</form>
|
|
@@ -1,17 +1,18 @@
|
|
|
1
|
+
{{~changeRandom~}}
|
|
1
2
|
<div class="relative flex flex-col w-full {{#unless _inGroup}} mb-6 md:mb-12{{/unless}} gap-y-4 md:gap-y-5"
|
|
2
3
|
{{#unless _inGroup}}
|
|
3
4
|
{{#if _required}}
|
|
4
5
|
ax-load
|
|
5
|
-
x-data="inputHandler('input{{
|
|
6
|
+
x-data="inputHandler('input{{getRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}','', '', '{{_name}}')"
|
|
6
7
|
x-init="validateChoice()"
|
|
7
8
|
x-ignore
|
|
8
9
|
{{/if}}
|
|
9
10
|
{{/unless}}
|
|
10
11
|
>
|
|
11
|
-
<div class="flex flex-row items-center w-full
|
|
12
|
-
<input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-
|
|
12
|
+
<div class="flex flex-row items-center w-full cursor-pointer ">
|
|
13
|
+
<input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-form-highlight dark:border-form-highlight-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-form-highlight checked:border-form-highlight"," checked:bg-white checked:border-form-highlight rounded-full",""]'}}"
|
|
13
14
|
{{#if _required}}
|
|
14
|
-
:class="{' border-
|
|
15
|
+
:class="{' border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
|
|
15
16
|
{{/if}}
|
|
16
17
|
{{#if _inGroup }}
|
|
17
18
|
{{#if _required}}
|
|
@@ -59,7 +60,7 @@
|
|
|
59
60
|
{{/if}}
|
|
60
61
|
{{/if~}}
|
|
61
62
|
>
|
|
62
|
-
<label for="input{{getRandom}}" class="items-center justify-center text-xs text-text dark:text-text-dark md:text-sm font-headingSerif ">
|
|
63
|
+
<label for="input{{getRandom}}" class="min-h-6 pt-0.5 items-center justify-center pl-2 text-xs cursor-pointer md:pl-3 text-text dark:text-text-dark md:text-sm font-headingSerif ">
|
|
63
64
|
{{#if _hasBody}}
|
|
64
65
|
{{decorator_body}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
|
|
65
66
|
{{else}}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
<div class="flex items-center justify-between">
|
|
2
|
-
<div class="text-xs text-gray-scorpion dark:text-text-dark font-headingSerif">Pflichtfeld*</div>
|
|
3
|
-
<div class="flex items-center">
|
|
1
|
+
<div class="flex flex-col-reverse items-center justify-between sm:flex-row gap-y-6">
|
|
2
|
+
<div class="w-full text-xs basis-full text-gray-scorpion dark:text-text-dark font-headingSerif">Pflichtfeld*</div>
|
|
3
|
+
<div class="flex items-center justify-end w-full basis-full">
|
|
4
4
|
<label class="order-2 cursor-pointer {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">
|
|
5
5
|
<span class="hidden" :class="{'hidden': !isPosting}">{{> components/base/image/icon _icon="reload" _addClass="w-5 h-5 fill-white dark:fill-text-dark animate-spin"}}</span>
|
|
6
6
|
<span class="" :class="{'hidden': isPosting}">{{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}</span>
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
x-init="validateField()"
|
|
5
5
|
x-ignore
|
|
6
6
|
>
|
|
7
|
-
<input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-
|
|
8
|
-
:class="{'border-
|
|
7
|
+
<input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
|
|
8
|
+
:class="{'border-form-highlight dark:form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
|
|
9
9
|
x-model="input{{getRandom}}"
|
|
10
10
|
id="input{{getRandom}}"
|
|
11
11
|
x-bind:data-is-valid="valid ? 'true' : 'false'"
|
|
@@ -42,11 +42,11 @@
|
|
|
42
42
|
data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
|
|
43
43
|
>
|
|
44
44
|
|
|
45
|
-
<label for="input{{getRandom}}" class="{{_labelClass}} absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion dark:text-text-dark
|
|
45
|
+
<label for="input{{getRandom}}" class="{{_labelClass}} cursor-text absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion dark:text-text-dark
|
|
46
46
|
|
|
47
47
|
peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
|
|
48
48
|
|
|
49
|
-
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-
|
|
49
|
+
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark origin-top-left transform transition-transform">
|
|
50
50
|
{{#if _hasBody}}
|
|
51
51
|
{{decorator_body}}
|
|
52
52
|
{{else}}
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
</label>
|
|
62
62
|
|
|
63
63
|
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
|
|
64
|
-
{{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
|
|
64
|
+
{{> components/forms/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
|
|
65
65
|
</div>
|
|
66
66
|
|
|
67
67
|
<div class="flex items-end justify-between h-5 font-heading">
|
|
@@ -72,25 +72,4 @@
|
|
|
72
72
|
<div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
|
|
73
73
|
|
|
74
74
|
</div>
|
|
75
|
-
<div class="hidden">
|
|
76
|
-
<div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
|
|
77
|
-
DEBUG
|
|
78
|
-
</div>
|
|
79
|
-
<div class="px-4 py-3 bg-red-100 border border-t-0 border-red-400 rounded-b text-error">
|
|
80
|
-
<div>name:<span x-text="name" class="font-bold" ></span></div>
|
|
81
|
-
<div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-error'"></span></div>
|
|
82
|
-
<div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-error'"></span></div>
|
|
83
|
-
<div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-error'"></span></div>
|
|
84
|
-
|
|
85
|
-
<div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-error'"></span></div>
|
|
86
|
-
<div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-error'"></span></div>
|
|
87
|
-
<div>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>
|
|
88
|
-
<div>input:<span x-text="input{{getRandom}}" class="font-bold" ></span></div>
|
|
89
|
-
<div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
|
|
90
|
-
<div>valueMissing:<span x-text="valueMissing" class="font-bold" ></span></div>
|
|
91
|
-
<div>typeMismatch:<span x-text="typeMismatch" class="font-bold" ></span></div>
|
|
92
|
-
<div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-error'"></span></div>
|
|
93
|
-
|
|
94
|
-
</div>
|
|
95
|
-
</div>
|
|
96
75
|
</div>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<div class="flex flex-row items-center justify-between w-full">
|
|
2
|
+
<div class="flex items-center gap-x-2 md:gap-x-3">
|
|
3
|
+
{{#if _success}}
|
|
4
|
+
{{> components/forms/success_icon}}
|
|
5
|
+
<span class="font-bold text-green-800">{{_messageText}}</span>
|
|
6
|
+
{{else}}
|
|
7
|
+
{{> components/forms/error_icon}}
|
|
8
|
+
<span class="font-bold text-red-700">{{_messageText}}</span>
|
|
9
|
+
{{/if}}
|
|
10
|
+
</div>
|
|
11
|
+
{{#unless _success}}
|
|
12
|
+
{{#> components/button/button _variant="primary"_size="lg" _css="" _type="reset"}}
|
|
13
|
+
<span class="text-base ds-button-label ">Nochmal versuchen</span>
|
|
14
|
+
{{/components/button/button}}
|
|
15
|
+
{{/unless}}
|
|
16
|
+
|
|
17
|
+
</div>
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
x-ignore
|
|
5
5
|
>
|
|
6
6
|
<select
|
|
7
|
-
class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none text-text dark:bg-black dark:text-text-dark border-
|
|
8
|
-
:class="{'border-
|
|
7
|
+
class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer text-text dark:bg-black dark:text-text-dark border-form-highlight dark:border-form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
|
|
8
|
+
:class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
|
|
9
9
|
x-model="select{{getRandom}}"
|
|
10
10
|
id="select{{getRandom}}"
|
|
11
11
|
title="{{#if _locaKey}}{{loca _locaKey}}{{else}}{{#if _Label}}{{_label}}{{#if _required}}*{{/if}}{{/if}}{{/if}}"
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
</select>
|
|
39
39
|
<label for="select{{getRandom}}"
|
|
40
40
|
class="absolute pointer-events-none left-[16px] top-0 translate-y-3 translate-x-0 scale-100 text-gray-scorpion dark:text-text-dark
|
|
41
|
-
peer-focus:text-
|
|
41
|
+
peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px
|
|
42
42
|
origin-top-left transform transition-transform
|
|
43
43
|
">
|
|
44
44
|
{{_label}}{{#if _required}}*{{/if}}
|
|
@@ -52,6 +52,6 @@
|
|
|
52
52
|
{{/if}}
|
|
53
53
|
</div>
|
|
54
54
|
<div class="absolute right-0 p-4 py-3 transform border-l peer-focus:border-r peer-focus:border-l-0 pointer-events-none top-1.5 peer-focus:rotate-180">
|
|
55
|
-
{{> components/base/image/icon _icon="arrow-down" _addClass="w-3 h-3 fill-
|
|
55
|
+
{{> components/base/image/icon _icon="arrow-down" _addClass="w-3 h-3 fill-form-highlight dark:fill-form-highlight-dark "}}
|
|
56
56
|
</div>
|
|
57
57
|
</div>
|
|
@@ -34,9 +34,9 @@
|
|
|
34
34
|
maxlength="{{_maxLength}}"
|
|
35
35
|
{{/if~}}
|
|
36
36
|
{{#if _required}}required{{/if}}
|
|
37
|
-
class="relative w-full px-4 pb-px text-black placeholder-transparent bg-white border-
|
|
37
|
+
class="relative w-full px-4 pb-px text-black placeholder-transparent bg-white border-form-highlight dark:border-form-highlight-dark min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none"
|
|
38
38
|
{{#if _required}}
|
|
39
|
-
:class="{'border-
|
|
39
|
+
:class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
|
|
40
40
|
{{/if}}
|
|
41
41
|
>{{~#if _formField.isValid~}}
|
|
42
42
|
{{{_formField.forHtmlContent}}}
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
|
|
51
51
|
peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
|
|
52
52
|
|
|
53
|
-
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-
|
|
53
|
+
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark origin-top-left transform transition-transform">
|
|
54
54
|
{{#if _locaKey}}
|
|
55
55
|
{{loca _locaKey}}
|
|
56
56
|
{{else}}
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
</label>
|
|
62
62
|
{{#if _required}}
|
|
63
63
|
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
|
|
64
|
-
{{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
|
|
64
|
+
{{> components/forms/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
|
|
65
65
|
</div>
|
|
66
66
|
{{/if}}
|
|
67
67
|
<div class="flex items-end justify-between h-5 font-heading">
|
|
@@ -25,11 +25,13 @@
|
|
|
25
25
|
{{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }}
|
|
26
26
|
|
|
27
27
|
{{> components/forms/controls }}
|
|
28
|
+
|
|
28
29
|
<template id="successMessage">
|
|
29
|
-
|
|
30
|
+
{{> components/forms/message _success=true _messageText="Das Formular wurde erforlgreich versendet." }}
|
|
30
31
|
</template>
|
|
32
|
+
|
|
31
33
|
<template id="errorMessage">
|
|
32
|
-
|
|
34
|
+
{{> components/forms/message _success=false _messageText="Das Formular konnte nicht versendet werden." }}
|
|
33
35
|
</template>
|
|
34
36
|
|
|
35
37
|
</form>
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"repository": "https://github.com/szuelch/hr-design-system-handlebars",
|
|
9
|
-
"version": "1.110.
|
|
9
|
+
"version": "1.110.11",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
package/src/assets/tailwind.css
CHANGED
|
@@ -164,6 +164,8 @@
|
|
|
164
164
|
--structure-nav-text-mobile: var(--color-primary-ds);
|
|
165
165
|
|
|
166
166
|
--color-error: theme('colors.red.thunderbird.hex');
|
|
167
|
+
--color-form-highlight: var(--color-link);
|
|
168
|
+
--color-form-highlight-dark: var(--color-link-dark);
|
|
167
169
|
|
|
168
170
|
--feature-box-height: 0;
|
|
169
171
|
|
|
@@ -910,6 +912,9 @@
|
|
|
910
912
|
--font-title: theme('fontFamily.heading');
|
|
911
913
|
--font-weight-title: theme('fontWeight.bold');
|
|
912
914
|
|
|
915
|
+
--color-form-highlight: var(--color-secondary-ds);
|
|
916
|
+
--color-form-highlight-dark: var(--color-secondary-ds);
|
|
917
|
+
|
|
913
918
|
.ardplayer {
|
|
914
919
|
&.ardplayer-light-mode {
|
|
915
920
|
--ardplayer-color-primary-base: theme('colors.red.wellRead.hex');
|
|
@@ -1377,6 +1382,9 @@
|
|
|
1377
1382
|
|
|
1378
1383
|
--feature-box-height: 96px;
|
|
1379
1384
|
|
|
1385
|
+
--color-form-highlight: var(--color-secondary-ds);
|
|
1386
|
+
--color-form-highlight-dark: var(--color-secondary-ds);
|
|
1387
|
+
|
|
1380
1388
|
.ardplayer {
|
|
1381
1389
|
&.ardplayer-light-mode {
|
|
1382
1390
|
--ardplayer-color-primary-base: theme('colors.red.paprika.hex');
|
|
@@ -1508,6 +1516,9 @@
|
|
|
1508
1516
|
|
|
1509
1517
|
--feature-box-height: 96px;
|
|
1510
1518
|
|
|
1519
|
+
--color-form-highlight: var(--color-secondary-ds);
|
|
1520
|
+
--color-form-highlight-dark: var(--color-secondary-ds);
|
|
1521
|
+
|
|
1511
1522
|
.ardplayer {
|
|
1512
1523
|
&.ardplayer-light-mode {
|
|
1513
1524
|
--ardplayer-color-primary-base: theme('colors.red.monza.hex');
|
|
@@ -24,7 +24,9 @@ export default {
|
|
|
24
24
|
method: 'POST',
|
|
25
25
|
status: 200,
|
|
26
26
|
response: {
|
|
27
|
-
|
|
27
|
+
"status":""
|
|
28
|
+
// "status":"OK"
|
|
29
|
+
// "status":"VALIDATION_ERROR", "errors":{"vorname":"form_error_required"}
|
|
28
30
|
},
|
|
29
31
|
},
|
|
30
32
|
],
|
|
@@ -1,17 +1,18 @@
|
|
|
1
|
+
{{~changeRandom~}}
|
|
1
2
|
<div class="relative flex flex-col w-full {{#unless _inGroup}} mb-6 md:mb-12{{/unless}} gap-y-4 md:gap-y-5"
|
|
2
3
|
{{#unless _inGroup}}
|
|
3
4
|
{{#if _required}}
|
|
4
5
|
ax-load
|
|
5
|
-
x-data="inputHandler('input{{
|
|
6
|
+
x-data="inputHandler('input{{getRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}','', '', '{{_name}}')"
|
|
6
7
|
x-init="validateChoice()"
|
|
7
8
|
x-ignore
|
|
8
9
|
{{/if}}
|
|
9
10
|
{{/unless}}
|
|
10
11
|
>
|
|
11
|
-
<div class="flex flex-row items-center w-full
|
|
12
|
-
<input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-
|
|
12
|
+
<div class="flex flex-row items-center w-full cursor-pointer ">
|
|
13
|
+
<input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-form-highlight dark:border-form-highlight-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-form-highlight checked:border-form-highlight"," checked:bg-white checked:border-form-highlight rounded-full",""]'}}"
|
|
13
14
|
{{#if _required}}
|
|
14
|
-
:class="{' border-
|
|
15
|
+
:class="{' border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
|
|
15
16
|
{{/if}}
|
|
16
17
|
{{#if _inGroup }}
|
|
17
18
|
{{#if _required}}
|
|
@@ -59,7 +60,7 @@
|
|
|
59
60
|
{{/if}}
|
|
60
61
|
{{/if~}}
|
|
61
62
|
>
|
|
62
|
-
<label for="input{{getRandom}}" class="items-center justify-center text-xs text-text dark:text-text-dark md:text-sm font-headingSerif ">
|
|
63
|
+
<label for="input{{getRandom}}" class="min-h-6 pt-0.5 items-center justify-center pl-2 text-xs cursor-pointer md:pl-3 text-text dark:text-text-dark md:text-sm font-headingSerif ">
|
|
63
64
|
{{#if _hasBody}}
|
|
64
65
|
{{decorator_body}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
|
|
65
66
|
{{else}}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
<div class="flex items-center justify-between">
|
|
2
|
-
<div class="text-xs text-gray-scorpion dark:text-text-dark font-headingSerif">Pflichtfeld*</div>
|
|
3
|
-
<div class="flex items-center">
|
|
1
|
+
<div class="flex flex-col-reverse items-center justify-between sm:flex-row gap-y-6">
|
|
2
|
+
<div class="w-full text-xs basis-full text-gray-scorpion dark:text-text-dark font-headingSerif">Pflichtfeld*</div>
|
|
3
|
+
<div class="flex items-center justify-end w-full basis-full">
|
|
4
4
|
<label class="order-2 cursor-pointer {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">
|
|
5
5
|
<span class="hidden" :class="{'hidden': !isPosting}">{{> components/base/image/icon _icon="reload" _addClass="w-5 h-5 fill-white dark:fill-text-dark animate-spin"}}</span>
|
|
6
6
|
<span class="" :class="{'hidden': isPosting}">{{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}</span>
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
x-init="validateField()"
|
|
5
5
|
x-ignore
|
|
6
6
|
>
|
|
7
|
-
<input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-
|
|
8
|
-
:class="{'border-
|
|
7
|
+
<input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
|
|
8
|
+
:class="{'border-form-highlight dark:form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
|
|
9
9
|
x-model="input{{getRandom}}"
|
|
10
10
|
id="input{{getRandom}}"
|
|
11
11
|
x-bind:data-is-valid="valid ? 'true' : 'false'"
|
|
@@ -42,11 +42,11 @@
|
|
|
42
42
|
data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
|
|
43
43
|
>
|
|
44
44
|
|
|
45
|
-
<label for="input{{getRandom}}" class="{{_labelClass}} absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion dark:text-text-dark
|
|
45
|
+
<label for="input{{getRandom}}" class="{{_labelClass}} cursor-text absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion dark:text-text-dark
|
|
46
46
|
|
|
47
47
|
peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
|
|
48
48
|
|
|
49
|
-
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-
|
|
49
|
+
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark origin-top-left transform transition-transform">
|
|
50
50
|
{{#if _hasBody}}
|
|
51
51
|
{{decorator_body}}
|
|
52
52
|
{{else}}
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
</label>
|
|
62
62
|
|
|
63
63
|
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
|
|
64
|
-
{{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
|
|
64
|
+
{{> components/forms/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
|
|
65
65
|
</div>
|
|
66
66
|
|
|
67
67
|
<div class="flex items-end justify-between h-5 font-heading">
|
|
@@ -72,25 +72,4 @@
|
|
|
72
72
|
<div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
|
|
73
73
|
|
|
74
74
|
</div>
|
|
75
|
-
<div class="hidden">
|
|
76
|
-
<div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
|
|
77
|
-
DEBUG
|
|
78
|
-
</div>
|
|
79
|
-
<div class="px-4 py-3 bg-red-100 border border-t-0 border-red-400 rounded-b text-error">
|
|
80
|
-
<div>name:<span x-text="name" class="font-bold" ></span></div>
|
|
81
|
-
<div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-error'"></span></div>
|
|
82
|
-
<div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-error'"></span></div>
|
|
83
|
-
<div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-error'"></span></div>
|
|
84
|
-
|
|
85
|
-
<div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-error'"></span></div>
|
|
86
|
-
<div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-error'"></span></div>
|
|
87
|
-
<div>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>
|
|
88
|
-
<div>input:<span x-text="input{{getRandom}}" class="font-bold" ></span></div>
|
|
89
|
-
<div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
|
|
90
|
-
<div>valueMissing:<span x-text="valueMissing" class="font-bold" ></span></div>
|
|
91
|
-
<div>typeMismatch:<span x-text="typeMismatch" class="font-bold" ></span></div>
|
|
92
|
-
<div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-error'"></span></div>
|
|
93
|
-
|
|
94
|
-
</div>
|
|
95
|
-
</div>
|
|
96
75
|
</div>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<div class="flex flex-row items-center justify-between w-full">
|
|
2
|
+
<div class="flex items-center gap-x-2 md:gap-x-3">
|
|
3
|
+
{{#if _success}}
|
|
4
|
+
{{> components/forms/success_icon}}
|
|
5
|
+
<span class="font-bold text-green-800">{{_messageText}}</span>
|
|
6
|
+
{{else}}
|
|
7
|
+
{{> components/forms/error_icon}}
|
|
8
|
+
<span class="font-bold text-red-700">{{_messageText}}</span>
|
|
9
|
+
{{/if}}
|
|
10
|
+
</div>
|
|
11
|
+
{{#unless _success}}
|
|
12
|
+
{{#> components/button/button _variant="primary"_size="lg" _css="" _type="reset"}}
|
|
13
|
+
<span class="text-base ds-button-label ">Nochmal versuchen</span>
|
|
14
|
+
{{/components/button/button}}
|
|
15
|
+
{{/unless}}
|
|
16
|
+
|
|
17
|
+
</div>
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
x-ignore
|
|
5
5
|
>
|
|
6
6
|
<select
|
|
7
|
-
class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none text-text dark:bg-black dark:text-text-dark border-
|
|
8
|
-
:class="{'border-
|
|
7
|
+
class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer text-text dark:bg-black dark:text-text-dark border-form-highlight dark:border-form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
|
|
8
|
+
:class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
|
|
9
9
|
x-model="select{{getRandom}}"
|
|
10
10
|
id="select{{getRandom}}"
|
|
11
11
|
title="{{#if _locaKey}}{{loca _locaKey}}{{else}}{{#if _Label}}{{_label}}{{#if _required}}*{{/if}}{{/if}}{{/if}}"
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
</select>
|
|
39
39
|
<label for="select{{getRandom}}"
|
|
40
40
|
class="absolute pointer-events-none left-[16px] top-0 translate-y-3 translate-x-0 scale-100 text-gray-scorpion dark:text-text-dark
|
|
41
|
-
peer-focus:text-
|
|
41
|
+
peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px
|
|
42
42
|
origin-top-left transform transition-transform
|
|
43
43
|
">
|
|
44
44
|
{{_label}}{{#if _required}}*{{/if}}
|
|
@@ -52,6 +52,6 @@
|
|
|
52
52
|
{{/if}}
|
|
53
53
|
</div>
|
|
54
54
|
<div class="absolute right-0 p-4 py-3 transform border-l peer-focus:border-r peer-focus:border-l-0 pointer-events-none top-1.5 peer-focus:rotate-180">
|
|
55
|
-
{{> components/base/image/icon _icon="arrow-down" _addClass="w-3 h-3 fill-
|
|
55
|
+
{{> components/base/image/icon _icon="arrow-down" _addClass="w-3 h-3 fill-form-highlight dark:fill-form-highlight-dark "}}
|
|
56
56
|
</div>
|
|
57
57
|
</div>
|
|
@@ -34,9 +34,9 @@
|
|
|
34
34
|
maxlength="{{_maxLength}}"
|
|
35
35
|
{{/if~}}
|
|
36
36
|
{{#if _required}}required{{/if}}
|
|
37
|
-
class="relative w-full px-4 pb-px text-black placeholder-transparent bg-white border-
|
|
37
|
+
class="relative w-full px-4 pb-px text-black placeholder-transparent bg-white border-form-highlight dark:border-form-highlight-dark min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none"
|
|
38
38
|
{{#if _required}}
|
|
39
|
-
:class="{'border-
|
|
39
|
+
:class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
|
|
40
40
|
{{/if}}
|
|
41
41
|
>{{~#if _formField.isValid~}}
|
|
42
42
|
{{{_formField.forHtmlContent}}}
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
|
|
51
51
|
peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3
|
|
52
52
|
|
|
53
|
-
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-
|
|
53
|
+
peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark origin-top-left transform transition-transform">
|
|
54
54
|
{{#if _locaKey}}
|
|
55
55
|
{{loca _locaKey}}
|
|
56
56
|
{{else}}
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
</label>
|
|
62
62
|
{{#if _required}}
|
|
63
63
|
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
|
|
64
|
-
{{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
|
|
64
|
+
{{> components/forms/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
|
|
65
65
|
</div>
|
|
66
66
|
{{/if}}
|
|
67
67
|
<div class="flex items-end justify-between h-5 font-heading">
|
|
@@ -25,11 +25,13 @@
|
|
|
25
25
|
{{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }}
|
|
26
26
|
|
|
27
27
|
{{> components/forms/controls }}
|
|
28
|
+
|
|
28
29
|
<template id="successMessage">
|
|
29
|
-
|
|
30
|
+
{{> components/forms/message _success=true _messageText="Das Formular wurde erforlgreich versendet." }}
|
|
30
31
|
</template>
|
|
32
|
+
|
|
31
33
|
<template id="errorMessage">
|
|
32
|
-
|
|
34
|
+
{{> components/forms/message _success=false _messageText="Das Formular konnte nicht versendet werden." }}
|
|
33
35
|
</template>
|
|
34
36
|
|
|
35
37
|
</form>
|
package/tailwind.config.js
CHANGED
|
@@ -426,7 +426,9 @@ module.exports = {
|
|
|
426
426
|
'structure-nav': 'var(--structure-nav-background)',
|
|
427
427
|
'structure-nav-text': 'var(--structure-nav-text)',
|
|
428
428
|
'structure-nav-text-mobile': 'var(--structure-nav-text-mobile)',
|
|
429
|
-
'error':'var(--color-error)'
|
|
429
|
+
'error':'var(--color-error)',
|
|
430
|
+
'form-highlight':'var(--color-form-highlight)',
|
|
431
|
+
'form-highlight-dark':'var(--color-form-highlight-dark)'
|
|
430
432
|
},
|
|
431
433
|
},
|
|
432
434
|
},
|