@rypen-dev/shared-components 5.0.16 → 5.0.18

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@rypen-dev/shared-components",
 	"description": "Shared styles and Vuejs ui components for Rypen projects.",
-	"version": "5.0.16",
+	"version": "5.0.18",
 	"main": "./dist/index.js",
 	"scripts": {
 		"build": "webpack --config ./webpack.config.js",

package/scss/_variables.scss

@@ -147,6 +147,10 @@ $checkbox-image-tertiary: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d
 $checkbox-image-warning: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDMwIDMwIj4NCiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI2ZmYjUzYiI+DQogICAgICAgIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzIiBkPSJNOCAxN2w1IDUgOS0xMyIvPg0KICAgIDwvZz4NCjwvc3ZnPg0K" !default;
 $checkbox-image-success-alt: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDMwIDMwIj4NCiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iIzNBOEE4MSI+DQogICAgICAgIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzIiBkPSJNOCAxN2w1IDUgOS0xMyIvPg0KICAgIDwvZz4NCjwvc3ZnPg0K" !default;
 
+$credit-card-icon-image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNSIgaGVpZ2h0PSIyNCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzUgMjQiPg0KICA8cmVjdCBmaWxsPSIjZjdmN2Y3IiBzdHJva2U9IiM4ZDdiY2QiIHg9Ii41IiB5PSIuNSIgd2lkdGg9IjM0IiBoZWlnaHQ9IjIzIiByeD0iMyIgcnk9IjMiLz4NCiAgPHBhdGggZmlsbD0iIzhkN2JjZCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS44LDE2aDExLjd2Mkg1Ljh2LTJaTTUuOCwxMmgxOS40djJINS44di0yWiIvPg0KPC9zdmc+';
+$mail-icon-image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNSIgaGVpZ2h0PSIyNCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzUgMjQiPg0KICA8cmVjdCBmaWxsPSIjZjdmN2Y3IiBzdHJva2U9IiM4ZDdiY2QiIHg9Ii41IiB5PSIuNSIgd2lkdGg9IjM0IiBoZWlnaHQ9IjIzIiByeD0iMyIgcnk9IjMiLz4NCiAgPGxpbmUgc3Ryb2tlPSIjOGQ3YmNkIiB4MT0iMzMuNjkiIHkxPSIyMi41MiIgeDI9IjIyLjA3IiB5Mj0iMTEuODkiLz4NCiAgPGxpbmUgc3Ryb2tlPSIjOGQ3YmNkIiB4MT0iMS4yOCIgeTE9IjIyLjUyIiB4Mj0iMTQiIHkyPSIxMiIvPg0KICA8cGF0aCBmaWxsPSIjZDBlYmVjIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iIzhkN2JjZCIgZD0iTTMzLjYyLDEuMzhjLS41NC0uNTQtMS4yOS0uODgtMi4xMi0uODhIMy41Yy0uNjktLjAyLTEuNy40NC0yLjA3LjgybC0uMTEuMTQsNS41Niw2LjE5czUuMDksNi4wMSwxMC41OSw2LjAxLDExLjAzLTYuMTUsMTEuMDMtNi4xNWw1LjE1LTYuMDMtLjAyLS4xWiIvPg0KPC9zdmc+';
+$check-icon-image: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQwIiBoZWlnaHQ9IjI0IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0MCAyNCI+DQogIDwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiAyLjEuMCBCdWlsZCAxNDIpICAtLT4NCiAgPGRlZnM+DQogICAgPHN0eWxlPg0KICAgICAgLnN0MCwgLnN0MSwgLnN0MiwgLnN0MywgLnN0NCwgLnN0NSB7DQogICAgICAgIHN0cm9rZTogIzhkN2JjZDsNCiAgICAgIH0NCg0KICAgICAgLnN0MCwgLnN0NiB7DQogICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsNCiAgICAgIH0NCg0KICAgICAgLnN0MCwgLnN0NCwgLnN0NSB7DQogICAgICAgIGZpbGw6IG5vbmU7DQogICAgICAgIHN0cm9rZS1taXRlcmxpbWl0OiAxMDsNCiAgICAgIH0NCg0KICAgICAgLnN0MSB7DQogICAgICAgIGRpc3BsYXk6IG5vbmU7DQogICAgICB9DQoNCiAgICAgIC5zdDEsIC5zdDIgew0KICAgICAgICBmaWxsOiAjZjdmN2Y3Ow0KICAgICAgfQ0KDQogICAgICAuc3QzIHsNCiAgICAgICAgZmlsbDogI2QwZWJlYzsNCiAgICAgIH0NCg0KICAgICAgLnN0NiB7DQogICAgICAgIGZpbGw6ICM4ZDdiY2Q7DQogICAgICB9DQoNCiAgICAgIC5zdDQgew0KICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsNCiAgICAgIH0NCiAgICA8L3N0eWxlPg0KICA8L2RlZnM+DQogIDxyZWN0IGNsYXNzPSJzdDEiIHg9IjMiIHk9Ii41IiB3aWR0aD0iMzQiIGhlaWdodD0iMjMiIHJ4PSIzIiByeT0iMyIvPg0KICA8cmVjdCBjbGFzcz0ic3QyIiB4PSIuNSIgeT0iLjUiIHdpZHRoPSIzOSIgaGVpZ2h0PSIyMyIgcng9IjMiIHJ5PSIzIi8+DQogIDxyZWN0IGNsYXNzPSJzdDMiIHg9IjEyLjQiIHk9IjUiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0LjYiLz4NCiAgPGxpbmUgY2xhc3M9InN0NSIgeDE9IjI1LjEiIHkxPSIxOS41IiB4Mj0iMzYuNSIgeTI9IjE5LjUiLz4NCiAgPHBhdGggY2xhc3M9InN0NiIgZD0iTTYuMSw2LjZ2LTEuM2MuMywwLC43LjMsMS4xLjVsLjYtMWMtLjUtLjMtMS0uNS0xLjYtLjZ2LS41aC0uOXYuNWMtMS4xLjEtMS44LjctMS44LDEuN2gwYzAsMSwuNiwxLjUsMS44LDEuOHYxLjRjLS41LS4xLS45LS4zLTEuNC0uN2wtLjcsMWMuNi40LDEuMy43LDIsLjh2LjloLjl2LS44YzEuMS0uMSwxLjgtLjcsMS44LTEuN2gwYzAtMS0uNi0xLjUtMS45LTEuOFpNNS4zLDYuNGMtLjUtLjItLjYtLjMtLjYtLjZoMGMwLS4zLjItLjUuNi0uNXYxLjJaTTYuNyw4LjVjMCwuMy0uMi41LS42LjV2LTEuMmMuNS4yLjYuMy42LjZoMFoiLz4NCiAgPGxpbmUgY2xhc3M9InN0NCIgeDE9IjMuMiIgeTE9IjE5IiB4Mj0iMTkuMiIgeTI9IjE5Ii8+DQogIDxsaW5lIGNsYXNzPSJzdDQiIHgxPSIzLjIiIHkxPSIxNS41IiB4Mj0iMTkuMiIgeTI9IjE1LjUiLz4NCiAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTI1LjgsMTYuN2MuOS4yLDIuNCwwLDIuOC0uNS40LS41LjYtMS41LjEtMS45LS40LS40LTEuNC0uMS0xLjYuNC0uNC43LjksMi41LDEuOSwyLjhzMi43LTIuNSwzLjctMi4xYy43LjIsMCwxLjguNywyLC43LjIsMS44LS44LDIuNi0xLjgiLz4NCjwvc3ZnPg==';
+
 // Fonts
 $body-font-family: 'Open Sans', sans-serif !default;
 $headline-font-family: 'Ubuntu', sans-serif !default;

package/scss/partials/_flyovers.scss

@@ -66,7 +66,7 @@
         width: 50vw;
 
         .body.restricted {
-            max-width: #{$true-max-width * 0.5};
+            max-width: #{$global-width * 0.5};
         }
     }
 }

package/scss/partials/_forms.scss

@@ -717,6 +717,7 @@ label {
             padding-right: 0;
             padding-top: 0;
             padding-bottom: 0;
+            background-color: transparent;
         }
 
         &.error {
@@ -1482,27 +1483,39 @@ body.hover-capable {
     }
 
     &.check {
-
+        span {
+            width: 35px;
+            height: 24px;
+            background-image: $mail-icon-image;
+        }
     }
 
     &.ach {
-
+        span {
+            width: 35px;
+            height: 25px;
+            background-image: $check-icon-image;
+        }
     }
 
     &.affirm {
-
+        span {
+        }
     }
 
     &.apple-pay {
-
+        span {
+        }
     }
 
     &.google-pay {
-
+        span {
+        }
     }
 
     &.shop-pay {
-
+        span {
+        }
     }
 
     &.paypal {
@@ -1517,7 +1530,7 @@ body.hover-capable {
         span {
             width: 35px;
             height: 25px;
-            background-image: url('/assets/images/icon-credit-card-default.svg');
+            background-image: $credit-card-icon-image;
         }
 
         &.no-color span {

package/scss/partials/_layout.scss

@@ -409,4 +409,79 @@ hr {
             }
         }
     }
+}
+
+.horizontal-link-list {
+    a {
+        display: inline-block;
+        margin: 0 10px 10px 0;
+
+        i {
+            font-size: 1.1875rem;
+        }
+    }
+
+    &.text-center {
+        a {
+            margin-left: 10px;
+        }
+    }
+
+    &.with-dividers {
+        a {
+            margin-right: 0;
+            margin-left: 0;
+
+            &::after {
+                color: $medium-gray;
+                content: '|';
+                display: inline-block;
+                font-weight: 600;
+                padding: 0 10px;
+            }
+
+            &:last-child::after {
+                display: none;
+            }
+        }
+    }
+
+    &.dark-colors {
+        a {
+            color: $primary;
+        }
+    }
+
+    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+        a {
+            margin-right: 30px;
+        }
+
+        &.text-center {
+            a {
+                margin-left: 30px;
+            }
+        }
+
+        &.with-dividers {
+            a::after {
+                padding: 0 30px;
+            }
+
+            &.compact {
+                a::after {
+                    padding: 0 20px;
+                }
+            }
+        }
+
+        &.dark-colors {
+            font-size: 1.0625rem;
+
+            a {
+                font-size: 1.0625rem;
+                letter-spacing: 2px;
+            }
+        }
+    }
 }