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

package/lib/styles/components/Tooltip.less

@@ -0,0 +1,222 @@
+@tooltip-max-width: 200px;
+@tooltip-color: @color-white;
+@tooltip-bg: @gray-darker;
+@tooltip-arrow-width: 5px;
+@tooltip-arrow-color: @tooltip-bg;
+@tooltip-opacity: 1;
+
+.tooltip {
+  .tooltip-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+  }
+
+  &.tooltip-default,
+  &.tooltip-onboarding {
+    max-width: calc(~'100vw - 30px');
+
+    // &:not([class*='margin-']) {
+    //   margin: 0 !important;
+    // }
+
+    &[class*='max-width'] {
+      .tooltip-inner {
+        max-width: 100%;
+      }
+    }
+
+    &[class*='width-auto'] {
+      .tooltip-inner {
+        width: auto;
+      }
+    }
+
+    .tooltip-inner {
+      color: @tooltip-color;
+      cursor: default;
+      line-height: 1.25;
+      max-width: none;
+      text-align: inherit;
+      width: 100%;
+    }
+  }
+
+  &.tooltip-default {
+    z-index: @zindex-tooltip;
+
+    .tooltip-inner {
+      background: @gray-darkest;
+      border-radius: @border-radius-sm;
+      padding: 5px 10px;
+      width: 180px;
+
+      .tooltip-title {
+        font-size: 16px;
+
+        + .tooltip-content {
+          margin-top: 5px;
+          font-size: 12px;
+        }
+      }
+    }
+
+    @arrow-size: 5px;
+    @arrow-size-hypotenuse: sqrt(pow(@arrow-size, 2) + pow(@arrow-size, 2));
+
+    .tooltip-mixin(
+      @offset: 10px; @overlap: 10px; @color: @gray-darkest; @arrow-size: 5px; @arrow-size-hypotenuse:
+        @arrow-size-hypotenuse;
+    );
+  }
+
+  &.tooltip-onboarding {
+    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
+    z-index: @zindex-tooltip-onboarding;
+
+    &.onboarding-clickflow {
+      z-index: @zindex-tooltip-onboarding + 1;
+
+      &.onboarding-clickflow-backdrop {
+        &:after {
+          background-color: rgba(0, 0, 0, 0.3);
+          bottom: -1500px;
+          content: "";
+          display: block;
+          left: -1500px;
+          pointer-events: none;
+          position: fixed;
+          right: -1500px;
+          top: -1500px;
+          z-index: -1;
+
+          @supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) {
+            opacity: 0.99;
+            backdrop-filter: blur(5px);
+          }
+        }
+      }
+    }
+
+    &.onboarding-clickflow ~ .onboarding-clickflow {
+      visibility: hidden;
+      z-index: @zindex-tooltip-onboarding;
+    }
+
+    .tooltip-inner {
+      background: @brand-secondary;
+      border-radius: @border-radius-default;
+      padding: 15px;
+      width: 330px;
+
+      .tooltip-title {
+        font-size: 18px;
+
+        + .tooltip-content {
+          margin-top: 10px;
+        }
+      }
+
+      .tooltip-content {
+        font-size: 14px;
+      }
+
+      .tooltip-close {
+        color: darken(@brand-secondary, 10%);
+        cursor: pointer;
+        font-size: 16px;
+        margin: 2px 0 0 10px;
+
+        &:hover {
+          color: @color-white;
+        }
+      }
+    }
+
+    @arrow-size: 10px;
+    @arrow-size-hypotenuse: sqrt(pow(@arrow-size, 2) + pow(@arrow-size, 2));
+
+    .tooltip-mixin(
+      @offset: 20px; @overlap: 25px; @color: @color-map-marker-poi; @arrow-size: @arrow-size; @arrow-size-hypotenuse:
+        @arrow-size-hypotenuse;
+    );
+  }
+}
+
+.tooltip-mixin(@offset; @overlap; @color; @arrow-size; @arrow-size-hypotenuse) {
+  &[x-placement^="top"] {
+    padding: @arrow-size;
+
+    .tooltip-arrow {
+      border-top-color: @color;
+      border-width: @arrow-size @arrow-size 0 @arrow-size;
+    }
+  }
+
+  &[x-placement^="right"] {
+    padding: 0 @arrow-size;
+
+    .tooltip-arrow {
+      border-right-color: @color;
+      border-width: @arrow-size @arrow-size @arrow-size 0;
+    }
+  }
+
+  &[x-placement^="bottom"] {
+    padding: @arrow-size 0;
+
+    .tooltip-arrow {
+      border-bottom-color: @color;
+      border-width: 0 @arrow-size @arrow-size @arrow-size;
+    }
+  }
+
+  &[x-placement^="left"] {
+    padding: 0 @arrow-size;
+
+    .tooltip-arrow {
+      border-left-color: @color;
+      border-width: @arrow-size 0 @arrow-size @arrow-size;
+    }
+  }
+}
+
+.tooltip {
+  &[x-placement^="top"] {
+    .tooltip-arrow {
+      bottom: 0;
+    }
+  }
+
+  &[x-placement^="right"] {
+    .tooltip-arrow {
+      left: 0;
+    }
+  }
+
+  &[x-placement^="bottom"] {
+    .tooltip-arrow {
+      top: 0;
+    }
+  }
+
+  &[x-placement^="left"] {
+    .tooltip-arrow {
+      right: 0;
+    }
+  }
+
+  &[x-placement^="top-start"], &[x-placement^="bottom-start"] {
+    .tooltip-inner {
+      margin-left: 10px;
+    }
+  }
+
+  &[x-placement^="top-end"], &[x-placement^="bottom-end"] {
+    .tooltip-inner {
+      margin-right: 10px;
+    }
+  }
+}

package/lib/styles/design/alerts.less

@@ -0,0 +1,55 @@
+.alert {
+  border-color: transparent;
+  border-radius: @border-radius-default;
+  border-style: solid;
+  border-width: 2px;
+  padding: 12px;
+  position: relative;
+
+  .alert-link {
+    font-weight: bold;
+  }
+
+  &.alert-dismissible {
+    padding-right: 30px;
+  }
+
+  > .close {
+    position: absolute;
+    right: 3px;
+    top: 6px;
+    transform: scale(0.75);
+  }
+
+  > p,
+  > ul {
+    margin-bottom: 0;
+  }
+
+  // primary
+  // secondary
+  // info
+  // success
+  // warning
+  // danger
+  each(@colors-brand-and-status-map, {
+    @background: @colors-brand-and-status-decent-map[$@key];
+
+    &.alert- {
+      &@{key} {
+
+        background-color: @background;
+        border-color: @value;
+        color: @value;
+
+        .alert-link {
+          color: @value;
+        }
+
+        > .close .rioglyph {
+          color: @value;
+        }
+      }
+    }
+  })
+}

package/lib/styles/design/aspect-ratio.less

@@ -0,0 +1,23 @@
+.aspect-ratio-resizer {
+    display: grid;
+    position: relative;
+
+    > * {
+        grid-area: ~"1 / 1 / 2 / 2";
+    }
+
+    .aspect-ratio-placeholder {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+    }
+}
+
+// Aspect ratio related to elements width and height attributes
+.aspect-ratio-1 { aspect-ratio: 1 / 1 }
+.aspect-ratio-1-2 { aspect-ratio: 1 / 2 }
+.aspect-ratio-2-1 { aspect-ratio: 2 / 1 }
+.aspect-ratio-4-3 { aspect-ratio: 4 / 3 }
+.aspect-ratio-16-9 { aspect-ratio: 16 / 9 }
+.aspect-ratio-16-10 { aspect-ratio: 16 / 10 }

package/lib/styles/design/badges.less

@@ -0,0 +1,120 @@
+.badge {
+  background-color: @brand-primary;
+  border-radius: @border-radius-round;
+  color: @color-white;
+  display: inline-block;
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 1;
+  min-height: 16px;
+  min-width: 16px;
+  position: relative;
+  vertical-align: baseline;
+
+  // Empty badges are just a dot
+  &:not(:empty) {
+    padding: 4px 7px;
+  }
+
+  &-lg {
+    font-size: 16px;
+    min-width: 24px;
+  }
+
+  &-xl {
+    font-size: 20px;
+    min-width: 30px;
+    padding: 4px 9px;
+  }
+
+  &-indicator {
+    display: grid;
+    place-items: center;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 1;
+    transform: translate(50%, -50%);
+
+    .ActionBarItemIcon & {
+      border: 2px solid @color-white;
+      left: 50%;
+      position: absolute;
+      right: auto;
+      top: 5px;
+      transform: none;
+    }
+
+    &-border {
+      border: 2px solid @color-white;
+    }
+
+    &-pinging {
+      &:before {
+        animation:pinging 1s cubic-bezier(0,0,.2,1) infinite;
+        border-radius: @border-radius-round;
+        bottom: 0;
+        content: "";
+        left: 0;
+        pointer-events: none;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: -1;
+      }
+    }
+  }
+
+  // muted
+  // default
+  // primary
+  // secondary
+  // info
+  // success
+  // warning
+  // danger
+  &-muted {
+    color: @gray-dark;
+    box-shadow: inset 0px 0px 0px 1px @gray-light;
+    background-color: @gray-lightest;
+
+    &.badge-indicator-pinging {
+      &:before {
+        background-color: @gray-light;
+      }
+    }
+  }
+
+  &-default {
+    background-color: @gray-dark;
+
+    &.badge-indicator-pinging {
+      &:before {
+        background-color: @gray-dark;
+      }
+    }
+  }
+
+  each(@colors-brand-and-status-map, {
+    &.badge-@{key} {
+      background-color: @value;
+
+      &.badge-indicator-pinging {
+        &:before {
+          background-color: @value;
+        }
+      }
+    }
+  })
+}
+
+.indicated-button,
+.indicated-icon {
+  position: relative;
+}
+
+.indicated-icon {
+  .rioglyph {
+    font-size: 26px;
+  }
+}

package/lib/styles/design/blockquote.less

@@ -0,0 +1,49 @@
+blockquote {
+  font-size: (@font-size-default * 1.25);
+  margin: 0;
+  padding: 2% 0 2% 10%;
+  position: relative;
+
+  &:before {
+    content: "“";
+    display: flex;
+    font-size: 50px;
+    height: 50px;
+    left: 0;
+    line-height: 50px;
+    pointer-events: none;
+    position: absolute;
+    text-align: center;
+    top: 0;
+    user-select: none;
+    width: 6%;
+  }
+
+  each(@colors-text-map, {
+    &.quote-color- {
+      &@{key}:before {
+        color: @value !important
+      }
+    }
+  })
+
+  each(@colors-gray-map, {
+    &.quote-color- {
+      &@{key}:before {
+        color: @value !important
+      }
+    }
+  })
+
+  p,
+  ul,
+  ol {
+    &:first-child {
+      margin-top: 0 !important;
+    }
+
+    &:last-child {
+      margin-bottom: 0 !important;
+    }
+  }
+}

package/lib/styles/design/border.less

@@ -0,0 +1,192 @@
+// default values used as shorthand ".border" class
+// no !important here, because other classes will not work then
+.border {
+  border-color: @gray-light;
+  border-style: solid;
+  border-width: 1px;
+}
+
+// border
+.border {
+  &-style-solid { border-style: solid !important}
+  &-style-dotted { border-style: dotted !important}
+  &-style-dashed { border-style: dashed !important}
+
+  &-width,
+  &-size { // backward compatibility
+    &-1 { border-width: 1px !important}
+    &-2 { border-width: 2px !important}
+    &-3 { border-width: 3px !important}
+  }
+
+  &-none { border: none !important }
+
+  &-top-none,
+  &-top-0 {  // backward compatibility
+    border-top-style: none !important
+  }
+
+  &-top-only {
+    border-right-style: none !important;
+    border-bottom-style: none !important;
+    border-left-style: none !important;
+  }
+
+  &-right-none,
+  &-right-0 {  // backward compatibility
+    border-right-style: none !important
+  }
+
+  &-right-only {
+    border-top-style: none !important;
+    border-bottom-style: none !important;
+    border-left-style: none !important;
+  }
+
+  &-bottom-none,
+  &-bottom-0 { // backward compatibility
+    border-bottom-style: none !important
+  }
+
+  &-bottom-only {
+    border-top-style: none !important;
+    border-right-style: none !important;
+    border-left-style: none !important;
+  }
+
+  &-left-none,
+  &-left-0 { // backward compatibility
+    border-left-style: none !important
+  }
+
+  &-left-only {
+    border-top-style: none !important;
+    border-right-style: none !important;
+    border-bottom-style: none !important;
+  }
+}
+
+// border coloring
+
+// transparent
+.border-color-transparent {
+  border-color: transparent !important
+}
+
+// white
+// black
+each(@colors-text-map, {
+  .border-color-@{key} {
+    border-color: @value !important;
+  }
+})
+
+// primary
+// secondary
+each(@colors-brand-map, {
+  .border-color-@{key} {
+    border-color: @value !important;
+  }
+})
+
+// info
+// success
+// warning
+// danger
+each(@colors-status-map, {
+  .border-color-@{key} {
+    border-color: @value !important;
+  }
+})
+
+// darkest
+// darker
+// dark
+// gray
+// light
+// lighter
+// lightest
+each(@colors-gray-map, {
+  .border-color-@{key} {
+    border-color: @value !important;
+  }
+})
+
+// map-marker-asset
+// map-marker-poi
+// map-marker-geofence
+// map-marker-route
+each(@colors-map-marker-map, {
+  .border-color-@{key} {
+    border-color: @value !important;
+  }
+})
+
+// rating-1
+// rating-2
+// rating-3
+// rating-4
+// rating-5
+each(@colors-rating-map, {
+  .border-color-@{key} {
+    border-color: @value !important;
+  }
+})
+
+// status-available
+// status-driving
+// status-resting
+// status-working
+each(@colors-driving-status-map, {
+  .border-color-@{key} {
+    border-color: @value !important;
+  }
+})
+
+// highlight-darkest
+// highlight-darker
+// highlight-dark
+// highlight
+// highlight-light
+// highlight-lighter
+// highlight-lightest
+// highlight-decent
+each(@colors-highlight-map, {
+  .border-color-@{key} {
+    border-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, {
+    .border-color-@{key} {
+      border-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, {
+    .border-color-@{key} {
+      border-color: @value !important;
+    }
+  })
+}

package/lib/styles/design/breadcrumbs.less

@@ -0,0 +1,20 @@
+.breadcrumb {
+  .list-unstyled();
+  margin-bottom: 0;
+  padding: 8px 15px;
+
+  > li {
+    display: inline-block;
+
+    + li:before {
+      color: @gray-light;
+      content: "/";
+      padding: 0 5px;
+    }
+  }
+
+  > .active {
+    color: @gray-dark;
+    cursor: default;
+  }
+}