@asantemedia-org/leybold-design-system 1.0.6 → 1.0.8
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 +88 -25
- package/dist/index.js +4 -2
- package/dist/index.js.map +1 -1
- package/dist/index.scss +88 -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
|
}
|
|
@@ -700,6 +721,12 @@
|
|
|
700
721
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
|
701
722
|
font-size: 18px;
|
|
702
723
|
}
|
|
724
|
+
.qr-journey-form-wrapper ::-moz-placeholder {
|
|
725
|
+
font-style: normal;
|
|
726
|
+
}
|
|
727
|
+
.qr-journey-form-wrapper ::placeholder {
|
|
728
|
+
font-style: normal;
|
|
729
|
+
}
|
|
703
730
|
.qr-journey-form-wrapper h1 {
|
|
704
731
|
font-size: 28px;
|
|
705
732
|
font-weight: 400;
|
|
@@ -840,10 +867,10 @@
|
|
|
840
867
|
}
|
|
841
868
|
.qr-journey-form-wrapper .qr-form-filed-wrapper.checkbox label input, .qr-journey-form-wrapper .qr-form-filed-wrapper.info label input {
|
|
842
869
|
position: absolute;
|
|
843
|
-
top:
|
|
870
|
+
top: 5px;
|
|
844
871
|
left: 0;
|
|
845
|
-
width: 1.
|
|
846
|
-
height: 1.
|
|
872
|
+
width: 1.25rem;
|
|
873
|
+
height: 1.25rem;
|
|
847
874
|
margin: 0;
|
|
848
875
|
}
|
|
849
876
|
.qr-journey-form-wrapper .qr-form-filed-wrapper.checkbox .formfield-error, .qr-journey-form-wrapper .qr-form-filed-wrapper.info .formfield-error {
|
|
@@ -861,7 +888,7 @@
|
|
|
861
888
|
height: 2.3em;
|
|
862
889
|
line-height: 2em;
|
|
863
890
|
border: none;
|
|
864
|
-
border-bottom: 1px solid #
|
|
891
|
+
border-bottom: 1px solid #4a4e54;
|
|
865
892
|
border-radius: 0;
|
|
866
893
|
background-color: transparent;
|
|
867
894
|
}
|
|
@@ -892,6 +919,11 @@
|
|
|
892
919
|
.qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=tel]:focus-visible {
|
|
893
920
|
padding: 9px 18px;
|
|
894
921
|
}
|
|
922
|
+
.qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=checkbox],
|
|
923
|
+
.qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=checkbox],
|
|
924
|
+
.qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=checkbox] {
|
|
925
|
+
color: #99a1ab;
|
|
926
|
+
}
|
|
895
927
|
.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
928
|
.qr-journey-form-wrapper .qr-form-filed-wrapper label select:active,
|
|
897
929
|
.qr-journey-form-wrapper .qr-form-filed-wrapper label select:focus,
|
|
@@ -903,12 +935,28 @@
|
|
|
903
935
|
border-bottom: 3px solid #6ea67b;
|
|
904
936
|
outline: none;
|
|
905
937
|
}
|
|
938
|
+
.qr-journey-form-wrapper .qr-form-filed-wrapper label input::-moz-placeholder {
|
|
939
|
+
color: #383e42;
|
|
940
|
+
}
|
|
941
|
+
.qr-journey-form-wrapper .qr-form-filed-wrapper label input::placeholder {
|
|
942
|
+
color: #383e42;
|
|
943
|
+
}
|
|
906
944
|
.qr-journey-form-wrapper .qr-form-filed-wrapper label select,
|
|
907
945
|
.qr-journey-form-wrapper .qr-form-filed-wrapper label textarea {
|
|
908
|
-
line-height:
|
|
909
|
-
padding: 1.5rem 1rem 0 1rem;
|
|
946
|
+
line-height: 1;
|
|
947
|
+
padding: 1.5rem 1rem 0.5rem 1rem;
|
|
910
948
|
box-sizing: content-box;
|
|
911
949
|
}
|
|
950
|
+
.qr-journey-form-wrapper .qr-form-filed-wrapper label textarea {
|
|
951
|
+
display: table-cell;
|
|
952
|
+
vertical-align: middle;
|
|
953
|
+
}
|
|
954
|
+
.qr-journey-form-wrapper .qr-form-filed-wrapper label textarea::-moz-placeholder {
|
|
955
|
+
color: #99a1ab;
|
|
956
|
+
}
|
|
957
|
+
.qr-journey-form-wrapper .qr-form-filed-wrapper label textarea::placeholder {
|
|
958
|
+
color: #99a1ab;
|
|
959
|
+
}
|
|
912
960
|
.qr-journey-form-wrapper .qr-form-filed-wrapper label select {
|
|
913
961
|
padding: 10px 18px;
|
|
914
962
|
position: relative;
|
|
@@ -944,6 +992,9 @@
|
|
|
944
992
|
top: -11px;
|
|
945
993
|
border-bottom-color: #383e42;
|
|
946
994
|
}
|
|
995
|
+
.qr-journey-form-wrapper .qr-form-filed-wrapper label select option {
|
|
996
|
+
color: #383e42;
|
|
997
|
+
}
|
|
947
998
|
.qr-journey-form-wrapper .qr-form-filed-wrapper label > .label {
|
|
948
999
|
display: none;
|
|
949
1000
|
position: relative;
|
|
@@ -953,13 +1004,13 @@
|
|
|
953
1004
|
line-height: 0;
|
|
954
1005
|
}
|
|
955
1006
|
.qr-journey-form-wrapper .qr-form-filed-wrapper.error label input {
|
|
956
|
-
border: 1px solid #
|
|
957
|
-
border-bottom: 3px solid #
|
|
1007
|
+
border: 1px solid #732d5d;
|
|
1008
|
+
border-bottom: 3px solid #732d5d;
|
|
958
1009
|
}
|
|
959
1010
|
.qr-journey-form-wrapper .qr-form-filed-wrapper.error .formfield-error {
|
|
960
1011
|
position: relative;
|
|
961
1012
|
top: -10px;
|
|
962
|
-
color: #
|
|
1013
|
+
color: #732d5d;
|
|
963
1014
|
font-size: 12px;
|
|
964
1015
|
line-height: 18px;
|
|
965
1016
|
}
|
|
@@ -978,7 +1029,7 @@
|
|
|
978
1029
|
padding: 0 10px;
|
|
979
1030
|
margin: 0;
|
|
980
1031
|
border: 0px;
|
|
981
|
-
border-bottom: 1px solid #
|
|
1032
|
+
border-bottom: 1px solid #4a4e54;
|
|
982
1033
|
border-right: none;
|
|
983
1034
|
border-radius: 0;
|
|
984
1035
|
background: transparent;
|
|
@@ -1018,7 +1069,7 @@
|
|
|
1018
1069
|
height: calc(2.3em + 20px);
|
|
1019
1070
|
padding: 10px 18px;
|
|
1020
1071
|
margin: 0;
|
|
1021
|
-
border-bottom: 1px solid #
|
|
1072
|
+
border-bottom: 1px solid #4a4e54;
|
|
1022
1073
|
border-radius: 0;
|
|
1023
1074
|
font-size: 18px;
|
|
1024
1075
|
font-family: inherit;
|
|
@@ -1084,8 +1135,8 @@
|
|
|
1084
1135
|
padding-left: 2rem;
|
|
1085
1136
|
margin: 0;
|
|
1086
1137
|
color: #4a4e54;
|
|
1087
|
-
font-weight:
|
|
1088
|
-
font-size:
|
|
1138
|
+
font-weight: 700;
|
|
1139
|
+
font-size: 0.85rem;
|
|
1089
1140
|
}
|
|
1090
1141
|
.qr-journey-form-wrapper .disabled-product-fields-section .qr-form-fields {
|
|
1091
1142
|
display: flex;
|
|
@@ -1252,7 +1303,7 @@
|
|
|
1252
1303
|
}
|
|
1253
1304
|
.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop.first-page {
|
|
1254
1305
|
padding: 2rem 0 0 0;
|
|
1255
|
-
border-top: 1px solid #
|
|
1306
|
+
border-top: 1px solid #4a4e54;
|
|
1256
1307
|
}
|
|
1257
1308
|
.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li {
|
|
1258
1309
|
display: flex;
|
|
@@ -1268,7 +1319,7 @@
|
|
|
1268
1319
|
margin-bottom: 50px;
|
|
1269
1320
|
border: 1px solid #e2001a;
|
|
1270
1321
|
border-radius: 50%;
|
|
1271
|
-
color:
|
|
1322
|
+
color: #4a4e54;
|
|
1272
1323
|
font-weight: 700;
|
|
1273
1324
|
}
|
|
1274
1325
|
.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li .bullet-point::after {
|
|
@@ -1280,18 +1331,19 @@
|
|
|
1280
1331
|
width: 1.25px;
|
|
1281
1332
|
height: 25px;
|
|
1282
1333
|
margin: auto;
|
|
1283
|
-
background-color: #
|
|
1334
|
+
background-color: #4a4e54;
|
|
1284
1335
|
}
|
|
1285
1336
|
.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li .bullet-point span {
|
|
1286
1337
|
position: absolute;
|
|
1287
1338
|
inset: 0;
|
|
1288
|
-
top:
|
|
1339
|
+
top: 0.5px;
|
|
1289
1340
|
width: 1em;
|
|
1290
1341
|
height: 1em;
|
|
1291
1342
|
margin: auto;
|
|
1292
1343
|
text-align: center;
|
|
1344
|
+
font-size: 14px;
|
|
1293
1345
|
line-height: 1em;
|
|
1294
|
-
font-weight:
|
|
1346
|
+
font-weight: 700;
|
|
1295
1347
|
}
|
|
1296
1348
|
.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li:last-child .bullet-point::after {
|
|
1297
1349
|
display: none;
|
|
@@ -1299,16 +1351,27 @@
|
|
|
1299
1351
|
.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li h3 {
|
|
1300
1352
|
flex: 2;
|
|
1301
1353
|
margin: 0 10px;
|
|
1302
|
-
color:
|
|
1354
|
+
color: #4a4e54;
|
|
1303
1355
|
font-size: 1.25rem;
|
|
1304
1356
|
font-weight: 400;
|
|
1305
1357
|
line-height: 30px;
|
|
1306
1358
|
text-align: left;
|
|
1307
1359
|
}
|
|
1360
|
+
.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked {
|
|
1361
|
+
opacity: 0.5;
|
|
1362
|
+
}
|
|
1308
1363
|
.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked .bullet-point {
|
|
1309
|
-
background-color: #
|
|
1364
|
+
background-color: #4a4e54;
|
|
1365
|
+
border: 1px solid transparent;
|
|
1310
1366
|
color: #ffffff;
|
|
1311
1367
|
}
|
|
1368
|
+
.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked.current-page {
|
|
1369
|
+
opacity: 1;
|
|
1370
|
+
}
|
|
1371
|
+
.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked.current-page .bullet-point {
|
|
1372
|
+
background-color: #e2001a;
|
|
1373
|
+
border: 1px solid #e2001a;
|
|
1374
|
+
}
|
|
1312
1375
|
.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked.current-page h3 {
|
|
1313
1376
|
color: #e2001a;
|
|
1314
1377
|
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 => {
|