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

package/styles/components/Notification.less

@@ -6,8 +6,8 @@
 
   .notification {
     &:extend(.shadow-smooth);
-    background-color: @color-white;
-    color: @color-white;
+    background-color: var(--color-white);
+    color: var(--always-color-white);
     cursor: pointer;
     font-size: 14px;
     line-height: 16px;
@@ -39,7 +39,7 @@
 
     .title {
       font-size: 16px;
-      color: @color-white;
+      color: var(--always-color-white);
       font-weight: @font-medium;
       margin: 0 0 5px 0;
     }
@@ -60,7 +60,7 @@
       }
 
       .notification-close {
-        color: @color-white;
+        color: var(--color-white);
         padding: 4px;
         position: absolute;
         text-decoration: none;
@@ -68,10 +68,10 @@
     }
 
     &.notification-info {
-      border-bottom-color: darken(@brand-info, 5%);
+      border-bottom-color: .hslb(@brand-info-hsl, '-', '5%')[@result];
 
       .notification-message {
-        background-color: fade(@brand-info, 80%);
+        background-color: .hsla(@brand-info-hsl, 0.8)[@result];
 
         &:before {
           content: @rioglyph-info-sign;
@@ -81,10 +81,10 @@
     }
 
     &.notification-success {
-      border-bottom-color: darken(@brand-success, 5%);
+      border-bottom-color: .hslb(@brand-success-hsl, '-', '5%')[@result];
 
       .notification-message {
-        background-color: fade(@brand-success, 80%);
+        background-color: .hsla(@brand-success-hsl, 0.8)[@result];
 
         &:before {
           content: @rioglyph-ok;
@@ -94,10 +94,10 @@
     }
 
     &.notification-warning {
-      border-bottom-color: darken(@brand-warning, 5%);
+      border-bottom-color: .hslb(@brand-warning-hsl, '-', '5%')[@result];
 
       .notification-message {
-        background-color: fade(@brand-warning, 80%);
+        background-color: .hsla(@brand-warning-hsl, 0.8)[@result];
 
         &:before {
           content: @rioglyph-exclamation-sign;
@@ -107,10 +107,10 @@
     }
 
     &.notification-error {
-      border-bottom-color: darken(@brand-danger, 5%);
+      border-bottom-color: .hslb(@brand-danger-hsl, '-', '5%')[@result];
 
       .notification-message {
-        background-color: fade(@brand-danger, 80%);
+        background-color: .hsla(@brand-danger-hsl, 0.8)[@result];
 
         &:before {
           content: @rioglyph-error-sign;

package/styles/components/RadioButton.less

@@ -1,9 +1,8 @@
 @dim-radio-size-default: 14px;
-@color-disabled-inverted: darken(@gray-darker, 20%);
 @input-margin: 7px;
 
 .radio {
-  color: @gray-darkest;
+  color: var(--gray-darkest);
   font-size: @font-size-default;
   margin-bottom: 0;
   margin-top: 0;
@@ -38,7 +37,7 @@
       + .radio-text-wrapper > .radio-text {
         &:before,
         &:after {
-          border-color: @gray-darker;
+          border-color: var(--gray-darker);
         }
       }
 
@@ -46,7 +45,7 @@
         + .radio-text {
           &:before,
           &:after {
-            box-shadow: inset 0px 0px 0px 1px @gray-darker;
+            box-shadow: inset 0px 0px 0px 1px var(--gray-darker);
           }
         }
       }
@@ -63,9 +62,9 @@
       &:before,
       &:after {
         -webkit-font-smoothing: antialiased;
-        background-color: @color-white;
+        background-color: var(--color-white);
         border-radius: 50%;
-        border: 1px solid @gray;
+        border: 1px solid var(--gray);
         display: inline-block;
         font-style: normal;
         font-weight: @font-normal;
@@ -104,12 +103,12 @@
       }
 
       .rioglyph {
-        color: @gray;
+        color: var(--gray);
         display: block;
       }
 
       .radio-label {
-        color: @gray-darker;
+        color: var(--gray-darker);
       }
     }
 
@@ -133,7 +132,7 @@
         &:before,
         &:after {
           animation: radio-tick 100ms ease-in;
-          border-color: @brand-primary;
+          border-color: var(--brand-primary);
           border-width: 4px;
         }
       }
@@ -141,20 +140,20 @@
       + .radio-icon {
         .rioglyph {
           animation: radio-tick 100ms ease-in;
-          color: @brand-primary;
+          color: var(--brand-primary);
         }
       }
     }
 
     // Define style for 'diabled' state
     &:disabled + .radio-text {
-      //color: @gray-light;
+      //color: var(--gray-light);
       opacity: 0.5;
       cursor: not-allowed;
 
       &:before,
       &:after {
-        border-color: @gray-light;
+        border-color: var(--gray-light);
       }
     }
   }

package/styles/components/Resizer.less

@@ -6,7 +6,7 @@
   transition: background-color 0.1s ease-in-out;
 
   &:hover {
-    background-color: rgba(167, 175, 187, 0.2);
+    background-color: var(--gray-dark);
   }
 
   &.resize-horizontal {

package/styles/components/Select.less

@@ -6,7 +6,7 @@
   }
 
   .placeholder {
-    color: @gray;
+    color: var(--gray);
   }
 
   .dropdown-toggle {
@@ -21,7 +21,7 @@
       background: @input-bg-disabled;
 
       .caret {
-        color: @gray;
+        color: var(--gray);
       }
 
       > .selected-option-list {
@@ -33,18 +33,18 @@
 
         .selected-option {
           .selected-label {
-            background-color: @gray-light;
-            border-color: @gray-light;
-            color: @gray-lightest !important;
+            background-color: var(--gray-light);
+            border-color: var(--gray-light);
+            color: var(--gray-lightest) !important;
           }
 
           .rioglyph {
-            color: @gray-lightest !important;
+            color: var(--gray-lightest) !important;
           }
 
           .removeIcon {
-            background-color: darken(@gray-light, 3%);
-            color: @gray-lighter;
+            background-color: .hslb(@gray-light-hsl, '-', '3%')[@result];
+            color: var(--gray-lighter);
           }
         }
       }
@@ -68,23 +68,13 @@
       white-space: nowrap;
       width: 100%;
 
-      // &:after {
-      //   content: "";
-      //   position: absolute;
-      //   top: 0;
-      //   right: 0;
-      //   width: 8px;
-      //   height: 100%;
-      //   background-image: linear-gradient(90deg, rgba(255,255,255,0), @input-bg);
-      // }
-
       > .selected-option {
         border-radius: @border-radius-sm;
-        color: @color-white !important;
+        color: var(--color-white) !important;
         display: flex;
 
         .rioglyph {
-          color: @color-white !important;
+          color: var(--color-white) !important;
         }
 
         > .selected-label {
@@ -97,7 +87,7 @@
 
         > .removeIcon {
           align-items: center;
-          background-color: lighten(@brand-primary, 3%);
+          background-color: .hslb(@brand-primary-hsl, '+', '3%')[@result];
           border-bottom-right-radius: @border-radius-sm;
           border-top-right-radius: @border-radius-sm;
           display: flex;
@@ -130,13 +120,13 @@
       width: calc(~"100% - 30px");
 
       &-active {
-        background-color: @color-white;
+        background-color: var(--color-white);
       }
     }
 
     > .clearButton {
       align-items: center;
-      color: @gray;
+      color: var(--gray);
       cursor: pointer;
       display: flex;
       height: 100%;
@@ -176,7 +166,7 @@
     > li {
       > a.focus {
         text-decoration: none;
-        color: @color-white;
+        color: var(--color-white);
         background-color: @brand-primary;
       }
 
@@ -209,7 +199,7 @@
 
   .inactiveIcon {
     .rioglyph, span {
-      color: @gray-light!important;
+      color: var(--gray-light)!important;
     }
   }
 }
@@ -280,7 +270,7 @@ select {
       background: transparent;
 
       &-active {
-        background-color: @color-white;
+        background-color: var(--color-white);
       }
     }
     .multiselect-filter-input-placeholder {

package/styles/components/Sidebar.less

@@ -1,9 +1,7 @@
-@sidebar-shadow-color: rgba(0, 0, 0, 0.10);
-
 .Sidebar {
   position: relative;
   height: 100%;
-  background-color: @color-white;
+  background-color: var(--color-white);
   max-width: 100vw;
 
   &Content {
@@ -23,10 +21,11 @@
     position: relative;
 
     &.show-border {
-      border-bottom: 1px solid @gray-light;
+      border-bottom: 1px solid var(--gray-light);
     }
 
     .SidebarTitle {
+      color: var(--color-black);
       flex: 1 1 auto;
     }
 
@@ -47,7 +46,7 @@
       }
 
       &-spacer {
-        background-color: @gray-lighter;
+        background-color: var(--gray-lighter);
         height: 14px;
         width: 1.5px;
         margin: 0 5px;
@@ -72,21 +71,25 @@
   }
 
   &Footer {
-    background: @color-white;
-    border-top: 1px solid @gray-lighter;
+    background: var(--color-white);
+    border-top: 1px solid var(--gray-lighter);
     padding: 10px;
     position: relative;
     text-align: right;
 
     &:before {
-        background: linear-gradient(0deg, rgba(255,255,255,1), rgba(255,255,255,0));
-        content: "";
-        height: 20px;
-        left: 0;
-        pointer-events: none;
-        position: absolute;
-        top: -21px;
-        width: 100%;
+      content: "";
+      height: 20px;
+      left: 0;
+      pointer-events: none;
+      position: absolute;
+      top: -21px;
+      width: 100%;
+      background: linear-gradient(
+        0deg,
+        .hsla(@color-white-hsl, 1.0)[@result],
+        .hsla(@color-white-hsl, 0)[@result],
+      );
     }
   }
 
@@ -104,13 +107,12 @@
     position: absolute;
     height: 100%;
     width: 0px;
-    border: 1px dashed @gray-darkest;
+    border: 1px dashed var(--gray-darkest);
     opacity: 0.2;
     pointer-events: none;
   }
 
   &.fluid {
-
     // shadow layering order
     &:not(.closed) {
       position: relative;
@@ -126,12 +128,12 @@
     .ApplicationLayoutSidebar:not(.right) & {
       float: left;
       left: 0;
-      box-shadow: 1px 0 0 0 @gray-light;
+      box-shadow: 1px 0 0 0 var(--gray-light);
     }
 
     .ApplicationLayoutSidebar.right & {
       float: right;
-      box-shadow: -1px 0 0 0 @gray-light;
+      box-shadow: -1px 0 0 0 var(--gray-light);
     }
 
   }
@@ -141,12 +143,12 @@
     top: 0;
 
     .ApplicationLayoutSidebar:not(.right) & {
-      box-shadow: 5px 5px 5px 0 @sidebar-shadow-color;
+      box-shadow: 5px 5px 5px 0 .hsla(@always-color-black-hsl, 0.1)[@result];
       left: 0;
     }
 
     .ApplicationLayoutSidebar.right & {
-      box-shadow: -5px 5px 5px 0 @sidebar-shadow-color;
+      box-shadow: -5px 5px 5px 0 .hsla(@always-color-black-hsl, 0.1)[@result];
       right: 0;
     }
   }
@@ -155,3 +157,9 @@
     display: none;
   }
 }
+
+.SidebarBackdrop {
+  &.sidebar-backdrop-bg {
+    background: .hsla(@always-color-black-hsl, 0.6)[@result];
+  }
+}

package/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/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/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;
         }