@rypen-dev/shared-components 3.0.6 → 3.0.7

package/package.json

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

package/scss/_variables.scss

@@ -162,6 +162,9 @@ $form-field-padding: 0.625rem 1rem !default;
 $grid-container-gutter: 1.25rem !default;
 $grid-container-gutter-medium: 0.9375rem !default;
 
+$grid-cell-padding: 0.625rem !default;
+$grid-cell-padding-medium: 0.9375rem !default;
+
 $true-max-width: 1920px !default;
 
 $dealer-base-radius: 5px !default;

package/scss/partials/_buttons.scss

@@ -511,6 +511,10 @@ button,
         width: 300px;
     }
 
+    &.flat {
+        box-shadow: none;
+    }
+
     &.primary {
         background-color: $primary;
         color: $white;
@@ -626,6 +630,17 @@ button,
         }
     }
 
+    &.attention {
+        background-color: $attention;
+        color: $white;
+
+        &:hover,
+        &:focus {
+            background-color: $button-hover-bg-color;
+            color: $attention;
+        }
+    }
+
     &.dark-gray {
         background-color: $dark-gray;
         color: $white;

package/scss/partials/_modals.scss

@@ -111,9 +111,6 @@
         .form {
             margin: 30px 0 20px;
 
-            &.restricted {
-            }
-
             &.side-by-side {
                 label:not(.button) {
                     text-transform: none;
@@ -209,6 +206,28 @@
         }
     }
 
+    &.accommodate-grid {
+        .scrollable-content {
+            overflow-x: hidden;
+        }
+
+        .modal-body {
+            margin-left: -$grid-cell-padding;
+            margin-right: -$grid-cell-padding;
+            padding-left: $grid-cell-padding;
+            padding-right: $grid-cell-padding;
+        }
+
+        @media (min-width: map-get($breakpoints, medium)) {
+            .modal-body {
+                margin-left: -$grid-cell-padding-medium;
+                margin-right: -$grid-cell-padding-medium;
+                padding-left: $grid-cell-padding-medium;
+                padding-right: $grid-cell-padding-medium;
+            }
+        }
+    }
+
     @media (max-width: map-get($breakpoints, medium) - 1px) {
         .modal-header {
             padding-top: 20px;
@@ -293,6 +312,13 @@
                         flex-grow: 1;
                         margin-bottom: 0;
 
+                        &.value {
+                            height: 44px;
+                            display: flex;
+                            align-items: center;
+                            color: $dark-gray;
+                        }
+
                         button,
                         .button {
                             &.full {