@rio-cloud/rio-uikit 0.16.1-beta-6 → 0.16.1-beta-9

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

@@ -195,6 +195,10 @@ body .module-content {
     background-size: cover;
   }
 
+  .SubmoduleNavigation .SubmoduleNavigation {
+    padding-left: 0;
+  }
+
   html.show-handheld-navigation & {
     position: fixed;
     top: 0;
@@ -222,7 +226,9 @@ body .module-content {
     }
 
     .SubmoduleNavigation {
+      border-bottom: none;
       display: block;
+      height: auto;
       margin: 50px 0;
       padding-left: 0;
       text-align: center;
@@ -329,6 +335,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 +561,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(
@@ -1544,6 +1574,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 {
@@ -1612,6 +1662,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 {
@@ -1852,12 +1910,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;
 

package/lib/style/css/animations/_imports.less

@@ -1,6 +1,7 @@
 @import (less) "collapse.less";
 @import (less) "fade.less";
 @import (less) "pinging.less";
+@import (less) "pulsing.less";
 @import (less) "rotate.less";
 @import (less) "scale.less";
 @import (less) "slide.less";

package/lib/style/css/animations/pulsing.less

@@ -0,0 +1,5 @@
+@keyframes pulsing {
+  50% {
+   opacity:.5
+  }
+ }