@asantemedia-org/leybold-design-system 1.0.6 → 1.0.7
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/index.esm.js +4 -2
- package/dist/index.esm.js.map +1 -1
- package/dist/index.esm.scss +82 -25
- package/dist/index.js +4 -2
- package/dist/index.js.map +1 -1
- package/dist/index.scss +82 -25
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
package/dist/index.esm.scss
CHANGED
|
@@ -36,18 +36,26 @@
|
|
|
36
36
|
border-color: #000000;
|
|
37
37
|
}
|
|
38
38
|
.Button-module__button--secondary___lD5E3 {
|
|
39
|
-
color:
|
|
40
|
-
background-color:
|
|
41
|
-
border-color: #
|
|
39
|
+
color: #e2001a;
|
|
40
|
+
background-color: white;
|
|
41
|
+
border-color: #e2001a;
|
|
42
42
|
}
|
|
43
43
|
.Button-module__button--secondary___lD5E3:hover:not(.Button-module__button--disabled___IuOY8) {
|
|
44
|
-
background-color:
|
|
45
|
-
border-color:
|
|
44
|
+
background-color: #4a4e54;
|
|
45
|
+
border-color: #4a4e54;
|
|
46
|
+
color: white;
|
|
46
47
|
}
|
|
47
48
|
.Button-module__button--secondary___lD5E3:active:not(.Button-module__button--disabled___IuOY8) {
|
|
48
49
|
background-color: rgb(51.5454545455, 62.5909090909, 69.9545454545);
|
|
49
50
|
border-color: rgb(51.5454545455, 62.5909090909, 69.9545454545);
|
|
50
51
|
}
|
|
52
|
+
.Button-module__button--secondary___lD5E3:focus-visible:not(.Button-module__button--disabled___IuOY8) {
|
|
53
|
+
background-color: #4a4e54;
|
|
54
|
+
border-color: #4a4e54;
|
|
55
|
+
color: white;
|
|
56
|
+
outline: 1px solid #000000;
|
|
57
|
+
outline-offset: 2px;
|
|
58
|
+
}
|
|
51
59
|
.Button-module__button--outline___wB6-g {
|
|
52
60
|
color: #e2001a;
|
|
53
61
|
background-color: transparent;
|
|
@@ -501,6 +509,16 @@
|
|
|
501
509
|
.ProductCardDetails-module__productDetails___-sx2l .folding-specification-list {
|
|
502
510
|
margin-left: 0;
|
|
503
511
|
padding-left: 0;
|
|
512
|
+
display: grid;
|
|
513
|
+
grid-template-columns: repeat(1, 1fr);
|
|
514
|
+
grid-template-rows: auto;
|
|
515
|
+
gap: 10px;
|
|
516
|
+
}
|
|
517
|
+
@media (min-width: 992px) {
|
|
518
|
+
.ProductCardDetails-module__productDetails___-sx2l .folding-specification-list {
|
|
519
|
+
grid-template-columns: repeat(2, 1fr);
|
|
520
|
+
grid-template-areas: "list-item-1 list-item-2";
|
|
521
|
+
}
|
|
504
522
|
}
|
|
505
523
|
.ProductCardDetails-module__productDetails___-sx2l .folding-specification-list li {
|
|
506
524
|
list-style: none;
|
|
@@ -510,6 +528,9 @@
|
|
|
510
528
|
.ProductCardDetails-module__productDetails___-sx2l .folding-specification-list li strong {
|
|
511
529
|
color: #383e42;
|
|
512
530
|
}
|
|
531
|
+
.ProductCardDetails-module__productDetails___-sx2l .folding-specification-list li > *:first-child {
|
|
532
|
+
line-height: 2;
|
|
533
|
+
}
|
|
513
534
|
.ProductCardDetails-module__productDetails___-sx2l .folding-specification-holder {
|
|
514
535
|
margin-bottom: 1rem;
|
|
515
536
|
}
|
|
@@ -840,10 +861,10 @@
|
|
|
840
861
|
}
|
|
841
862
|
.qr-journey-form-wrapper .qr-form-filed-wrapper.checkbox label input, .qr-journey-form-wrapper .qr-form-filed-wrapper.info label input {
|
|
842
863
|
position: absolute;
|
|
843
|
-
top:
|
|
864
|
+
top: 5px;
|
|
844
865
|
left: 0;
|
|
845
|
-
width: 1.
|
|
846
|
-
height: 1.
|
|
866
|
+
width: 1.25rem;
|
|
867
|
+
height: 1.25rem;
|
|
847
868
|
margin: 0;
|
|
848
869
|
}
|
|
849
870
|
.qr-journey-form-wrapper .qr-form-filed-wrapper.checkbox .formfield-error, .qr-journey-form-wrapper .qr-form-filed-wrapper.info .formfield-error {
|
|
@@ -861,7 +882,7 @@
|
|
|
861
882
|
height: 2.3em;
|
|
862
883
|
line-height: 2em;
|
|
863
884
|
border: none;
|
|
864
|
-
border-bottom: 1px solid #
|
|
885
|
+
border-bottom: 1px solid #4a4e54;
|
|
865
886
|
border-radius: 0;
|
|
866
887
|
background-color: transparent;
|
|
867
888
|
}
|
|
@@ -892,6 +913,11 @@
|
|
|
892
913
|
.qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=tel]:focus-visible {
|
|
893
914
|
padding: 9px 18px;
|
|
894
915
|
}
|
|
916
|
+
.qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=checkbox],
|
|
917
|
+
.qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=checkbox],
|
|
918
|
+
.qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=checkbox] {
|
|
919
|
+
color: #99a1ab;
|
|
920
|
+
}
|
|
895
921
|
.qr-journey-form-wrapper .qr-form-filed-wrapper label input:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label input:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label input:focus-visible,
|
|
896
922
|
.qr-journey-form-wrapper .qr-form-filed-wrapper label select:active,
|
|
897
923
|
.qr-journey-form-wrapper .qr-form-filed-wrapper label select:focus,
|
|
@@ -903,12 +929,28 @@
|
|
|
903
929
|
border-bottom: 3px solid #6ea67b;
|
|
904
930
|
outline: none;
|
|
905
931
|
}
|
|
932
|
+
.qr-journey-form-wrapper .qr-form-filed-wrapper label input::-moz-placeholder {
|
|
933
|
+
color: #383e42;
|
|
934
|
+
}
|
|
935
|
+
.qr-journey-form-wrapper .qr-form-filed-wrapper label input::placeholder {
|
|
936
|
+
color: #383e42;
|
|
937
|
+
}
|
|
906
938
|
.qr-journey-form-wrapper .qr-form-filed-wrapper label select,
|
|
907
939
|
.qr-journey-form-wrapper .qr-form-filed-wrapper label textarea {
|
|
908
|
-
line-height:
|
|
909
|
-
padding: 1.5rem 1rem 0 1rem;
|
|
940
|
+
line-height: 1;
|
|
941
|
+
padding: 1.5rem 1rem 0.5rem 1rem;
|
|
910
942
|
box-sizing: content-box;
|
|
911
943
|
}
|
|
944
|
+
.qr-journey-form-wrapper .qr-form-filed-wrapper label textarea {
|
|
945
|
+
display: table-cell;
|
|
946
|
+
vertical-align: middle;
|
|
947
|
+
}
|
|
948
|
+
.qr-journey-form-wrapper .qr-form-filed-wrapper label textarea::-moz-placeholder {
|
|
949
|
+
color: #99a1ab;
|
|
950
|
+
}
|
|
951
|
+
.qr-journey-form-wrapper .qr-form-filed-wrapper label textarea::placeholder {
|
|
952
|
+
color: #99a1ab;
|
|
953
|
+
}
|
|
912
954
|
.qr-journey-form-wrapper .qr-form-filed-wrapper label select {
|
|
913
955
|
padding: 10px 18px;
|
|
914
956
|
position: relative;
|
|
@@ -944,6 +986,9 @@
|
|
|
944
986
|
top: -11px;
|
|
945
987
|
border-bottom-color: #383e42;
|
|
946
988
|
}
|
|
989
|
+
.qr-journey-form-wrapper .qr-form-filed-wrapper label select option {
|
|
990
|
+
color: #383e42;
|
|
991
|
+
}
|
|
947
992
|
.qr-journey-form-wrapper .qr-form-filed-wrapper label > .label {
|
|
948
993
|
display: none;
|
|
949
994
|
position: relative;
|
|
@@ -953,13 +998,13 @@
|
|
|
953
998
|
line-height: 0;
|
|
954
999
|
}
|
|
955
1000
|
.qr-journey-form-wrapper .qr-form-filed-wrapper.error label input {
|
|
956
|
-
border: 1px solid #
|
|
957
|
-
border-bottom: 3px solid #
|
|
1001
|
+
border: 1px solid #732d5d;
|
|
1002
|
+
border-bottom: 3px solid #732d5d;
|
|
958
1003
|
}
|
|
959
1004
|
.qr-journey-form-wrapper .qr-form-filed-wrapper.error .formfield-error {
|
|
960
1005
|
position: relative;
|
|
961
1006
|
top: -10px;
|
|
962
|
-
color: #
|
|
1007
|
+
color: #732d5d;
|
|
963
1008
|
font-size: 12px;
|
|
964
1009
|
line-height: 18px;
|
|
965
1010
|
}
|
|
@@ -978,7 +1023,7 @@
|
|
|
978
1023
|
padding: 0 10px;
|
|
979
1024
|
margin: 0;
|
|
980
1025
|
border: 0px;
|
|
981
|
-
border-bottom: 1px solid #
|
|
1026
|
+
border-bottom: 1px solid #4a4e54;
|
|
982
1027
|
border-right: none;
|
|
983
1028
|
border-radius: 0;
|
|
984
1029
|
background: transparent;
|
|
@@ -1018,7 +1063,7 @@
|
|
|
1018
1063
|
height: calc(2.3em + 20px);
|
|
1019
1064
|
padding: 10px 18px;
|
|
1020
1065
|
margin: 0;
|
|
1021
|
-
border-bottom: 1px solid #
|
|
1066
|
+
border-bottom: 1px solid #4a4e54;
|
|
1022
1067
|
border-radius: 0;
|
|
1023
1068
|
font-size: 18px;
|
|
1024
1069
|
font-family: inherit;
|
|
@@ -1084,8 +1129,8 @@
|
|
|
1084
1129
|
padding-left: 2rem;
|
|
1085
1130
|
margin: 0;
|
|
1086
1131
|
color: #4a4e54;
|
|
1087
|
-
font-weight:
|
|
1088
|
-
font-size:
|
|
1132
|
+
font-weight: 700;
|
|
1133
|
+
font-size: 0.85rem;
|
|
1089
1134
|
}
|
|
1090
1135
|
.qr-journey-form-wrapper .disabled-product-fields-section .qr-form-fields {
|
|
1091
1136
|
display: flex;
|
|
@@ -1252,7 +1297,7 @@
|
|
|
1252
1297
|
}
|
|
1253
1298
|
.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop.first-page {
|
|
1254
1299
|
padding: 2rem 0 0 0;
|
|
1255
|
-
border-top: 1px solid #
|
|
1300
|
+
border-top: 1px solid #4a4e54;
|
|
1256
1301
|
}
|
|
1257
1302
|
.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li {
|
|
1258
1303
|
display: flex;
|
|
@@ -1268,7 +1313,7 @@
|
|
|
1268
1313
|
margin-bottom: 50px;
|
|
1269
1314
|
border: 1px solid #e2001a;
|
|
1270
1315
|
border-radius: 50%;
|
|
1271
|
-
color:
|
|
1316
|
+
color: #4a4e54;
|
|
1272
1317
|
font-weight: 700;
|
|
1273
1318
|
}
|
|
1274
1319
|
.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li .bullet-point::after {
|
|
@@ -1280,18 +1325,19 @@
|
|
|
1280
1325
|
width: 1.25px;
|
|
1281
1326
|
height: 25px;
|
|
1282
1327
|
margin: auto;
|
|
1283
|
-
background-color: #
|
|
1328
|
+
background-color: #4a4e54;
|
|
1284
1329
|
}
|
|
1285
1330
|
.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li .bullet-point span {
|
|
1286
1331
|
position: absolute;
|
|
1287
1332
|
inset: 0;
|
|
1288
|
-
top:
|
|
1333
|
+
top: 0.5px;
|
|
1289
1334
|
width: 1em;
|
|
1290
1335
|
height: 1em;
|
|
1291
1336
|
margin: auto;
|
|
1292
1337
|
text-align: center;
|
|
1338
|
+
font-size: 14px;
|
|
1293
1339
|
line-height: 1em;
|
|
1294
|
-
font-weight:
|
|
1340
|
+
font-weight: 700;
|
|
1295
1341
|
}
|
|
1296
1342
|
.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li:last-child .bullet-point::after {
|
|
1297
1343
|
display: none;
|
|
@@ -1299,16 +1345,27 @@
|
|
|
1299
1345
|
.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li h3 {
|
|
1300
1346
|
flex: 2;
|
|
1301
1347
|
margin: 0 10px;
|
|
1302
|
-
color:
|
|
1348
|
+
color: #4a4e54;
|
|
1303
1349
|
font-size: 1.25rem;
|
|
1304
1350
|
font-weight: 400;
|
|
1305
1351
|
line-height: 30px;
|
|
1306
1352
|
text-align: left;
|
|
1307
1353
|
}
|
|
1354
|
+
.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked {
|
|
1355
|
+
opacity: 0.5;
|
|
1356
|
+
}
|
|
1308
1357
|
.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked .bullet-point {
|
|
1309
|
-
background-color: #
|
|
1358
|
+
background-color: #4a4e54;
|
|
1359
|
+
border: 1px solid transparent;
|
|
1310
1360
|
color: #ffffff;
|
|
1311
1361
|
}
|
|
1362
|
+
.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked.current-page {
|
|
1363
|
+
opacity: 1;
|
|
1364
|
+
}
|
|
1365
|
+
.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked.current-page .bullet-point {
|
|
1366
|
+
background-color: #e2001a;
|
|
1367
|
+
border: 1px solid #e2001a;
|
|
1368
|
+
}
|
|
1312
1369
|
.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked.current-page h3 {
|
|
1313
1370
|
color: #e2001a;
|
|
1314
1371
|
font-weight: 700;
|
package/dist/index.js
CHANGED
|
@@ -650,7 +650,8 @@ const QrFormButtonAdapter = ({
|
|
|
650
650
|
}
|
|
651
651
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
652
652
|
variant: variant,
|
|
653
|
-
type: type
|
|
653
|
+
type: type,
|
|
654
|
+
size: "small"
|
|
654
655
|
}, label));
|
|
655
656
|
}
|
|
656
657
|
|
|
@@ -660,7 +661,8 @@ const QrFormButtonAdapter = ({
|
|
|
660
661
|
type: type,
|
|
661
662
|
onClick: onClick ? e => onClick(e) : undefined,
|
|
662
663
|
className: className,
|
|
663
|
-
"data-page_target": pageTarget
|
|
664
|
+
"data-page_target": pageTarget,
|
|
665
|
+
size: "small"
|
|
664
666
|
}, label);
|
|
665
667
|
};
|
|
666
668
|
const QrFormLeybold = props => {
|