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

package/lib/styles/rio-uikit-core.less

@@ -0,0 +1,114 @@
+// Variables
+@import (less) './variables.less';
+
+// Mixins
+@import (less) './mixins/_mixins.less';
+
+// Normalize
+@import (less) './design/normalize.less';
+
+// Styles // right order is important
+@import (less) './design/code.less';
+@import (less) './design/cols.less';
+@import (less) './design/tables.less';
+@import (less) './design/form-inputs.less';
+@import (less) './design/form-input-groups.less';
+@import (less) './design/buttons.less';
+@import (less) './design/images.less';
+@import (less) './design/caret.less';
+@import (less) './design/button-groups.less';
+@import (less) './design/navs.less';
+@import (less) './design/breadcrumbs.less';
+@import (less) './design/pagination.less';
+@import (less) './design/labels.less';
+@import (less) './design/badges.less';
+@import (less) './design/thumbnails.less';
+@import (less) './design/alerts.less';
+@import (less) './design/progress-bars.less';
+@import (less) './design/list-group.less';
+@import (less) './design/panels.less';
+@import (less) './design/responsive-embed.less';
+@import (less) './design/wells.less';
+@import (less) './design/close.less';
+@import (less) './design/type.less';
+@import (less) './design/popovers.less';
+@import (less) './design/utilities.less';
+@import (less) './design/blockquote.less';
+@import (less) './design/callouts.less';
+@import (less) './design/container.less';
+@import (less) './design/iframe.less';
+@import (less) './design/responsive-video.less';
+@import (less) './design/aspect-ratio.less';
+@import (less) './design/colors.less';
+@import (less) './design/border.less';
+@import (less) './design/cursors.less';
+@import (less) './design/custom.less';
+@import (less) './design/ellipsis.less';
+@import (less) './design/flexgrid.less';
+@import (less) './design/opacity.less';
+@import (less) './design/overflow.less';
+@import (less) './design/position.less';
+@import (less) './design/rounded.less';
+@import (less) './design/sizing.less';
+@import (less) './design/shadows.less';
+@import (less) './design/text.less';
+@import (less) './design/visibility.less';
+@import (less) './design/z-index.less';
+
+// Theme
+@import (less) './design/theme.less';
+
+// Fonts
+@import (less) './design/rioglyph.less';
+@import (less) './design/fonts.less';
+
+// Animations
+@import (less) './animations/_imports.less';
+
+// Filter
+@import (less) './filter/_imports.less';
+
+// Print
+@import (less) './print/print.less';
+
+// Component styles
+@import (less) './components/Activity.less';
+@import (less) './components/ApplicationLayout.less';
+@import (less) './components/ApplicationHeader.less';
+@import (less) './components/AssetTree.less';
+@import (less) './components/AutoSuggest.less';
+@import (less) './components/BottomSheet.less';
+@import (less) './components/Carousel.less';
+@import (less) './components/Checkbox.less';
+@import (less) './components/ClearableInput.less';
+@import (less) './components/Counter.less';
+@import (less) './components/DataTabs.less';
+@import (less) './components/DatePicker.less';
+@import (less) './components/Dialog.less';
+@import (less) './components/Dropdown.less';
+@import (less) './components/Expander.less';
+@import (less) './components/FilePicker.less';
+@import (less) './components/ListMenu.less';
+@import (less) './components/MapSettings.less';
+@import (less) './components/MapHere.less';
+@import (less) './components/MapMarker.less';
+@import (less) './components/NoData.less';
+@import (less) './components/Notification.less';
+@import (less) './components/RadioButton.less';
+@import (less) './components/Resizer.less';
+@import (less) './components/Select.less';
+@import (less) './components/Sidebar.less';
+@import (less) './components/Slider.less';
+@import (less) './components/Spinner.less';
+@import (less) './components/StatsWidget.less';
+@import (less) './components/SteppedProgressBar.less';
+@import (less) './components/SupportMarker.less';
+@import (less) './components/Switch.less';
+@import (less) './components/TableSortArrows.less';
+@import (less) './components/TableSettingsDialog.less';
+@import (less) './components/TableToolbar.less';
+@import (less) './components/Tag.less';
+@import (less) './components/TagManager.less';
+@import (less) './components/Teaser.less';
+@import (less) './components/Tooltip.less';
+@import (less) './components/Timeline.less';

package/lib/styles/rio-uikit-print-utilities.less

@@ -0,0 +1,16 @@
+// Styles
+@import (less) './variables.less';
+@import (less) './mixins/_mixins.less';
+
+// Utility Classes
+@import (less) './design/responsive/_imports.less';
+.import-reponsive(
+  @default: false;
+  @xs: false;
+  @ls: false;
+  @sm: false;
+  @md: false;
+  @lg: false;
+  @xl: false;
+  @print: true;
+);

package/lib/styles/rio-uikit-responsive-utilities.less

@@ -0,0 +1,16 @@
+// Styles
+@import (less) './variables.less';
+@import (less) './mixins/_mixins.less';
+
+// Utility Classes
+@import (less) './design/responsive/_imports.less';
+.import-reponsive(
+  @default: false;
+  @xs: true;
+  @ls: true;
+  @sm: true;
+  @md: true;
+  @lg: true;
+  @xl: true;
+  @print: false;
+);

package/lib/styles/shared/colors.json

@@ -0,0 +1,56 @@
+{
+	"color-white": "#ffffff",
+	"color-black": "#000000",
+	"gray-darkest": "#2a3740",
+	"gray-darker": "#4C5667",
+	"gray-dark": "#697A8B",
+	"gray": "#A7AFBB",
+	"gray-light": "#D0D8DE",
+	"gray-lighter": "#E5EBF0",
+	"gray-lightest": "#f6f8f9",
+	"brand-primary": "#30b4c0",
+	"brand-secondary": "#b23672",
+	"brand-info": "#4B80A6",
+	"brand-success": "#5cb85c",
+	"brand-warning": "#ff8e3c",
+	"brand-danger": "#d90000",
+	"color-status-available": "#239b7d",
+	"color-status-driving": "#3690ae",
+	"color-status-resting": "#626b72",
+	"color-status-working": "#94488b",
+	"color-map-marker-asset": "#2a3740",
+	"color-map-marker-poi": "#b23672",
+	"color-map-marker-geofence": "#5a4876",
+	"color-map-marker-route": "#3690ae",
+	"color-rating-1": "#d90000",
+	"color-rating-2": "#ff8e3c",
+	"color-rating-3": "#f8c575",
+	"color-rating-4": "#5cb85c",
+	"color-rating-5": "#4b924c",
+	"color-highlight-darkest": "#114146",
+	"color-highlight-darker": "#1c686e",
+	"color-highlight-dark": "#268e97",
+	"color-highlight": "#30b4c0",
+	"color-highlight-light": "#8ddbe3",
+	"color-highlight-lighter": "#cef0f3",
+	"color-highlight-lightest": "#ebf9fa",
+	"color-highlight-decent": "#f3fbfc",
+	"color-coldplay-wine": "#520D4E",
+	"color-coldplay-aubergine": "#5a4876",
+	"color-coldplay-kashmir": "#536E8B",
+	"color-coldplay-fountain": "#67abc5",
+	"color-coldplay-turquoise": "#4ECCC1",
+	"color-coldplay-bermuda": "#79D4B3",
+	"color-coldplay-moos": "#A1DAA3",
+	"color-coldplay-primrose": "#C7E291",
+	"color-coldplay-khaki": "#F0EB83",
+	"color-warmup-crimson": "#31144F",
+	"color-warmup-victoria": "#493D6D",
+	"color-warmup-cadillac": "#7E3E72",
+	"color-warmup-raspberry": "#B23672",
+	"color-warmup-cerise": "#E72472",
+	"color-warmup-charm": "#C9778D",
+	"color-warmup-salmon": "#F19588",
+	"color-warmup-cherokee": "#F5BB89",
+	"color-warmup-corn": "#FDE082"
+}

package/lib/styles/shared/colors.less

@@ -0,0 +1,73 @@
+// Color - Text
+@color-white: #ffffff;
+@color-black: #000000;
+
+// Color - Grays
+@gray-darkest: #2a3740;
+@gray-darker: #4C5667;
+@gray-dark: #697A8B;
+@gray: #A7AFBB;
+@gray-light: #D0D8DE;
+@gray-lighter: #E5EBF0;
+@gray-lightest: #f6f8f9;
+
+// Color - Brand
+@brand-primary: #30b4c0;
+@brand-secondary: #b23672;
+
+// Color - Status
+@brand-info: #4B80A6;
+@brand-success: #5cb85c;
+@brand-warning: #ff8e3c;
+@brand-danger: #d90000;
+
+// Color - Driving Status
+@color-status-available: #239b7d;
+@color-status-driving: #3690ae;
+@color-status-resting: #626b72;
+@color-status-working: #94488b;
+
+// Color - Map Marker
+@color-map-marker-asset: #2a3740;
+@color-map-marker-poi: #b23672;
+@color-map-marker-geofence: #5a4876;
+@color-map-marker-route: #3690ae;
+
+// Color - Rating
+@color-rating-1: #d90000;
+@color-rating-2: #ff8e3c;
+@color-rating-3: #f8c575;
+@color-rating-4: #5cb85c;
+@color-rating-5: #4b924c;
+
+// 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%);
+@color-highlight: #30b4c0; //@brand-primary;
+@color-highlight-light: #8ddbe3; //lighten(@brand-primary, 25%);
+@color-highlight-lighter: #cef0f3; //lighten(@brand-primary, 41%);
+@color-highlight-lightest: #ebf9fa; //lighten(@brand-primary, 48%);
+@color-highlight-decent: #f3fbfc; //lighten(@brand-primary, 50%);
+
+// Color - RIO Coldplay
+@color-coldplay-wine:#520D4E;
+@color-coldplay-aubergine: #5a4876;
+@color-coldplay-kashmir:#536E8B;
+@color-coldplay-fountain: #67abc5;
+@color-coldplay-turquoise: #4ECCC1;
+@color-coldplay-bermuda: #79D4B3;
+@color-coldplay-moos: #A1DAA3;
+@color-coldplay-primrose: #C7E291;
+@color-coldplay-khaki: #F0EB83;
+
+// Color - RIO Warmup
+@color-warmup-crimson: #31144F;
+@color-warmup-victoria: #493D6D;
+@color-warmup-cadillac: #7E3E72;
+@color-warmup-raspberry: #B23672;
+@color-warmup-cerise: #E72472;
+@color-warmup-charm: #C9778D;
+@color-warmup-salmon: #F19588;
+@color-warmup-cherokee: #F5BB89;
+@color-warmup-corn: #FDE082;

package/lib/styles/shared/screens.less

@@ -0,0 +1,7 @@
+// Screens - Breakpoints
+@screen-xs: 480px; // BS usecase (0 - 480px)
+@screen-ls: 480px; 
+@screen-sm: 768px;
+@screen-md: 992px;
+@screen-lg: 1200px;
+@screen-xl: 1700px;

package/lib/styles/shared/text.less

@@ -0,0 +1,23 @@
+// Fonts - Font Weights
+@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;
+@font-size-18: 18px;
+@font-size-20: 20px;
+
+// Fonts - Headlines - Sizes
+@font-size-h1: 40px;
+@font-size-h2: 30px;
+@font-size-h3: 26px;
+@font-size-h4: 22px;
+@font-size-h5: 18px;
+@font-size-h6: 14px;

package/lib/styles/variables.less

@@ -0,0 +1,180 @@
+// 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;
+@font-scania: 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-height-without-border: @navbar-height - 1;
+@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-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/themes/BuyButton/styles/rio-buyButton.less

@@ -0,0 +1,183 @@
+// Variables
+@import (less) '../../../styles/variables.less';
+
+// Mapping
+@import (less) '../../../styles/mapping/breakpoint-map.less';
+@import (less) '../../../styles/mapping/color-map.less';
+
+// Mixins
+@import (less) '../../../styles/mixins/_mixins.less';
+
+// Normalize
+@import (less) '../../../styles/design/normalize.less';
+
+// Styles
+@import (less) '../../../styles/design/buttons.less';
+@import (less) '../../../styles/design/labels.less';
+@import (less) '../../../styles/design/visibility.less';
+
+// Fonts
+@font-source-sans: true;
+@import (less) '../../../styles/design/fonts.less';
+
+// RIOglyph Iconfont
+@import (less) '../../../styles/design/rioglyph.less';
+
+// Components
+@import (less) '../../../styles/design/theme.less';
+
+// Utilities
+@import (less) '../../../styles/design/colors.less';
+@import (less) '../../../styles/design/text.less';
+
+// Screens - Breakpoints
+@screen-xs: 300px;
+@screen-ls: 300px;
+
+@suffix: ~'';
+@import (multiple) "../../../styles/design/responsive/display.less";
+@import (multiple) "../../../styles/design/responsive/flexgrid.less";
+@import (multiple) "../../../styles/design/responsive/text.less";
+
+// Custom Styles
+
+.hidden-xs {
+  @media (max-width: @screen-xs) {
+    display: none !important;
+  }
+}
+
+.label {
+  padding: 6px 10px;
+}
+
+.height-20 {
+  height: 20px;
+}
+
+.margin-left-3 {
+  margin-left: 3px;
+}
+
+.padding-right-1 {
+  padding-right: 1px !important;
+}
+
+.overflow-hidden {
+  overflow: hidden !important;
+}
+
+.buyButton {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .btn:hover {
+    transform: none !important;
+    box-shadow: none !important;
+  }
+
+  .buyButtonPrice {
+    flex: 1 0;
+  }
+
+  // noPrice = button to right
+  .buyButtonLink {
+    &:first-child:last-child {
+      display: flex;
+      justify-content: flex-end;
+      width: 100%;
+
+      // notResponsive = btn 100% width
+      > a.btn:first-child:last-child {
+        display: flex;
+        width: 100%;
+      }
+    }
+  }
+}
+
+.skeleton-box {
+  display: flex;
+  justify-content: space-between;
+
+  .skeleton-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 200px;
+    max-width: 35%;
+
+    .skeleton-loader {
+      &:first-child {
+        height: 9px;
+      }
+
+      &:last-child {
+        height: 17px;
+      }
+    }
+  }
+
+  .skeleton-button {
+    width: 200px;
+    max-width: 35%;
+
+    .skeleton-loader {
+      height: 34px;
+    }
+  }
+
+  &.noButtonText {
+    .skeleton-button {
+      width: 34px;
+    }
+  }
+
+  &.noPrice {
+    .skeleton-text {
+      display: none;
+    }
+
+    .skeleton-button {
+      max-width: none;
+      width: 100%;
+    }
+
+    &.noButtonText {
+      .skeleton-button {
+        width: 100%;
+      }
+    }
+  }
+
+  .skeleton-loader {
+    position: relative;
+    width: 100%;
+    background-color: #EDEDED;
+  }
+
+  .skeleton-bar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    background-image: linear-gradient(
+      90deg,
+      rgba(#fff, 0) 0,
+      rgba(#fff, 0.2) 20%,
+      rgba(#fff, 0.5) 60%,
+      rgba(#fff, 0)
+    );
+    animation: shimmer 2s infinite;
+    content: '';
+  }
+
+  @keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+}