@rypen-dev/shared-components 5.0.0 → 5.0.1

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

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 {
@@ -324,6 +339,24 @@ a.info {
         }
     }
 
+    &.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;
@@ -519,9 +552,6 @@ a.info {
                 display: none;
             }
 
-            &::after {
-            }
-
             &.reversed {
                 padding-right: 0;
                 padding-left: 20px;
@@ -837,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

@@ -7,7 +7,6 @@
     }
 }
 
-/* FLYOVER TRANSITION */
 .flyover-screen {
     position: fixed;
     top: 0;

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;
         }
     }
 

package/scss/partials/_loader.scss

@@ -16,6 +16,10 @@
     }
 }
 
+.working-screen-container {
+    position: relative;
+}
+
 .working-screen {
     background-color: fade-out($white, 0.5);
     position: absolute;
@@ -72,6 +76,22 @@
     animation-iteration-count: infinite;
     animation-duration: 1s;
     animation-timing-function: linear;
+
+    &.warning {
+        border-color: $warning;
+    }
+
+    &.success {
+        border-color: $success-alt;
+    }
+
+    &.extra-tiny {
+        width: 17px;
+        height: 17px;
+        border-width: 2px;
+        position: relative;
+        top: -2px;
+    }
 }
 
 @keyframes rotate {

package/scss/partials/_modals.scss

@@ -152,6 +152,16 @@
         }
     }
 
+    &.no-header {
+        .modal-header {
+            margin-bottom: 0;
+
+            h3 {
+                display: none;
+            }
+        }
+    }
+
     &.small-header {
         h3,
         .modal-header h3 {
@@ -410,6 +420,10 @@
         transform: translateY(-50%);
         width: 100%;
     }
+
+    &.removing {
+        background-color: $alert;
+    }
 }
 
 .bubble-message-enter {

package/scss/partials/_notifications.scss

@@ -12,6 +12,11 @@
             margin-right: 15px;
             flex-shrink: 0;
 
+            svg {
+                width: 100%;
+                height: 100%;
+            }
+
             &.avatar {
                 span {
                     border: solid 1px $primary;
@@ -60,10 +65,28 @@
                 font-weight: $body-weight-normal;
             }
         }
+
+        &.align-right {
+            justify-content: flex-end;
+        }
     }
 
     .notification-detail {
         padding-top: 15px;
+
+        a,
+        strong {
+            color: $secondary-alt;
+            font-weight: 600;
+        }
+
+        a {
+            text-decoration: underline;
+
+            &:hover {
+                text-decoration: none;
+            }
+        }
     }
 
     &.inline {
@@ -94,6 +117,16 @@
                 display: block;
             }
         }
+
+        &.removing {
+            .notification-summary {
+                opacity: 0.5;
+
+                > a {
+                    display: none !important;
+                }
+            }
+        }
     }
 }
 

package/scss/partials/_tooltips.scss

@@ -193,6 +193,60 @@
         }
     }
 
+    &.minimal {
+        padding-top: 10px;
+
+        .inner {
+            border: 0;
+            border-radius: 2px;
+            background-color: $tooltip-minimal-bg-color;
+            padding: 12px;
+            box-shadow: none;
+        }
+
+        &::before {
+            display: none;
+        }
+
+        &::after {
+            border-left-width: 10px;
+            border-right-width: 10px;
+            border-bottom-width: 10px;
+            border-bottom-color: $tooltip-minimal-bg-color;
+            top: 0;
+        }
+
+        &.up {
+            padding-top: 0;
+            padding-bottom: 10px;
+
+            &::after {
+                bottom: 0;
+                border-bottom: 0;
+                top: auto;
+                border-top: solid 10px $tooltip-minimal-bg-color;
+            }
+        }
+
+        &.right-tooltip::after {
+            right: 0;
+            border-right: 0;
+            border-top: 0;
+            border-bottom: solid 10px $tooltip-minimal-bg-color;
+            border-left: solid 10px transparent;
+        }
+
+        @media (min-width: map-get($breakpoints, medium)) {
+            &.medium-right-tooltip::after {
+                right: 0;
+                border-right: 0;
+                border-top: 0;
+                border-bottom: solid 10px $tooltip-minimal-bg-color;
+                border-left: solid 10px transparent;
+            }
+        }
+    }
+
     @media (max-width: map-get($breakpoints, medium) - 1px) {
         &.small-left-tooltip {
             left: 0;
@@ -271,58 +325,4 @@
             }
         }
     }
-
-    &.minimal {
-        padding-top: 10px;
-
-        .inner {
-            border: 0;
-            border-radius: 2px;
-            background-color: $tooltip-minimal-bg-color;
-            padding: 12px;
-            box-shadow: none;
-        }
-
-        &::before {
-            display: none;
-        }
-
-        &::after {
-            border-left-width: 10px;
-            border-right-width: 10px;
-            border-bottom-width: 10px;
-            border-bottom-color: $tooltip-minimal-bg-color;
-            top: 0;
-        }
-
-        &.up {
-            padding-top: 0;
-            padding-bottom: 10px;
-
-            &::after {
-                bottom: 0;
-                border-bottom: 0;
-                top: auto;
-                border-top: solid 10px $tooltip-minimal-bg-color;
-            }
-        }
-
-        &.right-tooltip::after {
-            right: 0;
-            border-right: 0;
-            border-top: 0;
-            border-bottom: solid 10px $tooltip-minimal-bg-color;
-            border-left: solid 10px transparent;
-        }
-
-        @media (min-width: map-get($breakpoints, medium)) {
-            &.medium-right-tooltip::after {
-                right: 0;
-                border-right: 0;
-                border-top: 0;
-                border-bottom: solid 10px $tooltip-minimal-bg-color;
-                border-left: solid 10px transparent;
-            }
-        }
-    }
 }

package/scss/partials/_typography.scss

@@ -121,6 +121,10 @@ h6 {
         margin-bottom: 0 !important;
     }
 
+    &.inline {
+        display: inline-block;
+    }
+
     &.white-text {
         color: $white;
     }
@@ -226,6 +230,14 @@ h5 {
         border-bottom: solid 3px $headline-divider-border-color;
         padding-bottom: 5px;
         margin-bottom: 20px;
+
+        &.secondary {
+            border-bottom-color: $secondary;
+        }
+        
+        &.tertiary-alt {
+            border-bottom-color: $tertiary-alt;
+        }
     }
 
     &.card-style {
@@ -235,6 +247,11 @@ h5 {
         font-weight: $headline-weight-normal;
         color: $body-font-color;
         margin-bottom: 0.5rem;
+
+        > span {
+            border: 0;
+            padding-bottom: 0;
+        }
     }
 
     &.byline {
@@ -527,10 +544,25 @@ small,
         color: $success;
     }
 
+    &.discount,
     &.color-success-alt {
         color: $success-alt;
     }
 
+    &.strike {
+        position: relative;
+    
+        &::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: -4px;
+            right: -6px;
+            border-bottom: solid 2px $secondary-alt;
+            transform: translateY(-50%);
+        }
+    }
+
     .plus {
         font-size: 1rem;
         vertical-align: middle;
@@ -570,6 +602,14 @@ small,
     display: block;
     font-size: 0.85rem;
     color: $text-gray;
+
+    &.inline {
+        display: inline-block;
+    }
+
+    &.bigger {
+        font-size: 1rem;
+    }
 }
 
 .intro-text {
@@ -601,6 +641,11 @@ small,
     letter-spacing: 1px;
     padding: 60px 0;
     text-align: center;
+
+    &.compact {
+        padding: 30px 0;
+        font-size: 0.875rem;
+    }
 }
 
 .store-code {