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

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

@@ -0,0 +1,201 @@
+.text-muted,
+.hover-text-muted:hover { color: @gray !important }
+
+.text-color-transparent,
+.hover-text-color-transparent:hover { color: transparent !important }
+
+.text-color-white,
+.hover-text-color-white:hover { color: @color-white !important }
+
+.text-color-black,
+.hover-text-color-black:hover { color: @color-black !important }
+
+// text alignment
+.align-top { vertical-align: top !important }
+.align-middle { vertical-align: middle !important }
+.align-bottom { vertical-align: bottom !important }
+
+
+// primary
+// secondary
+each(@colors-brand-map, {
+  .text-color-@{key},
+  .hover-text-color-@{key}:hover {
+    color: @value !important;
+  }
+})
+
+// info
+// success
+// warning
+// danger
+each(@colors-status-map, {
+  .text-@{key}, // backward compatibility
+  .text-color-@{key},
+  .hover-text-color-@{key}:hover {
+    color: @value !important;
+  }
+})
+
+// darkest
+// darker
+// dark
+// gray
+// light
+// lighter
+// lightest
+each(@colors-gray-map, {
+  .text-color-@{key},
+  .hover-text-color-@{key}:hover {
+    color: @value !important;
+  }
+})
+
+// map-marker-asset
+// map-marker-poi
+// map-marker-geofence
+// map-marker-route
+each(@colors-map-marker-map, {
+  .text-color-@{key},
+  .hover-text-color-@{key}:hover {
+    color: @value !important;
+  }
+})
+
+// rating-1
+// rating-2
+// rating-3
+// rating-4
+// rating-5
+each(@colors-rating-map, {
+  .text-color-@{key},
+  .hover-text-color-@{key}:hover {
+    color: @value !important;
+  }
+})
+
+// status-available
+// status-driving
+// status-resting
+// status-working
+each(@colors-driving-status-map, {
+  .text-color-@{key},
+  .hover-text-color-@{key}:hover {
+    color: @value !important;
+  }
+})
+
+// highlight-darkest
+// highlight-darker
+// highlight-dark
+// highlight
+// highlight-light
+// highlight-lighter
+// highlight-lightest
+// highlight-decent
+each(@colors-highlight-map, {
+  .text-color-@{key},
+  .hover-text-color-@{key}:hover {
+    color: @value !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, {
+    .text-color-@{key},
+    .hover-text-color-@{key}:hover {
+      color: @value !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, {
+    .text-color-@{key},
+    .hover-text-color-@{key}:hover {
+      color: @value !important;
+    }
+  })
+}
+
+/* Text - Width */
+.text-thin { font-weight: @font-thin !important }
+.text-light { font-weight: @font-light !important }
+.text-normal { font-weight: @font-normal !important }
+.text-medium { font-weight: @font-medium !important }
+.text-bold { font-weight: @font-bold !important }
+.text-italic { font-style: italic !important }
+
+// Transformation
+.text-transform-none { text-transform: none !important  }
+.text-capitalize { text-transform: capitalize !important  }
+.text-lowercase { text-transform: lowercase !important  }
+.text-uppercase { text-transform: uppercase !important  }
+
+// uppercase only the first letter of the first
+.text-capitalize-first-word  {
+  &:first-letter {
+    text-transform: uppercase
+  }
+}
+
+// but not for headlines
+h2, h3, h4, h5, h6, [class*='text-size-h'] {
+  &.text-bold {
+    font-weight: @font-medium !important;
+  }
+}
+
+/* Text - Line Height for Buttons */
+.line-height-btn-xs { line-height: (floor(@font-size-xs * @line-height-xs) + (@padding-xs-vertical * 2) + 2) !important }
+.line-height-btn-sm { line-height: (floor(@font-size-sm * @line-height-sm) + (@padding-sm-vertical * 2) + 2) !important }
+.line-height-btn { line-height: (floor(@font-size-default * @line-height-default) + (@padding-default-vertical * 2) + 2) !important }
+.line-height-btn-lg { line-height: (floor(@font-size-lg * @line-height-lg) + (@padding-lg-vertical * 2) + 3) !important }
+
+/* Text - Decoration */
+.text-decoration-none { text-decoration: none !important }
+.text-decoration-underline { text-decoration: underline !important }
+.text-decoration-line-through { text-decoration: line-through !important }
+
+.hover-text-decoration-underline:hover { text-decoration: underline !important }
+.hover-text-decoration-none:hover { text-decoration: none !important }
+
+/* Text - Decoration Hover */
+.hover-text-decoration-none:hover { text-decoration: none !important }
+
+/* Text - Selection */
+.user-select-none { user-select: none !important }
+.user-select-all { user-select: all !important }
+
+// primary
+// secondary
+// info
+// success
+// warning
+// danger
+// each(@colors-brand-and-status-map, {
+//   .text-@{key} {
+//     a&:hover,
+//     a&:focus {
+//       color: darken(@value, 10%);
+//     }
+//   }
+// })

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

@@ -0,0 +1,200 @@
+html {
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  background: @color-white;
+  font-size: 62.5%; // 14px = 1.4rem
+
+  &:not(.window-iframe) {
+    // background coloring
+    background-color: @gray-lighter;
+
+    // larger font-sizes on mobile (including no uikit.js fallback)
+    &.ua-mobile:not(.ua-mobile-ipad),
+    &:not([class="ua-"]) {
+      @media (max-width: @screen-ls) {
+        font-size: 71.42857143%; // from 14px to 16px
+      }
+    }
+  }
+
+  &.window-iframe {
+    background-color: transparent;
+  }
+
+  // because of custom css in services
+  #root {
+    background-color: transparent !important;
+  }
+}
+
+body {
+  color: @text-color;
+  font-family: @font-family-base;
+  font-size: @font-size-default;
+  line-height: @line-height-default;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  // Lighter default font-weight for Version 1.0
+  // font-weight: @font-light;
+}
+
+// font by OS
+body,
+h1, h2, h3, h4, h5, h6,
+.title,
+.lead {
+  font-family: @font-family-base;
+
+  html.device-ios & {
+    font-family: @font-family-ios;
+  }
+
+  html.device-android & {
+    font-family: @font-family-android;
+  }
+}
+
+h1 {
+  font-size: @font-size-h2;
+  font-weight: @font-bold;
+  text-transform: uppercase;
+}
+
+b,
+strong {
+  font-weight: @font-medium;
+}
+
+// Links
+a,
+a.link,
+span.link {
+  color: @link-color;
+  text-decoration: none;
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    color: @link-hover-color;
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
+
+  &:focus {
+    .tab-focus();
+  }
+}
+
+.title {
+  font-size: @font-size-default;
+}
+
+p {
+  margin: 10px 0 15px 0;
+}
+
+.lead {
+  font-weight: @font-light;
+  font-size: 20px;
+}
+
+hr {
+  margin-top: @grid-gutter-height;
+  margin-bottom: @grid-gutter-height;
+  border: 0;
+  border-top: 1px solid @gray-lighter;
+}
+
+ul {
+  &.square,
+  &.square-list {
+    li {
+      list-style: square;
+    }
+  }
+
+  &.icon-list {
+    .reset-list();
+
+    li {
+      display: flex;
+      margin-bottom: 20px;
+
+      > span.rioglyph {
+        padding: 3px;
+        font-size: 18px;
+        color: @gray-darker;
+
+        + span {
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+
+  &.tree-list {
+    @treeListIconLeft: -20px;
+    @treeListIconWidth: 15px;
+
+    .reset-list();
+    margin-left: 20px;
+
+    li {
+      list-style-type: none;
+      margin: 0 0 0 10px;
+      padding: 1px 0;
+      position: relative;
+
+      &:before {
+        content: '';
+        position: absolute;
+        top: -4px; // with respect to 1px border
+        left: @treeListIconLeft;
+        border-left: 1px solid @gray-light;
+        border-bottom: 1px solid @gray-light;
+        width: @treeListIconWidth;
+        height: 15px;
+      }
+
+      &:after {
+        position: absolute;
+        content: '';
+        top: 10px;
+        left: @treeListIconLeft;
+        border-left: 1px solid @gray-light;
+        border-top: 1px solid @gray-light;
+        width: @treeListIconWidth;
+        height: 100%;
+      }
+
+      &:last-child:after {
+        display: none;
+      }
+
+      ul {
+        padding-left: @treeListIconWidth;
+        margin-top: 5px;
+      }
+    }
+  }
+
+  &.feature-list,
+  &.panel-list {
+    .reset-list();
+
+    li {
+      padding: 10px 12px;
+      border: 1px solid @gray-light;
+      background: @color-white;
+      border-radius: 3px;
+      margin-bottom: 10px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+.thumbnail {
+  background-color: @color-white;
+  border-radius: @border-radius-default;
+  border: 1px solid @gray-light;
+  display: block;
+  line-height: @line-height-default;
+  transition:border .2s ease-in-out;
+  // margin-bottom: @grid-gutter-height;
+
+  > img,
+  a > img {
+    &:extend(.img-responsive);
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  // Add a hover state for linked versions only
+  a&:hover,
+  a&:focus,
+  a&.active {
+    border-color: @link-color;
+  }
+
+  // Image captions
+  .caption {
+    padding: 20px;
+    color: @text-color;
+  }
+}

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

@@ -0,0 +1,33 @@
+.transition-opacity {
+    transition-property: opacity;
+}
+.transition-position {
+    transition-property: position;
+}
+.transition-all {
+    transition-property: all;
+}
+
+.transition-ease {
+    transition-timing-function: ease;
+}
+
+.transition-ease-in-out {
+    transition-timing-function: ease-in-out;
+}
+
+.transition-duration-01 {
+    transition-duration: 0.1s;
+}
+.transition-duration-02 {
+    transition-duration: 0.2s;
+}
+.transition-duration-03 {
+    transition-duration: 0.3s;
+}
+.transition-duration-04 {
+    transition-duration: 0.4s;
+}
+.transition-duration-05 {
+    transition-duration: 0.5s;
+}

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

@@ -0,0 +1,159 @@
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  font-family: @headings-font-family;
+  font-weight: @headings-font-weight;
+  line-height: @headings-line-height;
+  color: @headings-color;
+
+  small,
+  .small {
+  font-weight: normal;
+  line-height: 1;
+  color: @gray-light;
+  }
+}
+
+h1, .h1,
+h2, .h2,
+h3, .h3 {
+  margin-top: @grid-gutter-height;
+  margin-bottom: (@grid-gutter-height / 2);
+
+  small,
+  .small {
+  font-size: 65%;
+  }
+}
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+  margin-top: (@grid-gutter-height / 2);
+  margin-bottom: (@grid-gutter-height / 2);
+
+  small,
+  .small {
+  font-size: 75%;
+  }
+}
+
+h1, .h1 { font-size: @font-size-h1 }
+h2, .h2 { font-size: @font-size-h2 }
+h3, .h3 { font-size: @font-size-h3 }
+h4, .h4 { font-size: @font-size-h4 }
+h5, .h5 { font-size: @font-size-h5 }
+h6, .h6 { font-size: @font-size-h6 }
+
+
+// Body text
+// -------------------------
+
+p {
+  margin: 0 0 (@grid-gutter-height / 2);
+}
+
+.lead {
+  margin-bottom: @grid-gutter-height;
+  font-size: floor((@font-size-default * 1.15));
+  font-weight: @font-light;
+  line-height: 1.4;
+
+  @media (min-width: @screen-sm-min) {
+  font-size: (@font-size-default * 1.5);
+  }
+}
+
+
+// Emphasis & misc
+// -------------------------
+
+// Ex: (12px small font / 14px base font) * 100% = about 85%
+small,
+.small {
+  font-size: floor((100% * @font-size-sm / @font-size-default));
+}
+
+mark,
+.mark {
+  background-color: @brand-warning-decent;
+  padding: .2em;
+}
+
+// Page header
+// -------------------------
+
+.page-header {
+  padding-bottom: ((@grid-gutter-height / 2) - 1);
+  margin: (@grid-gutter-height * 2) 0 @grid-gutter-height;
+  border-bottom: 1px solid @gray-lighter;
+}
+
+
+// Lists
+// -------------------------
+
+// Unordered and Ordered lists
+ul,
+ol {
+  margin-top: 0;
+  margin-bottom: (@grid-gutter-height / 2);
+  padding-left: 15px;
+
+  ul,
+  ol {
+    margin-top: (@grid-gutter-height / 2);
+    margin-bottom: 0;
+  }
+}
+
+// List options
+
+// Unstyled keeps list items block level, just removes default browser padding and list-style
+.list-unstyled {
+  padding-left: 0;
+  list-style: none;
+}
+
+// Inline turns list items into inline-block
+.list-inline {
+  .list-unstyled();
+  margin-left: -5px;
+
+  > li {
+    display: inline-block;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}
+
+// Description Lists
+dl {
+  margin-top: 0; // Remove browser default
+  margin-bottom: @grid-gutter-height;
+}
+
+dt,
+dd {
+  line-height: @line-height-default;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-left: 0;
+}
+
+// Abbreviations and acronyms
+abbr[title],
+abbr[data-original-title] {
+  cursor: help;
+  border-bottom: 1px dotted @gray-light;
+}
+
+// Addresses
+address {
+  margin-bottom: @grid-gutter-height;
+  font-style: normal;
+  line-height: @line-height-default;
+}

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

@@ -0,0 +1,75 @@
+.clearfix {
+  .clearfix();
+}
+
+.center-block {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.pull {
+  &-left {
+    float: left !important;
+  }
+
+  &-right {
+    float: right !important;
+  }
+}
+
+.first-child {
+  &-margin-top-0:first-child {
+    margin-top: 0 !important;
+  }
+}
+
+.last-child {
+  &-margin-bottom-0:last-child {
+    margin-bottom: 0 !important;
+  }
+}
+
+.clearance {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+[class*="inset-"] {
+  position: absolute;
+}
+
+.inset-0 {
+  bottom: 0px !important;
+  left: 0px !important;
+  right: 0px !important;
+  top: 0px !important;
+}
+
+.inset-x-0 {
+  left: 0px !important;
+  right: 0px !important;
+}
+
+.inset-y-0 {
+  top: 0px !important;
+  bottom: 0px !important;
+}
+
+.children {
+  &-first {
+    &-margin-top-0 {
+      > *:first-child {
+        margin-top: 0 !important;
+      }
+    }
+  }
+
+  &-last {
+    &-margin-bottom-0 {
+      > *:last-child {
+        margin-bottom: 0 !important;
+      }
+    }
+  }
+}