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

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

@@ -1,21 +1,21 @@
-.bg-muted, .hover-bg-muted:hover { background-color: @gray-lighter !important }
-.bg-default, .hover-bg-default:hover { background-color: @gray-dark !important }
+.bg-muted, .hover-bg-muted:hover { background-color: var(--gray-lighter) !important }
+.bg-default, .hover-bg-default:hover { background-color: var(--gray-dark) !important }
 
 // white
 // black
-.bg-white, .hover-bg-white:hover { background-color: @color-white !important }
-.fill-white { fill: @color-white !important }
+.bg-white, .hover-bg-white:hover { background-color: var(--color-white) !important }
+.fill-white { fill: var(--color-white) !important }
 
-.bg-black, .hover-bg-black:hover { background-color: @color-black !important }
-.fill-black { fill: @color-black !important }
-.bg-black { color: @color-white !important }
+.bg-black, .hover-bg-black:hover { background-color: var(--color-black) !important }
+.fill-black { fill: var(--color-black) !important }
+.bg-black { color: var(--color-white) !important }
 
 
 // primary
 // secondary
 each(@colors-brand-map, {
   .bg-@{key} {
-    color: @color-white !important;
+    color: var(--color-white) !important;
     background-color: @value !important;
   }
   .hover-bg-@{key}:hover {
@@ -32,7 +32,7 @@ each(@colors-brand-map, {
 // danger
 each(@colors-status-map, {
   .bg-@{key} {
-    color: @color-white !important;
+    color: var(--color-white) !important;
     background-color: @value !important;
   }
   .hover-bg-@{key}:hover {
@@ -52,7 +52,7 @@ each(@colors-status-map, {
 // lightest
 each(@colors-gray-map, {
   .bg-@{key} {
-    color: @gray-darkest !important;
+    color: var(--gray-darkest) !important;
     background-color: @value !important;
   }
   .hover-bg-@{key}:hover {
@@ -64,7 +64,7 @@ each(@colors-gray-map, {
 })
 .bg-dark,
 .bg-darker,
-.bg-darkest { color: @color-white !important }
+.bg-darkest { color: var(--color-white) !important }
 
 // map-marker-asset
 // map-marker-poi
@@ -72,7 +72,7 @@ each(@colors-gray-map, {
 // map-marker-route
 each(@colors-map-marker-map, {
   .bg-@{key} {
-    color: @color-white !important;
+    color: var(--color-white) !important;
     background-color: @value !important;
   }
   .hover-bg-@{key}:hover {
@@ -90,7 +90,7 @@ each(@colors-map-marker-map, {
 // rating-5
 each(@colors-rating-map, {
   .bg-@{key} {
-    color: @color-white !important;
+    color: var(--color-white) !important;
     background-color: @value !important;
   }
   .hover-bg-@{key}:hover {
@@ -107,7 +107,7 @@ each(@colors-rating-map, {
 // status-working
 each(@colors-driving-status-map, {
   .bg-@{key} {
-    color: @color-white !important;
+    color: var(--color-white) !important;
     background-color: @value !important;
   }
   .hover-bg-@{key}:hover {
@@ -128,7 +128,7 @@ each(@colors-driving-status-map, {
 // highlight-decent
 each(@colors-highlight-map, {
   .bg-@{key} {
-    color: @gray-darkest !important;
+    color: var(--gray-darkest) !important;
     background-color: @value !important;
   }
   .hover-bg-@{key}:hover {
@@ -141,7 +141,7 @@ each(@colors-highlight-map, {
 .bg-highlight,
 .bg-highlight-dark,
 .bg-highlight-darker,
-.bg-highlight-darkest { color: @color-white !important }
+.bg-highlight-darkest { color: var(--color-white) !important }
 
 // coldplay-wine
 // coldplay-aubergine
@@ -155,7 +155,7 @@ each(@colors-highlight-map, {
 & when (@buildColdplayColors = true) {
   each(@colors-coldplay-map, {
     .bg-@{key} {
-      color: @gray-darkest !important;
+      color: var(--gray-darkest) !important;
       background-color: @value !important;
     }
     .hover-bg-@{key}:hover {
@@ -168,7 +168,7 @@ each(@colors-highlight-map, {
   .bg-coldplay-wine,
   .bg-coldplay-aubergine,
   .bg-coldplay-kashmir,
-  .bg-coldplay-fountain { color: @color-white !important }
+  .bg-coldplay-fountain { color: var(--color-white) !important }
 }
 
 // warmup-crimson
@@ -183,7 +183,7 @@ each(@colors-highlight-map, {
 & when (@buildWarmupColors = true) {
   each(@colors-warmup-map, {
     .bg-@{key} {
-      color: @gray-darkest !important;
+      color: var(--gray-darkest) !important;
       background-color: @value !important;
     }
     .hover-bg-@{key}:hover {
@@ -198,5 +198,5 @@ each(@colors-highlight-map, {
   .bg-warmup-cadillac,
   .bg-warmup-raspberry,
   .bg-warmup-cerise,
-  .bg-warmup-charm { color: @color-white !important }
+  .bg-warmup-charm { color: var(--color-white) !important }
 }

package/lib/es/styles/design/form-input-groups.less

@@ -1,4 +1,4 @@
-@input-group-addon-bg: @color-white;
+@input-group-addon-bg: var(--color-white);
 @input-group-addon-border-color: @input-border;
 
 .input-group {
@@ -32,7 +32,7 @@
     align-items: center;
     background-color: @input-group-addon-bg;
     border: 1px solid @input-group-addon-border-color;
-    color: @gray-dark;
+    color: var(--gray-dark);
     display: flex;
     justify-content: center;
     width: auto;
@@ -47,7 +47,7 @@
 
     &.input-group-addon-label {
       text-transform: uppercase;
-      background-color: @gray-lightest;
+      background-color: var(--gray-lightest);
     }
 
     &:first-child {
@@ -107,7 +107,7 @@
     }
 
     > .rioglyph {
-      color: lighten(@gray-dark, 5%);
+      color: .hslb(@gray-dark-hsl, '+', '5%')[@result];
       font-size: 18px;
     }
   }

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

@@ -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.
   //