@rio-cloud/rio-uikit 0.16.2-beta.14 → 0.16.2-beta.16

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/design/border.less

@@ -172,13 +172,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
@@ -189,10 +189,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;
+//     }
+//   })
+// }

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

@@ -72,6 +72,7 @@ each(@colors-gray-map, {
 // map-marker-route
 each(@colors-map-marker-map, {
   .bg-@{key} {
+    color: var(--color-white) !important;
     background-color: @value !important;
   }
   .hover-bg-@{key}:hover {
@@ -169,9 +170,9 @@ each(@colors-highlight-map, {
     .hover-bg-@{key}:hover {
       background-color: @value !important;
     }
-    .fill-@{key} {
-      fill: @value !important;
-    }
+    // .fill-@{key} {
+    //   fill: @value !important;
+    // }
   })
   .bg-coldplay-wine,
   .bg-coldplay-aubergine,
@@ -197,9 +198,9 @@ each(@colors-highlight-map, {
     .hover-bg-@{key}:hover {
       background-color: @value !important;
     }
-    .fill-@{key} {
-      fill: @value !important;
-    }
+    // .fill-@{key} {
+    //   fill: @value !important;
+    // }
   })
   .bg-warmup-crimson,
   .bg-warmup-victoria,

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

@@ -0,0 +1,165 @@
+[class*="divider-y"] > :not([hidden]) ~ :not([hidden]) {
+  border-bottom-width: 0;
+  border-top-style: solid;
+}
+
+[class*="divider-x"] > :not([hidden]) ~ :not([hidden]) {
+  border-right-width: 0;
+  border-left-style: solid;
+}
+
+.divider-y-1 {
+  &> :not([hidden]) ~ :not([hidden]) {
+    border-top-width: 1px;
+  }
+}
+
+.divider-y-2 > :not([hidden]) ~ :not([hidden]) {
+  border-top-width: 2px;
+}
+
+.divider-y-3 > :not([hidden]) ~ :not([hidden]) {
+  border-top-width: 3px;
+}
+
+.divider-x-1 {
+  &> :not([hidden]) ~ :not([hidden]) {
+    border-left-width: 1px;
+  }
+}
+
+.divider-x-2 > :not([hidden]) ~ :not([hidden]) {
+  border-left-width: 2px;
+}
+
+.divider-x-3 > :not([hidden]) ~ :not([hidden]) {
+  border-left-width: 3px;
+}
+
+// coloring
+
+.divider-color {
+  // white
+  // black
+  each(@colors-text-map, {
+    &-@{key} > :not([hidden]) ~ :not([hidden]) {
+      border-color: @value !important;
+    }
+  })
+
+  // primary
+  // secondary
+  each(@colors-brand-map, {
+    &-@{key} > :not([hidden]) ~ :not([hidden]) {
+      border-color: @value !important;
+    }
+  })
+
+  // info
+  // success
+  // warning
+  // danger
+  each(@colors-status-map, {
+    &-@{key} > :not([hidden]) ~ :not([hidden]) {
+      border-color: @value !important;
+    }
+  })
+
+  // darkest
+  // darker
+  // dark
+  // gray
+  // light
+  // lighter
+  // lightest
+  each(@colors-gray-map, {
+    &-@{key} > :not([hidden]) ~ :not([hidden]) {
+      border-color: @value !important;
+    }
+  })
+
+  // map-marker-asset
+  // map-marker-poi
+  // map-marker-geofence
+  // map-marker-route
+  each(@colors-map-marker-map, {
+    &-@{key} > :not([hidden]) ~ :not([hidden]) {
+      border-color: @value !important;
+    }
+  })
+
+  each(@colors-map-marker-night-map, {
+    &-@{key} > :not([hidden]) ~ :not([hidden]) {
+      border-color: @value !important;
+    }
+  })
+
+  // rating-1
+  // rating-2
+  // rating-3
+  // rating-4
+  // rating-5
+  each(@colors-rating-map, {
+    &-@{key} > :not([hidden]) ~ :not([hidden]) {
+      border-color: @value !important;
+    }
+  })
+
+  // status-available
+  // status-driving
+  // status-resting
+  // status-working
+  each(@colors-driving-status-map, {
+    &-@{key} > :not([hidden]) ~ :not([hidden]) {
+      border-color: @value !important;
+    }
+  })
+
+  // highlight-darkest
+  // highlight-darker
+  // highlight-dark
+  // highlight
+  // highlight-light
+  // highlight-lighter
+  // highlight-lightest
+  // highlight-decent
+  each(@colors-highlight-map, {
+    &-@{key} > :not([hidden]) ~ :not([hidden]) {
+      border-color: @value !important;
+    }
+  })
+
+  // coldplay-wine
+  // coldplay-aubergine
+  // coldplay-kashmir
+  // coldplay-fountain
+  // coldplay-turquoise
+  // coldplay-bermuda
+  // coldplay-moos
+  // coldplay-primrose
+  // coldplay-khaki
+  // & when (@buildColdplayColors = true) {
+  //   each(@colors-coldplay-map, {
+  //     &-@{key} > :not([hidden]) ~ :not([hidden]) {
+  //       border-color: @value !important;
+  //     }
+  //   })
+  // }
+
+  // warmup-crimson
+  // warmup-victoria
+  // warmup-cadillac
+  // warmup-raspberry
+  // warmup-cerise
+  // warmup-charm
+  // warmup-salmon
+  // warmup-cherokee
+  // warmup-corn
+  // & when (@buildWarmupColors = true) {
+  //   each(@colors-warmup-map, {
+  //     &-@{key} > :not([hidden]) ~ :not([hidden]) {
+  //       border-color: @value !important;
+  //     }
+  //   })
+  // }
+}

package/lib/es/styles/design/responsive/_imports.less

@@ -11,6 +11,7 @@
   @import (multiple) "padding.less";
   @import (multiple) "position.less";
   @import (multiple) "sizing.less";
+  @import (multiple) "spacing.less";
   @import (multiple) "text.less";
 }
 

package/lib/es/styles/design/responsive/gap.less

@@ -26,16 +26,8 @@ each(@spacings-px, {
 
 // gap pct
 each(@spacings-pct, {
-  // x & y
-  // .gap-@{key}@{suffix} {
-  //   gap: @value !important;
-  // }
   // x
   .column-gap-@{key}@{suffix} {
     column-gap: @value !important;
   }
-  // y
-  // .row-gap-@{key}@{suffix} {
-  //   row-gap: @value !important;
-  // }
 })

package/lib/es/styles/design/responsive/spacing.less

@@ -0,0 +1,12 @@
+// spacing px
+each(@spacings-px, {
+  .space-x-@{key}@{suffix} > :not([hidden]) ~ :not([hidden]) {
+    margin-left: @value !important;
+    margin-right: 0 !important;
+  }
+
+  .space-y-@{key}@{suffix} > :not([hidden]) ~ :not([hidden]) {
+    margin-top: @value !important;
+    margin-bottom: 0 !important;
+  }
+})

package/lib/es/styles/rio-uikit-core.less

@@ -42,6 +42,7 @@
 @import (less) './design/aspect-ratio.less';
 @import (less) './design/colors.less';
 @import (less) './design/border.less';
+@import (less) './design/divide.less';
 @import (less) './design/cursors.less';
 @import (less) './design/custom.less';
 @import (less) './design/ellipsis.less';

package/lib/es/styles/variables/light_colors.less

@@ -52,12 +52,12 @@
 @color-map-marker-route: #3690ae;
 @color-map-marker-text: #ffffff;
 
-@color-map-marker-active-night: #79e703;
-@color-map-marker-asset-night: #0e8a14;
-@color-map-marker-poi-night: #d212be;
-@color-map-marker-geofence-night: #d7b269;
-@color-map-marker-route-night: #750666;
-@color-map-marker-text-night: #f7ff13;
+@color-map-marker-active-night: #ededed;
+@color-map-marker-asset-night: #6e757a;
+@color-map-marker-poi-night: #b23672;
+@color-map-marker-geofence-night: #79619f;
+@color-map-marker-route-night: #3b9fc1;
+@color-map-marker-text-night: #ededed;
 
 // Color - Rating
 @color-rating-1: #d90000;