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

package/lib/style/css/components/Expander.less

@@ -0,0 +1,196 @@
+.expander-panel,
+.expander-list {
+  .expander-icon {
+    transition: all 150ms ease-in-out;
+  }
+
+  .panel-heading,
+  .list-group-item {
+    &.open {
+      .expander-icon {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
+
+.expander-panel {
+  .panel-heading {
+    align-items: center;
+    border-bottom: none;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+
+    .expander-icon {
+      order: 2;
+    }
+
+    .title {
+      flex: 0 1 auto;
+      margin: 0 7px 0 0;
+      order: 1;
+      user-select: none;
+    }
+
+    &.icon-left {
+      .expander-icon {
+        order: 1;
+      }
+
+      .title {
+        order: 2;
+        margin: 0 0 0 7px;
+      }
+    }
+  }
+
+  &.panel {
+    box-shadow: none;
+  }
+
+  &.panel-blank {
+    background-color: transparent;
+
+    > .panel-heading {
+      .expander-icon {
+        color: @gray;
+      }
+    }
+  }
+
+  &.panel-default {
+    > .panel-heading {
+      background-color: transparent;
+
+      .expander-icon {
+        color: @gray;
+      }
+    }
+
+    .panel-body {
+      box-shadow: inset 0px 1px 0px 0px @gray-light;
+
+      .panel-body {
+        box-shadow: none
+      }
+    }
+  }
+
+  &.panel-separator {
+    background-color: transparent;
+
+    .panel-heading {
+      background-color: transparent;
+      padding-left: 0;
+      padding-right: 0;
+
+      .expander-icon {
+        color: @gray-dark;
+        order: 1;
+      }
+
+      .title {
+        margin: 0 7px;
+        order: 2;
+      }
+
+      .separator {
+        order: 3;
+        flex: 1 1 auto;
+
+        hr {
+          border-top-width: 2px;
+          margin: 0;
+        }
+      }
+
+      &:not(.icon-left) {
+        .expander-icon {
+          order: 3;
+        }
+
+        .separator {
+          order: 1;
+        }
+      }
+    }
+
+    > div > .panel-body {
+      padding: 0;
+    }
+  }
+
+  &.panel-info,
+  &.panel-primary,
+  &.panel-warning,
+  &.panel-danger,
+  &.panel-success {
+    .expander-icon {
+      color: @color-white;
+    }
+  }
+}
+
+/*
+ * Styles for ExpanderList - based on Bootstrap List Groups.
+ * Some styles have to be extended in order to support using the Grid within the header
+ * and to use an icon to indicate open/close state
+ */
+.expander-list {
+  .list-group-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: column;
+    padding: 0;
+
+    &.list-group-item-primary,
+    &.list-group-item-success,
+    &.list-group-item-danger,
+    &.list-group-item-warning,
+    &.list-group-item-info {
+      color: inherit;
+    }
+
+    .expander-list-header {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+      padding: 10px 15px;
+      width: 100%;
+
+      .expander-icon {
+        color: @gray;
+      }
+
+      &-content {
+        width: 100%;
+      }
+    }
+
+    &.expandable {
+      .expander-list-header {
+        cursor: pointer;
+        font-weight: @font-normal;
+        transition: background-color 100ms ease-in-out;
+
+        &:hover {
+          background-color: @gray-lightest;
+        }
+      }
+    }
+
+    .expander-list-body-wrapper {
+      width: 100%;
+    }
+
+    // Due to animation reasons, the padding for the content need to be set on another wrapper element
+    // inside the body element, otherwise the animation stutters.
+    .expander-list-body-wrapper .expander-list-body {
+      padding: 15px;
+      width: 100%;
+    }
+  }
+}

package/lib/style/css/components/FilePicker.less

@@ -0,0 +1,8 @@
+.FilePicker {
+  width: 100%;
+  height: 100%;
+
+  .invisible {
+    visibility: hidden;
+  }
+}

package/lib/style/css/components/ListMenu.less

@@ -0,0 +1,77 @@
+.ListMenu {
+  width: 100%;
+
+  .ListMenuGroup {
+    padding: 0 15px 20px 15px;
+    margin: 0;
+    list-style: none;
+
+    li {
+      width: 100%;
+      color: @gray-darkest;
+
+      &.ListMenuHeader {
+        display: block;
+        font-weight: bold;
+        font-size: 16px;
+        margin: 0 0 10px 0;
+
+        > span,
+        a {
+          margin: 0 0 0 10px;
+          padding: 5px 10px 5px 0;
+        }
+
+        a {
+          color: @gray-darkest;
+
+          &:hover,
+          &.active {
+            text-decoration: none;
+            color: @brand-primary;
+          }
+        }
+      }
+
+      &.subitem > * {
+        margin-left: 30px !important;
+      }
+
+      &:not(.ListMenuHeader) {
+
+        > span,
+        a {
+          border-left: 2px solid @gray-light;
+          display: block;
+          font-weight: normal;
+          margin: 0 0 0 10px;
+          padding: 4px 10px;
+          text-decoration: none;
+        }
+
+        &.disabled {
+          > span,
+          a {
+            color: @gray-light;
+            cursor: not-allowed;
+          }
+        }
+
+        &:not(.disabled) {
+          > span,
+          a {
+            color: @gray-darker;
+            cursor: pointer;
+
+            &:hover,
+            &.active {
+              border-left-color: @brand-primary;
+              border-width: 3px;
+              color: @brand-primary;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/lib/style/css/components/MapHere.less

@@ -0,0 +1,91 @@
+.Map {
+  .H_imprint {
+    .H_logo {
+      margin-left: 0 !important;
+    }
+
+    .H_copyright {
+      background: transparent !important;
+      left: 0;
+      right: auto !important;
+      margin-left: 0 !important;
+      padding: 2px 0 !important;
+    }
+  }
+
+  .H_ui {
+    .H_scalebar {
+      margin-left: 30px;
+    }
+
+    .H_context_menu {
+      &:extend(.shadow-hard);
+      border-radius: @border-radius-default;
+      font-family: @font-family-base;
+      max-width: 225px;
+      padding: 0;
+
+      html.device-ios & {
+        font-family: @font-family-ios;
+      }
+
+      html.device-android & {
+        font-family: @font-family-android;
+      }
+
+      .H_context_menu_item {
+        align-items: center;
+        display: flex;
+        line-height: 1.25;
+        margin-bottom: 0;
+        min-height: 24px; // in case there is a spinner as label
+        padding: 7px 10px;
+        color: @gray-darkest;
+
+        &.disabled {
+          opacity: 0.5;
+          cursor: not-allowed !important;
+        }
+
+        &.clickable:not(.disabled) {
+          opacity: 0.8;
+
+          &:hover {
+            opacity: 1;
+          }
+        }
+
+        &:first-child {
+          border-top-left-radius: @border-radius-default;
+          border-top-right-radius: @border-radius-default;
+        }
+
+        &:last-child {
+          border-bottom-left-radius: @border-radius-default;
+          border-bottom-right-radius: @border-radius-default;
+        }
+      }
+
+      .H_context_menu_item_separator {
+        background: @gray-lighter;
+        border: none;
+        height: 1px;
+        padding-bottom: 0;
+      }
+    }
+  }
+
+  >div:first-child {
+    >div:first-child {
+      >div:first-child {
+        >div {
+          z-index: auto !important;
+        }
+
+        >canvas {
+          z-index: -1 !important;
+        }
+      }
+    }
+  }
+}

package/lib/style/css/components/MapMarker.less

@@ -0,0 +1,347 @@
+@clusterSize: 40px;
+@singleSize: 60px;
+@bubbleSize: @singleSize * 0.4;
+@iconSize: @bubbleSize * 1.25;
+@positionSize: ceil(@bubbleSize * 0.3);
+@positionTriangleSize: @iconSize * 0.2;
+@animationDuration: 0.25s ease;
+@shadowStyle: 0 0 5px rgba(0, 0, 0, 0.5);
+
+@nameMaxWidth: 200px;
+
+.rio-map-name {
+  font-size: @bubbleSize * 0.6;
+  font-weight: @font-normal;
+  line-height: @iconSize;
+  padding: 0 @bubbleSize * 0.4;
+  // max-width animation
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: max-width 1s ease;
+  white-space: nowrap;
+}
+
+.rio-map-bubble {
+  border-radius: @border-radius-round;
+  color: @color-white;
+  text-align: center;
+
+  &.exception {
+    background-color: @brand-danger;
+  }
+
+  &.warning {
+    background-color: @brand-warning;
+  }
+
+  .rio-map-single & {
+    font-size: @bubbleSize * 0.5;
+    height: @bubbleSize;
+    line-height: @bubbleSize;
+    min-width: @bubbleSize;
+    padding: 0 @bubbleSize * 0.4;
+  }
+
+  .rio-map-cluster & {
+    font-size: @bubbleSize * 0.5;
+    height: @bubbleSize * 0.8;
+    line-height: @bubbleSize * 0.8;
+    min-width: @bubbleSize * 0.8;
+    padding: 0 @bubbleSize * 0.3;
+  }
+}
+
+.rio-map-marker {
+  box-sizing: border-box;
+  display: block;
+  pointer-events: none;
+  position: absolute;
+  user-select: none;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  &.rio-map-marker-bottom-center {
+    .rio-map-marker-translate {
+      transform: translate(-50%, -100%);
+    }
+  }
+
+  &.rio-map-marker-center-center {
+    .rio-map-marker-translate {
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  .rio-map-marker-translate {
+    position: absolute;
+  }
+
+  .rio-map-cluster {
+    position: relative;
+
+    .rio-map-cluster-cirlce {
+      border-radius: @border-radius-round;
+      border-style: solid;
+      border-width: 1px;
+      cursor: pointer;
+      display: block;
+      filter: drop-shadow(0 0 1px rgba(0,0,0,.2));
+      font-size: @clusterSize * 0.36;
+      font-weight: 500;
+      height: @clusterSize;
+      line-height: @clusterSize;
+      padding: 0 @clusterSize * 0.15;
+      pointer-events: initial;
+      text-align: center;
+      transition: background-color @animationDuration;
+      min-width: @clusterSize;
+
+      .rio-map-cluster-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .rio-map-icon {
+          margin-right: @bubbleSize * 0.15;
+        }
+      }
+    }
+
+    .rio-map-bubble {
+      display: block;
+      position: absolute;
+
+      // 1st bubble
+      right: 0;
+      text-align: left;
+      top: 0;
+      transform: translate(35%, -50%);
+
+      // 2nd bubble
+      + .rio-map-bubble {
+        left: 0;
+        right: @clusterSize;
+        text-align: right;
+        top: auto;
+        bottom: 0;
+        right: auto;
+        transform: translate(-35%, 50%);
+      }
+    }
+  }
+
+  .rio-map-single {
+    align-items: center;
+    border-radius: 2px;
+    border-style: solid;
+    border-width: 1px;
+    cursor: pointer;
+    display: flex;
+    filter: drop-shadow(0 0 1px rgba(0,0,0,.2));
+    pointer-events: initial;
+    position: relative;
+    transition: background-color @animationDuration, filter @animationDuration, margin-bottom @animationDuration;
+
+    &:not(.fixed) {
+      margin-bottom: @iconSize * 0.5;
+    }
+
+    &.fixed {
+      margin-bottom: @positionTriangleSize * 0.45;
+
+      ~ .rio-map-position-arrow {
+        bottom: 0;
+      }
+
+      ~ .rio-map-position {
+        display: none;
+      }
+    }
+
+    .rio-map-icon {
+      margin-right: @bubbleSize * 0.4;
+
+      &.rioglyph {
+        top: 0; // unnecessary rioglyph hack
+
+        &:before {
+          display: block;
+          font-size: @iconSize * 0.6;
+          height: @iconSize;
+          line-height: @iconSize;
+          text-align: center;
+          width: 100%;
+        }
+      }
+    }
+
+    &.moving {
+      border-radius: @border-radius-round;
+    }
+
+    &:before {
+      bottom: 0;
+      content: '';
+      cursor: pointer;
+      display: block;
+      height: 0;
+      pointer-events: initial;
+      position: absolute;
+      width: 100%;
+      transition: height @animationDuration ~',' bottom @animationDuration;
+    }
+
+    .rio-map-icon {
+      margin: 0 @bubbleSize * 0.3;
+
+      + .rio-map-icon {
+        margin: 0 @bubbleSize * 0.3 0 -(@bubbleSize) * 0.3;
+      }
+
+      + .rio-map-name {
+        padding: 0 @bubbleSize * 0.4 0 0;
+      }
+    }
+
+    .rio-map-direction {
+      border-radius: @border-radius-round;
+      background-color: lighten(@color-map-marker-asset, 5%);
+      background-image: url(~'data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2250%22%20height%3D%2250%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill-rule%3D%22nonzero%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22transparent%22%20d%3D%22M0%200h50v50H0z%22%2F%3E%3Cpath%20d%3D%22M25%2012L12%2036s6.5-5%2013-5%2013%205%2013%205L25%2012z%22%20fill%3D%22%23FFF%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+      background-repeat: no-repeat;
+      background-size: @iconSize;
+      height: @iconSize;
+      transition: background-color @animationDuration;
+      width: @iconSize;
+    }
+
+    .rio-map-bubble {
+      &:not(:last-child) {
+        margin-right: @bubbleSize * 0.1;
+      }
+      &:last-child {
+        margin-right: @bubbleSize * 0.2;
+      }
+    }
+  }
+
+  .rio-map-position-arrow {
+    background-color: @color-white;
+    bottom: (@iconSize * 0.5) - (@positionTriangleSize * 0.45);
+    color: transparent;
+    height: @positionTriangleSize;
+    left: calc(~'50% - @{positionTriangleSize} * 0.5');
+    position: absolute;
+    transform: rotate(-45deg);
+    transition: bottom @animationDuration;
+    width: @positionTriangleSize;
+    z-index: -1;
+  }
+
+  .rio-map-position {
+    background-color: @color-white;
+    border-radius: @border-radius-round;
+    border-style: solid;
+    border-width: ceil(@positionSize * 0.3);
+    display: block;
+    height: @positionSize;
+    left: 50%;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    transition: all 0.25s ease;
+    width: @positionSize;
+  }
+
+  &:not(.fixed):not(:hover):not(.hover) {
+    .rio-map-single {
+      .rio-map-name {
+        max-width: @nameMaxWidth;
+      }
+    }
+  }
+
+  &:hover,
+  &.hover {
+    z-index: @zindex-map-marker-hover !important;
+  }
+
+  &.active {
+    z-index: @zindex-map-marker-active !important;
+  }
+
+  &:hover,
+  &.hover,
+  &.active {
+    .rio-map-single:not(.fixed) {
+      margin-bottom: @iconSize * 0.65;
+
+      &:before {
+        bottom: -(@positionTriangleSize + (@iconSize * 0.65));
+        height: @positionTriangleSize + (@iconSize * 0.65);
+      }
+
+      .rio-map-name {
+        max-width: 400px;
+      }
+
+      + .rio-map-position-arrow {
+        bottom: (@iconSize * 0.65) - (@positionTriangleSize * 0.45);
+      }
+    }
+  }
+
+  .rio-map-bubble,
+  .rio-map-name {
+    &:empty {
+      display: none !important;
+    }
+  }
+}
+
+#rio-map-context-menu {
+  background-color: @color-map-marker-asset;
+  border: 1px solid @color-map-marker-asset;
+  box-shadow: @shadowStyle;
+  display: none;
+  position: absolute;
+  z-index: 10;
+
+  &.rio-map-context-menu--active {
+    display: block;
+  }
+
+  > ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    > li {
+      color: @color-white;
+      display: flex;
+      padding: 0 @bubbleSize * 0.4;
+
+      &.clickable {
+        cursor: pointer;
+
+        &:hover,
+        &.hover {
+          background-color: darken(@color-map-marker-asset, 5%);
+        }
+      }
+
+      &:not(:last-child) {
+        border-bottom: 1px solid darken(@color-map-marker-asset, 5%);
+        margin-bottom: 0;
+      }
+
+      .rio-map-text {
+        padding: @bubbleSize * 0.4 @bubbleSize * 0.2;
+      }
+
+      .rio-map-icon {
+        margin-right: 0;
+      }
+    }
+  }
+}