@rio-cloud/rio-uikit 0.16.1-beta-4 → 0.16.1-beta-8

package/lib/components/assetTree/TypeCounter.js

@@ -7,24 +7,63 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var TypeCounter = function TypeCounter(_ref) {
-  var icon = _ref.icon,
-      value = _ref.value;
-  return value ? /*#__PURE__*/_react.default.createElement("div", {
-    className: 'user-select-none margin-right-15'
-  }, /*#__PURE__*/_react.default.createElement("span", {
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _excluded = ["icon", "value", "isActive", "hasFilter", "enableActivity", "onClick", "type", "hideOnZero"];
+
+var TypeCounter = function TypeCounter(props) {
+  var icon = props.icon,
+      value = props.value,
+      isActive = props.isActive,
+      hasFilter = props.hasFilter,
+      enableActivity = props.enableActivity,
+      onClick = props.onClick,
+      type = props.type,
+      hideOnZero = props.hideOnZero,
+      remainingProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var wrapperClassName = (0, _classnames.default)('TypeCounter', 'user-select-none margin-right-15', enableActivity ? 'cursor-pointer' : 'pointer-events-none', enableActivity && hasFilter && !isActive && 'opacity-50');
+  var counterClassNames = (0, _classnames.default)('TreeLabelCount', 'margin-left-3', 'label label-condensed', isActive ? 'label-primary' : 'label-muted label-filled');
+
+  var handleClick = function handleClick() {
+    return onClick(type);
+  };
+
+  if (hideOnZero && !value) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, remainingProps, {
+    className: wrapperClassName,
+    onClick: handleClick
+  }), /*#__PURE__*/_react.default.createElement("span", {
     className: "rioglyph rioglyph-".concat(icon, " text-size-16")
   }), /*#__PURE__*/_react.default.createElement("span", {
-    className: 'TreeLabelCount margin-left-3 label label-muted label-filled label-condensed'
-  }, value)) : null;
+    className: counterClassNames
+  }, value || 0));
 };
 
+TypeCounter.defaultProps = {
+  hideOnZero: false
+};
 TypeCounter.propTypes = {
+  type: _propTypes.default.string,
   icon: _propTypes.default.string,
+  // Highlights the current active filter
+  isActive: _propTypes.default.bool,
+  // Defined if there is a filter
+  hasFilter: _propTypes.default.bool,
+  // Allow the counter to be clickable
+  enableActivity: _propTypes.default.bool,
+  hideOnZero: _propTypes.default.bool,
+  onClick: _propTypes.default.func,
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.number])
 };
 var _default = TypeCounter;

package/lib/components/navigation/AppNavigationBar.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AppNavigationBar = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _noop = _interopRequireDefault(require("lodash/fp/noop"));
+
+var _excluded = ["className", "title", "right", "onNavigateBack"];
+
+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 AppNavigationBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var className = props.className,
+      title = props.title,
+      right = props.right,
+      onNavigateBack = props.onNavigateBack,
+      remainingProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var navigationClasses = (0, _classnames.default)('AppNavigationBar', 'width-100pct display-flex align-items-center justify-content-between height-45 user-select-none padding-x-10', className);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: ref
+  }, remainingProps, {
+    className: navigationClasses
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "display-flex align-items-center"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "width-30 text-size-20 text-color-darkest"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "rioglyph rioglyph-arrow-left",
+    onClick: onNavigateBack
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-medium text-color-darker"
+  }, title)), /*#__PURE__*/_react.default.createElement("div", null, right));
+});
+exports.AppNavigationBar = AppNavigationBar;
+AppNavigationBar.defaultProps = {
+  onNavigateBack: _noop.default,
+  right: /*#__PURE__*/_react.default.createElement("span", null)
+};
+AppNavigationBar.propTypes = {
+  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  right: _propTypes.default.node,
+  onNavigateBack: _propTypes.default.func,
+  className: _propTypes.default.string
+};
+var _default = AppNavigationBar;
+exports.default = _default;

package/lib/components/selects/BaseDropdownMenu.js

@@ -79,7 +79,7 @@ var BaseDropdownMenu = /*#__PURE__*/function (_Component) {
       pullRight: props.pullRight,
       focusedItemIndex: _this.props.focusedItemIndex,
       keyboardUsed: _this.props.keyboardUsed,
-      itemDOMValues: null
+      itemDOMValues: []
     };
     _this.handleOptionChange = _this.handleOptionChange.bind((0, _assertThisInitialized2.default)(_this));
     _this.handleKeydown = _this.handleKeydown.bind((0, _assertThisInitialized2.default)(_this));
@@ -113,24 +113,29 @@ var BaseDropdownMenu = /*#__PURE__*/function (_Component) {
         }
 
         if (!(0, _isEqual.default)(nextProps.options, this.props.options)) {
-          // Only update the DOM values if it is explicitly requested
-          // otherwise it will reduce the dom values to the filtered options
-          var updatedItemDOMValues;
-
-          if (nextProps.requestItemDOMValues) {
-            updatedItemDOMValues = this.setItemDOMValues();
-          }
-
           this.setState(function () {
             return {
-              options: nextProps.options,
-              itemDOMValues: updatedItemDOMValues ? updatedItemDOMValues : _this2.state.itemDOMValues
+              options: nextProps.options
             };
-          });
-
-          if (nextProps.requestItemDOMValues) {
-            this.props.updateDOMValues(updatedItemDOMValues);
-          }
+          }); // Workaround to put the update of DOM values into a setTimeout to have the component
+          // re-rendered to fetch the DOM items.
+          // This should be refactored when reworking the component as functional component
+
+          setTimeout(function () {
+            // Only update the DOM values if it is explicitly requested
+            // otherwise it will reduce the dom values to the filtered options
+            if (nextProps.requestItemDOMValues) {
+              var items = _this2.setItemDOMValues();
+
+              _this2.props.updateDOMValues(items);
+
+              _this2.setState(function () {
+                return {
+                  itemDOMValues: items ? items : _this2.state.itemDOMValues
+                };
+              });
+            }
+          }, 0);
         }
       }
     }
@@ -273,10 +278,10 @@ var BaseDropdownMenu = /*#__PURE__*/function (_Component) {
           return /*#__PURE__*/_react.default.createElement("ul", {
             className: dropdownMenuClasses
           }, /*#__PURE__*/_react.default.createElement("li", {
-            className: 'no-item-message disabled',
+            className: "no-item-message disabled",
             disabled: true
           }, /*#__PURE__*/_react.default.createElement("a", {
-            role: 'button'
+            role: "button"
           }, /*#__PURE__*/_react.default.createElement("i", null, noItemMessage))));
         }
 
@@ -301,7 +306,7 @@ var BaseDropdownMenu = /*#__PURE__*/function (_Component) {
           id: option.id,
           icon: option.icon,
           label: option.label,
-          type: 'dropdown'
+          type: "dropdown"
         });
       } // Show focused style only when keyboard is in use
 
@@ -312,15 +317,15 @@ var BaseDropdownMenu = /*#__PURE__*/function (_Component) {
         key: option.id,
         className: classNames
       }, /*#__PURE__*/_react.default.createElement("a", {
-        role: 'button',
+        role: "button",
         className: anchorClassNames,
         "data-item-id": option.id,
         "data-item-index": index,
         onClick: !option.disabled ? this.handleOptionChange : undefined
       }, /*#__PURE__*/_react.default.createElement("span", null, option.icon && /*#__PURE__*/_react.default.createElement("span", {
-        className: 'margin-right-5'
+        className: "margin-right-5"
       }, option.icon), option.label), /*#__PURE__*/_react.default.createElement("input", {
-        type: 'hidden',
+        type: "hidden",
         value: option.id
       })));
     }
@@ -416,5 +421,6 @@ BaseDropdownMenu.propTypes = {
   autoDropDirection: _propTypes.default.bool,
   noItemMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   focusedItemIndex: _propTypes.default.number.isRequired,
-  dropdownClassName: _propTypes.default.string
+  dropdownClassName: _propTypes.default.string,
+  requestItemDOMValues: _propTypes.default.bool
 };

package/lib/components/selects/Select.js

@@ -71,7 +71,8 @@ var Select = /*#__PURE__*/function (_Component) {
       filteredOptions: props.options,
       itemDOMValues: [],
       focusedItemIndex: DEFAULT_FOCUSED_ITEM_INDEX,
-      keyboardUsed: false
+      keyboardUsed: false,
+      requestItemDOMValues: false
     };
     _this.onToggle = _this.onToggle.bind((0, _assertThisInitialized2.default)(_this));
     _this.handleClickOutside = _this.handleClickOutside.bind((0, _assertThisInitialized2.default)(_this));
@@ -125,7 +126,8 @@ var Select = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "updateDOMValues",
-    value: function updateDOMValues(itemDOMValues) {
+    value: function updateDOMValues() {
+      var itemDOMValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       this.setState(function () {
         return {
           itemDOMValues: itemDOMValues,
@@ -294,7 +296,8 @@ var Select = /*#__PURE__*/function (_Component) {
         noItemMessage: noItemMessage,
         autoDropDirection: autoDropDirection,
         pullRight: pullRight,
-        dropdownClassName: dropdownClassName
+        dropdownClassName: dropdownClassName,
+        requestItemDOMValues: this.state.requestItemDOMValues
       });
     }
   }, {
@@ -311,10 +314,13 @@ var Select = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "filterOptions",
-    value: function filterOptions(itemDOMValues, filterValue, options) {
+    value: function filterOptions() {
+      var itemDOMValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      var filterValue = arguments.length > 1 ? arguments[1] : undefined;
+      var options = arguments.length > 2 ? arguments[2] : undefined;
       var filteredDOMValues = itemDOMValues.filter(function (item) {
         return item.text.toLowerCase().includes(filterValue.toLowerCase());
-      }); // Filter the options accodring to the filtered DOM values and map the IDs since the filter cannot be done
+      }); // Filter the options according to the filtered DOM values and map the IDs since the filter cannot be done
       // on the options itself as they might contain arbitrary components
 
       return options.filter(function (option) {

package/lib/es/AppNavigationBar.d.ts

@@ -0,0 +1,5 @@
+declare module '@rio-cloud/rio-uikit/lib/es/AppNavigationBar' {
+    import React from 'react';
+    import { AppNavigationBarProps } from '../types';
+    export default class AppNavigationBar extends React.Component<AppNavigationBarProps> {}
+}

package/lib/es/AppNavigationBar.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _AppNavigationBar2.default;
+  }
+});
+
+var _AppNavigationBar2 = _interopRequireDefault(require("../components/navigation/AppNavigationBar"));

package/lib/es/DeviceUtils.d.ts

@@ -2,6 +2,12 @@ declare module '@rio-cloud/rio-uikit/lib/es/DeviceUtils' {
     export function hasTouch(): boolean;
     export function isDesktop(): boolean;
     export function isMobile(): boolean;
+    export function isMobileScreen(): boolean;
     export function inIframe(): boolean;
     export function toggleZoomOnMobile(): boolean;
+    export type MOBILE_SCREEN = number;
+    export type SCREEN_SM = number;
+    export type SCREEN_MD = number;
+    export type SCREEN_LG = number;
+    export type SCREEN_XL = number;
 }

package/lib/es/SubNavigation.d.ts

@@ -0,0 +1,5 @@
+declare module '@rio-cloud/rio-uikit/lib/es/SubNavigation' {
+    import React from 'react';
+    import { SubNavigationProps } from '../types';
+    export default class SubNavigation extends React.Component<SubNavigationProps> {}
+}

package/lib/es/SubNavigation.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _SubNavigation2.default;
+  }
+});
+
+var _SubNavigation2 = _interopRequireDefault(require("../components/applicationLayout/SubNavigation"));

package/lib/es/deviceUtils.js

@@ -3,6 +3,36 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "MOBILE_SCREEN", {
+  enumerable: true,
+  get: function get() {
+    return _deviceUtils.MOBILE_SCREEN;
+  }
+});
+Object.defineProperty(exports, "SCREEN_LG", {
+  enumerable: true,
+  get: function get() {
+    return _deviceUtils.SCREEN_LG;
+  }
+});
+Object.defineProperty(exports, "SCREEN_MD", {
+  enumerable: true,
+  get: function get() {
+    return _deviceUtils.SCREEN_MD;
+  }
+});
+Object.defineProperty(exports, "SCREEN_SM", {
+  enumerable: true,
+  get: function get() {
+    return _deviceUtils.SCREEN_SM;
+  }
+});
+Object.defineProperty(exports, "SCREEN_XL", {
+  enumerable: true,
+  get: function get() {
+    return _deviceUtils.SCREEN_XL;
+  }
+});
 Object.defineProperty(exports, "hasTouch", {
   enumerable: true,
   get: function get() {
@@ -27,6 +57,12 @@ Object.defineProperty(exports, "isMobile", {
     return _deviceUtils.isMobile;
   }
 });
+Object.defineProperty(exports, "isMobileScreen", {
+  enumerable: true,
+  get: function get() {
+    return _deviceUtils.isMobileScreen;
+  }
+});
 Object.defineProperty(exports, "toggleZoomOnMobile", {
   enumerable: true,
   get: function get() {

package/lib/es/useResizeObserver.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/lib/es/useResizeObserver' {
+    import { UseResizeObserver } from '../types';
+    export default UseResizeObserver;
+}

package/lib/es/useResizeObserver.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useResizeObserver2.default;
+  }
+});
+
+var _useResizeObserver2 = _interopRequireDefault(require("../hooks/useResizeObserver"));

package/lib/hooks/useClickOutside.js

@@ -7,6 +7,7 @@ exports.default = useClickOutside;
 
 var _react = require("react");
 
+/* eslint-disable prefer-arrow/prefer-arrow-functions */
 // eslint-disable-next-line max-len
 // Inspired from https://github.com/mantinedev/mantine/blob/master/src/mantine-hooks/src/use-click-outside/use-click-outside.ts
 function useClickOutside(callback) {
@@ -15,7 +16,7 @@ function useClickOutside(callback) {
   (0, _react.useEffect)(function () {
     var listener = function listener(event) {
       if (targetRef.current && !targetRef.current.contains(event.target)) {
-        callback();
+        callback(event);
       }
     };
 

package/lib/hooks/useResizeObserver.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+// inspired from https://tobbelindstrom.com/blog/resize-observer-hook/
+var useResizeObserver = function useResizeObserver() {
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      observerEntry = _useState2[0],
+      setObserverEntry = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      node = _useState4[0],
+      setNode = _useState4[1];
+
+  var observer = (0, _react.useRef)(null);
+  var disconnect = (0, _react.useCallback)(function () {
+    var _observer$current;
+
+    return (_observer$current = observer.current) === null || _observer$current === void 0 ? void 0 : _observer$current.disconnect();
+  }, []);
+  var observe = (0, _react.useCallback)(function () {
+    observer.current = new ResizeObserver(function (_ref) {
+      var _ref2 = (0, _slicedToArray2.default)(_ref, 1),
+          entry = _ref2[0];
+
+      return setObserverEntry(entry);
+    });
+
+    if (node) {
+      observer.current.observe(node);
+    }
+  }, [node]);
+  (0, _react.useLayoutEffect)(function () {
+    observe();
+    return function () {
+      return disconnect();
+    };
+  }, [disconnect, observe]);
+  return [setNode, observerEntry];
+};
+
+var _default = useResizeObserver;
+exports.default = _default;

package/lib/hooks/useWindowResize.js

@@ -5,19 +5,22 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = useWindowResize;
+exports.default = void 0;
 
 var _react = require("react");
 
 var _throttle = _interopRequireDefault(require("lodash/fp/throttle"));
 
-function useWindowResize(onResizeCallback) {
+var useWindowResize = function useWindowResize(onResizeCallback) {
   var timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
   (0, _react.useEffect)(function () {
     var throttledCallback = (0, _throttle.default)(timeout, onResizeCallback);
-    window.addEventListener('resize', throttledCallback, false);
+    window.addEventListener('resize', throttledCallback);
     return function () {
-      return window.removeEventListener('resize', throttledCallback, true);
+      window.removeEventListener('resize', throttledCallback);
     };
   }, [onResizeCallback, timeout]);
-}
+};
+
+var _default = useWindowResize;
+exports.default = _default;

package/lib/style/css/_exports/rio-website.less

@@ -191,10 +191,14 @@ body .module-content {
 
 .ApplicationHeader {
   .navbar-brand {
-    background-image: url('@{cdnBase}/svg/common/ico_rio.svg') !important;
+    //background-image: url('@{cdnBase}/svg/common/ico_rio.svg') !important;
     background-size: cover;
   }
 
+  .SubmoduleNavigation .SubmoduleNavigation {
+    padding-left: 0;
+  }
+
   html.show-handheld-navigation & {
     position: fixed;
     top: 0;
@@ -222,6 +226,7 @@ body .module-content {
     }
 
     .SubmoduleNavigation {
+      border-bottom: none;
       display: block;
       margin: 50px 0;
       padding-left: 0;
@@ -329,6 +334,7 @@ body .module-content {
         @media (min-width: @screen-ls) {
           > .SubmoduleNavigation {
             max-height: calc(~"100vh - 100px");
+            height: auto;
             overflow: auto;
             -webkit-overflow-scrolling: touch;
           }
@@ -554,6 +560,29 @@ body .module-content {
             }
           }
 
+          &.btn-default {
+            .btn {
+              .button-variant(
+                ~'!important';
+                @btn-default-bg;
+                @btn-default-border;
+                @btn-default-color;
+                @btn-default-color;
+                @btn-default-color;
+                @btn-default-color;
+                darken(@btn-default-color, 17%);
+                darken(@btn-default-border, 12%);
+                darken(@btn-default-border, 12%);
+                darken(@btn-default-border, 25%);
+                darken(@btn-default-border, 25%);
+                @btn-default-bg;
+                @btn-default-bg;
+                @btn-default-bg;
+                @btn-default-bg;
+              );
+            }
+          }
+
           &.btn-white {
             .btn {
               .button-variant(
@@ -671,6 +700,24 @@ body .module-content {
             }
           }
 
+          &.list-style-position-inside {
+            ul, ol {
+              list-style-position: inside !important;
+            }
+          }
+
+          &.large-panel-border {
+            > .section-content-container.panel {
+              border-width: 3px;
+            }
+
+            &.panel-border-color-lighter {
+              > .section-content-container.panel {
+                border-color: @gray-lighter;
+              }
+            }
+          }
+
           // Section Wrapper Inner Container
           .section-content-container {
             height: 100%;
@@ -1526,6 +1573,26 @@ body .module-content {
           }
         }
       }
+
+      &-always {
+        .section-layout {
+          padding-left: 0;
+          padding-right: 0;
+
+          .section-layout-container {
+            max-width: none;
+            padding-left: 0;
+            padding-right: 0;
+
+            .section-layout-container-row {
+              .section-content-container-col {
+                padding-left: 0;
+                padding-right: 0;
+              }
+            }
+          }
+        }
+      }
     }
 
     &-marketplace-details-panel {
@@ -1594,6 +1661,14 @@ body .module-content {
       }
     }
 
+    &-hide-background-on-mobile {
+      @media (max-width: @screen-ls) {
+        .section-wrapper-background-image {
+          display: none;
+        }
+      }
+    }
+
     &-overlay-light {
       .section-wrapper-background-image,
       .section-content-container-background-image {
@@ -1834,12 +1909,6 @@ blockquote {
     .anchor {
       margin-top: -50px;
     }
-
-    // .preset-rimless {
-    //   > .anchor {
-    //     margin-top: -50px;
-    //   }
-    // }
   }
 
   .ApplicationLayoutBody {

package/lib/style/css/_exports/vw-uikit.less

@@ -173,7 +173,7 @@
     display: none;
   }
 
-  .navbar-nav {
+  .nav {
     display: flex;
     justify-content: center !important;