@rypen-dev/shared-components 5.0.17 → 5.0.18

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/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@rypen-dev/shared-components",
3
3
  "description": "Shared styles and Vuejs ui components for Rypen projects.",
4
- "version": "5.0.17",
4
+ "version": "5.0.18",
5
5
  "main": "./dist/index.js",
6
6
  "scripts": {
7
7
  "build": "webpack --config ./webpack.config.js",
@@ -147,6 +147,10 @@ $checkbox-image-tertiary: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d
147
147
  $checkbox-image-warning: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDMwIDMwIj4NCiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI2ZmYjUzYiI+DQogICAgICAgIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzIiBkPSJNOCAxN2w1IDUgOS0xMyIvPg0KICAgIDwvZz4NCjwvc3ZnPg0K" !default;
148
148
  $checkbox-image-success-alt: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDMwIDMwIj4NCiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iIzNBOEE4MSI+DQogICAgICAgIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzIiBkPSJNOCAxN2w1IDUgOS0xMyIvPg0KICAgIDwvZz4NCjwvc3ZnPg0K" !default;
149
149
 
150
+ $credit-card-icon-image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNSIgaGVpZ2h0PSIyNCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzUgMjQiPg0KICA8cmVjdCBmaWxsPSIjZjdmN2Y3IiBzdHJva2U9IiM4ZDdiY2QiIHg9Ii41IiB5PSIuNSIgd2lkdGg9IjM0IiBoZWlnaHQ9IjIzIiByeD0iMyIgcnk9IjMiLz4NCiAgPHBhdGggZmlsbD0iIzhkN2JjZCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS44LDE2aDExLjd2Mkg1Ljh2LTJaTTUuOCwxMmgxOS40djJINS44di0yWiIvPg0KPC9zdmc+';
151
+ $mail-icon-image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNSIgaGVpZ2h0PSIyNCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzUgMjQiPg0KICA8cmVjdCBmaWxsPSIjZjdmN2Y3IiBzdHJva2U9IiM4ZDdiY2QiIHg9Ii41IiB5PSIuNSIgd2lkdGg9IjM0IiBoZWlnaHQ9IjIzIiByeD0iMyIgcnk9IjMiLz4NCiAgPGxpbmUgc3Ryb2tlPSIjOGQ3YmNkIiB4MT0iMzMuNjkiIHkxPSIyMi41MiIgeDI9IjIyLjA3IiB5Mj0iMTEuODkiLz4NCiAgPGxpbmUgc3Ryb2tlPSIjOGQ3YmNkIiB4MT0iMS4yOCIgeTE9IjIyLjUyIiB4Mj0iMTQiIHkyPSIxMiIvPg0KICA8cGF0aCBmaWxsPSIjZDBlYmVjIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iIzhkN2JjZCIgZD0iTTMzLjYyLDEuMzhjLS41NC0uNTQtMS4yOS0uODgtMi4xMi0uODhIMy41Yy0uNjktLjAyLTEuNy40NC0yLjA3LjgybC0uMTEuMTQsNS41Niw2LjE5czUuMDksNi4wMSwxMC41OSw2LjAxLDExLjAzLTYuMTUsMTEuMDMtNi4xNWw1LjE1LTYuMDMtLjAyLS4xWiIvPg0KPC9zdmc+';
152
+ $check-icon-image: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQwIiBoZWlnaHQ9IjI0IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0MCAyNCI+DQogIDwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiAyLjEuMCBCdWlsZCAxNDIpICAtLT4NCiAgPGRlZnM+DQogICAgPHN0eWxlPg0KICAgICAgLnN0MCwgLnN0MSwgLnN0MiwgLnN0MywgLnN0NCwgLnN0NSB7DQogICAgICAgIHN0cm9rZTogIzhkN2JjZDsNCiAgICAgIH0NCg0KICAgICAgLnN0MCwgLnN0NiB7DQogICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsNCiAgICAgIH0NCg0KICAgICAgLnN0MCwgLnN0NCwgLnN0NSB7DQogICAgICAgIGZpbGw6IG5vbmU7DQogICAgICAgIHN0cm9rZS1taXRlcmxpbWl0OiAxMDsNCiAgICAgIH0NCg0KICAgICAgLnN0MSB7DQogICAgICAgIGRpc3BsYXk6IG5vbmU7DQogICAgICB9DQoNCiAgICAgIC5zdDEsIC5zdDIgew0KICAgICAgICBmaWxsOiAjZjdmN2Y3Ow0KICAgICAgfQ0KDQogICAgICAuc3QzIHsNCiAgICAgICAgZmlsbDogI2QwZWJlYzsNCiAgICAgIH0NCg0KICAgICAgLnN0NiB7DQogICAgICAgIGZpbGw6ICM4ZDdiY2Q7DQogICAgICB9DQoNCiAgICAgIC5zdDQgew0KICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsNCiAgICAgIH0NCiAgICA8L3N0eWxlPg0KICA8L2RlZnM+DQogIDxyZWN0IGNsYXNzPSJzdDEiIHg9IjMiIHk9Ii41IiB3aWR0aD0iMzQiIGhlaWdodD0iMjMiIHJ4PSIzIiByeT0iMyIvPg0KICA8cmVjdCBjbGFzcz0ic3QyIiB4PSIuNSIgeT0iLjUiIHdpZHRoPSIzOSIgaGVpZ2h0PSIyMyIgcng9IjMiIHJ5PSIzIi8+DQogIDxyZWN0IGNsYXNzPSJzdDMiIHg9IjEyLjQiIHk9IjUiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0LjYiLz4NCiAgPGxpbmUgY2xhc3M9InN0NSIgeDE9IjI1LjEiIHkxPSIxOS41IiB4Mj0iMzYuNSIgeTI9IjE5LjUiLz4NCiAgPHBhdGggY2xhc3M9InN0NiIgZD0iTTYuMSw2LjZ2LTEuM2MuMywwLC43LjMsMS4xLjVsLjYtMWMtLjUtLjMtMS0uNS0xLjYtLjZ2LS41aC0uOXYuNWMtMS4xLjEtMS44LjctMS44LDEuN2gwYzAsMSwuNiwxLjUsMS44LDEuOHYxLjRjLS41LS4xLS45LS4zLTEuNC0uN2wtLjcsMWMuNi40LDEuMy43LDIsLjh2LjloLjl2LS44YzEuMS0uMSwxLjgtLjcsMS44LTEuN2gwYzAtMS0uNi0xLjUtMS45LTEuOFpNNS4zLDYuNGMtLjUtLjItLjYtLjMtLjYtLjZoMGMwLS4zLjItLjUuNi0uNXYxLjJaTTYuNyw4LjVjMCwuMy0uMi41LS42LjV2LTEuMmMuNS4yLjYuMy42LjZoMFoiLz4NCiAgPGxpbmUgY2xhc3M9InN0NCIgeDE9IjMuMiIgeTE9IjE5IiB4Mj0iMTkuMiIgeTI9IjE5Ii8+DQogIDxsaW5lIGNsYXNzPSJzdDQiIHgxPSIzLjIiIHkxPSIxNS41IiB4Mj0iMTkuMiIgeTI9IjE1LjUiLz4NCiAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTI1LjgsMTYuN2MuOS4yLDIuNCwwLDIuOC0uNS40LS41LjYtMS41LjEtMS45LS40LS40LTEuNC0uMS0xLjYuNC0uNC43LjksMi41LDEuOSwyLjhzMi43LTIuNSwzLjctMi4xYy43LjIsMCwxLjguNywyLC43LjIsMS44LS44LDIuNi0xLjgiLz4NCjwvc3ZnPg==';
153
+
150
154
  // Fonts
151
155
  $body-font-family: 'Open Sans', sans-serif !default;
152
156
  $headline-font-family: 'Ubuntu', sans-serif !default;
@@ -66,7 +66,7 @@
66
66
  width: 50vw;
67
67
 
68
68
  .body.restricted {
69
- max-width: #{$true-max-width * 0.5};
69
+ max-width: #{$global-width * 0.5};
70
70
  }
71
71
  }
72
72
  }
@@ -1483,27 +1483,39 @@ body.hover-capable {
1483
1483
  }
1484
1484
 
1485
1485
  &.check {
1486
-
1486
+ span {
1487
+ width: 35px;
1488
+ height: 24px;
1489
+ background-image: $mail-icon-image;
1490
+ }
1487
1491
  }
1488
1492
 
1489
1493
  &.ach {
1490
-
1494
+ span {
1495
+ width: 35px;
1496
+ height: 25px;
1497
+ background-image: $check-icon-image;
1498
+ }
1491
1499
  }
1492
1500
 
1493
1501
  &.affirm {
1494
-
1502
+ span {
1503
+ }
1495
1504
  }
1496
1505
 
1497
1506
  &.apple-pay {
1498
-
1507
+ span {
1508
+ }
1499
1509
  }
1500
1510
 
1501
1511
  &.google-pay {
1502
-
1512
+ span {
1513
+ }
1503
1514
  }
1504
1515
 
1505
1516
  &.shop-pay {
1506
-
1517
+ span {
1518
+ }
1507
1519
  }
1508
1520
 
1509
1521
  &.paypal {
@@ -1518,7 +1530,7 @@ body.hover-capable {
1518
1530
  span {
1519
1531
  width: 35px;
1520
1532
  height: 25px;
1521
- background-image: url('/assets/images/icon-credit-card-default.svg');
1533
+ background-image: $credit-card-icon-image;
1522
1534
  }
1523
1535
 
1524
1536
  &.no-color span {
@@ -409,4 +409,79 @@ hr {
409
409
  }
410
410
  }
411
411
  }
412
+ }
413
+
414
+ .horizontal-link-list {
415
+ a {
416
+ display: inline-block;
417
+ margin: 0 10px 10px 0;
418
+
419
+ i {
420
+ font-size: 1.1875rem;
421
+ }
422
+ }
423
+
424
+ &.text-center {
425
+ a {
426
+ margin-left: 10px;
427
+ }
428
+ }
429
+
430
+ &.with-dividers {
431
+ a {
432
+ margin-right: 0;
433
+ margin-left: 0;
434
+
435
+ &::after {
436
+ color: $medium-gray;
437
+ content: '|';
438
+ display: inline-block;
439
+ font-weight: 600;
440
+ padding: 0 10px;
441
+ }
442
+
443
+ &:last-child::after {
444
+ display: none;
445
+ }
446
+ }
447
+ }
448
+
449
+ &.dark-colors {
450
+ a {
451
+ color: $primary;
452
+ }
453
+ }
454
+
455
+ @media print, screen and (min-width: map-get($breakpoints, medium)) {
456
+ a {
457
+ margin-right: 30px;
458
+ }
459
+
460
+ &.text-center {
461
+ a {
462
+ margin-left: 30px;
463
+ }
464
+ }
465
+
466
+ &.with-dividers {
467
+ a::after {
468
+ padding: 0 30px;
469
+ }
470
+
471
+ &.compact {
472
+ a::after {
473
+ padding: 0 20px;
474
+ }
475
+ }
476
+ }
477
+
478
+ &.dark-colors {
479
+ font-size: 1.0625rem;
480
+
481
+ a {
482
+ font-size: 1.0625rem;
483
+ letter-spacing: 2px;
484
+ }
485
+ }
486
+ }
412
487
  }