@rio-cloud/rio-uikit 0.15.0-beta-45 → 0.15.0-beta-49

package/lib/style/css/rio-theme/dropdowns.less

@@ -26,15 +26,16 @@
   .shadow-hard-to-bottom();
   margin: -1px 0 0 0;
   padding: 0;
-  min-width: 100%;
 
   > li {
     > a {
       cursor: pointer;
       line-height: 1.25;
       padding: 7px 13px;
+      margin: 2px 6px;
       position: relative;
       user-select: none;
+      border-radius: 4px;
 
       &:active:focus {
         outline: 0;
@@ -48,17 +49,11 @@
     &:last-child:not(:first-child) {
       margin-bottom: 5px;
     }
-
-    .TagManager & {
-      &:first-child:not(:last-child) {
-        margin-top: 0;
-      }
-    }
   }
 
   > .active > a {
     color: inherit;
-    background-color: inherit;
+    background-color: inherit; 
   }
 
   .menuitem:focus {
@@ -67,47 +62,32 @@
 
   > .dropdown-header {
     display: flex;
-    padding: 2px 0;
+    padding: 5px 10px;
     pointer-events: none;
     align-items: center;
 
-    .dropdown-header-line {
-      flex: 1 1 auto;
-
-      hr {
-        border-width: 2px;
-        margin: 0;
-      }
-    }
-
     &:not(.center) {
       margin-top: 15px;
 
       ~ li:not(.dropdown-header) a {
         padding-left: 20px;
       }
-
-      .dropdown-header-line:first-child {
-        flex: 0 0 auto;
-        width: 8px;
-      }
     }
 
     .dropdown-header-text {
       background: @color-white;
-      color: @gray-darker;
+      color: lighten(@gray, 5%);
       font-size: 12px;
       font-weight: @text-medium;
       line-height: 1.25;
       max-width: calc(~"100% - 30px");
-      padding: 1px 5px 2px 5px;
       text-align: center;
       text-transform: uppercase;
     }
   }
 
   > .divider {
-    margin: 0;
+    margin: 3px 6px;
   }
 }
 

package/lib/style/css/rio-theme/navbar.less

@@ -1,8 +1,8 @@
 @import '../bootstrap/navbar.less';
 
 @navbar-height: 50px;
-@navbar-application-dropdown-width: 300px;
 @navbar-height-without-border: @navbar-height - 1;
+@navbar-application-dropdown-width: 300px;
 @navbar-padding-horizontal: @grid-gutter-width;
 @navbar-padding-vertical: 15px;
 @navbar-margin-bottom: @navbar-padding-vertical;
@@ -44,6 +44,7 @@
 
 // Custom variables
 @navbar-brand-home-icon: url('https://cdn.rio.cloud/svg/common/ico_home.svg');
+@navbar-brand-icon: url('https://cdn.rio.cloud/svg/common/ico_rio_colored.svg');
 @navbar-collapse-max-height: 340px;
 @box-shadow: inset 0 -3px 0 @color-black, 0 1px 0 @color-black;
 
@@ -109,13 +110,18 @@
 
   .navbar-brand {
     background-color: transparent !important;
-    background-image: @navbar-brand-home-icon !important;
+    background-image: @navbar-brand-icon !important;
+    background-size: cover;
     height: @navbar-height-without-border;
     margin: 0;
     padding: 0;
     position: relative;
     width: @navbar-height;
 
+    &.home-icon {
+      background-image: @navbar-brand-home-icon !important;
+    }
+
     &:after {
       background: @color-black;
       content: '';
@@ -440,3 +446,40 @@
     }
   }
 }
+
+.ActionBarItemList {
+  margin: 0;
+  padding: 0;
+
+  &Item {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+
+    &Icon {
+      margin-top: 2px;
+      color: @gray-dark;
+      font-size: 16px;
+    }
+
+    &Button {
+      .btn;
+      .btn-link;
+      .btn-multiline;
+      text-align: left;
+      padding: 0;
+      height: auto;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &Separator {
+    margin-top: 5px;
+    margin-bottom: 5px;
+  }
+}

package/lib/style/css/rio-theme/navs.less

@@ -164,6 +164,25 @@
     }
   }
 
+  &-filled {
+    background: @gray-lightest;
+    border-radius: 5px;
+    box-shadow: none !important;
+    padding: 5px;
+    
+    > li.active,
+    > li:hover {
+      .shadow-default;
+      background: @color-white;
+      border-radius: 5px;
+      font-weight: 600;
+
+      > a, > span, > div {
+        box-shadow: none !important;
+      }
+    }
+  }
+
   &.nav-justified {
     @media (min-width: 0) {
       display: flex;

package/lib/style/css/rio-theme/pagination.less

@@ -77,7 +77,7 @@
 
     &:empty {
       background: @color-highlight-decent;
-      border-radius: 0;
+      border-radius: @border-radius-small;
       border: 1px solid @color-highlight;
       height: 10px;
       margin: 0 5px;

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

@@ -0,0 +1,82 @@
+// RIO Theme // Responsive Utility Classes
+.resonsive-imports(@breakpoint) {
+  @suffix: @breakpoint;
+  @import (multiple) "responsive/alignment.less";
+  @import (multiple) "responsive/backgrounds.less";
+  @import (multiple) "responsive/border.less";
+  @import (multiple) "responsive/display.less";
+  @import (multiple) "responsive/flexbox.less";
+  @import (multiple) "responsive/floating.less";
+  @import (multiple) "responsive/grid.less";
+  @import (multiple) "responsive/hyphens.less";
+  @import (multiple) "responsive/overflow.less";
+  @import (multiple) "responsive/position.less";
+  @import (multiple) "responsive/spacings.less";
+  @import (multiple) "responsive/sizing.less";
+  @import (multiple) "responsive/text.less";
+}
+
+// RIO Theme // Utility Classes
+.import-utilities(@default, @xs, @ls, @sm, @md, @lg, @xl, @print) {
+
+  // Basic Utility Classes
+  & when (@default = true) {
+    @import (less) 'colors.less';
+    @import (less) 'custom.less';
+    @import (less) 'cursors.less';
+    @import (less) 'ellipsis.less';
+    @import (less) 'grid.less';
+    @import (less) 'misc.less';
+    @import (less) 'opacity.less';
+    @import (less) 'overflow.less';
+    @import (less) 'position.less';
+    @import (less) 'rounded.less';
+    @import (less) 'shadows.less';
+    @import (less) 'text.less';
+    @import (less) 'z-index.less';
+    .resonsive-imports(~'');
+  }
+
+  // Breakpoints
+  & when (@xs = true) {
+    @media (max-width: @screen-xs-max) {
+      .resonsive-imports(-xs);
+    }
+  }
+
+  & when (@ls = true) {
+    @media (min-width: @screen-ls) {
+      .resonsive-imports(-ls);
+    }
+  }
+
+  & when (@sm = true) {
+    @media (min-width: @screen-sm) {
+      .resonsive-imports(-sm);
+    }
+  }
+
+  & when (@md = true) {
+    @media (min-width: @screen-md) {
+      .resonsive-imports(-md);
+    }
+  }
+
+  & when (@lg = true) {
+    @media (min-width: @screen-lg) {
+      .resonsive-imports(-lg);
+    }
+  }
+
+  & when (@xl = true) {
+    @media (min-width: @screen-xl) {
+      .resonsive-imports(-xl);
+    }
+  }
+
+  & when (@print = true) {
+    @media print {
+      .resonsive-imports(-print);
+    }
+  }
+}

package/lib/style/css/utils/animations/translate.less

@@ -22,4 +22,7 @@
 
 .hover-translate {
     &-y-10 { &:hover { transform: translateY(-10px) !important } }
-}
+}
+
+.transform-none { transform: none !important }
+.hover-transform-none:hover { transform: none !important }

package/lib/style/css/utils/responsive/border.less

@@ -1,4 +1,12 @@
 /* Border */
+
+// default values used as shorthand ".border" class
+.border@{suffix} {
+  border-style: solid !important;
+  border-width: 1px !important;
+  border-color: @gray-light !important;
+}
+
 .border {
   &-style-solid@{suffix} { border-style: solid !important}
   &-style-dotted@{suffix} { border-style: dotted !important}
@@ -28,29 +36,29 @@
     &-highlight-light@{suffix} { border-color: @color-highlight-light !important}
     &-highlight-lighter@{suffix} { border-color: @color-highlight-lighter !important}
     &-highlight-lightest@{suffix} { border-color: @color-highlight-lightest !important}
-    &-highlight-decent @{suffix} { border-color: @color-highlight-decent !important}
-    &-success @{suffix} { border-color: @brand-success !important}
-    &-warning @{suffix} { border-color: @brand-warning !important}
-    &-danger @{suffix} { border-color: @brand-danger !important}
+    &-highlight-decent@{suffix} { border-color: @color-highlight-decent !important}
+    &-success@{suffix} { border-color: @brand-success !important}
+    &-warning@{suffix} { border-color: @brand-warning !important}
+    &-danger@{suffix} { border-color: @brand-danger !important}
 
-    &-status-available { border-color: @color-status-available!important }
-    &-status-driving { border-color: @color-status-driving !important }
-    &-status-resting { border-color: @color-status-resting !important }
-    &-status-working { border-color: @color-status-working!important }
+    &-status-available@{suffix} { border-color: @color-status-available!important }
+    &-status-driving@{suffix} { border-color: @color-status-driving !important }
+    &-status-resting@{suffix} { border-color: @color-status-resting !important }
+    &-status-working@{suffix} { border-color: @color-status-working!important }
 
-    &-map-marker-asset { border-color: @color-map-marker-asset !important }
-    &-map-marker-poi { border-color: @color-map-marker-poi !important }
-    &-map-marker-geofence { border-color: @color-map-marker-geofence !important }
-    &-map-marker-route { border-color: @color-map-marker-route !important }
+    &-map-marker-asset@{suffix} { border-color: @color-map-marker-asset !important }
+    &-map-marker-poi@{suffix} { border-color: @color-map-marker-poi !important }
+    &-map-marker-geofence@{suffix} { border-color: @color-map-marker-geofence !important }
+    &-map-marker-route@{suffix} { border-color: @color-map-marker-route !important }
 
-    &-rating-1 { border-color: @color-rating-1 !important }
-    &-rating-2 { border-color: @color-rating-2 !important }
-    &-rating-3 { border-color: @color-rating-3 !important }
-    &-rating-4 { border-color: @color-rating-4 !important }
-    &-rating-5 { border-color: @color-rating-5 !important }
+    &-rating-1@{suffix} { border-color: @color-rating-1 !important }
+    &-rating-2@{suffix} { border-color: @color-rating-2 !important }
+    &-rating-3@{suffix} { border-color: @color-rating-3 !important }
+    &-rating-4@{suffix} { border-color: @color-rating-4 !important }
+    &-rating-5@{suffix} { border-color: @color-rating-5 !important }
   }
 
-  &-none@{suffix}  { border: none !important }
+  &-none@{suffix} { border: none !important }
 
   &-top-none@{suffix}, &-top-0@{suffix} { border-top-style: none !important }
   &-top-only@{suffix} {
@@ -73,7 +81,7 @@
     border-left-style: none !important;
   }
 
-  &-left-none@{suffix}, &-left-0@{suffix}  { border-left-style: none !important}
+  &-left-none@{suffix}, &-left-0@{suffix} { border-left-style: none !important}
   &-left-only@{suffix} {
     border-top-style: none !important;
     border-right-style: none !important;

package/lib/style/css/utils/responsive/display.less

@@ -2,6 +2,8 @@
 .display-inline-block@{suffix} { display: inline-block !important }
 .display-flex@{suffix} { display: flex !important }
 .display-inline-flex@{suffix} { display: inline-flex !important }
+.display-grid@{suffix} { display: grid !important }
+.display-inline-grid@{suffix} { display: inline-grid !important }
 .display-inline@{suffix} { display: inline !important }
 .display-contents@{suffix} { display: contents !important}
 .display-none@{suffix} { display: none !important }

package/lib/style/css/utils/responsive/grid.less

@@ -0,0 +1,6 @@
+/* Grid - Basics */
+.grid-template-columns-2@{suffix} { grid-template-columns: repeat(2, auto) !important }
+.grid-template-columns-3@{suffix} { grid-template-columns: repeat(3, auto) !important }
+.grid-template-columns-4@{suffix} { grid-template-columns: repeat(4, auto) !important }
+.grid-template-columns-5@{suffix} { grid-template-columns: repeat(5, auto) !important }
+.grid-template-columns-6@{suffix} { grid-template-columns: repeat(6, auto) !important }

package/lib/style/css/utils/responsive/sizing.less

@@ -31,7 +31,7 @@
 .sizing-vh(min-height; @suffix);
 .sizing-vh(max-height; @suffix);
 
-.ApplicationLayoutHeader {
+.ApplicationLayoutHeader@{suffix} {
   ~ .ApplicationLayoutBody,
   ~ .ApplicationLayoutSidebar {
     .sizing-vh(height; @suffix; @navbar-height);

package/lib/style/css/utils/text.less

@@ -92,6 +92,9 @@ h2, h3, h4, h5, h6, [class*='text-size-h'] {
 .text-decoration-underline { text-decoration: underline !important }
 .text-decoration-line-through { text-decoration: line-through !important }
 
+.hover-text-decoration-underline:hover { text-decoration: underline !important }
+.hover-text-decoration-none:hover { text-decoration: none !important }
+
 /* Text - Decoration Hover */
 .hover-text-decoration-none:hover { text-decoration: none !important }
 

package/lib/style/fonts/rioglyph/rioglyph.less

@@ -2,7 +2,7 @@
 
 @font-face {
 	font-family: "rioglyph";
-	src: url("rioglyph.woff?f8e487afcb23b11a25fc4f837af0abb9") format("woff");
+	src: url("rioglyph.woff?42f54bea5465197e01760c2a6ef8fc1d") format("woff");
     font-weight: normal;
     font-style: normal;
 }
@@ -154,6 +154,11 @@
 .hover-rioglyph-bus:hover:before {
 	content: "\e9b5";
 }
+@rioglyph-businessman: "\f17a";
+.rioglyph-businessman:before,
+.hover-rioglyph-businessman:hover:before {
+	content: "\f17a";
+}
 @rioglyph-calendar-today: "\f179";
 .rioglyph-calendar-today:before,
 .hover-rioglyph-calendar-today:hover:before {
@@ -244,6 +249,11 @@
 .hover-rioglyph-climate-control:hover:before {
 	content: "\f165";
 }
+@rioglyph-clipboard: "\f181";
+.rioglyph-clipboard:before,
+.hover-rioglyph-clipboard:hover:before {
+	content: "\f181";
+}
 @rioglyph-cloud-download: "\e9ab";
 .rioglyph-cloud-download:before,
 .hover-rioglyph-cloud-download:hover:before {
@@ -344,6 +354,36 @@
 .hover-rioglyph-dashboard:hover:before {
 	content: "\e996";
 }
+@rioglyph-delivery-completed: "\f183";
+.rioglyph-delivery-completed:before,
+.hover-rioglyph-delivery-completed:hover:before {
+	content: "\f183";
+}
+@rioglyph-delivery-error: "\f184";
+.rioglyph-delivery-error:before,
+.hover-rioglyph-delivery-error:hover:before {
+	content: "\f184";
+}
+@rioglyph-delivery-late: "\f185";
+.rioglyph-delivery-late:before,
+.hover-rioglyph-delivery-late:hover:before {
+	content: "\f185";
+}
+@rioglyph-delivery-on-track: "\f186";
+.rioglyph-delivery-on-track:before,
+.hover-rioglyph-delivery-on-track:hover:before {
+	content: "\f186";
+}
+@rioglyph-delivery-warning: "\f187";
+.rioglyph-delivery-warning:before,
+.hover-rioglyph-delivery-warning:hover:before {
+	content: "\f187";
+}
+@rioglyph-delivery: "\f188";
+.rioglyph-delivery:before,
+.hover-rioglyph-delivery:hover:before {
+	content: "\f188";
+}
 @rioglyph-desktop: "\f175";
 .rioglyph-desktop:before,
 .hover-rioglyph-desktop:hover:before {
@@ -479,11 +519,6 @@
 .hover-rioglyph-filled-chart:hover:before {
 	content: "\e9a1";
 }
-@rioglyph-businessman: "\f17a";
-.rioglyph-businessman:before,
-.hover-rioglyph-businessman:hover:before {
-	content: "\f17a";
-}
 @rioglyph-filling-e-station: "\f15f";
 .rioglyph-filling-e-station:before,
 .hover-rioglyph-filling-e-station:hover:before {
@@ -769,11 +804,26 @@
 .hover-rioglyph-order:hover:before {
 	content: "\e9ce";
 }
+@rioglyph-palette: "\f18a";
+.rioglyph-palette:before,
+.hover-rioglyph-palette:hover:before {
+	content: "\f18a";
+}
+@rioglyph-palette-broken: "\f18b";
+.rioglyph-palette-broken:before,
+.hover-rioglyph-palette-broken:hover:before {
+	content: "\f18b";
+}
 @rioglyph-parcel: "\f158";
 .rioglyph-parcel:before,
 .hover-rioglyph-parcel:hover:before {
 	content: "\f158";
 }
+@rioglyph-parcel-broken: "\f18c";
+.rioglyph-parcel-broken:before,
+.hover-rioglyph-parcel-broken:hover:before {
+	content: "\f18c";
+}
 @rioglyph-parking: "\f13b";
 .rioglyph-parking:before,
 .hover-rioglyph-parking:hover:before {
@@ -889,6 +939,11 @@
 .hover-rioglyph-pylon:hover:before {
 	content: "\e903";
 }
+@rioglyph-qr-code: "\f17f";
+.rioglyph-qr-code:before,
+.hover-rioglyph-qr-code:hover:before {
+	content: "\f17f";
+}
 @rioglyph-question-sign: "\e97d";
 .rioglyph-question-sign:before,
 .hover-rioglyph-question-sign:hover:before {
@@ -1009,6 +1064,11 @@
 .hover-rioglyph-scale:hover:before {
 	content: "\e9af";
 }
+@rioglyph-scan: "\f180";
+.rioglyph-scan:before,
+.hover-rioglyph-scan:hover:before {
+	content: "\f180";
+}
 @rioglyph-scissors: "\e9ae";
 .rioglyph-scissors:before,
 .hover-rioglyph-scissors:hover:before {
@@ -1164,20 +1224,20 @@
 .hover-rioglyph-support:hover:before {
 	content: "\f15d";
 }
-@rioglyph-tachograph: "\f174";
-.rioglyph-tachograph:before,
-.hover-rioglyph-tachograph:hover:before {
-	content: "\f174";
+@rioglyph-table-view: "\e919";
+.rioglyph-table-view:before,
+.hover-rioglyph-table-view:hover:before {
+	content: "\e919";
 }
 @rioglyph-tachograph-download: "\f178";
 .rioglyph-tachograph-download:before,
 .hover-rioglyph-tachograph-download:hover:before {
 	content: "\f178";
 }
-@rioglyph-table-view: "\e919";
-.rioglyph-table-view:before,
-.hover-rioglyph-table-view:hover:before {
-	content: "\e919";
+@rioglyph-tachograph: "\f174";
+.rioglyph-tachograph:before,
+.hover-rioglyph-tachograph:hover:before {
+	content: "\f174";
 }
 @rioglyph-tag: "\f13e";
 .rioglyph-tag:before,