@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.scss CHANGED
@@ -36,18 +36,26 @@
36
36
  border-color: #000000;
37
37
  }
38
38
  .Button-module__button--secondary___lD5E3 {
39
- color: white;
40
- background-color: #546672;
41
- border-color: #546672;
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: rgb(62.3636363636, 75.7272727273, 84.6363636364);
45
- border-color: rgb(62.3636363636, 75.7272727273, 84.6363636364);
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: 0;
870
+ top: 5px;
844
871
  left: 0;
845
- width: 1.5em;
846
- height: 1.5em;
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 #c5c7c4;
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: 1em;
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 #e2001a;
957
- border-bottom: 3px solid #e2001a;
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: #e2001a;
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 #c5c7c4;
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 #c5c7c4;
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: 400;
1088
- font-size: 1rem;
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 #c5c7c4;
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: rgba(84, 102, 114, 0.5);
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: #546672;
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: 2px;
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: 400;
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: rgba(84, 102, 114, 0.5);
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: #e2001a;
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;