@rio-cloud/rio-uikit 0.16.2-beta.9 → 0.16.2

package/lib/es/index.js

@@ -72,6 +72,7 @@ var _exportNames = {
   NotBookedState: true,
   CustomState: true,
   TimePicker: true,
+  ResponsiveColumnStripe: true,
   SortArrowUp: true,
   SortArrowDown: true,
   SortArrows: true,
@@ -95,6 +96,8 @@ var _exportNames = {
   useClipboard: true,
   useElementSize: true,
   useScrollPosition: true,
+  useDarkMode: true,
+  useMutationObserver: true,
   hasTouch: true,
   inIframe: true,
   isDesktop: true,
@@ -543,6 +546,12 @@ Object.defineProperty(exports, "Resizer", {
     return _Resizer2["default"];
   }
 });
+Object.defineProperty(exports, "ResponsiveColumnStripe", {
+  enumerable: true,
+  get: function get() {
+    return _ResponsiveColumnStripe2["default"];
+  }
+});
 Object.defineProperty(exports, "ResponsiveVideo", {
   enumerable: true,
   get: function get() {
@@ -928,6 +937,12 @@ Object.defineProperty(exports, "useClipboard", {
     return _useClipboard["default"];
   }
 });
+Object.defineProperty(exports, "useDarkMode", {
+  enumerable: true,
+  get: function get() {
+    return _useDarkMode["default"];
+  }
+});
 Object.defineProperty(exports, "useEffectOnce", {
   enumerable: true,
   get: function get() {
@@ -964,6 +979,12 @@ Object.defineProperty(exports, "useKey", {
     return _useKey["default"];
   }
 });
+Object.defineProperty(exports, "useMutationObserver", {
+  enumerable: true,
+  get: function get() {
+    return _useMutationObserver["default"];
+  }
+});
 Object.defineProperty(exports, "useOnMount", {
   enumerable: true,
   get: function get() {
@@ -1067,6 +1088,7 @@ var _ForbiddenState2 = _interopRequireDefault(require("./components/states/Forbi
 var _NotBookedState2 = _interopRequireDefault(require("./components/states/NotBookedState"));
 var _CustomState2 = _interopRequireDefault(require("./components/states/CustomState"));
 var _TimePicker2 = _interopRequireDefault(require("./components/timepicker/TimePicker"));
+var _ResponsiveColumnStripe2 = _interopRequireDefault(require("./components/responsiveColumnStripe/ResponsiveColumnStripe"));
 var _SortArrows2 = require("./components/table/SortArrows");
 var _SortUtils = require("./utils/SortUtils");
 var _routeUtils = require("./utils/routeUtils");
@@ -1083,6 +1105,8 @@ var _useClickOutside = _interopRequireDefault(require("./hooks/useClickOutside")
 var _useClipboard = _interopRequireDefault(require("./hooks/useClipboard"));
 var _useElementSize = _interopRequireDefault(require("./hooks/useElementSize"));
 var _useScrollPosition = _interopRequireDefault(require("./hooks/useScrollPosition"));
+var _useDarkMode = _interopRequireDefault(require("./hooks/useDarkMode"));
+var _useMutationObserver = _interopRequireDefault(require("./hooks/useMutationObserver"));
 var _deviceUtils = require("./utils/deviceUtils");
 var _colorScheme = require("./utils/colorScheme");
 var _GroupSelectionUtil = require("./utils/GroupSelectionUtil");

package/lib/es/styles/components/Dialog.less

@@ -40,6 +40,7 @@ body {
   top: 0;
   width: 100% !important;
   z-index: @zindex-modal;
+  backdrop-filter: blur(1px);
 
   // When fading in the modal, animate it to slide down
   &.fade .modal-dialog {
@@ -91,11 +92,6 @@ body {
             }
           }
         }
-
-        // because of overflow :after styling
-        &:after {
-          display: none !important;
-        }
       }
 
       .modal-footer:before {
@@ -156,9 +152,10 @@ body {
 
           .modal-header-title {
             display: flex;
-            order: 1;
+            flex-wrap: wrap;
             font-size: @font-size-xl - 2;
             line-height: @font-size-xl - 2;
+            order: 1;
           }
 
           .modal-header-subtitle {
@@ -306,10 +303,16 @@ body {
         .modal-body {
           overflow-y: auto;
 
-          &:after {
-            content: '';
-            display: block;
-            height: 30px;
+          // &:after {
+          //   content: '';
+          //   display: block;
+          //   height: 30px;
+          // }
+
+          &.no-overflow-gradient {
+            + .modal-footer:before {
+              display: none;
+            }
           }
         }
 

package/lib/es/styles/components/MapMarker.less

@@ -160,7 +160,7 @@
     }
 
     .rio-map-icon {
-      margin-right: @bubbleSize * 0.4;
+      margin: 0 @bubbleSize * 0.3;
 
       &.rioglyph {
         top: 0; // unnecessary rioglyph hack
@@ -174,6 +174,14 @@
           width: 100%;
         }
       }
+
+      + .rio-map-icon {
+        margin: 0 @bubbleSize * 0.3 0 -(@bubbleSize) * 0.3;
+      }
+
+      + .rio-map-name {
+        padding: 0 @bubbleSize * 0.4 0 0;
+      }
     }
 
     &.moving {
@@ -192,18 +200,6 @@
       transition: height @animationDuration ~',' bottom @animationDuration;
     }
 
-    .rio-map-icon {
-      margin: 0 @bubbleSize * 0.3;
-
-      + .rio-map-icon {
-        margin: 0 @bubbleSize * 0.3 0 -(@bubbleSize) * 0.3;
-      }
-
-      + .rio-map-name {
-        padding: 0 @bubbleSize * 0.4 0 0;
-      }
-    }
-
     .rio-map-direction {
       border-radius: @border-radius-round;
       background-color: .hslb(@color-map-marker-asset-hsl, '+', '5%')[@result];
@@ -223,10 +219,10 @@
         margin-right: @bubbleSize * 0.2;
       }
     }
+
   }
 
   .rio-map-position-arrow {
-    background-color: var(--color-map-marker-text);
     bottom: (@iconSize * 0.5) - (@positionTriangleSize * 0.45);
     color: transparent;
     height: @positionTriangleSize;
@@ -296,6 +292,220 @@
       display: none !important;
     }
   }
+
+  // coloring
+  [class*="map-marker-type"] {
+    color: var(--color-map-marker-text);
+
+    .rio-map-icon {
+      &:before {
+        color: var(--color-map-marker-text);
+      }
+    }
+
+    &[class*="asset"] {
+      background-color: var(--color-map-marker-asset);
+      border: 1px solid var(--color-map-marker-asset);
+
+      &.active {
+        color: var(--color-map-marker-asset);
+        background-color: var(--color-map-marker-active);
+
+        .rio-map-icon {
+          &:before {
+            color: var(--color-map-marker-asset);
+          }
+        }
+      }
+
+      ~ .rio-map-position-arrow {
+        background-color: var(--color-map-marker-asset);
+      }
+
+      ~ .rio-map-position {
+        color: var(--color-map-marker-asset);
+      }
+    }
+
+    &[class*="poi"] {
+      background-color: var(--color-map-marker-poi);
+      border: 1px solid var(--color-map-marker-poi);
+
+      &.active {
+        color: var(--color-map-marker-poi);
+        background-color: var(--color-map-marker-active);
+
+        .rio-map-icon {
+          &:before {
+            color: var(--color-map-marker-poi);
+          }
+        }
+      }
+
+      ~ .rio-map-position-arrow {
+        background-color: var(--color-map-marker-poi);
+      }
+
+      ~ .rio-map-position {
+        color: var(--color-map-marker-poi);
+      }
+    }
+
+    &[class*="geofence"] {
+      background-color: var(--color-map-marker-geofence);
+      border: 1px solid var(--color-map-marker-geofence);
+
+      &.active {
+        color: var(--color-map-marker-geofence);
+        background-color: var(--color-map-marker-active);
+
+        .rio-map-icon {
+          &:before {
+            color: var(--color-map-marker-geofence);
+          }
+        }
+      }
+
+      ~ .rio-map-position-arrow {
+        background-color: var(--color-map-marker-geofence);
+      }
+
+      ~ .rio-map-position {
+        color: var(--color-map-marker-geofence);
+      }
+    }
+
+    &[class*="route"] {
+      background-color: var(--color-map-marker-route);
+      border: 1px solid var(--color-map-marker-route);
+
+      &.active {
+        color: var(--color-map-marker-route);
+        background-color: var(--color-map-marker-active);
+
+        .rio-map-icon {
+          &:before {
+            color: var(--color-map-marker-route);
+          }
+        }
+      }
+
+      ~ .rio-map-position-arrow {
+        background-color: var(--color-map-marker-route);
+      }
+
+      ~ .rio-map-position {
+        color: var(--color-map-marker-route);
+      }
+    }
+
+    // night colors
+    .map-type-night & {
+      color: var(--color-map-marker-text-night);
+
+      .rio-map-icon {
+        &:before {
+          color: var(--color-map-marker-text-night);
+        }
+      }
+
+      &[class*="asset"] {
+        background-color: var(--color-map-marker-asset-night);
+        border: 1px solid var(--color-map-marker-asset-night);
+
+        &.active {
+          color: var(--color-map-marker-asset-night);
+          background-color: var(--color-map-marker-active-night);
+
+          .rio-map-icon {
+            &:before {
+              color: var(--color-map-marker-asset-night);
+            }
+          }
+        }
+
+        ~ .rio-map-position-arrow {
+          background-color: var(--color-map-marker-asset-night);
+        }
+
+        ~ .rio-map-position {
+          color: var(--color-map-marker-asset-night);
+        }
+      }
+
+      &[class*="poi"] {
+        background-color: var(--color-map-marker-poi-night);
+        border: 1px solid var(--color-map-marker-poi-night);
+
+        &.active {
+          color: var(--color-map-marker-poi-night);
+          background-color: var(--color-map-marker-active-night);
+
+          .rio-map-icon {
+            &:before {
+              color: var(--color-map-marker-poi-night);
+            }
+          }
+        }
+
+        ~ .rio-map-position-arrow {
+          background-color: var(--color-map-marker-poi-night);
+        }
+
+        ~ .rio-map-position {
+          color: var(--color-map-marker-poi-night);
+        }
+      }
+
+      &[class*="geofence"] {
+        background-color: var(--color-map-marker-geofence-night);
+        border: 1px solid var(--color-map-marker-geofence-night);
+
+        &.active {
+          color: var(--color-map-marker-geofence-night);
+          background-color: var(--color-map-marker-active-night);
+
+          .rio-map-icon {
+            &:before {
+              color: var(--color-map-marker-geofence-night);
+            }
+          }
+        }
+
+        ~ .rio-map-position-arrow {
+          background-color: var(--color-map-marker-geofence-night);
+        }
+
+        ~ .rio-map-position {
+          color: var(--color-map-marker-geofence-night);
+        }
+      }
+
+      &[class*="route"] {
+        background-color: var(--color-map-marker-route-night);
+        border: 1px solid var(--color-map-marker-route-night);
+
+        &.active {
+          color: var(--color-map-marker-route-night);
+          background-color: var(--color-map-marker-active-night);
+
+          .rio-map-icon {
+            &:before {
+              color: var(--color-map-marker-route-night);
+            }
+          }
+        }
+
+        ~ .rio-map-position-arrow {
+          background-color: var(--color-map-marker-route-night);
+        }
+
+        ~ .rio-map-position {
+          color: var(--color-map-marker-route-night);
+        }
+      }
+    }
+  }
 }
 
 #rio-map-context-menu {

package/lib/es/styles/components/MapSettings.less

@@ -10,6 +10,10 @@
     background: var(--color-white);
     cursor: pointer;
     padding: 3px;
+
+    .map-type-night & {
+      background: #444a4c;
+    }
   }
 
   .MapSettingsTileSpacer {
@@ -28,7 +32,7 @@
 
   // moved MapSettingsWrapper left on large noTouch devices
   @media (min-width: @screen-ls) {
-    +.MapSettingsWrapper {
+    + .MapSettingsWrapper {
       right: 47px;
     }
   }
@@ -60,6 +64,10 @@
       background: var(--color-white);
       cursor: pointer;
       padding: 5px;
+
+      .map-type-night & {
+        background: #444a4c;
+      }
     }
 
     .MapSettingsPanel {
@@ -70,9 +78,17 @@
       margin-bottom: 10px;
       padding: 5px;
 
+      .map-type-night & {
+        background: #444a4c;
+      }
+
       .MapSettingsItem {
         background: var(--color-white);
         cursor: pointer;
+
+        .map-type-night & {
+          background: #444a4c;
+        }
       }
     }
   }
@@ -110,31 +126,31 @@
   }
 }
 
-// OLD
-.MapSettings {
-  align-items: flex-end;
-  bottom: 15px;
-  display: flex;
-  flex-flow: column-reverse;
-  padding: 0;
-  position: absolute;
-  right: 47px;
-  z-index: 1;
-
-  @media (max-width: @screen-ls) {
-    right: 15px;
-  }
-
-  .MapSettingsPanel {
-    &:extend(.shadow-smooth);
-    background: var(--color-white);
-    display: flex;
-    margin-bottom: 10px;
-
-    .MapSettingsTile,
-    .MapSettingsButton {
-      cursor: pointer;
-      padding: 5px;
-    }
-  }
-}
+// // OLD
+// .MapSettings {
+//   align-items: flex-end;
+//   bottom: 15px;
+//   display: flex;
+//   flex-flow: column-reverse;
+//   padding: 0;
+//   position: absolute;
+//   right: 47px;
+//   z-index: 1;
+
+//   @media (max-width: @screen-ls) {
+//     right: 15px;
+//   }
+
+//   .MapSettingsPanel {
+//     &:extend(.shadow-smooth);
+//     background: var(--color-white);
+//     display: flex;
+//     margin-bottom: 10px;
+
+//     .MapSettingsTile,
+//     .MapSettingsButton {
+//       cursor: pointer;
+//       padding: 5px;
+//     }
+//   }
+// }

package/lib/es/styles/components/Notification.less

@@ -49,7 +49,7 @@
 
       &:before {
         position: absolute;
-        top: 50%;
+        top: 24px;
         left: 15px;
         margin-top: -14px;
         display: block;

package/lib/es/styles/design/alerts.less

@@ -2,8 +2,8 @@
   border-color: transparent;
   border-radius: @border-radius-default;
   border-style: solid;
-  border-width: 2px;
-  padding: 12px;
+  border-width: 1px;
+  padding: 15px;
   position: relative;
 
   .alert-link {
@@ -18,7 +18,11 @@
     position: absolute;
     right: 3px;
     top: 6px;
-    transform: scale(0.75);
+    color: var(--gray-darker) !important;
+
+    * {
+      transform: scale(0.6);
+    }
   }
 
   > p,
@@ -37,18 +41,12 @@
 
     &.alert- {
       &@{key} {
-
         background-color: @background;
         border-color: @value;
-        color: @value;
 
         .alert-link {
           color: @value;
         }
-
-        > .close .rioglyph {
-          color: @value;
-        }
       }
     }
   })

package/lib/es/styles/design/aspect-ratio.less

@@ -1,6 +1,7 @@
 .aspect-ratio-resizer {
     display: grid;
     position: relative;
+    width: 100%;
 
     > * {
         grid-area: ~"1 / 1 / 2 / 2";

package/lib/es/styles/design/blur.less

@@ -0,0 +1,7 @@
+.backdrop {
+    &-blur-1 { backdrop-filter: blur(1px) !important; }
+    &-blur-2 { backdrop-filter: blur(2px) !important; }
+    &-blur-3 { backdrop-filter: blur(3px) !important; }
+    &-blur-4 { backdrop-filter: blur(4px) !important; }
+    &-blur-5 { backdrop-filter: blur(5px) !important; }
+}

package/lib/es/styles/design/border.less

@@ -66,6 +66,10 @@
   }
 }
 
+.hover-border-style-solid:hover { border-style: solid !important }
+.hover-border-style-dotted:hover { border-style: dotted !important }
+.hover-border-style-dashed:hover { border-style: dashed !important }
+
 // border coloring
 
 // transparent
@@ -79,6 +83,9 @@ each(@colors-text-map, {
   .border-color-@{key} {
     border-color: @value !important;
   }
+  .hover-border-color-@{key}:hover {
+    border-color: @value !important;
+  }
 })
 
 // primary
@@ -87,6 +94,9 @@ each(@colors-brand-map, {
   .border-color-@{key} {
     border-color: @value !important;
   }
+  .hover-border-color-@{key}:hover {
+    border-color: @value !important;
+  }
 })
 
 // info
@@ -97,6 +107,9 @@ each(@colors-status-map, {
   .border-color-@{key} {
     border-color: @value !important;
   }
+  .hover-border-color-@{key}:hover {
+    border-color: @value !important;
+  }
 })
 
 // darkest
@@ -110,6 +123,9 @@ each(@colors-gray-map, {
   .border-color-@{key} {
     border-color: @value !important;
   }
+  .hover-border-color-@{key}:hover {
+    border-color: @value !important;
+  }
 })
 
 // map-marker-asset
@@ -120,6 +136,18 @@ each(@colors-map-marker-map, {
   .border-color-@{key} {
     border-color: @value !important;
   }
+  .hover-border-color-@{key}:hover {
+    border-color: @value !important;
+  }
+})
+
+each(@colors-map-marker-night-map, {
+  .border-color-@{key} {
+    border-color: @value !important;
+  }
+  .hover-border-color-@{key}:hover {
+    border-color: @value !important;
+  }
 })
 
 // rating-1
@@ -131,6 +159,9 @@ each(@colors-rating-map, {
   .border-color-@{key} {
     border-color: @value !important;
   }
+  .hover-border-color-@{key}:hover {
+    border-color: @value !important;
+  }
 })
 
 // status-available
@@ -141,6 +172,9 @@ each(@colors-driving-status-map, {
   .border-color-@{key} {
     border-color: @value !important;
   }
+  .hover-border-color-@{key}:hover {
+    border-color: @value !important;
+  }
 })
 
 // highlight-darkest
@@ -155,6 +189,9 @@ each(@colors-highlight-map, {
   .border-color-@{key} {
     border-color: @value !important;
   }
+  .hover-border-color-@{key}:hover {
+    border-color: @value !important;
+  }
 })
 
 // coldplay-wine
@@ -166,13 +203,13 @@ each(@colors-highlight-map, {
 // coldplay-moos
 // coldplay-primrose
 // coldplay-khaki
-& when (@buildColdplayColors = true) {
-  each(@colors-coldplay-map, {
-    .border-color-@{key} {
-      border-color: @value !important;
-    }
-  })
-}
+// & when (@buildColdplayColors = true) {
+//   each(@colors-coldplay-map, {
+//     .border-color-@{key} {
+//       border-color: @value !important;
+//     }
+//   })
+// }
 
 // warmup-crimson
 // warmup-victoria
@@ -183,10 +220,10 @@ each(@colors-highlight-map, {
 // warmup-salmon
 // warmup-cherokee
 // warmup-corn
-& when (@buildWarmupColors = true) {
-  each(@colors-warmup-map, {
-    .border-color-@{key} {
-      border-color: @value !important;
-    }
-  })
-}
+// & when (@buildWarmupColors = true) {
+//   each(@colors-warmup-map, {
+//     .border-color-@{key} {
+//       border-color: @value !important;
+//     }
+//   })
+// }