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

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

@@ -9,7 +9,7 @@
     pointer-events: auto;
     position: absolute;
     -webkit-appearance: none;
-    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+    -webkit-tap-highlight-color: .hsla(@color-white-hsl, 0)[@result];
     border: none;
     border-radius: 2px;
     background: transparent;
@@ -97,7 +97,7 @@
 
   .range-track {
     height: 4px;
-    background: @brand-primary;
+    background: var(--brand-primary);
     border-radius: 2px;
     top: 7px;
     position: absolute;
@@ -106,15 +106,15 @@
       position: absolute;
       bottom: calc(~"100% + 10px");
       text-align: center;
-      background: @brand-primary;
+      background: var(--brand-primary);
       padding: 2px 5px;
       font-size: 12px;
       line-height: 12px;
       border-radius: 2px;
-      color: @color-white;
+      color: var(--color-white);
 
       &:before {
-        border-color: @brand-primary transparent transparent;
+        border-color: var(--brand-primary) transparent transparent;
         border-style: solid;
         border-width: 4px 4px 0 4px;
         bottom: 0;
@@ -127,9 +127,9 @@
       }
 
       &:after {
-        background: @color-white;
+        background: var(--color-white);
         border-radius: 9px;
-        border: 2px solid @brand-primary;
+        border: 2px solid var(--brand-primary);
         bottom: -16px;
         content: "";
         height: 9px;
@@ -189,7 +189,7 @@
     position: absolute;
     border: none;
     border-radius: 2px;
-    background: @gray-lighter;
+    background: var(--gray-lighter);
     width: 100%;
     height: 4px;
     top: 7px;
@@ -201,29 +201,29 @@
     input[type="range"] {
       // webkit
       &::-webkit-slider-thumb {
-        border-color: @gray;
+        border-color: var(--gray);
         pointer-events: none;
       }
 
       // moz
       &::-moz-range-track {
-        border-color: @gray;
+        border-color: var(--gray);
         pointer-events: none;
       }
 
       &::-moz-range-thumb {
-        border-color: @gray;
+        border-color: var(--gray);
         pointer-events: none;
       }
 
       // ms
       &::-ms-track {
-        border-color: @gray;
+        border-color: var(--gray);
         pointer-events: none;
       }
 
       &::-ms-thumb {
-        border-color: @gray;
+        border-color: var(--gray);
         pointer-events: none;
       }
     }
@@ -237,14 +237,14 @@
     }
 
     .range-track {
-      background-color: @gray;
+      background-color: var(--gray);
     }
 
     .range-value {
-      background: @gray;
+      background: var(--gray);
 
       &:before {
-        border-color: @gray transparent transparent;
+        border-color: var(--gray) transparent transparent;
       }
     }
   }
@@ -266,9 +266,9 @@
   position: relative;
   width: 14px;
   height: 14px;
-  border: 2px solid @brand-primary;
+  border: 2px solid var(--brand-primary);
   border-radius: 14px;
-  background: @color-white;
+  background: var(--color-white);
   outline: 0;
   cursor: ew-resize;
 

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

@@ -1,15 +1,15 @@
 .spinner {
-  .spinnerMixin(20, @brand-primary);
+  .spinnerMixin(20, var(--brand-primary));
 
   &.inverse {
-    .spinnerMixin(20, @color-white);
+    .spinnerMixin(20, var(--color-white));
   }
 
   &.double {
-    .spinnerMixin(30, @brand-primary);
+    .spinnerMixin(30, var(--brand-primary));
 
     &.inverse {
-      .spinnerMixin(30, @color-white);
+      .spinnerMixin(30, var(--color-white));
     }
   }
 }
@@ -22,11 +22,11 @@
   gap: 10px;
 
   &.inverse {
-    color: @color-white;
+    color: var(--color-white);
   }
 
   &.fullscreen, &.fullsized {
-    background: rgba(255,255,255,.85);
+    background: .hsla(@color-white-hsl, 0.85)[@result];
     bottom: 0;
     left: 0;
     padding: 0 5%;

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

@@ -15,9 +15,9 @@
   }
 
   .StatsWidget {
-    background: @color-white;
+    background: var(--color-white);
     border-radius: @border-radius-default;
-    border: 1px solid @gray-light;
+    border: 1px solid var(--gray-light);
     flex: 1 1 auto;
     position: relative;
     user-select: none;
@@ -28,7 +28,7 @@
       text-align: center;
 
       &:after {
-        background: @gray-lightest;
+        background: var(--gray-lighter);
         content: '';
         display: block;
         height: 2px;
@@ -86,7 +86,7 @@
       }
 
       .StatsWidgetNumber-label {
-        color: @gray-darkest;
+        color: var(--gray-darkest);
         text-align: center;
 
         @media (max-width: @screen-sm) { font-size: 22px * 0.65 }
@@ -100,7 +100,7 @@
         height: 20px;
 
         &:not(.invisible) {
-          background: @gray-lighter;
+          background: var(--gray-lighter);
           margin: 0 5px;
         }
 

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

@@ -4,7 +4,7 @@
 
 @roadsign-size: 50px;
 @roadsign-arrow-color: escape('@{gray-lighter}');
-@roadsign-svg-color: escape('@{color-white}');
+@roadsign-svg-color: escape('transparent');
 @roadsign-svg-active-color: escape('@{color-highlight-decent}');
 
 .stepped-progress-bar {
@@ -18,7 +18,7 @@
   }
 
   &:before {
-    background-color: @gray-light;
+    background-color: var(--gray-light);
     content: "";
     height: 2px;
     left: @circle-tab-size * 0.5;
@@ -51,9 +51,9 @@
     }
 
     .step-tab {
-      background: @color-white;
+      background: var(--color-white);
       border-radius: @circle-tab-border-radius;
-      border: 1px solid @gray;
+      border: 1px solid var(--gray);
       font-weight: @font-normal;
       height: @circle-tab-size;
       min-width: @circle-tab-size;
@@ -76,7 +76,7 @@
         text-align: center;
 
         .item-icon {
-          color: @brand-primary;
+          color: var(--brand-primary);
           height: @circle-tab-size;
           line-height: @circle-tab-size * 0.9;
           margin-bottom: @circle-tab-size * 0.4;
@@ -88,7 +88,7 @@
         }
 
         .item-label {
-          color: @brand-primary;
+          color: var(--brand-primary);
           font-size: 16px;
           left: 50%;
           position: relative;
@@ -108,11 +108,11 @@
       }
 
       &:hover:not(.disabled)  {
-        background-color: @brand-primary;
-        border-color: @brand-primary;
+        background-color: var(--brand-primary);
+        border-color: var(--brand-primary);
 
         .item-icon {
-          color: @color-white;
+          color: var(--color-white);
         }
 
         .item-label {
@@ -121,12 +121,12 @@
       }
 
       &.active {
-        color: @color-white;
-        border-color: @brand-primary;
-        background-color: @brand-primary;
+        color: var(--color-white);
+        border-color: var(--brand-primary);
+        background-color: var(--brand-primary);
 
         .item-icon {
-          color: @color-white;
+          color: var(--color-white);
         }
 
         .item-label {
@@ -135,15 +135,15 @@
       }
 
       &.disabled {
-        border-color: @gray;
-        background-color: @color-white;
+        border-color: var(--gray);
+        background-color: var(--color-white);
 
         .item-icon {
-          color: @gray;
+          color: var(--gray);
         }
 
         .item-label {
-          color: @gray;
+          color: var(--gray);
         }
       }
     }
@@ -154,8 +154,8 @@
 
    .step-tab {
       align-items: center;
-      background: @color-white;
-      border: 1px solid @gray-light;
+      background: var(--color-white);
+      border: 1px solid var(--gray-light);
       border-radius: @border-radius-default;
       display: flex;
       justify-content: center;
@@ -180,17 +180,18 @@
       }
 
       &.active {
-        border-color: @brand-primary;
+        border-color: var(--brand-primary);
       }
 
       &.disabled {
-        background-color: @gray-lightest;
-        color: @gray;
+        background-color: var(--gray-lightest);
+        color: var(--gray);
       }
     }
   }
 
   &.variant-roadsign {
+    background: var(--color-white);
     @media (min-width: @screen-sm) {
       &:before {
         display: none;
@@ -199,7 +200,7 @@
 
     .step-tab {
       align-items: center;
-      background: @color-white;
+      background: var(--color-white);
       display: flex;
       flex: 1 1 0;
       justify-content: center;
@@ -226,14 +227,14 @@
       }
 
       &.active {
-        color: @brand-primary;
+        color: var(--brand-primary);
         font-weight: @font-medium;
       }
 
       &.disabled {
-        border-color: @gray;
-        background-color: @color-white;
-        color: @gray;
+        border-color: var(--gray);
+        background-color: var(--color-white);
+        color: var(--gray);
       }
 
       &:after {
@@ -246,14 +247,16 @@
         right: 0;
         background-size: 100% 100%;
         background-repeat: no-repeat;
-        background-color: @gray-lighter;
+        //background-color: var(--gray-lighter);
         background-image: url(~"data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2250%22%20height%3D%22100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22@{roadsign-svg-color}%22%20d%3D%22M0%200h50v100H0z%22%2F%3E%3Cpath%20d%3D%22M10%200l40.04%2050L10%20100l-9.999-.001L40%2050%200%200h10z%22%20fill%3D%22@{roadsign-arrow-color}%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
       }
 
       &:last-child {
+        padding-left: 15px;
+        padding-right: 15px;
+
         &:after {
           display: none;
-          padding-right: 0;
         }
       }
     }

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

@@ -5,7 +5,7 @@
 
     &:before {
       background-color: @brand-info;
-      color: @color-white;
+      color: var(--color-white);
       content: attr(data-support);
       display: block;
       hyphens: auto;

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

@@ -36,10 +36,10 @@
     top: 0;
 
     &:checked + .switch-content {
-      background: @brand-primary;
+      background: var(--brand-primary);
 
       .panel-primary .panel-heading & {
-        background: @color-highlight-dark;
+        background: var(--color-highlight-dark);
       }
 
       .switch-text {
@@ -67,17 +67,17 @@
 
       + .switch-content {
         pointer-events: none;
-        background: @gray-light;
+        background: var(--gray-light);
       }
 
       &:checked + .switch-content {
-        background: @color-highlight-light;
+        background: var(--color-highlight)-light;
       }
     }
   }
 
   .switch-content {
-    background-color: @gray;
+    background-color: var(--gray);
     border-radius: @border-radius-round;
     cursor: pointer;
     height: @switch-height;
@@ -92,7 +92,7 @@
       text-transform: uppercase;
 
       &:before, &:after {
-        color: @color-white;
+        color: var(--color-white);
         display: inline-block;
         line-height: @switch-height;
         overflow: hidden;
@@ -120,7 +120,7 @@
     }
 
     .switch-handle {
-      background: @color-white;
+      background: var(--color-white);
       border-radius: @border-radius-round;
       height: @switch-height - @switch-padding * 2;
       left: @switch-padding;
@@ -130,7 +130,7 @@
       width: @switch-height - @switch-padding * 2;
 
       &:before {
-        background: @gray-lighter;
+        background: var(--gray-lighter);
         border-radius: @border-radius-round;
         content: '';
         height: @switch-height * 0.5;

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

@@ -20,8 +20,8 @@
 }
 
 .table-settings-item {
-    background: @color-white;
-    border: 1px solid @gray-light;
+    background: var(--color-white);
+    border: 1px solid var(--gray-light);
     position: relative;
     transition: background-color 0.2s ease-in-out ~','box-shadow 0.2s ease-in-out;
     z-index: 1;
@@ -32,7 +32,7 @@
         padding: 0 8px;
 
         &:hover {
-            background-color: @color-highlight-decent;
+            background-color: var(--color-highlight-decent);
         }
     }
 
@@ -40,7 +40,7 @@
         align-items: center;
         display: flex;
         padding: 10px;
-        border-top: 1px solid @gray-light;
+        border-top: 1px solid var(--gray-light);
     }
 
     &:not(:last-child) {
@@ -63,14 +63,14 @@
     }
 
     &.movedColumn {
-        background-color: @color-highlight-decent;
+        background-color: var(--color-highlight-decent);
     }
 
     .table-settings-item-label {
         .ellipsis-1;
         cursor: grab;
         align-items: center;
-        color: @gray-dark;
+        color: var(--gray-dark);
         display: flex;
         flex: 1 0;
         font-weight: @font-normal;
@@ -83,7 +83,7 @@
     }
 
     .column-width-label {
-        color: @gray;
+        color: var(--gray);
         margin-right: 5px;
     }
 

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

@@ -67,7 +67,7 @@
             padding-right: 18px;
 
             &:after {
-              background: @gray-light;
+              background: var(--gray-light);
               bottom: 5px;
               content: '';
               height: @input-height-base - 10px;

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

@@ -1,11 +1,11 @@
 .tag {
-  background: @color-white;
+  background: var(--color-white);
   font-size: 14px;
   font-weight: @font-normal;
   line-height: @btn-size-sm * 0.6;
   border-radius: 2px;
-  border: 1px solid @gray-light;
-  color: @gray-dark;
+  border: 1px solid var(--gray-light);
+  color: var(--gray-dark);
   border-radius: @btn-size-sm;
   position: relative;
   display: inline-flex;
@@ -21,8 +21,8 @@
   }
 
   &.tag-muted {
-    border-color: @gray-lightest;
-    background-color: @gray-lightest;
+    border-color: var(--gray-lightest);
+    background-color: var(--gray-lightest);
   }
 
   &[style*="width"],
@@ -51,8 +51,8 @@
   }
 
   &.disabled {
-    border-color: @gray;
-    background-color: @gray-light;
+    border-color: var(--gray);
+    background-color: var(--gray-light);
     opacity: .5;
     position: relative;
 
@@ -75,17 +75,17 @@
     cursor: pointer;
 
     &:hover {
-      background-color: @gray-lightest;
+      background-color: var(--gray-lightest);
     }
   }
 
   &.active {
-    background-color: fade(@brand-primary, 20%);
+    background-color: .hsla(@brand-primary-hsl, 0.2)[@result];
     border-color: @brand-primary;
     color: @brand-primary;
 
     &:hover {
-      background-color: fade(@brand-primary, 30%);
+      background-color: .hsla(@brand-primary-hsl, 0.3)[@result];
     }
   }
 

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

@@ -1,7 +1,7 @@
 .timeline {
   .timeline-date {
     position: relative;
-    color: @gray-dark;
+    color: var(--gray-dark);
   }
 
   .timeline-content {
@@ -23,7 +23,7 @@
         white-space: nowrap;
 
         &:before {
-          background: @gray-light;
+          background: var(--gray-light);
           bottom: 5px;
           content: "";
           left: 50%;
@@ -51,7 +51,7 @@
           padding-top: 60px;
 
           &:before {
-            background: @gray-light;
+            background: var(--gray-light);
             top: 20px;
             content: "";
             left: 50%;

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

@@ -1,6 +1,6 @@
 @tooltip-max-width: 200px;
-@tooltip-color: @color-white;
-@tooltip-bg: @gray-darker;
+@tooltip-color: var(--color-white);
+@tooltip-bg: var(--gray-darker);
 @tooltip-arrow-width: 5px;
 @tooltip-arrow-color: @tooltip-bg;
 @tooltip-opacity: 1;
@@ -48,7 +48,7 @@
     z-index: @zindex-tooltip;
 
     .tooltip-inner {
-      background: @gray-darkest;
+      background: var(--gray-darkest);
       border-radius: @border-radius-sm;
       padding: 5px 10px;
       width: 180px;
@@ -67,13 +67,13 @@
     @arrow-size-hypotenuse: sqrt(pow(@arrow-size, 2) + pow(@arrow-size, 2));
 
     .tooltip-mixin(
-      @offset: 10px; @overlap: 10px; @color: @gray-darkest; @arrow-size: 5px; @arrow-size-hypotenuse:
+      @offset: 10px; @overlap: 10px; @color: var(--gray-darkest); @arrow-size: 5px; @arrow-size-hypotenuse:
         @arrow-size-hypotenuse;
     );
   }
 
   &.tooltip-onboarding {
-    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
+    filter: drop-shadow(0 0 10px .hsla(@always-color-black-hsl, 0.3)[@result]);
     z-index: @zindex-tooltip-onboarding;
 
     &.onboarding-clickflow {
@@ -81,7 +81,7 @@
 
       &.onboarding-clickflow-backdrop {
         &:after {
-          background-color: rgba(0, 0, 0, 0.3);
+          background-color: .hsla(@always-color-black-hsl, 0.3)[@result];
           bottom: -1500px;
           content: "";
           display: block;
@@ -106,7 +106,7 @@
     }
 
     .tooltip-inner {
-      background: @brand-secondary;
+      background: var(--brand-secondary);
       border-radius: @border-radius-default;
       padding: 15px;
       width: 330px;
@@ -124,13 +124,13 @@
       }
 
       .tooltip-close {
-        color: darken(@brand-secondary, 10%);
+        color: .hslb(@brand-secondary-hsl, '-', '10%')[@result];
         cursor: pointer;
         font-size: 16px;
         margin: 2px 0 0 10px;
 
         &:hover {
-          color: @color-white;
+          color: var(--color-white);
         }
       }
     }
@@ -139,7 +139,7 @@
     @arrow-size-hypotenuse: sqrt(pow(@arrow-size, 2) + pow(@arrow-size, 2));
 
     .tooltip-mixin(
-      @offset: 20px; @overlap: 25px; @color: @color-map-marker-poi; @arrow-size: @arrow-size; @arrow-size-hypotenuse:
+      @offset: 20px; @overlap: 25px; @color: var(--color-map-marker-poi); @arrow-size: @arrow-size; @arrow-size-hypotenuse:
         @arrow-size-hypotenuse;
     );
   }