@rio-cloud/rio-uikit 0.16.1-beta.24 → 0.16.2-beta.2

package/lib/es/styles/design/progress-bars.less

@@ -1,11 +1,11 @@
 .progress-divider {
   &:not(:last-child) {
-    box-shadow: inset -2px 0 0 @color-white;
+    box-shadow: inset -2px 0 0 var(--color-white);
   }
 
   &:only-child {
     &:not([style*="width: 100%"]):not([style*="width: 99%"]):not([style*="width: 98%"]) {
-      box-shadow: inset -2px 0 0 @color-white;
+      box-shadow: inset -2px 0 0 var(--color-white);
     }
   }
 }
@@ -18,13 +18,13 @@
 .progress {
   height: 10px;
   overflow: hidden;
-  background-color: @gray-lighter;
+  background-color: var(--gray-lighter);
   border-radius: @border-radius-default;
   // margin-bottom: @grid-gutter-height;
 
   .progress-bar {
-    background-color: @brand-primary;
-    color: @color-white;
+    background-color: var(--brand-primary);
+    color: var(--color-white);
     float: left;
     font-size: @font-size-sm;
     height: 100%;
@@ -44,11 +44,11 @@
     // muted
     // white
     &.progress-bar-muted {
-      background-color: @gray-lighter !important
+      background-color: var(--gray-lighter) !important
     }
 
     &.progress-bar-white {
-      background-color: @color-white !important
+      background-color: var(--color-white) !important
     }
 
     // info
@@ -118,7 +118,7 @@
 
 .progress-striped .progress-bar, // backward compatibility
 .progress-bar-striped {
-  @color: rgba(255,255,255,.15);
+  @color: .hsla(@color-white-hsl, 0.15)[@result];
   @angle: 45deg;
   background-size: 40px 40px;
   background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);

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

@@ -34,6 +34,9 @@
 .align-self-start@{suffix} { align-self: flex-start !important }
 .align-self-stretch@{suffix} { align-self: stretch !important }
 
+.place-items-center@{suffix} { place-items: center !important }
+.place-self-center@{suffix} { place-self: center !important }
+
 /* Flexbox - Helper */
 .flex-0-1@{suffix} { flex: 0 1 auto !important }
 .flex-1-0@{suffix} { flex: 1 0 auto !important }
@@ -70,9 +73,4 @@ each(@gridColumns, {
 .grid-colspan-auto@{suffix} { grid-column: auto !important }
 
 // AutoRows
-.grid-auto-rows@{suffix} { grid-auto-rows: minmax(min-content, max-content)}
-
-// Placement
-.place-items-center@{suffix} {
-  place-items: center !important;
-}
+.grid-auto-rows@{suffix} { grid-auto-rows: minmax(min-content, max-content)}

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

@@ -10,6 +10,9 @@
 .max-height-0@{suffix} { max-height: 0 !important }
 .max-width-0@{suffix} { max-width: 0 !important }
 
+.max-width-none@{suffix} { max-width: none !important }
+.max-height-none@{suffix} { max-height: none !important }
+
 // width/height px
 each(@sizes-px, {
   // width

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

@@ -1,19 +1,26 @@
-@smooth-shadow: rgba(0,0,0,.01);
-@hard-shadow: rgba(0,0,0,.03);
+@smooth-shadow: .hsla(@always-color-black-hsl, 0.01)[@result];
+@hard-shadow: .hsla(@always-color-black-hsl, 0.03)[@result];
+
+@default-shadow-layer-1: 0 2px 1px -1px .hsla(@always-color-black-hsl, 0.1)[@result];
+@default-shadow-layer-2: 0 1px 5px 0 .hsla(@always-color-black-hsl, 0.05)[@result];
+@default-shadow-layer-3: 0 1px 10px 0 .hsla(@always-color-black-hsl, 0.05)[@result];
+
+@default-accent-layer-1: 0 0 1px 0 .hsla(@always-color-black-hsl, 0.2)[@result];
+@default-accent-layer-2: 0 2px 4px -1px .hsla(@always-color-black-hsl, 0.2)[@result];
 
 .shadow-none { box-shadow: none !important }
 
 .shadow-default {
   box-shadow:
-    0 2px 1px -1px rgba(196, 206, 214, 0.33),
-    0 1px 1px 0 rgba(181, 191, 199, 0.1),
-    0 1px 4px 0 rgba(119, 142, 160, 0.25) !important;
+  @default-shadow-layer-1,
+  @default-shadow-layer-2,
+  @default-shadow-layer-3 !important;
 }
 
 .shadow-accent {
   box-shadow:
-    0 0 1px 0 rgb(9 30 65 / 30%),
-    0 2px 4px -1px rgb(9 30 65 / 25%) !important;
+  @default-accent-layer-1,
+  @default-accent-layer-2 !important;
 }
 
 .shadow-smooth {

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

@@ -1,10 +1,5 @@
 @table-cell-padding: 12px;
 @table-condensed-cell-padding: 7px;
-@table-bg: @color-white;
-@table-bg-hover: @gray-light;
-@table-bg-active: @gray-light;
-@table-bg-highlight: @color-highlight-lightest;
-@table-border-color: @gray-lighter;
 
 .table {
   background-color: transparent;
@@ -33,7 +28,7 @@
 
     @media screen and (max-width: @screen-ls) {
       -ms-overflow-style: -ms-autohiding-scrollbar;
-      border: 1px solid @table-border-color;
+      border: 1px solid var(--gray-lighter);
       overflow-y: hidden;
       width: 100%;
 
@@ -96,7 +91,7 @@
   // .table.table-head-filled
   &.table-head-filled {
     thead > tr th {
-      background-color: @gray-lightest;
+      background-color: var(--gray-lightest);
 
       &.table-checkbox {
         z-index: 2;
@@ -143,24 +138,24 @@
         &:first-child {
           left: 0;
           z-index: 2;
-          border-right: 4px solid @table-border-color;
+          border-right: 4px solid var(--gray-lighter);
         }
 
         &:last-child {
           right: 0;
           z-index: 2;
-          border-left: 4px solid @table-border-color;
+          border-left: 4px solid var(--gray-lighter);
         }
       }
 
       tbody > tr {
         td {
           &:first-child {
-            background-color: @color-white;
+            background-color: var(--color-white);
             left: 0;
             position: sticky;
             //z-index: 2;
-            border-right: 4px solid @table-border-color;
+            border-right: 4px solid var(--gray-lighter);
           }
         }
       }
@@ -177,11 +172,11 @@
       tbody > tr {
         td {
           &:last-child {
-            background-color: @color-white;
+            background-color: var(--color-white);
             right: 0;
             position: sticky;
             //z-index: 2;
-            border-left: 4px solid @table-border-color;
+            border-left: 4px solid var(--gray-lighter);
           }
         }
       }
@@ -262,8 +257,8 @@
       background-color: transparent;
 
       > th {
-        border-bottom: 2px solid @table-border-color;
-        border-top: 1px solid @table-border-color;
+        border-bottom: 2px solid var(--gray-lighter);
+        border-top: 1px solid var(--gray-lighter);
         font-weight: @font-light;
         text-align: left;
         white-space: nowrap;
@@ -297,7 +292,7 @@
   }
 
   > tbody > tr {
-    background-color: @table-bg;
+    background-color: var(--color-white);
     .table-state(info, @brand-info, false);
     .table-state(warning, @brand-warning, false);
     .table-state(success, @brand-success, false);
@@ -311,11 +306,11 @@
     }
 
     &:last-child {
-      border-bottom: 1px solid @table-border-color;
+      border-bottom: 1px solid var(--gray-lighter);
     }
 
     td {
-      border-top: 1px solid @table-border-color;
+      border-top: 1px solid var(--gray-lighter);
       vertical-align: middle;
 
       &:focus,
@@ -357,7 +352,7 @@
 
     &.active {
       td {
-        .table-state(active, @brand-primary, false)
+        .table-state(active, var(--brand-primary), false)
       }
     }
 
@@ -380,11 +375,11 @@
     > thead > tr > th,
     > tbody > tr > td {
       border: none;
-      border-top: 4px solid @table-border-color;
+      border-top: 4px solid var(--gray-lighter);
     }
 
     > tbody > tr:last-child {
-      border-bottom: 4px solid @table-border-color;
+      border-bottom: 4px solid var(--gray-lighter);
     }
 
     > tbody > tr > td {
@@ -395,7 +390,7 @@
   // Zebra-striping
   &.table-striped {
     > tbody > tr:nth-of-type(odd) {
-      background-color: darken(@table-bg, 2%);
+      background-color: .hslb(@color-white-hsl, '-', '2%')[@result];
     }
   }
 
@@ -408,15 +403,15 @@
       .table-state(danger, @brand-danger, true);
 
       &:hover {
-        background-color: @table-bg;
+        background-color: var(--color-white);
 
         td:not([class*='bg-']) {
-          box-shadow: inset 0 500px 0 0 @table-bg-highlight;
+          box-shadow: inset 0 500px 0 0 var(--color-highlight-lightest);
         }
       }
       &.active:hover {
         td {
-          .table-state(active, @brand-primary, false)
+          .table-state(active, var(--brand-primary), false)
         }
       }
     }
@@ -432,7 +427,7 @@
       &.table-multi-cards {
         tbody {
           tr {
-            border: 3px solid @gray-lighter;
+            border: 3px solid var(--gray-lighter);
           }
         }
       }
@@ -466,73 +461,40 @@
             text-align: left;
 
             .dropdown {
-              &:not(.open) {
-                .dropdown-toggle {
-                  padding: 0 6px;
-                  .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;
-                  );
-
-                  &:focus,
-                  &:active {
-                    background-color: @color-white !important;
-                    border-color: @color-highlight !important;
-
-                    &:hover {
-                      .rioglyph {
-                        color: @color-highlight !important;
-                      }
-                    }
-                  }
+              .dropdown-toggle {
+                padding: 0 6px;
+
+                .button-style(
+                  ~'!important';
+                  var(--brand-primary);
+                  @color-white-hsl;
+                  @brand-primary-hsl;
+
+                  var(--brand-primary);
+                  .hslb(@brand-primary-hsl, '-', @btn-active-brightness)[@result];
+
+                  var(--brand-primary);
+                  .hslb(@brand-primary-hsl, '-', @btn-active-border-brightness)[@result];
+
+                  var(--color-white);
+                  var(--color-white);
+                );
+
+                &:focus,
+                &:active {
+                  background-color: var(--color-white) !important;
+                  border-color: var(--color-highlight) !important;
 
                   &:hover {
                     .rioglyph {
-                      color: @color-white !important;
+                      color: var(--color-highlight) !important;
                     }
                   }
                 }
-              }
 
-              &.open {
-                .dropdown-toggle {
-                  .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;
-                  );
-
-                  &:hover, &:active, &:focus {
-                    .rioglyph:before {
-                      color: @color-white !important;
-                    }
+                &:hover {
+                  .rioglyph {
+                    color: var(--color-white) !important;
                   }
                 }
               }
@@ -549,7 +511,7 @@
         margin: -(@cardsSpace * 0.5) - (@cardsSpace * 0.5) 0 - (@cardsSpace * 0.5);
 
         tr {
-          border: 3px solid @color-white;
+          border: 3px solid var(--color-white);
           display: flex;
           flex-wrap: wrap;
           margin: @cardsSpace * 0.5;
@@ -574,7 +536,7 @@
             width: 100%;
 
             &:not([class*='table-']) {
-              border-top: 1px solid @gray-lighter;
+              border-top: 1px solid var(--gray-lighter);
               width: 100%;
             }
 
@@ -614,7 +576,7 @@
 
             &[data-field]:not([data-field='']) {
               &:before {
-                color: @gray;
+                color: var(--gray);
                 content: attr(data-field) ':';
                 float: left;
                 margin-right: 10px;
@@ -651,12 +613,12 @@
           }
 
           &:not(.active):not(.table-card-placeholder) {
-            background-color: @color-white !important;
+            background-color: var(--color-white) !important;
           }
 
           &.active {
-            background: @table-bg-highlight !important;
-            border-color: @brand-primary;
+            background: var(--color-highlight-lightest) !important;
+            border-color: var(--brand-primary);
 
             td {
               box-shadow: none !important;
@@ -669,15 +631,15 @@
         tbody {
           tr {
             &:hover {
-              border-color: @table-bg-highlight;
+              border-color: var(--color-highlight-lightest);
 
               &.active {
-                border-color: @brand-primary;
+                border-color: var(--brand-primary);
               }
 
               td {
-                background: @table-bg-highlight;
-                border-color: darken(@table-border-color, 8%);
+                background: var(--color-highlight-lightest);
+                border-color: .hslb(@gray-lighter-hsl, '-', '8%')[@result];
               }
             }
           }
@@ -767,19 +729,19 @@
   // grouped tr`s
   tr {
     &.compactRow {
-      background-color: @color-white !important;
+      background-color: var(--color-white) !important;
     }
 
     &.extendedRow {
-      background-color: darken(@table-bg, 2%) !important;
+      background-color: .hslb(@color-white-hsl, '-', '2%')[@result] !important;
 
       td {
-        border-top: 2px solid @table-border-color !important;
+        border-top: 2px solid var(--gray-lighter) !important;
       }
 
       + .compactRow {
         td {
-          border-top: 20px solid @table-border-color !important;
+          border-top: 20px solid var(--gray-lighter) !important;
         }
       }
     }
@@ -812,16 +774,16 @@
 .table-state(@state, @color, @hoverable) {
   & when (@state = active) {
     background-color: transparent;
-    box-shadow: inset 0 2px 0 0 @color, inset 0 -2px 0 0 @color, inset 0 500px 0 0 @table-bg-highlight;
+    box-shadow: inset 0 2px 0 0 @color, inset 0 -2px 0 0 @color, inset 0 500px 0 0 var(--color-highlight-lightest);
 
     &:first-child {
       box-shadow: inset 0 2px 0 0 @color, inset 0 -2px 0 0 @color, inset 2px 0 0 0 @color,
-        inset 0 500px 0 0 @table-bg-highlight;
+        inset 0 500px 0 0 var(--color-highlight-lightest);
     }
 
     &:last-child {
       box-shadow: inset 0 2px 0 0 @color, inset -2px 0 0 0 @color, inset 0 -2px 0 0 @color,
-        inset 0 500px 0 0 @table-bg-highlight;
+        inset 0 500px 0 0 var(--color-highlight-lightest);
     }
   }
 
@@ -829,14 +791,14 @@
     &.@{state} {
       & when (@hoverable = true) {
         &:hover > td:first-child {
-          box-shadow: inset 5px 0 0 0 @color, inset 0 500px 0 0 @table-bg-highlight;
+          box-shadow: inset 5px 0 0 0 @color, inset 0 500px 0 0 var(--color-highlight-lightest);
         }
       }
 
       &.active, &.active:hover {
         > td:first-child {
-          box-shadow: inset 5px 0 0 0 @color, inset 0 2px 0 0 @brand-primary, inset 0 -2px 0 0 @brand-primary,
-            inset 0 500px 0 0 @table-bg-highlight;
+          box-shadow: inset 5px 0 0 0 @color, inset 0 2px 0 0 var(--brand-primary), inset 0 -2px 0 0 var(--brand-primary),
+            inset 0 500px 0 0 var(--color-highlight-lightest);
         }
       }
 

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

@@ -1,14 +1,14 @@
 .text-muted,
-.hover-text-muted:hover { color: @gray !important }
+.hover-text-muted:hover { color: var(--gray) !important }
 
 .text-color-transparent,
 .hover-text-color-transparent:hover { color: transparent !important }
 
 .text-color-white,
-.hover-text-color-white:hover { color: @color-white !important }
+.hover-text-color-white:hover { color: var(--color-white) !important }
 
 .text-color-black,
-.hover-text-color-black:hover { color: @color-black !important }
+.hover-text-color-black:hover { color: var(--color-black) !important }
 
 // text alignment
 .align-top { vertical-align: top !important }
@@ -55,6 +55,7 @@ each(@colors-gray-map, {
 // map-marker-poi
 // map-marker-geofence
 // map-marker-route
+.color-map-marker-text { color: var(--color-map-marker-text) !important }
 each(@colors-map-marker-map, {
   .text-color-@{key},
   .hover-text-color-@{key}:hover {
@@ -183,19 +184,4 @@ h2, h3, h4, h5, h6, [class*='text-size-h'] {
 
 /* Text - Selection */
 .user-select-none { user-select: none !important }
-.user-select-all { user-select: all !important }
-
-// primary
-// secondary
-// info
-// success
-// warning
-// danger
-// each(@colors-brand-and-status-map, {
-//   .text-@{key} {
-//     a&:hover,
-//     a&:focus {
-//       color: darken(@value, 10%);
-//     }
-//   }
-// })
+.user-select-all { user-select: all !important }

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

@@ -1,11 +1,11 @@
 html {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
-  background: @color-white;
+  background: var(--color-white);
   font-size: 62.5%; // 14px = 1.4rem
 
   &:not(.window-iframe) {
     // background coloring
-    background-color: @gray-lighter;
+    background-color: var(--gray-lighter);
 
     // larger font-sizes on mobile (including no uikit.js fallback)
     &.ua-mobile:not(.ua-mobile-ipad),
@@ -105,7 +105,7 @@ hr {
   margin-top: @grid-gutter-height;
   margin-bottom: @grid-gutter-height;
   border: 0;
-  border-top: 1px solid @gray-lighter;
+  border-top: 1px solid var(--gray-lighter);
 }
 
 ul {
@@ -132,7 +132,7 @@ ul {
       > span.rioglyph {
         padding: 3px;
         font-size: 18px;
-        color: @gray-darker;
+        color: var(--gray-darker);
 
         + span {
           margin-left: 10px;
@@ -159,8 +159,8 @@ ul {
         position: absolute;
         top: -4px; // with respect to 1px border
         left: @treeListIconLeft;
-        border-left: 1px solid @gray-light;
-        border-bottom: 1px solid @gray-light;
+        border-left: 1px solid var(--gray-light);
+        border-bottom: 1px solid var(--gray-light);
         width: @treeListIconWidth;
         height: 15px;
       }
@@ -170,8 +170,8 @@ ul {
         content: '';
         top: 10px;
         left: @treeListIconLeft;
-        border-left: 1px solid @gray-light;
-        border-top: 1px solid @gray-light;
+        border-left: 1px solid var(--gray-light);
+        border-top: 1px solid var(--gray-light);
         width: @treeListIconWidth;
         height: 100%;
       }
@@ -193,8 +193,8 @@ ul {
 
     li {
       padding: 10px 12px;
-      border: 1px solid @gray-light;
-      background: @color-white;
+      border: 1px solid var(--gray-light);
+      background: var(--color-white);
       border-radius: 3px;
       margin-bottom: 10px;
 

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

@@ -1,7 +1,7 @@
 .thumbnail {
-  background-color: @color-white;
+  background-color: var(--color-white);
   border-radius: @border-radius-default;
-  border: 1px solid @gray-light;
+  border: 1px solid var(--gray-light);
   display: block;
   line-height: @line-height-default;
   transition:border .2s ease-in-out;

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

@@ -9,7 +9,7 @@ h1, h2, h3, h4, h5, h6,
   .small {
   font-weight: normal;
   line-height: 1;
-  color: @gray-light;
+  color: var(--gray-light);
   }
 }
 
@@ -74,7 +74,7 @@ small,
 
 mark,
 .mark {
-  background-color: @brand-warning-decent;
+  background-color: var(--brand-warning-decent);
   padding: .2em;
 }
 
@@ -84,7 +84,7 @@ mark,
 .page-header {
   padding-bottom: ((@grid-gutter-height / 2) - 1);
   margin: (@grid-gutter-height * 2) 0 @grid-gutter-height;
-  border-bottom: 1px solid @gray-lighter;
+  border-bottom: 1px solid var(--gray-lighter);
 }
 
 
@@ -148,7 +148,7 @@ dd {
 abbr[title],
 abbr[data-original-title] {
   cursor: help;
-  border-bottom: 1px dotted @gray-light;
+  border-bottom: 1px dotted var(--gray-light);
 }
 
 // Addresses

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

@@ -1,5 +1,5 @@
 .well {
-  background-color: @color-white;
+  background-color: var(--color-white);
   border-radius: @border-radius-default;
   margin-bottom: 20px;
   min-height: 20px;