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

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

@@ -0,0 +1,140 @@
+.ZoomButtons {
+  bottom: 15px;
+  padding: 0;
+  position: absolute;
+  right: 15px;
+  z-index: 1;
+
+  .MapSettingsTile {
+    &:extend(.shadow-smooth);
+    background: @color-white;
+    cursor: pointer;
+    padding: 3px;
+  }
+
+  .MapSettingsTileSpacer {
+    height: 6px;
+  }
+
+  // moved ZoomButton left on small noTouch devices
+  @media (max-width: @screen-ls) {
+    right: 75px;
+
+    // hidden zoom buttons on touch devices
+    html:not(.ua-desktop) & {
+      display: none;
+    }
+  }
+
+  // moved MapSettingsWrapper left on large noTouch devices
+  @media (min-width: @screen-ls) {
+    +.MapSettingsWrapper {
+      right: 47px;
+    }
+  }
+}
+
+.MapSettingsWrapper {
+  pointer-events: none;
+  position: absolute;
+  bottom: 15px;
+  right: 15px;
+  padding: 0;
+  z-index: 2;
+  display: flex;
+  flex-flow: row-reverse;
+  align-items: flex-end;
+
+  .MapSettingsTile {
+    &:extend(.shadow-smooth);
+    display: flex;
+    flex-flow: column-reverse;
+    padding: 0;
+    pointer-events: all;
+
+    &:not(:last-child) {
+      margin-left: 10px;
+    }
+
+    .MapSettingsButton {
+      background: @color-white;
+      cursor: pointer;
+      padding: 5px;
+    }
+
+    .MapSettingsPanel {
+      &:extend(.shadow-smooth);
+      background: @color-white;
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 10px;
+      padding: 5px;
+
+      .MapSettingsItem {
+        background: @color-white;
+        cursor: pointer;
+      }
+    }
+  }
+
+  @media (max-width: @screen-ls) {
+    right: 15px;
+    transform-origin: bottom right;
+    transform: rotate(90deg) translate(0, 50px);
+    z-index: 2;
+
+    // scale Mapsettings on touch devices
+    html:not(.ua-desktop) & {
+      right: 15px;
+      transform: rotate(90deg) translate(0, 40px) scale(0.8);
+    }
+
+    .MapSettingsTile {
+      transform: rotate(-180deg) translate(0, calc(~'-100% + 50px'));
+
+      .MapSettingsPanel {
+        .MapSettingsItem {
+          margin-top: 2px;
+          margin-bottom: 2px;
+        }
+      }
+    }
+
+    svg {
+      transform: rotate(90deg);
+
+      &:hover {
+        transform: rotate(90deg) !important;
+      }
+    }
+  }
+}
+
+// OLD
+.MapSettings {
+  align-items: flex-end;
+  bottom: 15px;
+  display: flex;
+  flex-flow: column-reverse;
+  padding: 0;
+  position: absolute;
+  right: 47px;
+  z-index: 1;
+
+  @media (max-width: @screen-ls) {
+    right: 15px;
+  }
+
+  .MapSettingsPanel {
+    &:extend(.shadow-smooth);
+    background: @color-white;
+    display: flex;
+    margin-bottom: 10px;
+
+    .MapSettingsTile,
+    .MapSettingsButton {
+      cursor: pointer;
+      padding: 5px;
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+.NoData {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  color: @gray-lighter;
+  white-space: nowrap;
+  text-transform: uppercase;
+}

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

@@ -0,0 +1,234 @@
+.notification-container {
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: fixed;
+  z-index: 999999;
+
+  .notification {
+    &:extend(.shadow-smooth);
+    background-color: @color-white;
+    color: @color-white;
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 16px;
+    position: relative;
+
+    :not(.stacked) & {
+      &:nth-child(n+5) {
+        position: fixed;
+        top: auto;
+      }
+
+      &:nth-child(6n) {
+        border-bottom-style: solid;
+        border-bottom-width: 3px;
+        box-shadow: none !important;
+      }
+    }
+
+    .stacked & {
+      position: fixed;
+      top: auto;
+
+      &:nth-child(2n) {
+        border-bottom-style: solid;
+        border-bottom-width: 3px;
+        box-shadow: none !important;
+      }
+    }
+
+    .title {
+      font-size: 16px;
+      color: @color-white;
+      font-weight: @font-medium;
+      margin: 0 0 5px 0;
+    }
+
+    .notification-message {
+      font-weight: @font-normal;
+
+      &:before {
+        position: absolute;
+        top: 50%;
+        left: 15px;
+        margin-top: -14px;
+        display: block;
+        font-family: 'rioglyph';
+        font-size: 16px;
+        text-align: center;
+        line-height: 28px;
+      }
+
+      .notification-close {
+        color: @color-white;
+        padding: 4px;
+        position: absolute;
+        text-decoration: none;
+      }
+    }
+
+    &.notification-info {
+      border-bottom-color: darken(@brand-info, 5%);
+
+      .notification-message {
+        background-color: fade(@brand-info, 80%);
+
+        &:before {
+          content: @rioglyph-info-sign;
+          font-size: 20px;
+        }
+      }
+    }
+
+    &.notification-success {
+      border-bottom-color: darken(@brand-success, 5%);
+
+      .notification-message {
+        background-color: fade(@brand-success, 80%);
+
+        &:before {
+          content: @rioglyph-ok;
+          font-size: 16px;
+        }
+      }
+    }
+
+    &.notification-warning {
+      border-bottom-color: darken(@brand-warning, 5%);
+
+      .notification-message {
+        background-color: fade(@brand-warning, 80%);
+
+        &:before {
+          content: @rioglyph-exclamation-sign;
+          font-size: 20px;
+        }
+      }
+    }
+
+    &.notification-error {
+      border-bottom-color: darken(@brand-danger, 5%);
+
+      .notification-message {
+        background-color: fade(@brand-danger, 80%);
+
+        &:before {
+          content: @rioglyph-error-sign;
+          font-size: 20px;
+        }
+      }
+    }
+
+    // animation
+    &.notification-enter {
+      transform: translateX(100%);
+
+      &.notification-enter-active {
+        transform: translateX(0);
+        transition: transform 0.4s;
+      }
+    }
+
+    &.notification-leave {
+      transform: translateX(0);
+
+      &.notification-leave-active {
+        transform: translateX(100%);
+        transition: transform 0.4s;
+      }
+    }
+  }
+
+  @media (min-width: @screen-ls) {
+    max-height: calc(~'100vh - @{navbar-height}'); // --vh fallback
+    max-height: calc(~'var(--vh, 1vh) * 100 - @{navbar-height}');
+    padding: 0 15px;
+    right: 0;
+    top: 15px;
+    width: 320px;
+
+    .ApplicationLayout & {
+      top: 50px;
+    }
+
+    .notification {
+      border-radius: @border-radius-default;
+      margin-top: 15px;
+
+      :not(.stacked) & {
+        &:nth-child(n+5) {
+          width: 290px;
+        }
+
+        &:nth-child(6n) {
+          .notification-message {
+            border-radius: @border-radius-default @border-radius-default 0 0;
+          }
+        }
+      }
+
+      .stacked & {
+        width: 290px;
+
+        &:nth-child(2n) {
+          .notification-message {
+            border-radius: @border-radius-default @border-radius-default 0 0;
+          }
+        }
+      }
+
+      .notification-message {
+        border-radius: @border-radius-default;
+        padding: 15px 15px 15px 45px;
+
+        .notification-close {
+          font-size: 12px;
+          line-height: 12px;
+          right: 1px;
+          top: 1px;
+
+          &:hover {
+            transform: scale(1.1);
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: @screen-ls) {
+    left: 0;
+    max-height: 100vh; // --vh fallback
+    max-height: calc(~'var(--vh, 1vh) * 100');
+    right: 0;
+    top: 0;
+
+    // .ApplicationLayout & {
+    //   left: 50px;
+    // }
+
+    .notification {
+      margin-top: 0;
+
+      :not(.stacked) & {
+        &:nth-child(n+5) {
+          width: 100vw;
+        }
+      }
+
+      .stacked & {
+        width: 100vw;
+      }
+
+      .notification-message {
+        padding: 15px 40px 15px 45px;
+
+        .notification-close {
+          font-size: 20px;
+          line-height: 20px;
+          right: 8px;
+          top: 8px;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,173 @@
+@dim-radio-size-default: 14px;
+@color-disabled-inverted: darken(@gray-darker, 20%);
+@input-margin: 7px;
+
+.radio {
+  color: @gray-darkest;
+  font-size: @font-size-default;
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.radio + .radio {
+  margin-top: 0; // Overwrite BS default
+}
+
+.radio > label,
+.radio label {
+  padding-left: 0;
+}
+
+.radio-inline {
+  margin-bottom: 0;
+  padding-left: 0;
+  padding-right: 10px;
+}
+
+.radio,
+.radio-inline {
+  cursor: pointer;
+
+  // focused state
+  &:focus {
+    outline: none;
+
+    // use tag name for being stronger than the checked style and to avoid using important
+    input[type='radio'] {
+      + .radio-text,
+      + .radio-text-wrapper > .radio-text {
+        &:before,
+        &:after {
+          border-color: @gray-darker;
+        }
+      }
+
+      &:checked {
+        + .radio-text {
+          &:before,
+          &:after {
+            box-shadow: inset 0px 0px 0px 1px @gray-darker;
+          }
+        }
+      }
+    }
+  }
+
+  input[type='radio'] {
+    display: none;
+
+    + .radio-text,
+    + .radio-text-wrapper > .radio-text {
+      font-weight: @font-normal;
+
+      &:before,
+      &:after {
+        -webkit-font-smoothing: antialiased;
+        background-color: @color-white;
+        border-radius: 50%;
+        border: 1px solid @gray;
+        display: inline-block;
+        font-style: normal;
+        font-weight: @font-normal;
+        height: @dim-radio-size-default;
+        line-height: 1;
+        margin-right: @input-margin;
+        position: relative;
+        top: -2px;
+        vertical-align: middle;
+        width: @dim-radio-size-default;
+      }
+
+      &:before {
+        content: '';
+      }
+    }
+
+    + .radio-icon {
+      display: flex;
+      align-items: center;
+
+      &.label-vertical {
+        align-items: center;
+        flex-direction: column;
+        hyphens: auto;
+        overflow: hidden;
+        text-align: center;
+        word-break: break-word;
+        word-wrap: break-word;
+      }
+
+      &.label-horizontal {
+        .radio-label {
+          margin-left: @input-margin;
+        }
+      }
+
+      .rioglyph {
+        color: @gray;
+        display: block;
+      }
+
+      .radio-label {
+        color: @gray-darker;
+      }
+    }
+
+    // Show icon on right side and disable icon on left side
+    &.icon-right + .radio-text {
+      &:before {
+        display: none;
+      }
+
+      &:after {
+        content: '';
+        margin-left: @input-margin;
+        margin-right: 0;
+      }
+    }
+
+    // Define style for 'checked' state
+    &:checked {
+      + .radio-text,
+      + .radio-text-wrapper > .radio-text {
+        &:before,
+        &:after {
+          animation: radio-tick 100ms ease-in;
+          border-color: @brand-primary;
+          border-width: 4px;
+        }
+      }
+
+      + .radio-icon {
+        .rioglyph {
+          animation: radio-tick 100ms ease-in;
+          color: @brand-primary;
+        }
+      }
+    }
+
+    // Define style for 'diabled' state
+    &:disabled + .radio-text {
+      //color: @gray-light;
+      opacity: 0.5;
+      cursor: not-allowed;
+
+      &:before,
+      &:after {
+        border-color: @gray-light;
+      }
+    }
+  }
+}
+
+@keyframes radio-tick {
+  0% {
+    transform: scale(0);
+  }
+  90% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

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

@@ -0,0 +1,43 @@
+@dim-resizer-width: 6px;
+
+.Resizer {
+  display: flex;
+  position: absolute;
+  transition: background-color 0.1s ease-in-out;
+
+  &:hover {
+    background-color: rgba(167, 175, 187, 0.2);
+  }
+
+  &.resize-horizontal {
+    height: 100%;
+    width: @dim-resizer-width;
+    cursor: ew-resize;
+
+    &.resize-left {
+      left: -(@dim-resizer-width);
+      top: 0;
+    }
+
+    &.resize-right {
+      right: -(@dim-resizer-width);
+      top: 0;
+    }
+  }
+
+  &.resize-vertical {
+    height: @dim-resizer-width;
+    width: 100%;
+    cursor: ns-resize;
+
+    &.resize-top {
+      right: 0;
+      top: -(@dim-resizer-width);
+    }
+
+    &.resize-bottom {
+      right: 0;
+      bottom: -(@dim-resizer-width);
+    }
+  }
+}