@rio-cloud/rio-uikit 0.16.1-beta-9 → 0.16.1-beta-10

package/lib/styles/design/visibility.less

@@ -0,0 +1,186 @@
+.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;
+    }
+  }
+}
+
+// visible only
+
+@media (min-width: @screen-ls-min) {
+  .visible-xs {
+    // "-ls" because UIKIT xs and UIKIT ls are the same
+    // but the website.css uses -ls as the mobile breakpoint
+    display: none !important;
+  }
+}
+
+.visible-ls {
+  @media (max-width: @screen-xs-max) {
+    display: none !important;
+  }
+
+  @media (min-width: @screen-sm-min) {
+    display: none !important;
+  }
+}
+
+.visible-sm {
+  @media (max-width: @screen-ls-max) {
+    display: none !important;
+  }
+
+  @media (min-width: @screen-md-min) {
+    display: none !important;
+  }
+}
+
+.visible-md {
+  @media (max-width: @screen-sm-max) {
+    display: none !important;
+  }
+
+  @media (min-width: @screen-lg-min) {
+    display: none !important;
+  }
+}
+
+.visible-lg {
+  @media (max-width: @screen-md-max) {
+    display: none !important;
+  }
+
+  @media (min-width: @screen-xl-min) {
+    display: none !important;
+  }
+}
+
+.visible-xl {
+  @media (max-width: @screen-xl-min) {
+    display: none !important;
+  }
+}
+
+// hidden only
+
+.hidden-xs {
+  // "-ls" because UIKIT xs and UIKIT ls are the same
+  // but the website.css uses -ls as the mobile breakpoint
+  @media (max-width: @screen-ls) {
+    display: none !important;
+  }
+}
+
+.hidden-ls {
+  @media (min-width: @screen-ls-min) and (max-width: @screen-ls-max) {
+    display: none !important;
+  }
+}
+
+.hidden-sm {
+  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+    display: none !important;
+  }
+}
+
+.hidden-md {
+  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+    display: none !important;
+  }
+}
+
+.hidden-lg {
+  @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
+    display: none !important;
+  }
+}
+
+.hidden-xl {
+  @media (min-width: @screen-xl) {
+    display: none !important;
+  }
+}
+
+// visible from
+
+.visible-min-ls {
+  @media (max-width: @screen-sm-min) {
+    display: none !important;
+  }
+}
+
+.visible-min-sm {
+  @media (max-width: @screen-md-min) {
+    display: none !important;
+  }
+}
+
+.visible-min-md {
+  @media (max-width: @screen-lg-min) {
+    display: none !important;
+  }
+}
+
+.visible-min-lg {
+  @media (max-width: @screen-xl-min) {
+    display: none !important;
+  }
+}
+
+// hidden from
+
+.hidden-min-ls {
+  @media (min-width: @screen-ls-min) {
+    display: none !important;
+  }
+}
+
+.hidden-min-sm {
+  @media (min-width: @screen-sm-min) {
+    display: none !important;
+  }
+}
+
+.hidden-min-md {
+  @media (min-width: @screen-md-min) {
+    display: none !important;
+  }
+}
+
+.hidden-min-lg {
+  @media (min-width: @screen-lg-min) {
+    display: none !important;
+  }
+}

package/lib/styles/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/styles/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/styles/filter/_imports.less

@@ -0,0 +1 @@
+@import (less) "blur.less";

package/lib/styles/filter/blur.less

@@ -0,0 +1,17 @@
+.blur {
+    &-0 { filter: blur(0) }
+    &-1 { filter: blur(1px) }
+    &-2 { filter: blur(2px) }
+    &-3 { filter: blur(3px) }
+    &-4 { filter: blur(4px) }
+    &-5 { filter: blur(5px) }
+    &-6 { filter: blur(6px) }
+    &-7 { filter: blur(7px) }
+    &-8 { filter: blur(8px) }
+    &-9 { filter: blur(9px) }
+    &-10 { filter: blur(10px) }
+    &-20 { filter: blur(20px) }
+    &-30 { filter: blur(30px) }
+    &-40 { filter: blur(40px) }
+    &-50 { filter: blur(50px) }
+}

package/lib/styles/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/styles/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/styles/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/styles/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/styles/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/styles/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/styles/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/styles/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';