@rypen-dev/shared-components 5.0.17 → 5.0.19

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.17",
+	"version": "5.0.19",
 	"main": "./dist/index.js",
 	"scripts": {
 		"build": "webpack --config ./webpack.config.js",

package/scss/_variables.scss

@@ -58,7 +58,13 @@ $price-color: $secondary-alt !default;
 $headline-accent-color: $tertiary-alt !default;
 $headline-accent-color-alt: $warning !default;
 $headline-accent-color-reversed: $white !default;
+
 $headline-divider-border-color: $medium-gray !default;
+$headline-divider-bg-color: transparent !default;
+$headline-divider-color: $text-gray !default;
+$headline-divider-reversed-color: $white !default;
+$headline-divider-padding: 0 !default;
+
 $headline-small-color: $text-gray !default;
 
 $navigation-link-color: $primary !default;
@@ -147,6 +153,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

@@ -1483,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 {
@@ -1518,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;
+            }
+        }
+    }
 }

package/scss/partials/_typography.scss

@@ -229,19 +229,21 @@ h5 {
         line-height: 1.2;
         font-weight: 500;
         letter-spacing: 1px;
-        color: $text-gray;
         margin-bottom: 15px;
+        background-color: $headline-divider-bg-color;
+        color: $headline-divider-color;
+        padding: $headline-divider-padding;
 
         &.inverse {
-            background-color: $text-gray;
-            color: $white;
+            background-color: $headline-divider-color;
+            color: $headline-divider-reversed-color;
             padding: 0.25rem 0.5rem;
         }
     
         &.lite {
             font-size: 0.875rem;
             padding-bottom: 0.25rem;
-            border-bottom: solid 2px $text-gray;
+            border-bottom: solid 2px $headline-divider-color;
             margin-bottom: 0.25rem;
         }