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

package/lib/es/styles/design/form-inputs.less

@@ -1,14 +1,14 @@
-@input-bg: @color-white;
-@input-bg-disabled: rgba(229, 235, 240, 0.4); //40% @gray-lighter;
-@input-color: @gray-darker;
-@input-border: @gray;
-@input-border-focus: @brand-primary;
-@input-color-placeholder: @gray;
+@input-bg: var(--color-white);
+@input-bg-disabled: var(--gray-lightest);
+@input-color: var(--gray-darker);
+@input-border: var(--gray);
+@input-border-focus: var(--brand-primary);
+@input-color-placeholder: var(--gray);
 @input-height-base: (@grid-gutter-height + (@padding-default-vertical * 2) + 2);
 @input-height-lg: (floor(@font-size-lg * @line-height-lg) + (@padding-lg-vertical * 2) + 2);
 @input-height-sm: (floor(@font-size-sm * @line-height-sm) + (@padding-sm-vertical * 2) + 2);
-@legend-color: @gray-dark;
-@legend-border-color: #e5e5e5;
+@legend-color: var(--gray-dark);
+@legend-border-color: var(--gray-light);
 
 fieldset {
   padding: 0;
@@ -18,15 +18,15 @@ fieldset {
 }
 
 legend {
+  border-bottom: 1px solid @legend-border-color;
+  color: @legend-color;
   display: block;
-  width: 100%;
-  padding: 0;
-  margin-bottom: @grid-gutter-height;
-  font-size: (@font-size-default * 1.5);
+  font-size: (@font-size-default * 1.2);
+  font-weight: 300;
   line-height: inherit;
-  color: @legend-color;
-  border: 0;
-  border-bottom: 1px solid @legend-border-color;
+  margin-bottom: @grid-gutter-height * 2;
+  width: 100%;
+  padding-bottom: @grid-gutter-height * 0.5;
 }
 
 label {
@@ -116,7 +116,7 @@ select {
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
   border: 1px solid @input-border;
   border-radius: @border-radius-default; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
-  box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
+  box-shadow:inset 0 1px 1px .hsla(@always-color-black-hsl, 0.075)[@result];
   transition:border-color ease-in-out .15s~","box-shadow ease-in-out .15s;
 
   .form-control-focus();
@@ -289,13 +289,13 @@ input[type="checkbox"] {
   display: block; // account for any element using help-block
   margin-top: 5px;
   margin-bottom: 10px;
-  color: lighten(@text-color, 25%); // lighten the text some for contrast
+  color: .hslb(@gray-darkest-hsl, '+', '25%')[@result];
 }
 
 .default-label(@label-font-size) {
   font-size: @label-font-size;
   font-weight: normal;
-  color: @gray-dark;
+  color: var(--gray-dark);
 }
 
 // define default styling for labels
@@ -325,7 +325,7 @@ label .checkbox-text {
   label {
     .radio-text,
     .checkbox-text {
-      color: @gray-darkest;
+      color: var(--gray-darkest);
       font-size: @font-size-14;
     }
   }
@@ -339,7 +339,7 @@ label .checkbox-text {
     label {
       .radio-text,
       .checkbox-text {
-        color: @gray-darkest;
+        color: var(--gray-darkest);
         font-size: @font-size-16;
       }
     }
@@ -354,7 +354,7 @@ label .checkbox-text {
     label {
       .radio-text,
       .checkbox-text {
-        color: @gray-darkest;
+        color: var(--gray-darkest);
         font-size: @font-size-12;
       }
     }
@@ -452,13 +452,13 @@ label .checkbox-text {
       &.has-@{key} {
         .help-block {
           background: @value;
-          color: @color-white;
+          color: var(--color-white);
         }
 
         .form-control {
           &:focus {
             ~ .help-block {
-              background: @gray-lightest;
+              background: var(--gray-lightest);
               color: @value;
             }
           }
@@ -495,7 +495,7 @@ label .checkbox-text {
 .has-warning > .control-label,
 .has-error > .control-label,
 .has-success > .control-label {
-  color: @gray-dark;
+  color: var(--gray-dark);
 }
 
 .form-control {
@@ -512,7 +512,7 @@ label .checkbox-text {
 
   &[disabled] {
     + .input-group-addon:last-child {
-      background: #f5f7f9; // because @input-bg-disabled has alpha...
+      background: @input-bg-disabled; // because @input-bg-disabled has alpha...
       cursor: not-allowed;
     }
   }
@@ -526,16 +526,18 @@ label .checkbox-text {
       z-index: 3;
 
       .form-group.has-error & {
-        border-color: darken(@brand-danger, 10%);
-        box-shadow: 1px 0 0 0 darken(@brand-danger, 10%);
+        border-color: .hslb(@brand-danger-hsl, '-', '10%')[@result];
+        box-shadow: .hslb(@brand-danger-hsl, '-', '10%')[@result];
       }
+
       .form-group.has-warning & {
-        border-color: darken(@brand-warning, 10%);
-        box-shadow: 1px 0 0 0 darken(@brand-warning, 10%);
+        border-color: .hslb(@brand-warning-hsl, '-', '10%')[@result];
+        box-shadow: .hslb(@brand-warning-hsl, '-', '10%')[@result];
       }
+
       .form-group.has-success & {
-        border-color: darken(@brand-success, 10%);
-        box-shadow: 1px 0 0 0 darken(@brand-success, 10%);
+        border-color: .hslb(@brand-success-hsl, '-', '10%')[@result];
+        box-shadow: .hslb(@brand-success-hsl, '-', '10%')[@result];
       }
     }
   }

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

@@ -29,8 +29,8 @@ img {
 .img-thumbnail {
   padding: 0;
   line-height: @line-height-default;
-  background-color: @color-white;
-  border: 1px solid @gray-light;
+  background-color: var(--color-white);
+  border: 1px solid var(--gray-light);
   border-radius: @border-radius-default;
   transition:all .2s ease-in-out;
 

package/lib/es/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/lib/es/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/lib/es/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/lib/es/styles/design/normalize.less

@@ -7,8 +7,6 @@
   }
 }
 
-/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
-
 //
 // 1. Set default font family to sans-serif.
 // 2. Prevent iOS and IE text size adjust after device orientation change,
@@ -147,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/lib/es/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/lib/es/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/lib/es/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: "";