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

package/styles/design/labels.less

@@ -3,7 +3,7 @@
   border-radius: @border-radius-sm;
   border-style: solid;
   border-width: 1px;
-  color: @color-white;
+  color: var(--color-white);
   display: inline-block;
   font-size: 75%;
   font-weight: @font-medium;
@@ -32,23 +32,23 @@
   // danger
 
   &-default {
-    color: @gray-dark;
+    color: var(--gray-dark);
 
     &.label-filled {
-      color: @color-white;
-      border-color: @gray-dark;
-      background-color: @gray-dark;
+      color: var(--color-white);
+      border-color: var(--gray-dark);
+      background-color: var(--gray-dark);
     }
   }
 
   &-muted {
-    color: @gray;
-    border-color: @gray-light;
+    color: var(--gray);
+    border-color: var(--gray-light);
 
     &.label-filled {
-      color: @gray-dark;
-      border-color: @gray-light;
-      background-color: @gray-lightest;
+      color: var(--gray-dark);
+      border-color: var(--gray-light);
+      background-color: var(--gray-lightest);
     }
   }
 
@@ -57,7 +57,7 @@
       color: @value;
 
       &.label-filled {
-        color: @color-white;
+        color: var(--color-white);
         border-color: @value;
         background-color: @value;
       }

package/styles/design/list-group.less

@@ -1,11 +1,13 @@
+@list-group-item-hover-bg: var(--gray-lightest);
+
 .list-group {
   .reset-list();
   margin-bottom: 20px;
 }
 
 .list-group-item {
-  background-color: @color-white;
-  border: 1px solid @gray-light;
+  background-color: var(--color-white);
+  border: 1px solid var(--gray-light);
   display: block;
   margin-bottom: -1px;
   padding: 10px 15px;
@@ -31,17 +33,17 @@
   &.disabled,
   &.disabled:hover,
   &.disabled:focus {
-    background-color: @gray-lighter;
-    color: @gray-light;
+    background-color: var(--gray-lighter);
+    color: var(--gray-light);
     cursor: not-allowed;
   }
 
   &.active,
   &.active:hover,
   &.active:focus {
-    background-color: @brand-primary;
-    border-color: @brand-primary;
-    color: @color-white;
+    background-color: var(--brand-primary);
+    border-color: var(--brand-primary);
+    color: var(--color-white);
     z-index: 2;
   }
 
@@ -49,12 +51,12 @@
   button&,
   &.list-group-item-link {
     cursor: pointer;
-    color: @gray-darkest;
+    color: var(--gray-darkest);
 
     &:hover,
     &:focus {
-      background-color: @gray-lightest;
-      color: @gray-darkest;
+      background-color: @list-group-item-hover-bg;
+      color: var(--gray-darkest);
       text-decoration: none;
     }
   }
@@ -67,7 +69,7 @@
   // warning
   // danger
   &-default {
-    box-shadow: inset 5px 0 0 0 @gray;
+    box-shadow: inset 5px 0 0 0 var(--gray);
   }
 
   each(@colors-brand-and-status-map, {
@@ -94,7 +96,7 @@
         &.active,
         &.active:hover,
         &.active:focus {
-          color: @color-white;
+          color: var(--color-white);
           background-color: @value;
           border-color: @value;
         }

package/styles/design/navs.less

@@ -23,7 +23,7 @@
 
       &.disabled,
       &:disabled {
-        color: @gray-light;
+        color: var(--gray-light);
         pointer-events: none;
       }
     }
@@ -33,7 +33,7 @@
       cursor: not-allowed;
 
       > a, > span, > div {
-        color: @gray-light;
+        color: var(--gray-light);
         pointer-events: none;
       }
     }
@@ -71,9 +71,9 @@
 }
 
 // nav tabs
-@nav-tabs-border-color: @gray-light;
-@nav-tabs-link-hover-border-color: @brand-primary;
-@nav-tabs-active-link-hover-border-color: @gray-light;
+@nav-tabs-border-color: var(--gray-light);
+@nav-tabs-link-hover-border-color: var(--brand-primary);
+@nav-tabs-active-link-hover-border-color: var(--gray-light);
 
 .nav-tabs {
   border-bottom: 1px solid @nav-tabs-border-color;
@@ -92,15 +92,15 @@
     > a, > span, > div {
       border-radius: @border-radius-default @border-radius-default 0 0;
       border: 1px solid transparent;
-      color: @gray-dark;
+      color: var(--gray-dark);
       cursor: pointer;
       line-height: @line-height-default;
       transition: all 100ms ease-in-out;
 
       &:hover,
       &:focus {
-        color: @gray-darkest;
-        background-color: @gray-lightest;
+        color: var(--gray-darkest);
+        background-color: var(--gray-lightest);
         border-color: @nav-tabs-border-color;
         outline: 0;
       }
@@ -109,12 +109,12 @@
     &.active {
       > a, > span, > div,
       > a:hover, > span:hover, > div:hover {
-        background-color: @color-white;
+        background-color: var(--color-white);
         border-bottom: 1px solid transparent;
         border-left: 1px solid @nav-tabs-active-link-hover-border-color;
         border-right: 1px solid @nav-tabs-active-link-hover-border-color;
         border-top: 1px solid @nav-tabs-active-link-hover-border-color;
-        color: @gray-darkest;
+        color: var(--gray-darkest);
         cursor: default;
 
         &:before {
@@ -128,7 +128,7 @@
 .tab-content {
   margin: 0;
   padding: 15px;
-  background-color: @color-white;
+  background-color: var(--color-white);
   transition: all 200ms ease-in-out;
 }
 
@@ -140,8 +140,8 @@
 
 // nav pills
 @nav-pills-border-radius: @border-radius-default;
-@nav-pills-active-link-hover-bg: @brand-primary;
-@nav-pills-active-link-hover-color: @color-white;
+@nav-pills-active-link-hover-bg: var(--brand-primary);
+@nav-pills-active-link-hover-color: var(--color-white);
 
 .nav-pills {
   &:not(.nav-stacked) {
@@ -151,13 +151,13 @@
 
   > li {
     > a, > span, > div {
-      color: @gray-dark;
+      color: var(--gray-dark);
       line-height: 22px;
       transition: all 100ms ease-in-out;
 
       &:hover,
       &:focus {
-        color: @gray-darkest;
+        color: var(--gray-darkest);
         outline: 0;
       }
     }
@@ -165,14 +165,14 @@
     &.active,
     &:active {
       > a, > span, > div {
-        color: @gray-darkest;
+        color: var(--gray-darkest);
       }
     }
 
     &.disabled,
     &:disabled {
       > a, > span, > div {
-        color: @gray-light;
+        color: var(--gray-light);
 
         &:hover {
           box-shadow: none;
@@ -182,19 +182,19 @@
   }
 
   &:not(.nav-stacked):not(.nav-pills-filled) {
-    box-shadow: 0 -1px inset @gray-dark;
+    box-shadow: 0 -1px inset var(--gray-dark);
     > li {
       > a, > span, > div {
         &:hover,
         &:focus {
-          box-shadow: inset 0px -4px 0px 0px @gray-dark;
+          box-shadow: inset 0px -4px 0px 0px var(--gray-dark);
         }
       }
 
       &.active,
       &:active {
         > a, > span, > div {
-          box-shadow: inset 0px -3px 0px 0px @gray-dark;
+          box-shadow: inset 0px -3px 0px 0px var(--gray-dark);
         }
       }
     }
@@ -219,7 +219,7 @@
   }
 
   &.nav-pills-filled {
-    background: @gray-lightest;
+    background: var(--gray-lightest);
     border-radius: @nav-pills-border-radius;
     padding: @nav-pills-border-radius;
 
@@ -227,7 +227,7 @@
       &.active,
       &:hover {
         &:extend(.shadow-default);
-        background: @color-white;
+        background: var(--color-white);
         border-radius: @nav-pills-border-radius;
       }
     }
@@ -240,7 +240,7 @@
       }
 
       > a, > span, > div {
-        color: @gray-darkest;
+        color: var(--gray-darkest);
         border-radius: @nav-pills-border-radius;
       }
     }
@@ -248,7 +248,7 @@
     > li:not(.disabled):not(:disabled):not(.active) {
       &:hover {
         > a, > span, > div {
-          background-color: @gray-lightest;
+          background-color: var(--gray-lightest);
         }
       }
     }
@@ -256,11 +256,11 @@
     &:not(.nav-pills-stacked-decent) {
       > li.active {
         > a, > span, > div {
-          color: @color-white;
+          color: var(--color-white);
           background-color: @nav-pills-active-link-hover-bg;
 
           &:hover {
-            color: @color-white;
+            color: var(--color-white);
           }
         }
       }
@@ -269,7 +269,7 @@
     &.nav-pills-stacked-decent {
       > li.active {
         > a, > span, > div {
-          background-color: @color-highlight-lightest;
+          background-color: var(--color-highlight-lightest);
         }
       }
     }

package/styles/design/normalize.less

@@ -145,15 +145,6 @@ html {
     margin: 0.67em 0;
   }
 
-  //
-  // Address styling not present in IE 8/9.
-  //
-
-  mark {
-    background: #ff0;
-    color: #000;
-  }
-
   //
   // Address inconsistent and variable font size in all browsers.
   //

package/styles/design/pagination.less

@@ -1,7 +1,7 @@
 // Pagination
-@pagination-color: @gray-dark;
-@pagination-active-bg: @gray-lighter;
-@pagination-active-color: @gray-dark;
+@pagination-color: var(--gray-dark);
+@pagination-active-bg: var(--gray-lighter);
+@pagination-active-color: var(--gray-dark);
 
 .pagination {
   .reset-list();
@@ -60,16 +60,16 @@
     }
 
     &:empty {
-      background: @color-highlight-decent;
+      background: var(--color-highlight-decent);
       border-radius: @border-radius-sm;
-      border: 1px solid @color-highlight;
+      border: 1px solid var(--color-highlight);
       height: 10px;
       margin: 0 5px;
       width: 20px;
 
       &.active,
       &:hover {
-        background: @color-highlight;
+        background: var(--color-highlight);
       }
     }
 
@@ -96,9 +96,9 @@
 }
 
 // Pager
-@pager-border: @gray-light;
-@pager-hover-bg: @gray-lighter;
-@pager-active-bg: @gray;
+@pager-border: var(--gray-light);
+@pager-hover-bg: var(--gray-lighter);
+@pager-active-bg: var(--gray);
 @pager-active-color: @pagination-active-color;
 
 .pager {
@@ -153,7 +153,7 @@
       &,
       &:hover,
       &:focus {
-        color: @gray-light;
+        color: var(--gray-light);
         cursor: not-allowed;
       }
     }

package/styles/design/panels.less

@@ -2,7 +2,7 @@
 @panel-y-padding: 10px;
 
 .panel {
-  background-color: @color-white;
+  background-color: var(--color-white);
   border-radius: @border-radius-default;
   border: 1px solid transparent;
   margin-bottom: @grid-gutter-height;
@@ -13,15 +13,15 @@
 
   &.panel-default {
     &.active {
-      background-color: @color-highlight-decent;
-      border: 1px solid @brand-primary;
-      box-shadow: inset 0 0 0 1px @brand-primary;
+      background-color: var(--color-highlight-decent);
+      border: 1px solid var(--brand-primary);
+      box-shadow: inset 0 0 0 1px var(--brand-primary);
 
       .panel-heading,
       .panel-footer {
-        background-color: @color-highlight-decent;
-        border-color: @brand-primary;
-        box-shadow: inset 0 0 0 1px @brand-primary;
+        background-color: var(--color-highlight-decent);
+        border-color: var(--brand-primary);
+        box-shadow: inset 0 0 0 1px var(--brand-primary);
       }
     }
   }
@@ -66,7 +66,7 @@
   }
 
   // default
-  .panel-variant(@color-white, @gray-light, @gray-darkest);
+  .panel-variant(var(--color-white), var(--gray-light), var(--gray-darkest));
 
   // primary
   // secondary
@@ -76,7 +76,7 @@
   // danger
   each(@colors-brand-and-status-map, {
     &.panel-@{key} {
-      .panel-variant(@value, @value, @color-white);
+      .panel-variant(@value, @value, var(--color-white));
     }
   })
 }
@@ -86,7 +86,7 @@
   padding: @panel-x-padding;
 
   ~ .table {
-    border-top: 1px solid @gray-light;
+    border-top: 1px solid var(--gray-light);
     margin-bottom: 0
   }
 

package/styles/design/popovers.less

@@ -1,6 +1,6 @@
 @popover-max-width: 550px;
-@popover-color: @color-white;
-@popover-arrow-color: @color-white;
+@popover-color: var(--color-white);
+@popover-arrow-color: var(--color-white);
 @popover-arrow-width: 12px;
 @popover-arrow-outer-width: 11px;
 
@@ -9,14 +9,14 @@
   background-clip: padding-box;
   background-color: @popover-color;
   border-radius: @border-radius-lg;
-  border: 1px solid @gray-light;
+  border: 1px solid var(--gray-light);
   max-width: @popover-max-width;
   padding: 0;
   position: absolute;
   z-index: @zindex-popover;
 
   .popover-title {
-    border-bottom: 1px solid @gray-light;
+    border-bottom: 1px solid var(--gray-light);
     padding: 13px 14px;
     font-weight: normal;
   }
@@ -53,7 +53,7 @@
     > .arrow {
       left: 50%;
       border-bottom-width: 0;
-      border-top-color: @gray-light;
+      border-top-color: var(--gray-light);
       bottom: -(@popover-arrow-outer-width);
 
       &:after {
@@ -71,7 +71,7 @@
       top: 50%;
       left: -(@popover-arrow-outer-width);
       border-left-width: 0;
-      border-right-color: @gray-light;
+      border-right-color: var(--gray-light);
 
       &:after {
         content: "";
@@ -87,7 +87,7 @@
     > .arrow {
       left: 50%;
       border-top-width: 0;
-      border-bottom-color: @gray-light;
+      border-bottom-color: var(--gray-light);
       top: -(@popover-arrow-outer-width);
 
       &:after {
@@ -105,7 +105,7 @@
       top: 50%;
       right: -(@popover-arrow-outer-width);
       border-right-width: 0;
-      border-left-color: @gray-light;
+      border-left-color: var(--gray-light);
 
       &:after {
         content: "";

package/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/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 {