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

package/styles/design/callouts.less

@@ -1,7 +1,7 @@
 .callout {
-  background-color: @color-white;
+  background-color: var(--color-white);
   border-radius: @border-radius-default;
-  border: 1px solid @gray-light;
+  border: 1px solid var(--gray-light);
   padding: 20px 20px 20px 25px;
 
   p:last-child {
@@ -16,7 +16,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, {

package/styles/design/code.less

@@ -1,5 +1,3 @@
-@code-bg: #f3f3f4;
-
 code,
 pre {
   font-family: @font-family-monospace;
@@ -7,8 +5,8 @@ pre {
 }
 
 code {
-  background-color: @code-bg;
-  color: @color-warmup-raspberry;
+  background-color: var(--color-code);
+  color: var(--brand-secondary);
   font-size: 80%;
   margin-left: 1px;
   margin-right: 1px;
@@ -29,8 +27,8 @@ code {
 }
 
 pre {
-  background-color: @code-bg;
-  color: @gray-dark;
+  background-color: var(--color-code);
+  color: var(--gray-dark);
   display: block;
   margin: 0;
   padding: 5px 10px;

package/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/styles/design/fonts.less

@@ -164,141 +164,141 @@
 
 // SCANIA FONT
 & when (@font-scania = true) {
-  @fontSCANIA: 'https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0';
+  @fontSCANIA: 'cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0';
 
   @font-face {
     font-family: 'Scania Sans';
     font-weight: bold;
     unicode-range: U+0400-04FF;
-    src: url('@{fontSCANIA}/cyrillic/ScaniaSansCY-Bold.woff') format('woff')
+    src: url('https://@{fontSCANIA}/cyrillic/ScaniaSansCY-Bold.woff') format('woff')
   }
 
   @font-face {
     font-family: 'Scania Sans';
     font-style: italic;
     unicode-range: U+0400-04FF;
-    src: url('@{fontSCANIA}/cyrillic/ScaniaSansCY-Italic.woff') format('woff')
+    src: url('https://@{fontSCANIA}/cyrillic/ScaniaSansCY-Italic.woff') format('woff')
   }
 
   @font-face {
     font-family: 'Scania Sans';
     unicode-range: U+0400-04FF;
-    src: url('@{fontSCANIA}/cyrillic/ScaniaSansCY-Regular.woff') format('woff')
+    src: url('https://@{fontSCANIA}/cyrillic/ScaniaSansCY-Regular.woff') format('woff')
   }
 
   @font-face {
     font-family: 'Scania Sans Condensed';
     font-weight: bold;
     unicode-range: U+0400-04FF;
-    src: url('@{fontSCANIA}/cyrillic/ScaniaSansCYCondensed-Bold.woff') format('woff')
+    src: url('https://@{fontSCANIA}/cyrillic/ScaniaSansCYCondensed-Bold.woff') format('woff')
   }
 
   @font-face {
     font-family: 'Scania Sans Condensed';
     font-style: italic;
     unicode-range: U+0400-04FF;
-    src: url('@{fontSCANIA}/cyrillic/ScaniaSansCYCondensed-Italic.woff') format('woff')
+    src: url('https://@{fontSCANIA}/cyrillic/ScaniaSansCYCondensed-Italic.woff') format('woff')
   }
 
   @font-face {
     font-family: 'Scania Sans Condensed';
     unicode-range: U+0400-04FF;
-    src: url('@{fontSCANIA}/cyrillic/ScaniaSansCYCondensed-Regular.woff') format('woff')
+    src: url('https://@{fontSCANIA}/cyrillic/ScaniaSansCYCondensed-Regular.woff') format('woff')
   }
 
   @font-face {
     font-family: 'Scania Sans Headline';
     font-weight: bold;
     unicode-range: U+0400-04FF;
-    src: url('@{fontSCANIA}/cyrillic/ScaniaSansCYHeadline-Bold.woff') format('woff')
+    src: url('https://@{fontSCANIA}/cyrillic/ScaniaSansCYHeadline-Bold.woff') format('woff')
   }
 
   @font-face {
     font-family: 'Scania Sans Headline';
     unicode-range: U+0400-04FF;
-    src: url('@{fontSCANIA}/cyrillic/ScaniaSansCYHeadline-Regular.woff') format('woff')
+    src: url('https://@{fontSCANIA}/cyrillic/ScaniaSansCYHeadline-Regular.woff') format('woff')
   }
 
   @font-face {
     font-family: 'Scania Sans Semi Condensed';
     font-weight: bold;
     unicode-range: U+0400-04FF;
-    src: url('@{fontSCANIA}/cyrillic/ScaniaSansCYSemiCondensed-Bold.woff') format('woff')
+    src: url('https://@{fontSCANIA}/cyrillic/ScaniaSansCYSemiCondensed-Bold.woff') format('woff')
   }
 
   @font-face {
     font-family: 'Scania Sans Semi Condensed';
     font-style: italic;
     unicode-range: U+0400-04FF;
-    src: url('@{fontSCANIA}/cyrillic/ScaniaSansCYSemiCondensed-Italic.woff') format('woff')
+    src: url('https://@{fontSCANIA}/cyrillic/ScaniaSansCYSemiCondensed-Italic.woff') format('woff')
   }
 
   @font-face {
     font-family: 'Scania Sans Semi Condensed';
     unicode-range: U+0400-04FF;
-    src: url('@{fontSCANIA}/cyrillic/ScaniaSansCYSemiCondensed-Regular.woff') format('woff')
+    src: url('https://@{fontSCANIA}/cyrillic/ScaniaSansCYSemiCondensed-Regular.woff') format('woff')
   }
 
   @font-face {
     font-family: 'Scania Sans';
     font-weight: bold;
-    src: url('@{fontSCANIA}/latin/ScaniaSans-Bold.woff') format('woff')
+    src: url('https://@{fontSCANIA}/latin/ScaniaSans-Bold.woff') format('woff')
   }
 
   @font-face {
     font-family: 'Scania Sans';
     font-style: italic;
-    src: url('@{fontSCANIA}/latin/ScaniaSans-Italic.woff') format('woff')
+    src: url('https://@{fontSCANIA}/latin/ScaniaSans-Italic.woff') format('woff')
   }
 
   @font-face {
     font-family: 'Scania Sans';
-    src: url('@{fontSCANIA}/latin/ScaniaSans-Regular.woff') format('woff')
+    src: url('https://@{fontSCANIA}/latin/ScaniaSans-Regular.woff') format('woff')
   }
 
   @font-face {
     font-family: 'Scania Sans Condensed';
     font-weight: bold;
-    src: url('@{fontSCANIA}/latin/ScaniaSansCondensed-Bold.woff') format('woff')
+    src: url('https://@{fontSCANIA}/latin/ScaniaSansCondensed-Bold.woff') format('woff')
   }
 
   @font-face {
     font-family: 'Scania Sans Condensed';
     font-style: italic;
-    src: url('@{fontSCANIA}/latin/ScaniaSansCondensed-Italic.woff') format('woff')
+    src: url('https://@{fontSCANIA}/latin/ScaniaSansCondensed-Italic.woff') format('woff')
   }
 
   @font-face {
     font-family: 'Scania Sans Condensed';
-    src: url('@{fontSCANIA}/latin/ScaniaSansCondensed-Regular.woff') format('woff')
+    src: url('https://@{fontSCANIA}/latin/ScaniaSansCondensed-Regular.woff') format('woff')
   }
 
   @font-face {
     font-family: 'Scania Sans Headline';
     font-weight: bold;
-    src: url('@{fontSCANIA}/latin/ScaniaSansHeadline-Bold.woff') format('woff')
+    src: url('https://@{fontSCANIA}/latin/ScaniaSansHeadline-Bold.woff') format('woff')
   }
 
   @font-face {
     font-family: 'Scania Sans Headline';
-    src: url('@{fontSCANIA}/latin/ScaniaSansHeadline-Regular.woff') format('woff')
+    src: url('https://@{fontSCANIA}/latin/ScaniaSansHeadline-Regular.woff') format('woff')
   }
 
   @font-face {
     font-family: 'Scania Sans Semi Condensed';
     font-weight: bold;
-    src: url('@{fontSCANIA}/latin/ScaniaSansSemiCondensed-Bold.woff') format('woff')
+    src: url('https://@{fontSCANIA}/latin/ScaniaSansSemiCondensed-Bold.woff') format('woff')
   }
 
   @font-face {
     font-family: 'Scania Sans Semi Condensed';
     font-style: italic;
-    src: url('@{fontSCANIA}/latin/ScaniaSansSemiCondensed-Italic.woff') format('woff')
+    src: url('https://@{fontSCANIA}/latin/ScaniaSansSemiCondensed-Italic.woff') format('woff')
   }
 
   @font-face {
     font-family: 'Scania Sans Semi Condensed';
-    src: url('@{fontSCANIA}/latin/ScaniaSansSemiCondensed-Regular.woff') format('woff')
+    src: url('https://@{fontSCANIA}/latin/ScaniaSansSemiCondensed-Regular.woff') format('woff')
   }
 }
 

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