@rypen-dev/shared-components 5.0.19 → 5.1.0

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

package/scss/_variables.scss

@@ -50,7 +50,7 @@ $body-bg-color: $white !default;
 $body-font-color: $rypen-black !default;
 $headline-font-color: $primary !default;
 $headline-font-color-secondary: $secondary-alt !default;
-$dealer-form-label-color: $primary !default;
+$global-form-label-color: $primary !default;
 $link-color: $primary !default;
 $link-color-alt: $secondary-alt !default;
 $price-color: $secondary-alt !default;
@@ -183,15 +183,18 @@ $grid-cell-padding-medium: 0.9375rem !default;
 
 $true-max-width: 1920px !default;
 
-$dealer-base-radius: 5px !default;
-
 $single-space: 20px !default;
 
+$global-base-radius: 5px !default;
+
 // Buttons
-$dealer-button-radius: $dealer-base-radius !default;
+$global-button-radius: $global-base-radius !default;
 
 // Labels/Badges
-$dealer-badge-radius: $dealer-base-radius !default;
+$global-badge-radius: $global-base-radius !default;
 
 // Forms
-$dealer-form-input-radius: $dealer-base-radius !default;
+$global-form-input-radius: $global-base-radius !default;
+
+// Modals
+$modal-window-radius: $global-base-radius !default;

package/scss/partials/_forms.scss

@@ -468,7 +468,7 @@ label {
     display: block;
     margin-bottom: 0.5rem;
     font-size: 1rem;
-    color: $dealer-form-label-color;
+    color: $gloabl-form-label-color;
     font-family: $headline-font-family;
     letter-spacing: 2px;
     font-weight: $body-weight-normal;
@@ -2206,7 +2206,7 @@ input:checked ~ .switch-paddle {
             color: $body-font-color;
             background-color: $input-background-color;
             border: solid 1px $input-border-color;
-            border-radius: $dealer-form-input-radius;
+            border-radius: $global-form-input-radius;
             line-height: 1.5rem;
             height: 44px;
         }
@@ -2219,7 +2219,7 @@ input:checked ~ .switch-paddle {
             padding: 0 5px 5px;
             background-color: $input-background-color;
             border: solid 1px $input-border-color;
-            border-radius: 0 0 $dealer-form-input-radius $dealer-form-input-radius;
+            border-radius: 0 0 $global-form-input-radius $global-form-input-radius;
             border-top: 0;
 
             .input-container.search {
@@ -2309,7 +2309,7 @@ input:checked ~ .switch-paddle {
 
         &.open {
             .value {
-                border-radius: $dealer-form-input-radius $dealer-form-input-radius 0 0;
+                border-radius: $global-form-input-radius $global-form-input-radius 0 0;
                 border-bottom: 0 !important;
             }
 

package/scss/partials/_loader.scss

@@ -11,7 +11,8 @@
 }
 
 .grid-container {
-    .loader {
+    .loader,
+    .generic-loader {
         padding-top: 36px;
     }
 }

package/scss/partials/_notifications.scss

@@ -192,8 +192,11 @@
     font-size: 1.125rem;
     font-weight: normal;
 
-    svg {
-        width: 80px;
+    svg,
+    img {
+        width: auto;
+        height: 68px;
+        vertical-align: middle;
     }
 }
 

package/scss/vendor/_foundation-settings.scss

@@ -306,7 +306,7 @@ $button-background: $primary-color;
 $button-background-hover: scale-color($button-background, $lightness: -15%);
 $button-color: $white;
 $button-color-alt: $white;
-$button-radius: $dealer-button-radius;
+$button-radius: $global-button-radius;
 $button-hollow-border-width: 1px;
 $button-sizes: (
   "tiny": 0.6rem,
@@ -447,13 +447,13 @@ $input-prefix-color: $black;
 $input-prefix-background: $light-gray;
 $input-prefix-border: 1px solid $medium-gray;
 $input-prefix-padding: 1rem;
-$form-label-color: $dealer-form-label-color;
+$form-label-color: $global-form-label-color;
 $form-label-font-size: rem-calc(14);
 $form-label-font-weight: $global-weight-normal;
 $form-label-line-height: 1.8;
 $select-background: $white;
 $select-triangle-color: $dark-gray;
-$select-radius: $global-radius;
+$select-radius: $global-form-input-radius;
 $input-color: $black;
 $input-placeholder-color: $text-gray;
 $input-font-family: inherit;
@@ -471,8 +471,8 @@ $input-shadow-focus: 0 0 5px $medium-gray;
 $input-cursor-disabled: not-allowed;
 $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
 $input-number-spinners: true;
-$input-radius: $global-radius;
-$form-button-radius: $global-radius;
+$input-radius: $global-form-input-radius;
+$form-button-radius: $global-button-radius;
 
 // 21. Label
 // ---------
@@ -483,7 +483,7 @@ $label-color-alt: $white;
 $label-palette: $foundation-palette;
 $label-font-size: 0.8rem;
 $label-padding: 0.33333rem 0.5rem;
-$label-radius: $dealer-badge-radius;
+$label-radius: $gloabl-badge-radius;
 
 // 22. Media Object
 // ----------------