@rio-cloud/rio-uikit 0.15.0 → 0.16.0-beta-2

package/lib/style/css/rio-theme/forms.less

@@ -53,6 +53,10 @@ label .checkbox-text {
 }
 
 .form-group {
+  &:first-child:last-child {
+    margin-bottom: 0;
+  }
+
   label:not(.checkbox),
   label:not(.radio) {
     .default-label(@font-size-12);
@@ -96,11 +100,33 @@ label .checkbox-text {
     }
   }
 
+  .form-control-feedback {
+    border-radius: 1000px;
+    display: block;
+    pointer-events: none;
+    position: absolute;
+    right:3px;
+    text-align: center;
+    top: 3px;
+    width: @input-height-base - 3;
+  }
+
   // feedback
   &.has-feedback {
+
+    // Reposition feedback icon if input has visible label above
+    label {
+      & ~ .form-control-feedback {
+        top: 27px;
+      }
+
+      &.sr-only ~ .form-control-feedback {
+        top: 0;
+      }
+    }
+
     .form-control {
       padding-right: @input-height-base;
-      //border-bottom-right-radius: 0;
     }
 
     .form-control-feedback-wrapper {
@@ -113,45 +139,48 @@ label .checkbox-text {
 
     .form-control-feedback {
       font-size: 16px;
-      line-height: @input-height-base;
+      line-height: @input-height-base - 6;
     }
 
     // small
     &.form-group-sm .form-control,
     .input-sm {
       padding-right: @input-height-small;
-
-      ~ .form-control-feedback {
-        font-size: 16px;
-        line-height: @input-height-small;
-      }
     }
 
-    &.form-group-sm label ~ .form-control-feedback,
-    label ~ .input-sm ~ .form-control-feedback {
-      top: 24px;
+    &.form-group-sm .form-control-feedback,
+    .input-sm + .form-control-feedback {
+      font-size: 16px;
+      line-height: @input-height-small - 6;
     }
 
+    // &.form-group-sm label ~ .form-control-feedback,
+    // label ~ .input-sm ~ .form-control-feedback {
+    //   top: 26px;
+    // }
+
     // large
     &.form-group-lg .form-control,
     .input-lg {
       padding-right: @input-height-large;
-
-      ~ .form-control-feedback {
-        font-size: 22px;
-        line-height: @input-height-large;
-      }
     }
 
-    &.form-group-lg label ~ .form-control-feedback,
-    label ~ .input-lg ~ .form-control-feedback {
-      top: 25px;
+    &.form-group-lg .form-control-feedback,
+    .input-lg + .form-control-feedback {
+      font-size: 22px;
+      line-height: @input-height-large - 6;
     }
 
+    // &.form-group-lg label ~ .form-control-feedback,
+    // label ~ .input-lg ~ .form-control-feedback {
+    //   top: 26px;
+    // }
+
     .help-block {
+      border-radius: @border-radius-small;
       font-size: @font-size-small;
-      margin: 0;
-      padding: 5px 10px;
+      margin: 1px 0 0 0;
+      padding: 2px 5px;
       position: absolute;
       right: 0;
       transition: color 0.2s ease ~"," background 0.2s ease;

package/lib/style/css/rio-theme/input-groups.less

@@ -9,13 +9,18 @@
   position: relative;
   align-items: center;
 
-  .form-control {
+
+  .form-control, .form-control-feedback-wrapper {
     z-index: 0;
     width: 0;
     display: block;
     flex: 1 1 auto;
   }
 
+  .form-control-feedback-wrapper .form-control {
+    width: 100%;
+  }
+
   .input-group-addon {
     .input-size(
       @input-height-base;
@@ -39,16 +44,23 @@
       }
     }
 
+    &.input-group-addon-label {
+      text-transform: uppercase;
+      background-color: @gray-lightest;
+    }
+
     &:first-child {
-      background-color: transparent;
-      border: none;
-      top: 0;
-      left: 0;
-      padding: 0;
-      position: absolute;
-      text-align: center;
-      width: 32px;
-      z-index: 4;
+      &:not(.input-group-addon-label) {
+        background-color: transparent;
+        border: none;
+        left: 0;
+        padding: 0;
+        position: absolute;
+        text-align: center;
+        top: 0;
+        width: 32px;
+        z-index: 4;
+      }
     }
 
     &:last-child {
@@ -62,30 +74,37 @@
       );
       border-right: none;
       box-shadow: 1px 0 0 0 @input-border;
-      padding-left: 0 !important;
       position: relative;
-      transform: translateX(-1px);
       transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
 
-      .form-group.has-error & {
-        box-shadow: 1px 0 0 0 @brand-danger;
-      }
+      &:not(.input-group-addon-label) {
+        padding-left: 0 !important;
+        transform: translateX(-1px);
 
-      .form-group.has-warning & {
-        box-shadow: 1px 0 0 0 @brand-warning;
-      }
+        .form-group.has-error & {
+          box-shadow: 1px 0 0 0 @brand-danger;
+        }
 
-      .form-group.has-success & {
-        box-shadow: 1px 0 0 0 @brand-success;
-      }
+        .form-group.has-warning & {
+          box-shadow: 1px 0 0 0 @brand-warning;
+        }
+
+        .form-group.has-success & {
+          box-shadow: 1px 0 0 0 @brand-success;
+        }
 
-      .form-group.has-feedback & {
-        background: @input-bg;
+        .form-group.has-feedback & {
+          background: @input-bg;
+        }
       }
+
+
     }
 
-    + .form-control {
-      padding-left: 30px;
+    &:not(.input-group-addon-label) {
+      + .form-control, + .form-control-feedback-wrapper .form-control {
+        padding-left: 30px;
+      }
     }
 
     > .rioglyph {

package/lib/style/css/rio-theme/mixins/alerts.less

@@ -1 +1,13 @@
-@import "../../bootstrap/mixins/alerts.less";
+.alert-variant(@color; @background-opacity) {
+  background-color: lighten(@color, @background-opacity);
+  border-color: @color;
+  color: @color;
+
+  .alert-link {
+    color: @color;
+  }
+
+  > .close .rioglyph {
+    color: @color;
+  }
+}

package/lib/style/css/rio-theme/variables.less

@@ -29,6 +29,7 @@
 @border-radius-small: 2px;
 @border-radius-base: 4px;
 @border-radius-large: 6px;
+@border-radius-extra-large: 8px;
 
 // Colors
 @component-active-bg: @brand-primary;

package/lib/style/css/shared/colors.json

@@ -10,10 +10,10 @@
 	"gray-lightest": "#f6f8f9",
 	"brand-primary": "#30b4c0",
 	"brand-secondary": "#b23672",
+	"brand-info": "#4B80A6",
 	"brand-success": "#5cb85c",
 	"brand-warning": "#ff8e3c",
 	"brand-danger": "#d90000",
-	"brand-info": "#4B80A6",
 	"color-status-available": "#239b7d",
 	"color-status-driving": "#3690ae",
 	"color-status-resting": "#626b72",

package/lib/style/css/shared/colors.less

@@ -1,3 +1,4 @@
+// Color - Text
 @color-white: #ffffff;
 @color-black: #000000;
 
@@ -10,15 +11,17 @@
 @gray-lighter: #E5EBF0;
 @gray-lightest: #f6f8f9;
 
-// Color - Brand Colors
+// Color - Brand
 @brand-primary: #30b4c0;
 @brand-secondary: #b23672;
+
+// Color - Status
+@brand-info: #4B80A6;
 @brand-success: #5cb85c;
 @brand-warning: #ff8e3c;
 @brand-danger: #d90000;
-@brand-info: #4B80A6;
 
-// Color - Driver Status
+// Color - Driving Status
 @color-status-available: #239b7d;
 @color-status-driving: #3690ae;
 @color-status-resting: #626b72;
@@ -30,14 +33,14 @@
 @color-map-marker-geofence: #5a4876;
 @color-map-marker-route: #3690ae;
 
-// Color - Rating Status
+// Color - Rating
 @color-rating-1: #d90000;
 @color-rating-2: #ff8e3c;
 @color-rating-3: #f8c575;
 @color-rating-4: #5cb85c;
 @color-rating-5: #4b924c;
 
-// Color - Custom highlight colors
+// Color - Highlight
 @color-highlight-darkest: #114146; //darken(@brand-primary, 30%);
 @color-highlight-darker: #1c686e; //darken(@brand-primary, 20%);
 @color-highlight-dark: #268e97; //darken(@brand-primary, 10%);
@@ -47,7 +50,7 @@
 @color-highlight-lightest: #ebf9fa; //lighten(@brand-primary, 48%);
 @color-highlight-decent: #f3fbfc; //lighten(@brand-primary, 50%);
 
-// Color - Coldplay
+// Color - RIO Coldplay
 @color-coldplay-wine:#520D4E;
 @color-coldplay-aubergine: #5a4876;
 @color-coldplay-kashmir:#536E8B;
@@ -58,7 +61,7 @@
 @color-coldplay-primrose: #C7E291;
 @color-coldplay-khaki: #F0EB83;
 
-// Color - Warmup
+// Color - RIO Warmup
 @color-warmup-crimson: #31144F;
 @color-warmup-victoria: #493D6D;
 @color-warmup-cadillac: #7E3E72;
@@ -67,4 +70,4 @@
 @color-warmup-charm: #C9778D;
 @color-warmup-salmon: #F19588;
 @color-warmup-cherokee: #F5BB89;
-@color-warmup-corn: #FDE082;
+@color-warmup-corn: #FDE082;

package/lib/style/css/shared/text.less

@@ -1,12 +1,13 @@
 // Fonts - Font Weights
-@text-thin: 200;
-@text-light: 300;
-@text-normal: 400;
-@text-medium: 600;
-@text-bold: 700;
+@font-thin: 200;
+@font-light: 300;
+@font-normal: 400;
+@font-medium: 600;
+@font-bold: 700;
 
 // Fonts - Font Sizes
 @font-size-10: 10px;
+@font-size-11: 11px;
 @font-size-12: 12px;
 @font-size-14: 14px;
 @font-size-16: 16px;

package/lib/style/css/utils/responsive/grid.less

@@ -1,6 +1,15 @@
-/* Grid - Basics */
-.grid-template-columns-2@{suffix} { grid-template-columns: repeat(2, auto) !important }
-.grid-template-columns-3@{suffix} { grid-template-columns: repeat(3, auto) !important }
-.grid-template-columns-4@{suffix} { grid-template-columns: repeat(4, auto) !important }
-.grid-template-columns-5@{suffix} { grid-template-columns: repeat(5, auto) !important }
-.grid-template-columns-6@{suffix} { grid-template-columns: repeat(6, auto) !important }
+/* Grid */
+.grid-cols-1@{suffix} { grid-template-columns: repeat(1, minmax(0, 1fr)) !important }
+.grid-cols-2@{suffix} { grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
+.grid-cols-3@{suffix} { grid-template-columns: repeat(3, minmax(0, 1fr)) !important }
+.grid-cols-4@{suffix} { grid-template-columns: repeat(4, minmax(0, 1fr)) !important }
+.grid-cols-5@{suffix} { grid-template-columns: repeat(5, minmax(0, 1fr)) !important }
+.grid-cols-6@{suffix} { grid-template-columns: repeat(6, minmax(0, 1fr)) !important }
+.grid-cols-7@{suffix} { grid-template-columns: repeat(7, minmax(0, 1fr)) !important }
+.grid-cols-8@{suffix} { grid-template-columns: repeat(8, minmax(0, 1fr)) !important }
+.grid-cols-9@{suffix} { grid-template-columns: repeat(9, minmax(0, 1fr)) !important }
+.grid-cols-10@{suffix} { grid-template-columns: repeat(10, minmax(0, 1fr)) !important }
+.grid-cols-11@{suffix} { grid-template-columns: repeat(11, minmax(0, 1fr)) !important }
+.grid-cols-12@{suffix} { grid-template-columns: repeat(12, minmax(0, 1fr)) !important }
+
+.grid-cols-none@{suffix} { grid-template-columns: none !important }

package/lib/style/css/utils/rounded.less

@@ -3,6 +3,7 @@
 
     &-small { border-radius: @border-radius-small !important }
     &-large { border-radius: @border-radius-large !important }
+    &-extra-large { border-radius: @border-radius-extra-large !important }
     &-none { border-radius: 0 !important }
 }
 

package/lib/style/css/variables.less

@@ -0,0 +1,179 @@
+// RIO cdn
+@cdnBase: "https://cdn.rio.cloud";
+@fontBase: "fonts";
+
+// Grid
+@grid-columns: 12;
+@grid-gutter-width: 20px;
+@grid-gutter-height: 20px;
+@grid-float-breakpoint: @screen-sm;
+
+// Mapping // must match with the UIKIT demo values
+@import (less) 'mapping/breakpoint-map.less';
+@import (less) 'mapping/color-map.less';
+@import (less) 'mapping/cols-map.less';
+@import (less) 'mapping/numbers-map.less';
+@import (less) 'mapping/positions-map.less';
+@import (less) 'mapping/sizes-map.less';
+@import (less) 'mapping/spacings-map.less';
+
+// Screens
+@import (less) "shared/screens.less";
+
+@screen-xs-min: @screen-xs;
+@screen-xs-max: (@screen-ls - 0.01);
+@screen-ls-min: @screen-ls;
+@screen-ls-max: (@screen-sm - 0.01);
+@screen-sm-min: @screen-sm;
+@screen-sm-max: (@screen-md - 0.01);
+@screen-md-min: @screen-md;
+@screen-md-max: (@screen-lg - 0.01);
+@screen-lg-min: @screen-lg;
+@screen-lg-max: (@screen-xl - 0.01);
+@screen-xl-min: @screen-xl;
+@screen-xl-max: 10000px;
+
+// Container
+@container-ls: @screen-ls - (@grid-gutter-width * 2);
+@container-sm: @screen-sm - (@grid-gutter-width * 2);
+@container-md: @screen-md - (@grid-gutter-width * 2);
+@container-lg: @screen-lg - (@grid-gutter-width * 2);
+@container-xl: @screen-xl - (@grid-gutter-width * 2);
+
+// Container Fluid
+// @container-fluid-xs: px;
+@container-fluid-sm: 980px;
+@container-fluid-md: 1280px;
+@container-fluid-lg: 1440px;
+@container-fluid-xl: 1680px;
+@container-fluid-xxl: 1920px;
+
+// Padding
+@padding-xs-vertical: 1px;
+@padding-xs-horizontal: 5px;
+@padding-sm-vertical: 5px;
+@padding-sm-horizontal: 10px;
+@padding-default-vertical: 6px;
+@padding-default-horizontal: 12px;
+@padding-lg-vertical: 10px;
+@padding-lg-horizontal: 16px;
+
+// Border Radius
+@border-radius-xs: 2px;
+@border-radius-sm: 3px;
+@border-radius-default: 4px;
+@border-radius-lg: 6px;
+@border-radius-xl: 8px;
+@border-radius-round: 1000px;
+
+// Colors
+@import (less) "shared/colors.less";
+
+// Build Warmup and Coldplay Colors?
+@buildColdplayColors: true;
+@buildWarmupColors: true;
+
+// Color - Brand Decent
+@brand-primary-decent: #f4fbfc;
+@brand-secondary-decent: #fbf5f8;
+
+// Color - Status Decent
+@brand-info-decent: #f5f8fb;
+@brand-success-decent: #f6fbf5;
+@brand-warning-decent: #fdf5f0;
+@brand-danger-decent: #fdf3f3;
+
+// Button Sizes
+@btn-size-xs: 22px;
+@btn-size-sm: 30px;
+@btn-size-default: 34px;
+@btn-size-lg: 45px;
+
+// Text
+@import (less) "shared/text.less";
+
+// Text - Sizes
+@font-size-xs: @font-size-12; // only used in buttons and 10px is too small
+@font-size-sm: @font-size-12;
+@font-size-default: @font-size-14;
+@font-size-lg: @font-size-16;
+@font-size-xl: 25px;
+@font-size-xxl: 30px;
+
+// Text - Headlines - Weights
+@headings-font-family: @font-family-base;
+@headings-font-weight: @font-medium;
+@headings-line-height: 1.1;
+@headings-color: inherit;
+
+// Text - Line Heights
+@line-height-xs: 1.5;
+@line-height-sm: 1.5;
+@line-height-default: 1.428571429;
+@line-height-lg: 1.4;
+
+// Text - Font Family
+@font-family-base: 'Source Sans Pro', Helvetica, Arial, sans-serif;
+@font-family-monospace: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
+@font-family-ios: 'SF Text', 'Source Sans Pro', Helvetica, Arial, sans-serif;
+@font-family-android: 'Roboto', 'Source Sans Pro', Helvetica, Arial, sans-serif;
+
+@font-source-sans: true;
+@font-man: false;
+@font-redring: false;
+@font-san-francisco: false;
+@font-roboto: false;
+@font-vw: false;
+
+// Iconfont
+@icon-font-name: "rioglyph";
+
+// Variables
+@text-color: @gray-darkest;
+@link-color: @brand-primary;
+@link-hover-color: darken(@brand-primary, 10%);
+
+// Media Queries
+@screen-xs-min: @screen-xs;
+@screen-sm-min: @screen-sm;
+@screen-md-min: @screen-md;
+@screen-lg-min: @screen-lg;
+
+// ApplicationLayout
+@ApplicationLayoutBodyPadding: 30px;
+@ApplicationLayoutNotResponsiveWidth: 900px;
+
+@ApplicationLayoutBodyHeight: 100vh; // --vh fallback
+@ApplicationLayoutBodyHeightAndViewportFix: ~'calc(var(--vh, 1vh) * 100)';
+
+@ApplicationLayoutBodyHeightWithoutHeader: ~'calc(100vh - @{navbar-height})'; // --vh fallback
+@ApplicationLayoutBodyHeightWithoutHeaderAndViewportFix: ~'calc(var(--vh, 1vh) * 100 - @{navbar-height})';
+
+@ApplicationLayoutBodyHeightWithoutFooter: ~'calc(100vh - (@{footer-height}))'; // --vh fallback
+@ApplicationLayoutBodyHeightWithoutFooterAndViewportFix: ~'calc(var(--vh, 1vh) * 100 - (@{footer-height}))';
+
+@ApplicationLayoutBodyHeightWithoutHeaderWithoutFooter: ~'calc(100vh - (@{navbar-height} + @{footer-height}))'; // --vh fallback
+@ApplicationLayoutBodyHeightWithoutHeaderWithoutFooterAndViewportFix: ~'calc(var(--vh, 1vh) * 100 - (@{navbar-height} + @{footer-height}))';
+
+// ApplicationHeader
+@navbar-height: 50px;
+@navbar-brand-home-icon: url('https://cdn.rio.cloud/svg/common/ico_home.svg');
+@navbar-brand-icon: url('https://cdn.rio.cloud/svg/common/ico_rio_colored.svg');
+@navbar-height-without-border: @navbar-height - 1;
+@navbar-padding-horizontal: @grid-gutter-width;
+@navbar-padding-vertical: 15px;
+
+// ApplicationFooter
+@footer-height: @btn-size-lg + 9px;
+
+// Z-index
+@zindex-tooltip: 1060;
+@zindex-modal: 1050;
+@zindex-modal-background: 1040;
+@zindex-popover: 1010;
+@zindex-navbar: 1000;
+@zindex-dropdown: 1000;
+@zindex-sidebar: 990;
+@zindex-tooltip-onboarding: 990;
+@zindex-map-marker-hover: 801;
+@zindex-map-marker-active: 800;

package/lib/style/fonts/rioglyph/rioglyph.less

@@ -2,7 +2,7 @@
 
 @font-face {
 	font-family: "rioglyph";
-	src: url("rioglyph.woff?42f54bea5465197e01760c2a6ef8fc1d") format("woff");
+	src: url("rioglyph.woff?4f89ef51d7bec2188389c1c1ee44ac59") format("woff");
     font-weight: normal;
     font-style: normal;
 }
@@ -24,16 +24,6 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.rioglyph.spinning:before {
-  display: inline-block;
-  animation: spinning 1s linear infinite;
-}
-
-@keyframes spinning {
-  from { transform: rotate(0deg) }
-  to   { transform: rotate(359deg) }
-}
-
 @rioglyph-addressbook: "\f16b";
 .rioglyph-addressbook:before,
 .hover-rioglyph-addressbook:hover:before {