@rio-cloud/rio-uikit 0.15.1 → 0.16.0-beta-3

package/lib/style/css/design/visibilty.less

@@ -0,0 +1,38 @@
+.show {
+  display: block !important;
+  opacity: 1;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+.hidden, .hide {
+  display: none !important;
+}
+
+html .hidden-empty:empty {
+  display: none !important;
+}
+
+.hidden-print {
+  @media print {
+    display: none !important;
+  }
+}
+
+.visible-print {
+  display: none !important;
+
+  @media print {
+    display: block !important;
+  }
+
+  &-inline {
+    display: none !important;
+
+    @media print {
+      display: inline !important;
+    }
+  }
+}

package/lib/style/css/design/wells.less

@@ -0,0 +1,17 @@
+.well {
+  background-color: @color-white;
+  border-radius: @border-radius-default;
+  margin-bottom: 20px;
+  min-height: 20px;
+  padding: 20px;
+
+  &-sm {
+    padding: 10px;
+    border-radius: @border-radius-sm;
+  }
+
+  &-lg {
+    padding: 30px;
+    border-radius: @border-radius-lg;
+  }
+}

package/lib/style/css/design/z-index.less

@@ -0,0 +1,21 @@
+.z-index {
+  &-1 { z-index: 1 !important }
+  &-2 { z-index: 2 !important }
+  &-3 { z-index: 3 !important }
+  &-4 { z-index: 4 !important }
+  &-5 { z-index: 5 !important }
+  &-6 { z-index: 6 !important }
+  &-7 { z-index: 7 !important }
+  &-8 { z-index: 8 !important }
+  &-9 { z-index: 9 !important }
+  &-10 { z-index: 10 !important }
+  &-max { z-index: 2147483647 !important }
+}
+
+.hover-z-index {
+  &-1:hover { z-index: 1 !important }
+  &-2:hover { z-index: 2 !important }
+  &-3:hover { z-index: 3 !important }
+  &-4:hover { z-index: 4 !important }
+  &-5:hover { z-index: 5 !important }
+}

package/lib/style/css/mapping/breakpoint-map.less

@@ -0,0 +1,44 @@
+// These values must always be kept in sync with those of the demo page
+// uikit-demo/src/utils/breakpoint.js
+
+@breakpoint-xs-to-xl: {
+  xs: @screen-xs;
+  ls: @screen-ls;
+  sm: @screen-sm;
+  md: @screen-md;
+  lg: @screen-lg;
+  xl: @screen-xl;
+}
+
+@breakpoint-ls-to-xl: {
+  ls: @screen-ls;
+  sm: @screen-sm;
+  md: @screen-md;
+  lg: @screen-lg;
+  xl: @screen-xl;
+}
+
+@container-sm-to-xxl: {
+  sm: @container-fluid-sm;
+  md: @container-fluid-md;
+  lg: @container-fluid-lg;
+  xl: @container-fluid-xl;
+  xxl: @container-fluid-xxl;
+}
+
+@container-sm-to-xxl-classes: {
+  sm: fluid-small;
+  md: fluid-default;
+  lg: fluid-large;
+  xl: fluid-extra-large;
+  xxl: fluid-ultra-large;
+}
+
+// BS Fallback old container behavior
+@container-ls-to-xl: {
+  ls: @container-ls;
+  sm: @container-sm;
+  md: @container-md;
+  lg: @container-lg;
+  xl: @container-xl;
+}

package/lib/style/css/mapping/color-map.less

@@ -0,0 +1,200 @@
+// These values must always be kept in sync with those of the demo page
+// uikit-demo/src/utils/colors.js
+
+// Color Map - Text
+// black
+// white
+@colors-text-map: {
+  black: @color-black;
+  white: @color-white;
+}
+
+// Color Map - Gray
+// darkest
+// darker
+// dark
+// gray
+// light
+// lighter
+// lightest
+@colors-gray-map: {
+  darkest: @gray-darkest;
+  darker: @gray-darker;
+  dark: @gray-dark;
+  gray: @gray;
+  light: @gray-light;
+  lighter: @gray-lighter;
+  lightest: @gray-lightest;
+}
+
+// Color Map - Brand
+// primary
+// secondary
+@colors-brand-map: {
+  primary: @brand-primary;
+  secondary: @brand-secondary;
+}
+
+// Color Map - Brand Decent
+@colors-brand-decent-map: {
+  primary: @brand-primary-decent;
+  secondary: @brand-secondary-decent;
+}
+
+// Color Map - Status
+// info
+// success
+// warning
+// danger
+@colors-status-map: {
+  info: @brand-info;
+  success: @brand-success;
+  warning: @brand-warning;
+  danger: @brand-danger;
+}
+
+// Color Map - Status Decent
+@colors-status-decent-map: {
+  info: @brand-info-decent;
+  success: @brand-success-decent;
+  warning: @brand-warning-decent;
+  danger: @brand-danger-decent;
+}
+
+// Color Map - Brand & Status
+// SASS has a map-merge function, LESS unfortunately not...
+// primary
+// secondary
+// info
+// success
+// warning
+// danger
+@colors-brand-and-status-map: {
+  primary: @brand-primary;
+  secondary: @brand-secondary;
+  info: @brand-info;
+  success: @brand-success;
+  warning: @brand-warning;
+  danger: @brand-danger;
+}
+
+// Color Map - Brand & Status Decent
+// SASS has a map-merge function, LESS unfortunately not...
+@colors-brand-and-status-decent-map: {
+  primary: @brand-primary-decent;
+  secondary: @brand-secondary-decent;
+  info: @brand-info-decent;
+  success: @brand-success-decent;
+  warning: @brand-warning-decent;
+  danger: @brand-danger-decent;
+}
+
+// Color Map - Forms
+// Danger = Error // BS Fuckup
+@colors-forms-map: {
+  success: @brand-success;
+  warning: @brand-warning;
+  error: @brand-danger;
+}
+
+// Color Map - Driving Status
+// status-available
+// status-driving
+// status-resting
+// status-working
+@colors-driving-status-map: {
+  status-available: @color-status-available;
+  status-driving: @color-status-driving;
+  status-resting: @color-status-resting;
+  status-working: @color-status-working;
+}
+
+// Color Map - Map Marker
+// map-marker-asset
+// map-marker-poi
+// map-marker-geofence
+// map-marker-route
+@colors-map-marker-map: {
+  map-marker-asset: @color-map-marker-asset;
+  map-marker-poi: @color-map-marker-poi;
+  map-marker-geofence: @color-map-marker-geofence;
+  map-marker-route: @color-map-marker-route;
+}
+
+// Color Map - Rating
+// rating-1
+// rating-2
+// rating-3
+// rating-4
+// rating-5
+@colors-rating-map: {
+  rating-1: @color-rating-1;
+  rating-2: @color-rating-2;
+  rating-3: @color-rating-3;
+  rating-4: @color-rating-4;
+  rating-5: @color-rating-5;
+}
+
+// Color Map - Highlight
+// highlight-darkest
+// highlight-darker
+// highlight-dark
+// highlight
+// highlight-light
+// highlight-lighter
+// highlight-lightest
+// highlight-decent
+@colors-highlight-map: {
+  highlight-darkest: @color-highlight-darkest;
+  highlight-darker: @color-highlight-darker;
+  highlight-dark: @color-highlight-dark;
+  highlight: @color-highlight;
+  highlight-light: @color-highlight-light;
+  highlight-lighter: @color-highlight-lighter;
+  highlight-lightest: @color-highlight-lightest;
+  highlight-decent: @color-highlight-decent;
+}
+
+// Color Map - RIO Coldplay
+// coldplay-wine
+// coldplay-aubergine
+// coldplay-kashmir
+// coldplay-fountain
+// coldplay-turquoise
+// coldplay-bermuda
+// coldplay-moos
+// coldplay-primrose
+// coldplay-khaki
+@colors-coldplay-map: {
+  coldplay-wine: @color-coldplay-wine;
+  coldplay-aubergine: @color-coldplay-aubergine;
+  coldplay-kashmir: @color-coldplay-kashmir;
+  coldplay-fountain: @color-coldplay-fountain;
+  coldplay-turquoise: @color-coldplay-turquoise;
+  coldplay-bermuda: @color-coldplay-bermuda;
+  coldplay-moos: @color-coldplay-moos;
+  coldplay-primrose: @color-coldplay-primrose;
+  coldplay-khaki: @color-coldplay-khaki;
+}
+
+// Color Map - RIO Warmup
+// warmup-crimson
+// warmup-victoria
+// warmup-cadillac
+// warmup-raspberry
+// warmup-cerise
+// warmup-charm
+// warmup-salmon
+// warmup-cherokee
+// warmup-corn
+@colors-warmup-map: {
+  warmup-crimson: @color-warmup-crimson;
+  warmup-victoria: @color-warmup-victoria;
+  warmup-cadillac: @color-warmup-cadillac;
+  warmup-raspberry: @color-warmup-raspberry;
+  warmup-cerise: @color-warmup-cerise;
+  warmup-charm: @color-warmup-charm;
+  warmup-salmon: @color-warmup-salmon;
+  warmup-cherokee: @color-warmup-cherokee;
+  warmup-corn: @color-warmup-corn;
+}

package/lib/style/css/mapping/cols-map.less

@@ -0,0 +1,15 @@
+@gridColumns: {
+  1: 1;
+  1: 1;
+  2: 2;
+  3: 3;
+  4: 4;
+  5: 5;
+  6: 6;
+  7: 7;
+  8: 8;
+  9: 9;
+  10: 10;
+  11: 11;
+  12: 12;
+}

package/lib/style/css/mapping/numbers-map.less

@@ -0,0 +1,16 @@
+// These values must always be kept in sync with those of the demo page
+// uikit-demo/src/utils/numbers.js
+
+@numbers_from_0_to_100: {
+  0: 0;
+  10: 10;
+  20: 20;
+  30: 30;
+  40: 40;
+  50: 50;
+  60: 60;
+  70: 70;
+  80: 80;
+  90: 90;
+  100: 100;
+}

package/lib/style/css/mapping/positions-map.less

@@ -0,0 +1,21 @@
+// These values must always be kept in sync with those of the demo page
+// uikit-demo/src/utils/positions.js
+
+@positions-px: {
+  1: 1px;
+  2: 2px;
+  3: 3px;
+  4: 4px;
+  5: 5px;
+  10: 10px;
+  15: 15px;
+  20: 20px;
+  25: 25px;
+}
+
+@positions-pct: {
+  25pct: 25%;
+  50pct: 50%;
+  75pct: 75%;
+  100pct: 100%;
+}

package/lib/style/css/mapping/sizes-map.less

@@ -0,0 +1,129 @@
+// These values must always be kept in sync with those of the demo page
+// uikit-demo/src/utils/sizes.js
+
+@sizes-px: {
+  1: 1px;
+  2: 2px;
+  3: 3px;
+  4: 4px;
+  5: 5px;
+  10: 10px;
+  15: 15px;
+  20: 20px;
+  25: 25px;
+  30: 30px;
+  35: 35px;
+  40: 40px;
+  45: 45px;
+  50: 50px;
+  60: 60px;
+  70: 70px;
+  80: 80px;
+  90: 90px;
+  100: 100px;
+  150: 150px;
+  200: 200px;
+  250: 250px;
+  300: 300px;
+  350: 350px;
+  400: 400px;
+  450: 450px;
+  500: 500px;
+  600: 600px;
+  700: 700px;
+  800: 800px;
+  900: 900px;
+  1000: 1000px;
+}
+
+@sizes-px-1-to-100: {
+  1: 1px;
+  2: 2px;
+  3: 3px;
+  4: 4px;
+  5: 5px;
+  10: 10px;
+  15: 15px;
+  20: 20px;
+  25: 25px;
+  30: 30px;
+  35: 35px;
+  40: 40px;
+  45: 45px;
+  50: 50px;
+  60: 60px;
+  70: 70px;
+  80: 80px;
+  90: 90px;
+  100: 100px;
+}
+
+@sizes-px-50-to-500: {
+  50: 50px;
+  60: 60px;
+  70: 70px;
+  80: 80px;
+  90: 90px;
+  100: 100px;
+  150: 150px;
+  200: 200px;
+  250: 250px;
+  300: 300px;
+  350: 350px;
+  400: 400px;
+  450: 450px;
+  500: 500px;
+}
+
+@sizes-px-50-to-1000: {
+  50: 50px;
+  60: 60px;
+  70: 70px;
+  80: 80px;
+  90: 90px;
+  100: 100px;
+  150: 150px;
+  200: 200px;
+  250: 250px;
+  300: 300px;
+  350: 350px;
+  400: 400px;
+  450: 450px;
+  500: 500px;
+  600: 600px;
+  700: 700px;
+  800: 800px;
+  900: 900px;
+  1000: 1000px;
+}
+
+@sizes-pct: {
+  10pct: 10%;
+  20pct: 20%;
+  25pct: 25%;
+  30pct: 30%;
+  33pct: 33.33%;
+  40pct: 40%;
+  50pct: 50%;
+  60pct: 60%;
+  66pct: 66.66%;
+  70pct: 70%;
+  75pct: 75%;
+  80pct: 80%;
+  90pct: 90%;
+  100pct: 100%;
+}
+
+@sizes-vw: {
+  25vw: 25vw;
+  50vw: 50vw;
+  75vw: 75vw;
+  100vw: 100vw;
+}
+
+@sizes-vh: {
+  25vh: 25vh;
+  50vh: 50vh;
+  75vh: 75vh;
+  100vh: 100vh;
+}

package/lib/style/css/mapping/spacings-map.less

@@ -0,0 +1,28 @@
+// These values must always be kept in sync with those of the demo page
+// uikit-demo/src/utils/spacings.js
+
+@spacings-px: {
+  1: 1px;
+  2: 2px;
+  3: 3px;
+  4: 4px;
+  5: 5px;
+  10: 10px;
+  15: 15px;
+  20: 20px;
+  25: 25px;
+  50: 50px;
+}
+
+@spacings-pct: {
+  1pct: 1%;
+  2pct: 2%;
+  3pct: 3%;
+  4pct: 4%;
+  5pct: 5%;
+  10pct: 10%;
+  15pct: 15%;
+  20pct: 20%;
+  25pct: 25%;
+  50pct: 50%;
+}

package/lib/style/css/mixins/_mixins.less

@@ -0,0 +1,13 @@
+@import (less) 'border-radius.less';
+@import (less) 'buttons.less';
+@import (less) 'clearfix.less';
+@import (less) 'cols.less';
+@import (less) 'forms.less';
+@import (less) 'panels.less';
+@import (less) 'placeholder.less';
+@import (less) 'reset.less';
+@import (less) 'sizings.less';
+@import (less) 'spinner.less';
+@import (less) 'tabs.less';
+@import (less) 'table.less';
+@import (less) 'text.less';

package/lib/style/css/mixins/alerts.less

@@ -0,0 +1,13 @@
+.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/mixins/border-radius.less

@@ -0,0 +1,16 @@
+.border-top-radius(@radius) {
+  border-top-right-radius: @radius !important;
+  border-top-left-radius: @radius !important;
+}
+.border-right-radius(@radius) {
+  border-bottom-right-radius: @radius !important;
+  border-top-right-radius: @radius !important;
+}
+.border-bottom-radius(@radius) {
+  border-bottom-right-radius: @radius !important;
+  border-bottom-left-radius: @radius !important;
+}
+.border-left-radius(@radius) {
+  border-bottom-left-radius: @radius !important;
+  border-top-left-radius: @radius !important;
+}

package/lib/style/css/mixins/buttons.less

@@ -0,0 +1,117 @@
+.button-variant(
+      @important: ~'';
+      @background;
+      @border;
+      @color;
+      @hover-background: darken(@background, 10%);
+      @active-background: darken(@background, 10%);
+      @focus-background: darken(@background, 5%);
+      @active-hover-background: darken(@background, 17%);
+      @hover-border: darken(@border, 12%);
+      @active-border: darken(@border, 12%);
+      @focus-border: @border;
+      @active-hover-border: darken(@border, 25%);
+      @hover-color: @color;
+      @active-color: @color;
+      @focus-color: @color;
+      @active-hover-color: @color;
+    )
+  {
+  color: @color @important;
+  background-color: @background @important;
+  border: 1px solid @border @important;
+
+  &:focus,
+  &.focus {
+    background-color: @focus-background @important;
+    border-color: @focus-border @important;
+    color: @focus-color @important;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: @hover-background @important;
+      border-color: @hover-border @important;
+      color: @hover-color @important;
+    }
+  }
+
+  &:active,
+  &.active,
+  .open > .dropdown-toggle& {
+    background-color: @active-background @important;
+    border-color: @active-border @important;
+    color: @active-color @important;
+
+    @media (hover: hover) {
+      &:hover,
+      &:focus,
+      &.focus {
+        background-color: @active-hover-background @important;
+        border-color: @active-hover-border @important;
+        color: @active-hover-color @important;
+      }
+    }
+  }
+
+  &:active,
+  &.active,
+  .open > .dropdown-toggle& {
+    background-image: none @important;
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &:hover,
+    &:focus,
+    &.focus {
+      background-color: @background @important;
+      border-color: @border @important;
+    }
+  }
+
+  .badge {
+    color: @background @important;
+    background-color: @color @important;
+  }
+}
+
+.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
+  border-radius: @border-radius;
+  font-size: @font-size;
+  line-height: @line-height;
+  padding: @padding-vertical @padding-horizontal;
+}
+
+.rio-btn(@size, @suffix) {
+  .btn@{suffix} {
+    height: @size;
+
+    > .rioglyph {
+      font-size: @size * 0.5;
+      margin: 0 @size * 0.15 0 0;
+      top: auto;
+
+      &[class*='chevron-'] {
+        font-size: @size * 0.3;
+      }
+    }
+
+    &.btn-icon-right {
+      > .rioglyph {
+        margin: 0 0 0 5px;
+        order: 2;
+      }
+    }
+
+    &.btn-icon-only {
+      width: @size;
+
+      > .rioglyph {
+        font-size: @size * 0.6;
+        margin: 0;
+      }
+    }
+  }
+}

package/lib/style/css/mixins/clearfix.less

@@ -0,0 +1,9 @@
+.clearfix() {
+  &:after {
+    content: " ";
+    visibility: hidden;
+    display: block;
+    height: 0;
+    clear: both;
+  }
+}