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

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

@@ -0,0 +1,202 @@
+.bg-muted, .hover-bg-muted:hover { background-color: @gray-lighter !important }
+.bg-default, .hover-bg-default:hover { background-color: @gray-dark !important }
+
+// white
+// black
+.bg-white, .hover-bg-white:hover { background-color: @color-white !important }
+.fill-white { fill: @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 }
+
+
+// primary
+// secondary
+each(@colors-brand-map, {
+  .bg-@{key} {
+    color: @color-white !important;
+    background-color: @value !important;
+  }
+  .hover-bg-@{key}:hover {
+    background-color: @value !important;
+  }
+  .fill-@{key} {
+    fill: @value !important;
+  }
+})
+
+// info
+// success
+// warning
+// danger
+each(@colors-status-map, {
+  .bg-@{key} {
+    color: @color-white !important;
+    background-color: @value !important;
+  }
+  .hover-bg-@{key}:hover {
+    background-color: @value !important;
+  }
+  .fill-@{key} {
+    fill: @value !important;
+  }
+})
+
+// darkest
+// darker
+// dark
+// gray
+// light
+// lighter
+// lightest
+each(@colors-gray-map, {
+  .bg-@{key} {
+    color: @gray-darkest !important;
+    background-color: @value !important;
+  }
+  .hover-bg-@{key}:hover {
+    background-color: @value !important;
+  }
+  .fill-@{key} {
+    fill: @value !important;
+  }
+})
+.bg-dark,
+.bg-darker,
+.bg-darkest { color: @color-white !important }
+
+// map-marker-asset
+// map-marker-poi
+// map-marker-geofence
+// map-marker-route
+each(@colors-map-marker-map, {
+  .bg-@{key} {
+    color: @color-white !important;
+    background-color: @value !important;
+  }
+  .hover-bg-@{key}:hover {
+    background-color: @value !important;
+  }
+  .fill-@{key} {
+    fill: @value !important;
+  }
+})
+
+// rating-1
+// rating-2
+// rating-3
+// rating-4
+// rating-5
+each(@colors-rating-map, {
+  .bg-@{key} {
+    color: @color-white !important;
+    background-color: @value !important;
+  }
+  .hover-bg-@{key}:hover {
+    background-color: @value !important;
+  }
+  .fill-@{key} {
+    fill: @value !important;
+  }
+})
+
+// status-available
+// status-driving
+// status-resting
+// status-working
+each(@colors-driving-status-map, {
+  .bg-@{key} {
+    color: @color-white !important;
+    background-color: @value !important;
+  }
+  .hover-bg-@{key}:hover {
+    background-color: @value !important;
+  }
+  .fill-@{key} {
+    fill: @value !important;
+  }
+})
+
+// highlight-darkest
+// highlight-darker
+// highlight-dark
+// highlight
+// highlight-light
+// highlight-lighter
+// highlight-lightest
+// highlight-decent
+each(@colors-highlight-map, {
+  .bg-@{key} {
+    color: @gray-darkest !important;
+    background-color: @value !important;
+  }
+  .hover-bg-@{key}:hover {
+    background-color: @value !important;
+  }
+  .fill-@{key} {
+    fill: @value !important;
+  }
+})
+.bg-highlight,
+.bg-highlight-dark,
+.bg-highlight-darker,
+.bg-highlight-darkest { color: @color-white !important }
+
+// coldplay-wine
+// coldplay-aubergine
+// coldplay-kashmir
+// coldplay-fountain
+// coldplay-turquoise
+// coldplay-bermuda
+// coldplay-moos
+// coldplay-primrose
+// coldplay-khaki
+& when (@buildColdplayColors = true) {
+  each(@colors-coldplay-map, {
+    .bg-@{key} {
+      color: @gray-darkest !important;
+      background-color: @value !important;
+    }
+    .hover-bg-@{key}:hover {
+      background-color: @value !important;
+    }
+    .fill-@{key} {
+      fill: @value !important;
+    }
+  })
+  .bg-coldplay-wine,
+  .bg-coldplay-aubergine,
+  .bg-coldplay-kashmir,
+  .bg-coldplay-fountain { color: @color-white !important }
+}
+
+// warmup-crimson
+// warmup-victoria
+// warmup-cadillac
+// warmup-raspberry
+// warmup-cerise
+// warmup-charm
+// warmup-salmon
+// warmup-cherokee
+// warmup-corn
+& when (@buildWarmupColors = true) {
+  each(@colors-warmup-map, {
+    .bg-@{key} {
+      color: @gray-darkest !important;
+      background-color: @value !important;
+    }
+    .hover-bg-@{key}:hover {
+      background-color: @value !important;
+    }
+    .fill-@{key} {
+      fill: @value !important;
+    }
+  })
+  .bg-warmup-crimson,
+  .bg-warmup-victoria,
+  .bg-warmup-cadillac,
+  .bg-warmup-raspberry,
+  .bg-warmup-cerise,
+  .bg-warmup-charm { color: @color-white !important }
+}

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

@@ -0,0 +1,56 @@
+// Row
+.row {
+  margin-left:  ceil((@grid-gutter-width / -2));
+  margin-right: floor((@grid-gutter-width / -2));
+  &:extend(.clearfix all);
+
+  [class*="col-"] {
+    position: relative;
+    // Prevent columns from collapsing when empty
+    min-height: 1px;
+    // Inner gutter via padding
+    padding-left:  ceil((@grid-gutter-width / 2));
+    padding-right: floor((@grid-gutter-width / 2));
+    //
+    float: left;
+  }
+}
+
+// Columns
+.make-grid-columns();
+
+// col-
+.make-grid(~'-');
+.make-grid(~'-xs-'); // BS remains
+
+// col-sm
+// col-ls
+// col-md
+// col-lg
+// col-xl
+each(@breakpoint-ls-to-xl, {
+  @media (min-width: @value) {
+    .make-grid(~'-@{key}-');
+  }
+})
+
+.no-gutter {
+  margin-right: 0;
+  margin-left: 0;
+
+  > [class*='col-'] {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+/* Equal Height */
+.equal-height {
+  display: flex;
+  flex-wrap: wrap;
+
+  // for clearfix elements
+  &:after {
+    content: none
+  }
+}

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

@@ -0,0 +1,29 @@
+.container-fluid, // BS Fallback
+.container {
+  margin-right: auto;
+  margin-left: auto;
+  padding-left: floor((@grid-gutter-width / 2));
+  padding-right: ceil((@grid-gutter-width / 2));
+  max-width: 100%;
+  &:extend(.clearfix all);
+
+  // fluid-small
+  // fluid-default
+  // fluid-large
+  // fluid-extra-large
+  // fluid-ultra-large
+  each(@container-sm-to-xxl-classes, {
+    &.@{value} {
+      max-width: @container-sm-to-xxl[$@key];
+    }
+  });
+
+  // BS Fallback old container behavior
+  each(@container-ls-to-xl, {
+    &:not([class*="fluid"]) {
+      @media (min-width: @breakpoint-ls-to-xl[$@key]) {
+        width: @value;
+      }
+    }
+  })
+}

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

@@ -0,0 +1,19 @@
+/* Cursors */
+.cursor-default { cursor: default !important }
+.cursor-pointer { cursor: pointer !important }
+.cursor-text { cursor: text !important }
+.cursor-move { cursor: move !important }
+.cursor-row-resize { cursor: row-resize !important }
+.cursor-col-resize { cursor: col-resize !important }
+.cursor-not-allowed { cursor: not-allowed !important }
+.cursor-grabbing { cursor: grabbing !important; }
+.cursor-grab {
+    cursor: grab !important;
+
+    &:active {
+        cursor: grabbing !important;
+    }
+}
+
+.pointer-events-none  { pointer-events: none !important }
+.pointer-events-all  { pointer-events: all !important }

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

@@ -0,0 +1,20 @@
+/* Custom Colors */
+.bg-custom-a { background-color: var(--custom-color-a) !important };
+.text-color-custom-a { color: var(--custom-color-a) !important };
+.fill-custom-a { fill: var(--custom-color-a) !important };
+
+.bg-custom-b { background-color: var(--custom-color-b) !important };
+.text-color-custom-b { color: var(--custom-color-b) !important };
+.fill-custom-b { fill: var(--custom-color-b) !important };
+
+.bg-custom-c { background-color: var(--custom-color-c) !important };
+.text-color-custom-c { color: var(--custom-color-c) !important };
+.fill-custom-c { fill: var(--custom-color-c) !important };
+
+.bg-custom-d { background-color: var(--custom-color-d) !important };
+.text-color-custom-d { color: var(--custom-color-d) !important };
+.fill-custom-d { fill: var(--custom-color-d) !important };
+
+.bg-custom-e { background-color: var(--custom-color-e) !important };
+.text-color-custom-e { color: var(--custom-color-e) !important };
+.fill-custom-e { fill: var(--custom-color-e) !important };

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

@@ -0,0 +1,46 @@
+/* Text ellipsis */
+.ellipsis-multiline(@lh, @l) {
+  /* non-webkit */
+  max-height: @lh * @l;
+  /* webkit */
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: @l;
+  display: -webkit-box;
+  line-height: @lh;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ellipsis-1 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ellipsis-2 {
+  .ellipsis-multiline(@grid-gutter-height, 2);
+}
+.ellipsis-3 {
+  .ellipsis-multiline(@grid-gutter-height, 3);
+}
+.ellipsis-4 {
+  .ellipsis-multiline(@grid-gutter-height, 4);
+}
+.ellipsis-5 {
+  .ellipsis-multiline(@grid-gutter-height, 5);
+}
+.ellipsis-6 {
+  .ellipsis-multiline(@grid-gutter-height, 6);
+}
+.ellipsis-7 {
+  .ellipsis-multiline(@grid-gutter-height, 7);
+}
+.ellipsis-8 {
+  .ellipsis-multiline(@grid-gutter-height, 8);
+}
+.ellipsis-9 {
+  .ellipsis-multiline(@grid-gutter-height, 9);
+}
+.ellipsis-10 {
+  .ellipsis-multiline(@grid-gutter-height, 10);
+}

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

@@ -0,0 +1,7 @@
+// for clearfix elements
+.display-flex,
+.display-grid {
+  &:after {
+    content: none
+  }
+}

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

@@ -0,0 +1,318 @@
+// RIO FONT
+& when (@font-source-sans = true) {
+  @fontSourceSansPro: "source-sans-pro";
+
+  @font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: @font-thin;
+    src: url('@{cdnBase}/@{fontBase}/@{fontSourceSansPro}/source-sans-pro-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('@{cdnBase}/@{fontBase}/@{fontSourceSansPro}/source-sans-pro-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  @font-face {
+    font-family: 'Source Sans Pro';
+    font-style: italic;
+    font-weight: @font-thin;
+    src: url('@{cdnBase}/@{fontBase}/@{fontSourceSansPro}/source-sans-pro-200italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('@{cdnBase}/@{fontBase}/@{fontSourceSansPro}/source-sans-pro-200italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  @font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: @font-light;
+    src: url('@{cdnBase}/@{fontBase}/@{fontSourceSansPro}/source-sans-pro-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('@{cdnBase}/@{fontBase}/@{fontSourceSansPro}/source-sans-pro-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  @font-face {
+    font-family: 'Source Sans Pro';
+    font-style: italic;
+    font-weight: @font-light;
+    src: url('@{cdnBase}/@{fontBase}/@{fontSourceSansPro}/source-sans-pro-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('@{cdnBase}/@{fontBase}/@{fontSourceSansPro}/source-sans-pro-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  @font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: @font-normal;
+    src: url('@{cdnBase}/@{fontBase}/@{fontSourceSansPro}/source-sans-pro-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('@{cdnBase}/@{fontBase}/@{fontSourceSansPro}/source-sans-pro-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  @font-face {
+    font-family: 'Source Sans Pro';
+    font-style: italic;
+    font-weight: @font-normal;
+    src: url('@{cdnBase}/@{fontBase}/@{fontSourceSansPro}/source-sans-pro-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('@{cdnBase}/@{fontBase}/@{fontSourceSansPro}/source-sans-pro-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  @font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: @font-medium;
+    src: url('@{cdnBase}/@{fontBase}/@{fontSourceSansPro}/source-sans-pro-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('@{cdnBase}/@{fontBase}/@{fontSourceSansPro}/source-sans-pro-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  @font-face {
+    font-family: 'Source Sans Pro';
+    font-style: italic;
+    font-weight: @font-medium;
+    src: url('@{cdnBase}/@{fontBase}/@{fontSourceSansPro}/source-sans-pro-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('@{cdnBase}/@{fontBase}/@{fontSourceSansPro}/source-sans-pro-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  @font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: @font-bold;
+    src: url('@{cdnBase}/@{fontBase}/@{fontSourceSansPro}/source-sans-pro-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('@{cdnBase}/@{fontBase}/@{fontSourceSansPro}/source-sans-pro-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  @font-face {
+    font-family: 'Source Sans Pro';
+    font-style: italic;
+    font-weight: @font-bold;
+    src: url('@{cdnBase}/@{fontBase}/@{fontSourceSansPro}/source-sans-pro-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('@{cdnBase}/@{fontBase}/@{fontSourceSansPro}/source-sans-pro-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+}
+
+// MAN FONT
+& when (@font-man = true) {
+  @fontMan: "maneurope";
+
+  @font-face {
+    font-family: 'MANEuropeLight';
+    font-style: normal;
+    font-weight: @font-normal;
+    src: url('@{cdnBase}/@{fontBase}/@{fontMan}/maneurope-light.woff2') format('woff2'),
+      url('@{cdnBase}/@{fontBase}/@{fontMan}/maneurope-light.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: 'MANEuropeCondensed';
+    font-style: normal;
+    font-weight: @font-normal;
+    src: url('@{cdnBase}/@{fontBase}/@{fontMan}/maneuropecondensed-regular.woff2') format('woff2'),
+      url('@{cdnBase}/@{fontBase}/@{fontMan}/maneuropecondensed-regular.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: 'MANEuropeCondensed';
+    font-style: normal;
+    font-weight: @font-bold;
+    src: url('@{cdnBase}/@{fontBase}/@{fontMan}/maneuropecondensed-bold.woff2') format('woff2'),
+      url('@{cdnBase}/@{fontBase}/@{fontMan}/maneuropecondensed-bold.woff') format('woff');
+  }
+
+}
+
+// RedRing FONT
+& when (@font-redring = true) {
+  @fontRedRingBold: "red-ring-bold";
+
+  @font-face {
+    font-family: 'Red Ring Bold';
+    font-style: normal;
+    font-weight: 500;
+    src: url('@{cdnBase}/@{fontBase}/@{fontRedRingBold}/red-ring-bold.woff') format('woff');
+  }
+}
+
+// VW FONT
+& when (@font-vw = true) {
+  @fontVWAG: "VWAG_TheSans_Web";
+
+  @font-face {
+    font-family: 'VWAGTheSans';
+    font-style: normal;
+    font-weight: @font-light;
+    src: url('@{cdnBase}/@{fontBase}/@{fontVWAG}/VWAGTheSans-Light.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('@{cdnBase}/@{fontBase}/@{fontVWAG}/VWAGTheSans-Light.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  @font-face {
+    font-family: 'VWAGTheSans';
+    font-style: normal;
+    font-weight: @font-normal;
+    src: url('@{cdnBase}/@{fontBase}/@{fontVWAG}/VWAGTheSans-Regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('@{cdnBase}/@{fontBase}/@{fontVWAG}/VWAGTheSans-Regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  @font-face {
+    font-family: 'VWAGTheSans';
+    font-style: italic;
+    font-weight: @font-normal;
+    src: url('@{cdnBase}/@{fontBase}/@{fontVWAG}/VWAGTheSans-Italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('@{cdnBase}/@{fontBase}/@{fontVWAG}/VWAGTheSans-Italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  @font-face {
+    font-family: 'VWAGTheSans';
+    font-style: normal;
+    font-weight: @font-bold;
+    src: url('@{cdnBase}/@{fontBase}/@{fontVWAG}/VWAGTheSans-Bold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('@{cdnBase}/@{fontBase}/@{fontVWAG}/VWAGTheSans-Bold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+}
+
+// IOS FONT
+& when (@font-san-francisco = true) {
+  @fontIos: "sf-ui-text";
+
+  @font-face {
+    font-family: "SF Text";
+    font-weight: @font-thin;
+    src: url('@{cdnBase}/@{fontBase}/@{fontIos}/sf-Ultrathin.otf')
+  }
+
+  @font-face {
+    font-family: "SF Text";
+    font-weight: @font-thin;
+    font-style: italic;
+    src: url('@{cdnBase}/@{fontBase}/@{fontIos}/sf-UltrathinItalic.otf')
+  }
+
+  @font-face {
+    font-family: "SF Text";
+    font-weight: @font-light;
+    src: url('@{cdnBase}/@{fontBase}/@{fontIos}/sf-Light.otf')
+  }
+
+  @font-face {
+    font-family: "SF Text";
+    font-weight: @font-light;
+    font-style: italic;
+    src: url('@{cdnBase}/@{fontBase}/@{fontIos}/sf-LightItalic.otf')
+  }
+
+  @font-face {
+    font-family: "SF Text";
+    font-weight: @font-normal;
+    src: url('@{cdnBase}/@{fontBase}/@{fontIos}/sf-Regular.otf')
+  }
+
+  @font-face {
+    font-family: "SF Text";
+    font-weight: @font-normal;
+    font-style: italic;
+    src: url('@{cdnBase}/@{fontBase}/@{fontIos}/sf-RegularItalic.otf')
+  }
+
+  @font-face {
+    font-family: "SF Text";
+    font-weight: @font-medium;
+    src: url('@{cdnBase}/@{fontBase}/@{fontIos}/sf-Semibold.otf')
+  }
+
+  @font-face {
+    font-family: "SF Text";
+    font-weight: @font-medium;
+    font-style: italic;
+    src: url('@{cdnBase}/@{fontBase}/@{fontIos}/sf-SemiboldItalic.otf')
+  }
+
+  @font-face {
+    font-family: "SF Text";
+    font-weight: @font-bold;
+    src: url('@{cdnBase}/@{fontBase}/@{fontIos}/sf-Bold.otf')
+  }
+
+  @font-face {
+    font-family: "SF Text";
+    font-weight: @font-bold;
+    font-style: italic;
+    src: url('@{cdnBase}/@{fontBase}/@{fontIos}/sf-BoldItalic.otf')
+  }
+}
+
+// Android Font
+& when (@font-roboto = true) {
+  @fontAndroid: "roboto";
+
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: @font-thin;
+    src: url('@{cdnBase}/@{fontBase}/@{fontAndroid}/roboto-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('@{cdnBase}/@{fontBase}/@{fontAndroid}/roboto-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: @font-thin;
+    src: url('@{cdnBase}/@{fontBase}/@{fontAndroid}/roboto-100italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('@{cdnBase}/@{fontBase}/@{fontAndroid}/roboto-100italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: @font-light;
+    src: url('@{cdnBase}/@{fontBase}/@{fontAndroid}/roboto-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('@{cdnBase}/@{fontBase}/@{fontAndroid}/roboto-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: @font-light;
+    src: url('@{cdnBase}/@{fontBase}/@{fontAndroid}/roboto-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('@{cdnBase}/@{fontBase}/@{fontAndroid}/roboto-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: @font-normal;
+    src: url('@{cdnBase}/@{fontBase}/@{fontAndroid}/roboto-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('@{cdnBase}/@{fontBase}/@{fontAndroid}/roboto-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: @font-normal;
+    src: url('@{cdnBase}/@{fontBase}/@{fontAndroid}/roboto-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('@{cdnBase}/@{fontBase}/@{fontAndroid}/roboto-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: @font-medium;
+    src: url('@{cdnBase}/@{fontBase}/@{fontAndroid}/roboto-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('@{cdnBase}/@{fontBase}/@{fontAndroid}/roboto-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: @font-medium;
+    src: url('@{cdnBase}/@{fontBase}/@{fontAndroid}/roboto-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('@{cdnBase}/@{fontBase}/@{fontAndroid}/roboto-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: @font-bold;
+    src: url('@{cdnBase}/@{fontBase}/@{fontAndroid}/roboto-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('@{cdnBase}/@{fontBase}/@{fontAndroid}/roboto-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: @font-bold;
+    src: url('@{cdnBase}/@{fontBase}/@{fontAndroid}/roboto-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('@{cdnBase}/@{fontBase}/@{fontAndroid}/roboto-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+}