linear-react-components-ui 1.1.13 → 1.1.14-beta.0

package/lib/alerts/Message.js

@@ -1,23 +1,21 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _icons = _interopRequireDefault(require("../icons"));
-var _progress = _interopRequireDefault(require("../progress"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const getClass = _ref => {
-  let {
-    customClass,
-    className
-  } = _ref;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var getClass = function getClass(_ref) {
+  var customClass = _ref.customClass,
+    className = _ref.className;
   return "".concat(className, " ").concat(customClass);
 };
-const getIcon = (icon, iconName, color) => {
+var getIcon = function getIcon(icon, iconName, color) {
   if (icon !== null) {
     return icon;
   } else if (iconName !== null) {
@@ -29,86 +27,55 @@ const getIcon = (icon, iconName, color) => {
   }
   return null;
 };
-const Message = _ref2 => {
-  let {
-    handleClose = () => {},
-    message,
-    id = 0,
-    color = '',
-    icon = null,
-    iconName = null,
-    timeout = 3000,
-    customClass = '',
-    closeButton = false,
-    className = 'message',
-    position = 'centerTop',
-    pauseTimeoutOnMouseHover = false
-  } = _ref2;
-  const [progressBarTime, setProgressBarTime] = (0, _react.useState)(timeout - 300);
-  const [pauseTimeout, setPauseTimeout] = (0, _react.useState)(false);
-  const timeoutIdentifier = (0, _react.useRef)(null);
-  const intervalIdentifier = (0, _react.useRef)(null);
-  const handleMouseEnter = () => {
-    if (pauseTimeoutOnMouseHover) {
-      setPauseTimeout(true);
-      setProgressBarTime(prevProgressBarTime => prevProgressBarTime >= 800 ? prevProgressBarTime + 600 : prevProgressBarTime + 500);
-    }
-  };
-  const handleMouseLeave = () => {
-    if (pauseTimeoutOnMouseHover) {
-      setPauseTimeout(false);
-      setProgressBarTime(prevProgressBarTime => prevProgressBarTime >= 800 ? prevProgressBarTime - 600 : prevProgressBarTime - 500);
-    }
-  };
-  const getProgressBarType = () => customClass.replace('-', '');
-  (0, _react.useEffect)(() => {
-    if (!pauseTimeout && progressBarTime > 0) {
-      timeoutIdentifier.current = setTimeout(() => {
+var Message = function Message(_ref2) {
+  var _ref2$handleClose = _ref2.handleClose,
+    handleClose = _ref2$handleClose === void 0 ? function () {} : _ref2$handleClose,
+    message = _ref2.message,
+    _ref2$id = _ref2.id,
+    id = _ref2$id === void 0 ? 0 : _ref2$id,
+    _ref2$color = _ref2.color,
+    color = _ref2$color === void 0 ? '' : _ref2$color,
+    _ref2$icon = _ref2.icon,
+    icon = _ref2$icon === void 0 ? null : _ref2$icon,
+    _ref2$iconName = _ref2.iconName,
+    iconName = _ref2$iconName === void 0 ? null : _ref2$iconName,
+    _ref2$timeout = _ref2.timeout,
+    timeout = _ref2$timeout === void 0 ? 3000 : _ref2$timeout,
+    _ref2$customClass = _ref2.customClass,
+    customClass = _ref2$customClass === void 0 ? '' : _ref2$customClass,
+    _ref2$closeButton = _ref2.closeButton,
+    closeButton = _ref2$closeButton === void 0 ? false : _ref2$closeButton,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? 'message' : _ref2$className,
+    _ref2$position = _ref2.position,
+    position = _ref2$position === void 0 ? 'centerTop' : _ref2$position;
+  (0, _react.useEffect)(function () {
+    if (timeout > 0) {
+      setTimeout(function () {
         handleClose(id, position);
-      }, progressBarTime);
-      intervalIdentifier.current = setInterval(() => progressBarTime > 0 ? setProgressBarTime(prevProgressBarTime => prevProgressBarTime > 0 ? prevProgressBarTime - 100 : 0) : null, 100);
-    } else {
-      if (timeoutIdentifier.current) clearInterval(timeoutIdentifier.current);
-      if (intervalIdentifier.current) clearInterval(intervalIdentifier.current);
+      }, timeout);
     }
-    return () => {
-      if (timeoutIdentifier.current) clearInterval(timeoutIdentifier.current);
-      if (intervalIdentifier.current) clearInterval(intervalIdentifier.current);
-    };
-  }, [pauseTimeout]);
+  }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave
-  }, timeout > 0 && /*#__PURE__*/_react.default.createElement(_progress.default, {
-    min: 300,
-    max: timeout,
-    value: progressBarTime,
-    showLabel: false,
-    style: {
-      animation: 'tinRightIn 1s forwards ease-in-out',
-      margin: '0px',
-      borderRadius: '0px',
-      backgroundColor: 'rgb(234 234 234)'
-    },
-    height: "6px",
-    type: getProgressBarType()
-  }), /*#__PURE__*/_react.default.createElement("div", {
     className: getClass({
-      className,
-      customClass
+      className: className,
+      customClass: customClass
     })
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "-icon"
   }, (icon || iconName || color) && getIcon(icon, iconName, color)), /*#__PURE__*/_react.default.createElement("div", {
     className: "-messagecontent"
-  }, /*#__PURE__*/_react.default.createElement("p", null, message)), /*#__PURE__*/_react.default.createElement("div", {
+  }, message), /*#__PURE__*/_react.default.createElement("div", {
     className: "close"
   }, closeButton || timeout === 0 ? /*#__PURE__*/_react.default.createElement("span", {
     className: "close-button",
     role: "button",
-    onKeyPress: () => {},
+    onKeyPress: function onKeyPress() {},
     tabIndex: -1,
-    onClick: () => handleClose !== undefined ? handleClose(id, position) : null
-  }, "x") : null)));
+    onClick: function onClick() {
+      return handleClose !== undefined ? handleClose(id, position) : null;
+    }
+  }, "x") : null));
 };
-var _default = exports.default = Message;
+var _default = Message;
+exports.default = _default;

package/lib/alerts/helpers.js

@@ -5,5 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-const AlertProviderContext = /*#__PURE__*/(0, _react.createContext)({});
-var _default = exports.default = AlertProviderContext;
+var AlertProviderContext = /*#__PURE__*/(0, _react.createContext)({});
+var _default = AlertProviderContext;
+exports.default = _default;

package/lib/alerts/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "AlertProvider", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _AlertProvider.default;
   }
 });
@@ -13,4 +13,5 @@ exports.default = void 0;
 var _withAlert = _interopRequireDefault(require("./withAlert"));
 var _AlertProvider = _interopRequireDefault(require("./AlertProvider"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = exports.default = _withAlert.default;
+var _default = _withAlert.default;
+exports.default = _default;

package/lib/alerts/types.d.ts

@@ -29,7 +29,6 @@ interface IMessageProps {
     icon?: ReactNode | null;
     iconName?: IconNames | null;
     timeout?: number;
-    pauseTimeoutOnMouseHover?: boolean;
 }
 interface IBaseAlertProps {
     children: ReactNode;

package/lib/alerts/withAlert.js

@@ -1,5 +1,6 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -7,18 +8,18 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _helpers = _interopRequireDefault(require("./helpers"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const withAlert = WrapperComponent => {
-  const GetAlert = props => {
-    const {
-      alert
-    } = (0, _react.useContext)(_helpers.default);
+var withAlert = function withAlert(WrapperComponent) {
+  var GetAlert = function GetAlert(props) {
+    var _useContext = (0, _react.useContext)(_helpers.default),
+      alert = _useContext.alert;
     return /*#__PURE__*/_react.default.createElement(WrapperComponent, _extends({}, props, {
       alert: alert
     }));
   };
   return GetAlert;
 };
-var _default = exports.default = withAlert;
+var _default = withAlert;
+exports.default = _default;

package/lib/assets/styles/alerts.scss

@@ -8,13 +8,12 @@
 .alert-component {
   position: fixed;
   z-index: 9999999;
+  pointer-events: none;
   > .messagecontainer {
     height: 100%;
     > .lefttop, > .leftbottom, > .rightbottom, .righttop, .centertop, .centerbottom {
       position: fixed;
-      width: auto;
-      min-width: 20%;
-      max-width: 25%;
+      width: 370px;
     }
     > .lefttop {
       left: 0;
@@ -54,11 +53,15 @@
     > .rightbottom {
       right: 0;
       bottom: 0;
+      &:hover {
+        opacity: 0.3!important;
+        background-color: #E0CABB;
+      }
     }
   }
   .message {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     width: 100%;
     height: 100%;
     min-height: 80px;

package/lib/assets/styles/button.scss

@@ -38,14 +38,13 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     @extend %component-splash-click;
     content: "";
     position: absolute;
-    top: 50% !important;
-    left: 50% !important;
+    top: 50%;
+    left: 50%;
     display: block;
+    width: 0;
     padding-top: 0;
     border-radius: 100%;
     background-color: rgba(236, 240, 241, 0.3);
-    width: 0;
-    height: 0 !important;
   }
   > .icon-component {
     width: 15px;
@@ -70,7 +69,7 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
   &:active:before {
     @extend %component-effect-click;
   }
-  &:hover, &[data-uitour="hover"] {
+  &:hover {
     background-color: $default-hover-color;
   }
   &:focus {
@@ -103,7 +102,6 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     @extend %component-disabled;
     opacity: 0.7;
     border: solid 1px $font-color-disabled;
-    pointer-events: auto;
   }
   &.-shadowsdisabled {
     box-shadow: none!important;
@@ -164,7 +162,7 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     border: 1px solid $primary-border-color;
     text-shadow: $shadow-text-button;
     @extend %color-effects;
-    &:hover, &[data-uitour="hover"] {
+    &:hover {
       background-color: $primary-hover-color;
     }
     &:focus {
@@ -203,7 +201,7 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     border: 1px solid $warning-color;
     text-shadow: $shadow-text-button;
     @extend %color-effects;
-    &:hover, &[data-uitour="hover"] {
+    &:hover {
       background-color: $warning-hover-color;
     }
     &:focus {
@@ -222,7 +220,7 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     text-shadow: $shadow-text-button;
     @extend %color-effects;
     color: $font-color-second;
-    &:hover, &[data-uitour="hover"] {
+    &:hover {
       background-color: $danger-hover-color;
     }
     &:focus {
@@ -241,7 +239,7 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     text-shadow: $shadow-text-button;
     @extend %color-effects;
     color: $font-color-second;
-    &:hover, &[data-uitour="hover"] {
+    &:hover {
       background-color: $success-hover-color;
       color: $font-color-second;
     }
@@ -261,7 +259,7 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     text-shadow: $shadow-text-button;
     @extend %color-effects;
     color: $font-color-second;
-    &:hover, &[data-uitour="hover"] { 
+    &:hover { 
       background-color: $info-hover-color;
       color: $font-color-second;
     }

package/lib/assets/styles/checkbox.scss

@@ -4,90 +4,83 @@
 
 .checkbox-component {
   > .inputcontent {
-    display: flex;
     > .input {
-      pointer-events: none;
-      opacity: 0;
-      width: 0;
-      height: 0;
+      position: absolute;
+      z-index: 0;
+      left: -9999999999999px;
       &:disabled + span {
         @extend %component-disabled;
-        border: 1px solid $component-border-color;
-      }
-      &:checked:disabled + span {
-        border: 1px solid $component-border-color;
-        > svg {
-          @extend %component-menu-disabled
-        }
       }
       &:disabled + span + .description {
         @extend %component-menu-disabled;
       }
-      &:checked + span > svg {
-        display: block;
-        fill: $font-color-second;
-        margin: 0;
+      &:checked + span:before {
+        content: "✓";
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: static;
+        margin-top: -5px;
+        font-weight: 600;
+        height: 28px;
       }
       + span {
+        display: inline-block;
         position: relative;
-        min-width: 18px;
-        min-height: 18px;
+        top: -1px;
         width: 18px;
         height: 18px;
+        margin: -1px 0px 0 0;
+        margin-right: 4px;
         vertical-align: middle;
         background: $font-color-second left top no-repeat;
         border: 1px solid $component-border-color;
         cursor: pointer;
-        display: flex;
-        margin-right: 6px;
-        align-items: center;
-        justify-content: center;
         &:hover {
           animation-duration: .5s;
           animation-name: blink-effect;
           animation-iteration-count: infinite;
           animation-direction: alternate;
         }
-        & > svg {
-          display: none;
-        }
       }
       &:checked + span {
-        background-color: $checked-effect;
-        border-color: $checked;
+        background-color: $check-background;
         color: $font-color-second;
         animation-duration: .2s;
         animation-name: select-checkbox;
         animation-iteration-count: 1;
         animation-direction: Normal;
+        box-shadow: inset 0 0 0 1px $checked, 
+        inset 0 0 0 0 #FFFFFF, 
+        inset 0 0 0 16px $checked-effect;
       }
       &:focus + span {
         border: 2px solid $component-selected-color;
       }
+      &:disabled:checked + span:before {
+        @extend %component-menu-disabled;
+        border: 1px solid;
+        margin-top: -1px;
+        width: 18px;
+        height: 18px;
+        background-color: rgb(229, 229, 229);
+        margin-left: -1px;
+      }
     }
     > .description {
       @extend %input-label;
+      margin-left: 2px;
       cursor: pointer ;
-      flex: 1;
-      line-height: 18px;
-      
-      > .hint {
-        @extend %hint-text;
-        margin-top: 0;
-      }
     }
   }
 
-  
-  > .errormessages {
-    width: 100%;
-    color: red;
-    font-size: 13px!important;
-    line-height: 13px;
-    margin-top: 0px;
+  > .hint {
+    @extend %hint-text;
+    margin-top: 0;
+    padding-left: 22px;
   }
-
-  &[data-skeletonized="true"] {
+  
+  &.-skeletonized {
     > .inputcontent {
       .input {
         + span {
@@ -100,8 +93,8 @@
         }
       }
     }
-    > .inputcontent > .description > span,
-    > .inputcontent > .description > .hint > span {
+    > .inputcontent > .description,
+    > .hint > span {
       @extend %skeleton-component;
     }
   }

package/lib/assets/styles/colors.scss

@@ -4,7 +4,7 @@
   -ms-transform: translate(-50%, -50%);
   -o-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
-  transition: all 0.25s ease-in-out;
+  transition: all 0.5s ease-in-out;
 }
 
 %component-effect-click {
@@ -89,8 +89,6 @@ $alert-warning: #fff3cd;
 $alert-warning-text: #856404;
 $alert-warning-border: #f2e3b5;
 
-$error-color: #ff3030;
-
 $danger-color: #e74c3c;
 $danger-hover-color: #dd2d1b;
 $danger-focus-color: #c0392b;

package/lib/assets/styles/commons.scss

@@ -9,7 +9,6 @@
 
 %component-menu-disabled {
   color: #bbbbbb;
-  fill: #bbbbbb;
   background-color: transparent,
 }
 

package/lib/assets/styles/dialog.scss

@@ -1,20 +1,24 @@
 @import "commons.scss";
 @import "colors.scss";
 @import "effects.scss";
-
-$shadow-button-default: 1px 1px 1px rgba(0, 0, 0, 0.2);
-$shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-button-default;
 .modalcontainer {
   font-family: 'Roboto', sans-serif;
   line-height: 22px;
   font-size: 14px;
   position: fixed;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
   > .dialog {
-    display: contents;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     > .dialog-form-wrapper {
       @extend %component-box-shadow;
       width: 100%;
@@ -62,38 +66,18 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
           width: 100%;
           margin-left: 2px;
           display: flex;
-          justify-content: space-between;
           align-items: center;
-          .modal-title {
-            color: $font-color-default;
-            font-weight: 400;
+          &.modal-title {
+            color: #4e4c4c;
+            font-weight: 600;
           }
         }
         .close-button {
-          all: unset;
-          line-height: 0;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 28px;
-          height: 28px;
-          border: none;
-          background-color: $default-color;
-          color: $font-color-soft;
-          border-radius: 999999px;
-          cursor: pointer !important;
-          >svg {
-            fill: $font-color-soft;
-            pointer-events: fill;
-            transition: 0.2s fill;
-          }
-          &:hover {
-            background-color: $default-hover-color;
-          }
-          &:focus {
-            -webkit-box-shadow: $shadow-button-inset-default;
-            box-shadow: $shadow-button-inset-default;
-          }
+          color: #777;
+          cursor: pointer;
+          font-size: 16px;
+          text-shadow: 0 1px 0 $default-color;
+          margin-left: auto;
         }
       }
       .footer {
@@ -192,7 +176,6 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
   background-color: #235a94;
   opacity: .3;
   position: fixed;
-  z-index: -1;
   height: 100%;
   width: 100%;
   top: 0;

package/lib/assets/styles/drawers.scss

@@ -94,8 +94,6 @@
       }
       .right {
         margin-left: 2px;
-        display: flex;
-        align-items: center;
         &.modal-title {
           color: #4e4c4c;
           font-weight: 600;
@@ -103,13 +101,12 @@
       }
       .closebutton {
         cursor: pointer;
-        > svg {
-          fill: #252424;
-          pointer-events: fill;
-          transition: 0.2s fill;
-          &:hover {
-            fill: rgba(0, 0, 0, 0.164);
-          }
+        float: right;
+        font-size: 16px;
+        text-shadow: 0 1px 0 $default-color;
+        margin-right: 5px;
+        &:hover {
+          color: rgba(0, 0, 0, 0.164);
         }
       }
     }

package/lib/assets/styles/fieldset.scss

@@ -65,9 +65,6 @@
     text-transform: uppercase;
     border-radius: 0px 10px 0px 0px;
     z-index: 9;
-    display: flex;
-    align-items: center;
-    gap: 8px;
   }
   > .errormessage {
     position: relative;

package/lib/assets/styles/gridlayout.scss

@@ -65,6 +65,8 @@ html {
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
+  // margin-right: -15px;
+  // margin-left: -15px;
   &.-withtrim {
     .grid-container:first-child {
       padding-left: 0;