@rio-cloud/rio-uikit 0.15.0-beta-46 → 0.15.0

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

@@ -6,15 +6,21 @@
 @badge-active-color: @link-color;
 @badge-active-bg: @color-white;
 @badge-font-weight: normal;
+@badge-font-weight-bold: 600;
 @badge-line-height: 1;
 @badge-border-radius: 1000px;
 
 .badge {
   font-size: 12px;
-  min-width: 10px;
   padding: 4px 7px;
   vertical-align: baseline;
 
+  // Empty badges are just a dot
+  &:empty {
+    width: 16px;
+    height: 16px;
+  }
+
   &.badge-lg {
     font-size: 16px;
     min-width: 24px;
@@ -25,6 +31,43 @@
     min-width: 30px;
     padding: 4px 9px;
   }
+
+  &.badge-default {
+    color: @color-white;
+    background-color: @gray-dark;
+  }
+
+  &.badge-primary {
+    color: @color-white;
+    background-color: @brand-primary;
+  }
+
+  &.badge-success {
+    color: @color-white;
+    background-color: @brand-success;
+  }
+
+  &.badge-danger {
+    color: @color-white;
+    background-color: @brand-danger;
+  }
+
+  &.badge-warning {
+    color: @color-white;
+    background-color: @brand-warning;
+  }
+
+  &.badge-info {
+    color: @color-white;
+    background-color: @brand-info;
+  }
+
+  &.badge-muted {
+    color: @gray-dark;
+    box-shadow: inset 0px 0px 0px 1px @gray-light;
+    background-color: @gray-lightest;
+    font-weight: @badge-font-weight-bold;
+  }
 }
 
 .indicated-icon {
@@ -43,5 +86,9 @@
     position: absolute !important;
     right: 0 !important;
     top: 2px !important;
+
+    &:empty {
+      top: 6px !important;
+    }
   }
 }

package/lib/style/css/rio-theme/button-groups.less

@@ -1,7 +1,7 @@
 // @import "../bootstrap/button-groups.less";
 
 .btn-group {
-  display: flex;
+  display: inline-flex;
 
   > .btn {
     position: relative;

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

@@ -51,6 +51,7 @@
 
 .btn {
   position: relative;
+  overflow: hidden;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -79,6 +80,14 @@
     padding: 0;
   }
 
+  &.btn-toggle.active {
+    box-shadow: inset 0 1px 5px 1px rgb(90 101 102 / 50%);
+
+    &.btn-primary {
+      box-shadow: inset 0 1px 5px 1px rgb(90 101 102 / 70%);
+    }
+  }
+
   &-toolbar {
     display: flex;
     flex-wrap: wrap;
@@ -91,21 +100,6 @@
       }
     }
 
-    // > *:not(.modal) {
-    //   float: left !important;
-
-    //   &:not(:last-child) {
-    //     margin-right: 10px;
-    //   }
-    // }
-
-    // .btn,
-    // .btn-group,
-    // .input-group {
-    //   margin-left: 0 !important;
-    //   float: none !important;
-    // }
-
     .btn + .dropdown-toggle,
     .btn-group > .btn:not(:first-child) {
       margin-left: -1px !important;
@@ -397,7 +391,7 @@
     &:before {
       .rioglyph;
       content: "\e9c7";
-      color: @color-highlight-dark;
+      color: @brand-primary;
       animation: spinning 1s linear infinite;
       font-size: 20px;
     }
@@ -563,3 +557,51 @@
     );
   }
 }
+
+.btn-ripple {
+  position: absolute;
+  z-index: 1;
+  border-radius: 50%;
+  transform: scale(0);
+  animation: ripple 600ms linear;
+  background-color: rgba(255, 255, 255, 0.7);
+}
+
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+
+// Currently deactivated, because some services are already using the beta and we should introduce it globally and inform about it before.
+// .btn-default,
+// .btn-primary,
+// .btn-secondary,
+// .btn-success,
+// .btn-info,
+// .btn-warning,
+// .btn-danger {
+//   &:not(.btn-link):not(.btn-action) {
+//     transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
+
+//     &:hover {
+//       transform: translateY(-2px);
+//       box-shadow: 0px 2px 4px 0px rgb(143 143 143 / 60%);
+//     }
+//   }
+// }
+
+// .btn-no-hover-effect:hover {
+//   transform: none !important;
+//   box-shadow: none !important;
+// }
+
+// .input-group-btn,
+// .btn-group-vertical {
+//   .btn:hover {
+//     transform: none !important;
+//     box-shadow: none !important;
+//   }
+// }

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

@@ -55,7 +55,7 @@
 
         li {
           background: @color-white;
-          border-radius: 0;
+          border-radius: 3px;
           height: 10px;
           margin: 0 2px;
           width: 20px;

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: '';
@@ -346,7 +352,7 @@
         right: 0;
       }
 
-      .dropdown-toggle {
+      > .dropdown-toggle {
         margin: 0 !important;
         padding: 15px 15px !important;
 
@@ -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 }