dibk-design 4.3.1 → 4.4.1

package/dist/components/Container.module.scss

@@ -5,6 +5,6 @@
     padding: 8px;
     @media (min-width: $screen-sm) {
         padding: 20px;
-        max-width: 860px;
+        max-width: $content-width;
     }
 }

package/dist/components/ErrorBox.js

@@ -18,20 +18,24 @@ const ErrorBox = props => {
     };
   };
   return _react.default.createElement("div", {
-    className: (0, _helpers.classNameArrayToClassNameString)([_ErrorBoxModule.default.errorBox, _ErrorBoxModule.default[props.type]]),
+    className: (0, _helpers.classNameArrayToClassNameString)([_ErrorBoxModule.default.errorBoxContainer, _ErrorBoxModule.default[props.type], props.fullScreen && _ErrorBoxModule.default.fullScreen]),
     style: getThemeErrorBoxStyle()
+  }, _react.default.createElement("div", {
+    className: (0, _helpers.classNameArrayToClassNameString)([_ErrorBoxModule.default.errorBox, props.fullScreen && _ErrorBoxModule.default.fullScreen])
   }, _react.default.createElement("img", {
     src: _infoSign.default,
     alt: "",
     className: _ErrorBoxModule.default.infoSign
-  }), props.children);
+  }), props.children));
 };
 ErrorBox.propTypes = {
   theme: _propTypes.default.object,
-  type: _propTypes.default.oneOf(["warning", "error"])
+  type: _propTypes.default.oneOf(["warning", "error"]),
+  fullScreen: _propTypes.default.bool
 };
 ErrorBox.defaultProps = {
   children: "",
-  type: "warning"
+  type: "warning",
+  fullScreen: false
 };
 var _default = exports.default = ErrorBox;

package/dist/components/ErrorBox.module.scss

@@ -7,45 +7,58 @@
     }
 }
 
-.errorBox {
-    border-left-width: 4px;
-    border-left-style: solid;
-    padding: 24px 24px 24px calc(1.2em + 48px);
+.errorBoxContainer {
     font-family: $default-font;
     margin: 0;
     animation: 1000ms cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running messageIn;
     position: relative;
     line-height: 24px;
-    .infoSign {
-        position: absolute;
-        top: 24px;
-        left: 24px;
-        width: 24px;
-        height: 24px;
-        display: inline-block;
-        vertical-align: middle;
-    }
     &.warning {
         background-color: $color-warning-x-light;
-        border-left-color: $color-warning;
+        border-color: $color-warning;
     }
     &.error {
         background-color: $color-error-x-light;
-        border-left-color: $color-error;
+        border-color: $color-error;
     }
-    h1,
-    h2,
-    h3,
-    h4 {
-        font-size: 20px;
-        font-weight: 500;
-        line-height: 1.3;
-        margin: 0;
-        @media only screen and (min-width: $screen-sm) {
-            font-size: 24px;
-        }
+    &.fullScreen {
+        border-bottom-width: 4px;
+        border-bottom-style: solid;
     }
-    ul {
-        padding-left: 20px;
+    &:not(.fullScreen) {
+        border-left-width: 4px;
+        border-left-style: solid;
+    }
+    .errorBox {
+        padding: 24px 24px 24px calc(1.2em + 48px);
+        &.fullScreen {
+            max-width: $content-width;
+            margin: auto;
+            position: relative;
+        }
+        .infoSign {
+            position: absolute;
+            top: 24px;
+            left: 24px;
+            width: 24px;
+            height: 24px;
+            display: inline-block;
+            vertical-align: middle;
+        }
+        h1,
+        h2,
+        h3,
+        h4 {
+            font-size: 20px;
+            font-weight: 500;
+            line-height: 1.3;
+            margin: 0;
+            @media only screen and (min-width: $screen-sm) {
+                font-size: 24px;
+            }
+        }
+        ul {
+            padding-left: 20px;
+        }
     }
 }

package/dist/components/Header.module.scss

@@ -1,7 +1,6 @@
 @import "../style/global.scss";
 
 .headerContainer {
-	padding: 5px 0;
 	.header {
 		margin: 0;
 		font-weight: normal;

package/dist/style/abstracts/variables/_all.scss

@@ -1,4 +1,5 @@
 @import "colors";
+@import "sizes";
 @import "transitions";
 @import "typography";
 @import "viewports";

package/dist/style/abstracts/variables/_sizes.scss

@@ -0,0 +1 @@
+$content-width: 860px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dibk-design",
-  "version": "4.3.1",
+  "version": "4.4.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "files": [