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

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

@@ -0,0 +1,27 @@
+.callout {
+  background-color: @color-white;
+  border-radius: @border-radius-default;
+  border: 1px solid @gray-light;
+  padding: 20px 20px 20px 25px;
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  // default
+  // primary
+  // secondary
+  // info
+  // success
+  // warning
+  // danger
+  &-default {
+    box-shadow: inset 5px 0 0 0 @gray;
+  }
+
+  each(@colors-brand-and-status-map, {
+    &-@{key} {
+      box-shadow: inset 5px 0 0 0 @value;
+    }
+  })
+}

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

@@ -0,0 +1,28 @@
+.caret {
+  border: none;
+  display: inline-block;
+  height: auto;
+  width: auto;
+  transition: transform 150ms ease-in-out;
+  transform-origin: center;
+
+  &:before {
+    .rioglyph();
+    content: @rioglyph-chevron-down;
+  }
+
+  // open dropdown
+  .dropdown.open & {
+    transform: rotate(180deg);
+  }
+
+  // spacing of the caret inside a button
+  .input-group-btn .dropdown-toggle &,
+  .dropdown .dropdown-toggle & {
+    margin-left: 6px;
+  }
+
+  .dropdown.btn-group > .btn + .dropdown-toggle & {
+    margin-left: 0;
+  }
+}

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

@@ -0,0 +1,12 @@
+.close:not(.btn-muted) {
+    .btn.btn-close();
+    color: @btn-muted-color;
+
+    > .rioglyph {
+        opacity: 0.8;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+}

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

@@ -0,0 +1,45 @@
+@code-bg: #f3f3f4;
+
+code,
+pre {
+  font-family: @font-family-monospace;
+  border-radius: @border-radius-default;
+}
+
+code {
+  background-color: @code-bg;
+  color: @color-warmup-raspberry;
+  font-size: 80%;
+  margin-left: 1px;
+  margin-right: 1px;
+  padding: 2px 5px;
+
+  &.code-inline {
+    margin-left: 5px;
+    margin-right: 5px;
+
+    &-first {
+      margin-right: 5px;
+    }
+
+    &-last {
+      margin-left: 5px;
+    }
+  }
+}
+
+pre {
+  background-color: @code-bg;
+  color: @gray-dark;
+  display: block;
+  margin: 0;
+  padding: 5px 10px;
+
+  code {
+    background-color: transparent;
+    border-radius: 0;
+    color: inherit;
+    padding: 0;
+    line-height: 1.5;
+  }
+}

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
+  }
+}