@rypen-dev/shared-components 4.2.14 → 5.0.1

package/package.json

@@ -1,30 +1,30 @@
 {
 	"name": "@rypen-dev/shared-components",
 	"description": "Shared styles and Vuejs ui components for Rypen projects.",
-	"version": "4.2.14",
+	"version": "5.0.1",
 	"main": "./dist/index.js",
 	"scripts": {
 		"build": "webpack --config ./webpack.config.js",
 		"prepare": "webpack --config ./webpack.config.js"
 	},
 	"dependencies": {
-		"@fortawesome/fontawesome-free": "6.4.2",
+		"@fortawesome/fontawesome-free": "6.5.2",
 		"@rypen-dev/helpers": "1.0.24",
 		"foundation-sites": "6.8.1",
 		"moment": "2.29.4"
 	},
 	"devDependencies": {
-		"@babel/cli": "7.22.10",
-		"@babel/core": "7.22.10",
-		"@babel/preset-env": "7.22.10",
-		"babel-loader": "9.1.3",
+		"@babel/cli": "7.2.3",
+		"@babel/core": "7.2.2",
+		"@babel/preset-env": "7.2.3",
+		"babel-loader": "8.0.5",
 		"babel-preset-vue": "2.0.2",
-		"url-loader": "4.1.1",
-		"vue-loader": "17.2.2",
-		"vue-template-compiler": "2.7.14",
-		"webpack": "5.88.2",
-		"webpack-cli": "5.1.4",
-		"vue": "3.3.4"
+		"url-loader": "1.1.2",
+		"vue-loader": "15.4.1",
+		"vue-template-compiler": "2.7.10",
+		"webpack": "4.46.0",
+		"webpack-cli": "3.3.12",
+		"vue": "2.7.10"
 	},
 	"files": [
 		"/src",

package/scss/_variables.scss

@@ -59,7 +59,7 @@ $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-small-color: $medium-gray !default;
+$headline-small-color: $text-gray !default;
 
 $navigation-link-color: $primary !default;
 $navigation-link-highlight: $warning !default;

package/scss/partials/_badges.scss

@@ -43,6 +43,12 @@
         border-color: $alert;
     }
 
+    &.text-gray {
+        background-color: $text-gray;
+        border-color: $text-gray;
+        color: $white;
+    }
+
     &.secondary-purple,
     &.secondary-alt {
         background: $secondary-alt;
@@ -82,6 +88,10 @@
         &.alert {
             color: $alert;
         }
+
+        &.text-gray {
+            color: $text-gray;
+        }
     
         &.secondary-purple,
         &.secondary-alt {

package/scss/partials/_buttons.scss

@@ -221,10 +221,24 @@ a.info {
         width: 20px;
         height: 20px;
         line-height: 20px;
+        font-family: $body-font-family;
+        letter-spacing: 0;
+        text-transform: none;
         text-align: center;
         font-weight: 600;
     }
 
+    &.small {
+        > span {
+            font-size: 0.75rem;
+            width: 20px;
+            height: 20px;
+            line-height: 20px;
+            position: relative;
+            top: -2px;
+        }
+    }
+
     @media print, screen and (min-width: map-get($breakpoints, medium)) {
         > span {
             width: 24px;
@@ -246,6 +260,7 @@ a.info {
     line-height: 0.75rem;
     font-size: 0.875rem;
     font-weight: $body-weight-normal;
+    white-space: nowrap;
     transition: color 300ms;
 
     &::before {
@@ -308,6 +323,40 @@ a.info {
         }
     }
 
+    &.small {
+        font-size: 0.875rem;
+        letter-spacing: 1.5px;
+
+        &::before {
+            border-bottom-width: 1px;
+        }
+        
+        &::after {
+            border-top-width: 1px;
+            border-right-width: 1px;
+            width: 9px;
+            height: 9px;
+        }
+    }
+
+    &.secondary {
+        color: $secondary;
+    
+        &::before,
+        &::after {
+            border-color: $secondary;
+        }
+    }
+    
+    &.success-alt {
+        color: $success-alt;
+    
+        &::before,
+        &::after {
+            border-color: $success-alt;
+        }
+    }
+
     &.color-text-gray {
         &::before {
             border-bottom-color: $text-gray;
@@ -361,17 +410,26 @@ a.info {
         }
     }
 
-    &.small-no-tail {
-        @media screen and (max-width: map-get($breakpoints, medium) - 1px) {
-            padding-right: 20px;
+    &.no-tail {
+        padding-right: 20px;
 
             &::before {
                 display: none;
             }
 
-            &::after {
+            &.reversed {
+                padding-right: 0;
+                padding-left: 20px;
             }
+    }
 
+    &.small-no-tail {
+        @media screen and (max-width: map-get($breakpoints, medium) - 1px) {
+            padding-right: 20px;
+
+            &::before {
+                display: none;
+            }
             &.reversed {
                 padding-right: 0;
                 padding-left: 20px;
@@ -414,6 +472,12 @@ a.info {
             padding-left: $short-arrow-width + 10px;
         }
 
+        &.small {
+            &::after {
+                border-left-width: 1px;
+            }
+        }
+
         &.color-text-gray {
             &::after {
                 border-left-color: $text-gray;
@@ -488,9 +552,6 @@ a.info {
                 display: none;
             }
 
-            &::after {
-            }
-
             &.reversed {
                 padding-right: 0;
                 padding-left: 20px;
@@ -806,6 +867,16 @@ button,
         margin-right: 4px;
     }
 
+    > svg {
+        width: 28px;
+        height: 28px;
+        vertical-align: middle;
+        position: relative;
+        top: -2px;
+        margin-left: 6px;
+        margin-right: -6px;
+    }
+
     @media screen and (max-width: map-get($breakpoints, medium) - 1px) {
         &.small-full {
             width: 100% !important;

package/scss/partials/_flyovers.scss

@@ -0,0 +1,97 @@
+/// <reference path="../variables" />
+/// <reference path="../vendor/foundation-settings" />
+
+@media (min-width: map-get($breakpoints, medium)) {
+    body.flyover-open {
+        overflow: hidden;
+    }
+}
+
+.flyover-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 100;
+    transition: opacity 350ms ease-out;
+}
+
+.flyover {
+    position: fixed;
+    right: 0;
+    top: 0;
+    height: 100vh;
+    width: 100vw;
+    background-color: $body-bg-color;
+    overflow: hidden;
+    transition: right 350ms ease-out;
+
+    @include modal-shadow;
+
+    header {
+        flex-grow: 0;
+        margin-bottom: 20px;
+
+        label {
+            margin-bottom: 0;
+
+            small {
+                text-transform: none;
+                letter-spacing: 0;
+                color: $text-gray;
+                white-space: nowrap;
+            }
+        }
+    }
+
+    .body {
+        padding: 20px 20px 0;
+        height: 100%;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+
+        &.scrollable-content {
+            .scrollable {
+                flex-grow: 1;
+                overflow-y: auto;
+                margin-right: -20px;
+                padding-right: 20px;
+            }
+        }
+    }
+
+    @media print, screen and (min-width: map-get($breakpoints, large)) {
+        width: 50vw;
+
+        .body.restricted {
+            max-width: #{$true-max-width * 0.5};
+        }
+    }
+}
+
+/* FLYOVER TRANSITION */
+.flyover-enter .flyover {
+    right: -100vw !important;
+
+    @media (min-width: map-get($breakpoints, large)) {
+        right: -50vw !important;
+    }
+}
+
+.flyover-leave-to .flyover {
+    right: -100vw !important;
+
+    @media (min-width: map-get($breakpoints, large)) {
+        right: -50vw !important;
+    }
+}
+
+.flyover-leave-active {
+    transition: opacity 250ms;
+
+    .flyover {
+        transition: right 250ms;
+    }
+}

package/scss/partials/_forms.scss

@@ -496,6 +496,13 @@ label {
     > .input-group-field:last-child {
         border-radius: 0 $input-radius $input-radius 0;
     }
+
+    &.tiny {
+        .input-group-field {
+            height: 30px;
+            padding: 0 0.5rem;
+        }
+    }
 }
 
 .input-container {
@@ -619,14 +626,6 @@ label {
             top: 14px;
         }
 
-        &.date {
-            &::after {
-                width: 18px;
-                height: 17px;
-                background-size: 14px 17px;
-            }
-        }
-
         textarea {
             padding: 8px;
             font-size: 0.875rem;
@@ -760,6 +759,14 @@ label {
             //color: rgba(0, 0, 0, 0);
             opacity: 0;
         }
+
+        &.small {
+            &::after {
+                width: 18px;
+                height: 17px;
+                background-size: 14px 17px;
+            }
+        }
     }
 
     &.number.with-custom-steps {
@@ -844,6 +851,10 @@ label {
             width: 24px;
             height: 24px;
         }
+
+        &.line input {
+            padding-bottom: 0;
+        }
     }
 
     &.credit-card {
@@ -999,6 +1010,32 @@ label {
         }
     }
 
+    &.busy {
+        .mini-loader {
+            position: absolute;
+            left: 50%;
+            top: 12px;
+            transform: translateX(-50%);
+            background-color: $input-background-color;
+
+            &.primary {
+                border-color: $primary;
+            }
+
+            &.secondary-alt {
+                border-color: $secondary-alt;
+            }
+        }
+
+        &.right-loader {
+            .mini-loader {
+                left: auto;
+                right: 12px;
+                transform: none;
+            }
+        }
+    }
+
     @media print, screen and (min-width: map-get($breakpoints, medium)) {
         &.medium-no-margin {
             margin-bottom: 0 !important;
@@ -1186,8 +1223,8 @@ select {
                 right: 12px;
                 border-radius: 50%;
                 background-color: fade-out($tertiary-alt, 0.4);
-                font-size: 1rem;
-                line-height: 1rem;
+                font-size: 1.425rem;
+                line-height: 1.425rem;
                 text-align: center;
                 padding: 8px;
                 z-index: 62;
@@ -1237,6 +1274,7 @@ select {
                     border-left: solid 2px fade-out($dark-gray, 0.5);
                     border-bottom: 0;
                     transform: rotate(-45deg);
+                    pointer-events: none;
                 }
 
                 .preview {
@@ -1436,7 +1474,7 @@ body.hover-capable {
 
     input {
         position: relative;
-        padding: 5px 0;
+        padding: 6px 0 4px;
         border: 0;
         border-bottom: solid 2px transparent;
         background-color: transparent;
@@ -1451,37 +1489,70 @@ body.hover-capable {
 
     .decoy {
         font-size: 1.75rem;
-        height: 2.5rem;
-        padding: 8px 0 4px;
+        height: calc(2.5rem - 2px);
+        padding: 0;
         font-family: $headline-font-family;
         font-weight: $headline-weight-normal;
         position: absolute;
         left: 0;
-        bottom: 0;
+        bottom: -1px;
         color: transparent;
         border-bottom: solid 2px $medium-gray;
         min-width: 30px;
+        max-width: 100%;
     }
 
     a {
         position: absolute;
-        top: -6px;
-        right: -24px;
+        font-size: 16px;
+        top: -2px;
+        right: -20px;
         z-index: 3;
 
         .icon .color-target {
             fill: $call-to-action-color;
         }
+
+        &.larger {
+            font-size: 18px;
+        }
+    }
+
+    .actions {
+        display: block;
+        position: absolute;
+        padding-left: 15px;
+        left: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+        text-align: center;
+        z-index: 3;
+    
+        a {
+            display: block;
+            position: relative;
+            top: auto;
+            left: auto;
+            right: auto;
+            margin-bottom: 5px;
+    
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    &.no-margin {
+        margin-bottom: 0;
     }
 
     @media print, screen and (min-width: map-get($breakpoints, medium)) {
         flex: 1 1 0;
         vertical-align: bottom;
-        margin: 0 40px 38px 0;
+        margin: 0 26px 38px 0;
 
         input {
-            padding-top: 12px;
-            padding-bottom: 9px;
+            padding: 7px 0 4px;
             border-bottom-width: 5px;
             font-size: 2.875rem;
             height: calc(4.5rem + 2px);
@@ -1492,11 +1563,18 @@ body.hover-capable {
             padding-top: 12px;
             padding-bottom: 7px;
             border-bottom-width: 5px;
-            height: 100%;
+            height: calc(4.5rem - 5px);
+            bottom: 0;
         }
 
         a {
-            top: -14px;
+            font-size: 22px;
+            top: 0;
+            right: -26px;
+
+            &.larger {
+                font-size: 26px;
+            }
         }
     }
 }

package/scss/partials/_layout.scss

@@ -79,106 +79,88 @@
     margin-top: #{$single-space * 0.25} !important;
 }
 
-.small-single-space {
-    @media screen and (max-width: (map-get($breakpoints, medium) - 1px)) {
+@media screen and (max-width: (map-get($breakpoints, medium) - 1px)) {
+    .small-single-space {
         margin-bottom: $single-space !important;
     }
-}
-
-.medium-single-space {
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
-        margin-bottom: $single-space !important;
-    }
-}
 
-.small-single-space-top {
-    @media screen and (max-width: (map-get($breakpoints, medium) - 1px)) {
+    .small-single-space-top {
         margin-top: $single-space !important;
     }
-}
 
-.medium-single-space-top {
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
-        margin-top: $single-space !important;
-    }
-}
-
-.small-double-space {
-    @media screen and (max-width: (map-get($breakpoints, medium) - 1px)) {
+    .small-double-space {
         margin-bottom: #{$single-space * 2} !important;
     }
-}
 
-.medium-double-space {
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
-        margin-bottom: #{$single-space * 2} !important;
+    .small-double-space-top {
+        margin-top: #{$single-space * 2} !important;
     }
-}
 
-.medium-only-double-space {
-    @media print, screen and (min-width: map-get($breakpoints, medium)) and (max-width: (map-get($breakpoints, large) - 1px)) {
-        margin-bottom: #{$single-space * 2} !important;
+    .small-triple-space {
+        margin-bottom: #{$single-space * 3} !important;
     }
-}
 
-.small-double-space-top {
-    @media screen and (max-width: (map-get($breakpoints, medium) - 1px)) {
-        margin-top: #{$single-space * 2} !important;
+    .small-half-space {
+        margin-bottom: #{$single-space * 0.5} !important;
     }
-}
 
-.medium-double-space-top {
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
-        margin-top: #{$single-space * 2} !important;
+    .small-half-space-top {
+        margin-top: #{$single-space * 0.5} !important;
     }
 }
 
-.small-triple-space {
-    @media screen and (max-width: (map-get($breakpoints, medium) - 1px)) {
-        margin-bottom: #{$single-space * 3} !important;
+@media print, screen and (min-width: map-get($breakpoints, medium)) {
+    .medium-single-space {
+        margin-bottom: $single-space !important;
     }
-}
 
-.medium-triple-space {
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
-        margin-bottom: #{$single-space * 3} !important;
+    .medium-single-space-top {
+        margin-top: $single-space !important;
     }
-}
-
-.small-half-space {
-    @media screen and (max-width: (map-get($breakpoints, medium) - 1px)) {
-        margin-bottom: #{$single-space * 0.5} !important;
+    
+    .medium-double-space {
+        margin-bottom: #{$single-space * 2} !important;
     }
-}
-
-.medium-half-space {
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+    
+    .medium-double-space-top {
+        margin-top: #{$single-space * 2} !important;
+    }
+    
+    .medium-triple-space {
+        margin-bottom: #{$single-space * 3} !important;
+    }
+    
+    .medium-half-space {
         margin-bottom: #{$single-space * 0.5} !important;
     }
-}
-
-.small-half-space-top {
-    @media screen and (max-width: (map-get($breakpoints, medium) - 1px)) {
+    
+    .medium-half-space-top {
         margin-top: #{$single-space * 0.5} !important;
     }
 }
 
-.medium-half-space-top {
-    @media print, screen and (min-width: map-get($breakpoints, medium)) {
-        margin-top: #{$single-space * 0.5} !important;
+@media print, screen and (min-width: map-get($breakpoints, medium)) and (max-width: (map-get($breakpoints, large) - 1px)) {
+    .medium-only-double-space {
+        margin-bottom: #{$single-space * 2} !important;
     }
 }
 
-.large-no-space {
-    @media print, screen and (min-width: map-get($breakpoints, large)) {
+@media print, screen and (min-width: map-get($breakpoints, large)) {
+    .large-no-space {
         margin-bottom: 0 !important;
     }
-}
 
-.large-no-space-top {
-    @media print, screen and (min-width: map-get($breakpoints, large)) {
+    .large-no-space-top {
         margin-top: 0 !important;
     }
+
+    .large-double-space-top {
+        margin-top: 40px !important;
+    }
+    
+    .large-triple-space-top {
+        margin-top: 60px !important;
+    }
 }
 
 .medium-grid-container {
@@ -335,7 +317,9 @@ hr {
         }
 
         label {
+            line-height: 1.2;
             font-size: 0.75rem;
+            margin-bottom: 5px;
         }
     }