@rio-cloud/rio-uikit 0.16.1 → 0.16.2-beta.10

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

@@ -87,16 +87,16 @@
   &.color-gray {
     > * {
       &:before {
-        color: @gray;
-        border-color: @gray;
+        color: var(--gray);
+        border-color: var(--gray);
       }
     }
     &.filled {
       > * {
         &:before {
-          background-color: @gray;
+          background-color: var(--gray);
           border: none;
-          color: @color-white;
+          color: var(--color-white);
         }
       }
     }
@@ -106,16 +106,16 @@
   &.color-primary {
     > * {
       &:before {
-        color: @brand-primary;
-        border-color: @brand-primary;
+        color: var(--brand-primary);
+        border-color: var(--brand-primary);
       }
     }
     &.filled {
       > * {
         &:before {
-          background-color: @brand-primary;
+          background-color: var(--brand-primary);
           border: none;
-          color: @color-white;
+          color: var(--color-white);
         }
       }
     }
@@ -125,16 +125,16 @@
   &.color-secondary {
     > * {
       &:before {
-        color: @brand-secondary;
-        border-color: @brand-secondary;
+        color: var(--brand-secondary);
+        border-color: var(--brand-secondary);
       }
     }
     &.filled {
       > * {
         &:before {
-          background-color: @brand-secondary;
+          background-color: var(--brand-secondary);
           border: none;
-          color: @color-white;
+          color: var(--color-white);
         }
       }
     }

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

@@ -29,7 +29,7 @@
 }
 
 .DataTabsWrapper {
-  background: @color-white;
+  background: var(--color-white);
   overflow-x: auto;
   overflow-y: hidden;
   padding-bottom: 8px;
@@ -69,7 +69,7 @@
     }
 
     .arrow {
-      background-color: @color-highlight-dark;
+      background-color: var(--color-highlight-dark);
       bottom: 0;
       display: block;
       height: @dim-dataTabs-arrow;

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

@@ -8,9 +8,9 @@
 
 .rdtPicker {
   &:extend(.shadow-smooth-to-bottom);
-  background: @color-white;
+  background: var(--color-white);
   border-radius: @border-radius-default;
-  border: 1px solid @gray-light;
+  border: 1px solid var(--gray-light);
   display: none;
   margin-top: 1px;
   padding: 8px;
@@ -51,7 +51,7 @@
 
       &.rdtNew,
       &.rdtOld {
-        color: @gray-light;
+        color: var(--gray-light);
       }
 
       //.rdtTimeToggle:hover,
@@ -59,7 +59,7 @@
       &.rdtHour:hover,
       &.rdtMinute:hover,
       &.rdtSecond:hover {
-        background: @color-highlight-lightest;
+        background: var(--color-highlight-lightest);
         cursor: pointer;
       }
 
@@ -71,7 +71,7 @@
 
         &:hover,
         &:hover {
-          background: @color-highlight-lightest;
+          background: var(--color-highlight-lightest);
         }
       }
 
@@ -79,9 +79,9 @@
         position: relative;
 
         &:before {
-          border-bottom: 7px solid @color-highlight;
+          border-bottom: 7px solid var(--color-highlight);
           border-left: 7px solid transparent;
-          border-top-color: rgba(0, 0, 0, 0.2);
+          border-top-color: .hsla(@always-color-black-hsl, 0.2)[@result];
           bottom: 4px;
           content: '';
           display: inline-block;
@@ -92,38 +92,38 @@
 
       &.rdtActive,
       &.rdtActive:hover {
-        background-color: @color-highlight;
-        color: @color-white;
-        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+        background-color: var(--color-highlight);
+        color: var(--color-white);
+        text-shadow: 0 -1px 0 .hsla(@always-color-black-hsl, 0.25)[@result];
       }
 
       &.rdtActive.rdtToday:before {
-        border-bottom-color: @color-white;
+        border-bottom-color: var(--color-white);
       }
 
       &.rdtDisabled,
       &.rdtDisabled:hover {
         background: none !important;
-        color: @gray-light;
+        color: var(--gray-light);
         cursor: not-allowed;
       }
 
       span {
         &.rdtOld {
-          color: @color-highlight-light;
+          color: var(--color-highlight)-light;
         }
 
         &.rdtDisabled,
         &.rdtDisabled:hover {
           background: none !important;
-          color: @gray-light;
+          color: var(--gray-light);
           cursor: not-allowed;
         }
       }
     }
 
     th {
-      // border-bottom: 1px solid @gray-light;
+      // border-bottom: 1px solid var(--gray-light);
       border-radius: @border-radius-default;
 
       .rdtSwitch {
@@ -139,7 +139,7 @@
       &.rdtDisabled,
       &.rdtDisabled:hover {
         background: none !important;
-        color: @gray-lightest;
+        color: var(--gray-lightest);
         cursor: not-allowed;
       }
     }
@@ -159,14 +159,14 @@
         cursor: pointer;
 
         &:hover {
-          background: @color-highlight-lightest;
+          background: var(--color-highlight-lightest);
         }
       }
     }
 
     tfoot {
-      // border-top: 1px solid @gray-light;
-      background-color: @gray-lightest;
+      // border-top: 1px solid var(--gray-light);
+      background-color: var(--gray-lightest);
     }
 
     button {
@@ -175,7 +175,7 @@
       cursor: pointer;
 
       &:hover {
-        background-color: @color-highlight-lightest;
+        background-color: var(--color-highlight-lightest);
       }
     }
   }
@@ -183,10 +183,10 @@
   .rdtTime {
     .rdtSwitch {
       position: relative;
-      background-color: @gray-lightest;
+      background-color: var(--gray-lightest);
 
       &:hover {
-        background-color: @color-highlight-lightest;
+        background-color: var(--color-highlight-lightest);
       }
 
       &::before {
@@ -196,7 +196,7 @@
         position: absolute;
         height: 25px;
         width: 25px;
-        color: @gray-darker;
+        color: var(--gray-darker);
         left: 5px;
         top: 3px;
       }
@@ -233,7 +233,7 @@
       border-radius: @border-radius-default;
 
       &:hover {
-        background: @color-highlight-lightest;
+        background: var(--color-highlight-lightest);
       }
     }
 
@@ -277,7 +277,7 @@
   //   align-items: center;
   //   font-size: 110%;
   //   height: 100%;
-  //   color: @gray-dark;
+  //   color: var(--gray-dark);
   //   padding: 0 5px;
   // }
 
@@ -313,13 +313,13 @@
     td.rdtMinute,
     td.rdtSecond {
       &:hover {
-        background: @color-highlight-lightest;
+        background: var(--color-highlight-lightest);
       }
     }
 
     td.rdtActive,
     td.rdtActive:hover {
-      background: @brand-primary;
+      background: var(--brand-primary);
     }
   }
 

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

@@ -1,11 +1,11 @@
 @modal-outer-margin: 30px;
 @modal-inner-padding: 20px;
 @modal-title-padding: 15px;
-@modal-content-bg: @color-white;
-@modal-content-border-color: @gray-light;
-@modal-backdrop-bg: @color-black;
-@modal-header-border-color: @gray-lighter;
-@modal-footer-border-color: @modal-header-border-color;
+@modal-content-bg: var(--color-white);
+@modal-content-border-color: var(--gray-light);
+@modal-backdrop-bg: var(--always-color-black);
+@modal-header-border-color: var(--gray-lighter);
+@modal-footer-border-color: var(--gray-lighter);
 
 // Custom variables
 @modal-sm: @screen-xs;
@@ -144,7 +144,7 @@ body {
         z-index: 1;
 
         &-text {
-          color: @gray-darkest;
+          color: var(--gray-darkest);
           display: flex;
           flex-direction: column;
           float: left;
@@ -184,7 +184,7 @@ body {
               display: none;
             }
 
-            background-color: @gray-lighter;
+            background-color: var(--gray-lighter);
             height: 20px;
             margin-right: 10px;
             width: 2px;
@@ -315,7 +315,6 @@ body {
 
         .modal-footer {
           &:before {
-            background: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
             content: '';
             height: 20px;
             left: 0;
@@ -323,6 +322,11 @@ body {
             position: absolute;
             top: -21px;
             width: 100%;
+            background: linear-gradient(
+              0deg,
+              .hsla(@color-white-hsl, 1.0)[@result],
+              .hsla(@color-white-hsl, 0)[@result],
+            );
           }
         }
       }
@@ -348,7 +352,7 @@ body {
   &.backdrop-blured .modal-backdrop {
     @supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) {
       opacity: 0.99;
-      background-color: rgba(0, 0, 0, 0.3);
+      background-color: .hsla(@always-color-black-hsl, 0.3)[@result];
       backdrop-filter: blur(5px);
     }
   }
@@ -357,7 +361,7 @@ body {
     .modal-dialog {
       .modal-content {
         .modal-body {
-          background: @gray-lightest;
+          background: var(--gray-lightest);
           padding-left: 0;
           padding-right: 0;
 
@@ -396,7 +400,7 @@ body {
     }
 
     @media (max-width: @splitWrapperBreakpoint) {
-      background-color: @color-white;
+      background-color: var(--color-white);
       height: 60px;
       left: -(@modal-inner-padding);
       padding-top: @modal-inner-padding;

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

@@ -12,9 +12,9 @@
   &-menu {
     &:extend(.shadow-hard-to-bottom);
     .reset-list();
-    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);
     font-size: @font-size-default;
     min-width: 160px;
     padding: 0;
@@ -46,7 +46,7 @@
     > li {
       > a {
         border-radius: 4px;
-        color: @gray-darkest;
+        color: var(--gray-darkest);
         cursor: pointer;
         display: block;
         line-height: 1.25;
@@ -61,8 +61,8 @@
 
         &:hover,
         &:focus {
-          background-color: @brand-primary;
-          color: @color-white;
+          background-color: var(--brand-primary);
+          color: var(--color-white);
           text-decoration: none;
         }
       }
@@ -83,8 +83,8 @@
       &,
       &:hover,
       &:focus {
-        background-color: @brand-primary;
-        color: @color-white;
+        background-color: var(--brand-primary);
+        color: var(--color-white);
         outline: 0;
         text-decoration: none;
       }
@@ -94,7 +94,7 @@
       &,
       &:hover,
       &:focus {
-        color: @gray-light;
+        color: var(--gray-light);
       }
 
       // OLD BS STUFF
@@ -129,8 +129,8 @@
       }
 
       .dropdown-header-text {
-        background: @color-white;
-        color: lighten(@gray, 5%);
+        background: var(--color-white);
+        color: .hslb(@gray-hsl, '+', '5%')[@result];
         font-size: 12px;
         font-weight: @font-medium;
         line-height: 1.25;
@@ -141,7 +141,7 @@
     }
 
     > .divider {
-      background-color: @gray-light;
+      background-color: var(--gray-light);
       height: 1px;
       margin: 3px 6px;
     }

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

@@ -55,7 +55,7 @@
 
     > .panel-heading {
       .expander-icon {
-        color: @gray;
+        color: var(--gray);
       }
     }
   }
@@ -65,12 +65,12 @@
       background-color: transparent;
 
       .expander-icon {
-        color: @gray;
+        color: var(--gray);
       }
     }
 
     .panel-body {
-      box-shadow: inset 0px 1px 0px 0px @gray-light;
+      box-shadow: inset 0px 1px 0px 0px var(--gray-light);
 
       .panel-body {
         box-shadow: none
@@ -87,7 +87,7 @@
       padding-right: 0;
 
       .expander-icon {
-        color: @gray-dark;
+        color: var(--gray-dark);
         order: 1;
       }
 
@@ -128,7 +128,7 @@
   &.panel-danger,
   &.panel-success {
     .expander-icon {
-      color: @color-white;
+      color: var(--color-white);
     }
   }
 }
@@ -162,7 +162,7 @@
       width: 100%;
 
       .expander-icon {
-        color: @gray;
+        color: var(--gray);
       }
 
       &-content {
@@ -177,7 +177,7 @@
         transition: background-color 100ms ease-in-out;
 
         &:hover {
-          background-color: @gray-lightest;
+          background-color: var(--gray-lightest);
         }
       }
     }

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

@@ -8,7 +8,7 @@
 
     li {
       width: 100%;
-      color: @gray-darkest;
+      color: var(--color-black);
 
       &.ListMenuHeader {
         display: block;
@@ -23,12 +23,12 @@
         }
 
         a {
-          color: @gray-darkest;
+          color: var(--color-black);
 
           &:hover,
           &.active {
             text-decoration: none;
-            color: @brand-primary;
+            color: var(--brand-primary);
           }
         }
       }
@@ -41,7 +41,7 @@
 
         > span,
         a {
-          border-left: 2px solid @gray-light;
+          border-left: 2px solid var(--gray-light);
           display: block;
           font-weight: normal;
           margin: 0 0 0 10px;
@@ -52,7 +52,7 @@
         &.disabled {
           > span,
           a {
-            color: @gray-light;
+            color: var(--gray-light);
             cursor: not-allowed;
           }
         }
@@ -60,14 +60,14 @@
         &:not(.disabled) {
           > span,
           a {
-            color: @gray-darker;
+            color: var(--gray-darker);
             cursor: pointer;
 
             &:hover,
             &.active {
-              border-left-color: @brand-primary;
+              border-left-color: var(--brand-primary);
               border-width: 3px;
-              color: @brand-primary;
+              color: var(--brand-primary);
             }
           }
         }

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

@@ -40,7 +40,7 @@
         margin-bottom: 0;
         min-height: 24px; // in case there is a spinner as label
         padding: 7px 10px;
-        color: @gray-darkest;
+        color: var(--gray-darkest);
 
         &.disabled {
           opacity: 0.5;
@@ -67,7 +67,7 @@
       }
 
       .H_context_menu_item_separator {
-        background: @gray-lighter;
+        background: var(--gray-lighter);
         border: none;
         height: 1px;
         padding-bottom: 0;
@@ -80,6 +80,7 @@
       >div:first-child {
         >div {
           z-index: auto !important;
+          pointer-events: none;
         }
 
         >canvas {

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

@@ -1,13 +1,12 @@
-@clusterSize: 40px;
-@singleSize: 60px;
+@animationDuration: 0.25s ease;
 @bubbleSize: @singleSize * 0.4;
+@clusterSize: 40px;
 @iconSize: @bubbleSize * 1.25;
+@nameMaxWidth: 200px;
 @positionSize: ceil(@bubbleSize * 0.3);
 @positionTriangleSize: @iconSize * 0.2;
-@animationDuration: 0.25s ease;
-@shadowStyle: 0 0 5px rgba(0, 0, 0, 0.5);
-
-@nameMaxWidth: 200px;
+@shadowStyle: 0 0 5px .hsla(@always-color-black-hsl, 0.5)[@result];
+@singleSize: 60px;
 
 .rio-map-name {
   font-size: @bubbleSize * 0.6;
@@ -23,7 +22,7 @@
 
 .rio-map-bubble {
   border-radius: @border-radius-round;
-  color: @color-white;
+  color: var(--color-map-marker-text);
   text-align: center;
 
   &.exception {
@@ -87,7 +86,7 @@
       border-width: 1px;
       cursor: pointer;
       display: block;
-      filter: drop-shadow(0 0 1px rgba(0,0,0,.2));
+      filter: drop-shadow(0 0 1px .hsla(@always-color-black-hsl, 0.2)[@result]);
       font-size: @clusterSize * 0.36;
       font-weight: 500;
       height: @clusterSize;
@@ -139,7 +138,7 @@
     border-width: 1px;
     cursor: pointer;
     display: flex;
-    filter: drop-shadow(0 0 1px rgba(0,0,0,.2));
+    filter: drop-shadow(0 0 1px .hsla(@always-color-black-hsl, 0.2)[@result]);
     pointer-events: initial;
     position: relative;
     transition: background-color @animationDuration, filter @animationDuration, margin-bottom @animationDuration;
@@ -207,7 +206,7 @@
 
     .rio-map-direction {
       border-radius: @border-radius-round;
-      background-color: lighten(@color-map-marker-asset, 5%);
+      background-color: .hslb(@color-map-marker-asset-hsl, '+', '5%')[@result];
       background-image: url(~'data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2250%22%20height%3D%2250%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill-rule%3D%22nonzero%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22transparent%22%20d%3D%22M0%200h50v50H0z%22%2F%3E%3Cpath%20d%3D%22M25%2012L12%2036s6.5-5%2013-5%2013%205%2013%205L25%2012z%22%20fill%3D%22%23FFF%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
       background-repeat: no-repeat;
       background-size: @iconSize;
@@ -227,7 +226,7 @@
   }
 
   .rio-map-position-arrow {
-    background-color: @color-white;
+    background-color: var(--color-map-marker-text);
     bottom: (@iconSize * 0.5) - (@positionTriangleSize * 0.45);
     color: transparent;
     height: @positionTriangleSize;
@@ -240,7 +239,7 @@
   }
 
   .rio-map-position {
-    background-color: @color-white;
+    background-color: var(--color-map-marker-text);
     border-radius: @border-radius-round;
     border-style: solid;
     border-width: ceil(@positionSize * 0.3);
@@ -300,8 +299,8 @@
 }
 
 #rio-map-context-menu {
-  background-color: @color-map-marker-asset;
-  border: 1px solid @color-map-marker-asset;
+  background-color: var(--color-map-marker-asset);
+  border: 1px solid var(--color-map-marker-asset);
   box-shadow: @shadowStyle;
   display: none;
   position: absolute;
@@ -317,7 +316,7 @@
     padding: 0;
 
     > li {
-      color: @color-white;
+      color: var(--color-white);
       display: flex;
       padding: 0 @bubbleSize * 0.4;
 
@@ -326,12 +325,12 @@
 
         &:hover,
         &.hover {
-          background-color: darken(@color-map-marker-asset, 5%);
+          background-color: .hslb(@color-map-marker-asset-hsl, '-', '5%')[@result];
         }
       }
 
       &:not(:last-child) {
-        border-bottom: 1px solid darken(@color-map-marker-asset, 5%);
+        border-bottom: 1px solid .hslb(@color-map-marker-asset-hsl, '-', '5%')[@result];
         margin-bottom: 0;
       }