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

package/lib/styles/components/Spinner.less

@@ -0,0 +1,49 @@
+.spinner {
+  .spinnerMixin(20, @brand-primary);
+
+  &.inverse {
+    .spinnerMixin(20, @color-white);
+  }
+
+  &.double {
+    .spinnerMixin(30, @brand-primary);
+
+    &.inverse {
+      .spinnerMixin(30, @color-white);
+    }
+  }
+}
+
+
+.spinnerInfoBox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+
+  &.inverse {
+    color: @color-white;
+  }
+
+  &.fullscreen, &.fullsized {
+    background: rgba(255,255,255,.85);
+    bottom: 0;
+    left: 0;
+    padding: 0 5%;
+    right: 0;
+    top: 0;
+    z-index: 2147483647;
+
+    .spinnerText {
+      font-size: 18px;
+    }
+  }
+
+  &.fullscreen {
+    position: fixed;
+  }
+
+  &.fullsized {
+    position: absolute;
+  }
+}

package/lib/styles/components/StatsWidget.less

@@ -0,0 +1,111 @@
+.StatsWidget-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  // FALLBACK
+  .css-no-gap & {
+    > * {
+      margin: 10px;
+    }
+  }
+
+  + .StatsWidget-wrapper {
+    margin-top: 20px;
+  }
+
+  .StatsWidget {
+    background: @color-white;
+    border-radius: @border-radius-default;
+    border: 1px solid @gray-light;
+    flex: 1 1 auto;
+    position: relative;
+    user-select: none;
+
+    .StatsWidget-header {
+      font-size: 18px;
+      padding: 20px 20px 0 20px;
+      text-align: center;
+
+      &:after {
+        background: @gray-lightest;
+        content: '';
+        display: block;
+        height: 2px;
+        margin-top: 10px;
+      }
+    }
+
+    .StatsWidget-footer {
+      padding: 5px 10px;
+      font-size: 12px;
+      border-radius: 0 0 @border-radius-default @border-radius-default;
+    }
+
+    .StatsWidget-body {
+      align-items: center;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      padding: 10px 20px 20px 20px;
+
+      &.full-width {
+        justify-content: space-between;
+      }
+
+      .StatsWidgetNumber {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin: 0 10px;
+      }
+
+      .StatsWidgetNumber-counter {
+        align-items: baseline;
+        display: flex;
+        justify-content: center;
+        text-align: center;
+
+        .StatsWidgetNumber-value {
+          @media (max-width: @screen-sm) { font-size: 22px }
+          @media (min-width: @screen-sm) { font-size: 26px }
+          @media (min-width: @screen-lg) { font-size: 30px }
+          @media (min-width: @screen-xl) { font-size: 40px }
+        }
+
+        .StatsWidgetNumber-total {
+          &:before {
+            content: " / ";
+          }
+
+          @media (max-width: @screen-sm) { font-size: 22px * 0.4 }
+          @media (min-width: @screen-sm) { font-size: 26px * 0.4 }
+          @media (min-width: @screen-lg) { font-size: 30px * 0.4 }
+          @media (min-width: @screen-xl) { font-size: 40px * 0.4 }
+        }
+      }
+
+      .StatsWidgetNumber-label {
+        color: @gray-darkest;
+        text-align: center;
+
+        @media (max-width: @screen-sm) { font-size: 22px * 0.65 }
+        @media (min-width: @screen-sm) { font-size: 26px * 0.5 }
+        @media (min-width: @screen-lg) { font-size: 30px * 0.5 }
+        @media (min-width: @screen-xl) { font-size: 40px * 0.5 }
+      }
+
+      .StatsWidget-body-column-spacer {
+        width: 2px;
+        height: 20px;
+
+        &:not(.invisible) {
+          background: @gray-lighter;
+          margin: 0 5px;
+        }
+
+        @media (max-width: @screen-sm) { display: none }
+      }
+    }
+  }
+}

package/lib/styles/components/SteppedProgressBar.less

@@ -0,0 +1,310 @@
+@circle-nav-item-margin: 60px;
+@circle-tab-size: 46px;
+@circle-tab-border-radius: 50%;
+
+@roadsign-size: 50px;
+@roadsign-arrow-color: escape('@{gray-lighter}');
+@roadsign-svg-color: escape('@{color-white}');
+@roadsign-svg-active-color: escape('@{color-highlight-decent}');
+
+.stepped-progress-bar {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+
+  // flexbox pseudo element fix
+  &:after {
+    display: none;
+  }
+
+  &:before {
+    background-color: @gray-light;
+    content: "";
+    height: 2px;
+    left: @circle-tab-size * 0.5;
+    position: absolute;
+    top: calc(~"50% - 1px");
+    width: calc(~"100% - @{circle-tab-size}");
+  }
+
+  .step-tab {
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: none;
+      outline: none;
+    }
+
+    &.active,
+    &.disabled {
+      pointer-events: none;
+      pointer-events: none;
+    }
+  }
+
+  &.variant-circle {
+    margin-left: 20px;
+    margin-right: 20px;
+
+    @media (min-width: @screen-sm) {
+      margin-bottom: @circle-tab-size * 1.5;
+    }
+
+    .step-tab {
+      background: @color-white;
+      border-radius: @circle-tab-border-radius;
+      border: 1px solid @gray;
+      font-weight: @font-normal;
+      height: @circle-tab-size;
+      min-width: @circle-tab-size;
+      width: @circle-tab-size;
+      z-index: 2;
+
+      &:first-child {
+        margin-left: @circle-tab-size * 0.5;
+      }
+
+      &:last-child {
+        margin-right: @circle-tab-size * 0.5;
+      }
+
+      .step-tab-content {
+        display: flex;
+        flex-direction: column;
+        font-size: @circle-tab-size * 0.4;
+        position: relative;
+        text-align: center;
+
+        .item-icon {
+          color: @brand-primary;
+          height: @circle-tab-size;
+          line-height: @circle-tab-size * 0.9;
+          margin-bottom: @circle-tab-size * 0.4;
+          width: @circle-tab-size;
+
+          .rioglyph {
+            margin: 5px 0 0 -1px;
+          }
+        }
+
+        .item-label {
+          color: @brand-primary;
+          font-size: 16px;
+          left: 50%;
+          position: relative;
+          text-align: center;
+          transform: translateX(-50%);
+
+          @media (max-width: @screen-sm) {
+            display: none;
+          }
+
+          @media (min-width: @screen-sm) {
+            .ellipsis-2;
+            width: 200px;
+            max-width: none;
+          }
+        }
+      }
+
+      &:hover:not(.disabled)  {
+        background-color: @brand-primary;
+        border-color: @brand-primary;
+
+        .item-icon {
+          color: @color-white;
+        }
+
+        .item-label {
+          color: @link-color;
+        }
+      }
+
+      &.active {
+        color: @color-white;
+        border-color: @brand-primary;
+        background-color: @brand-primary;
+
+        .item-icon {
+          color: @color-white;
+        }
+
+        .item-label {
+          color: @link-color;
+        }
+      }
+
+      &.disabled {
+        border-color: @gray;
+        background-color: @color-white;
+
+        .item-icon {
+          color: @gray;
+        }
+
+        .item-label {
+          color: @gray;
+        }
+      }
+    }
+  }
+
+  &.variant-rectangle {
+    gap: 20px;
+
+   .step-tab {
+      align-items: center;
+      background: @color-white;
+      border: 1px solid @gray-light;
+      border-radius: @border-radius-default;
+      display: flex;
+      justify-content: center;
+      position: relative;
+      text-align: center;
+
+      .step-tab-content {
+        align-items: center;
+        color: inherit;
+        display: flex;
+        flex: 1 1 0;
+        height: 100%;
+        justify-content: center;
+        padding: 10px;
+
+        .item-icon {
+          .rioglyph {
+            font-size: 20px;
+            margin-right: 5px;
+          }
+        }
+      }
+
+      &.active {
+        border-color: @brand-primary;
+      }
+
+      &.disabled {
+        background-color: @gray-lightest;
+        color: @gray;
+      }
+    }
+  }
+
+  &.variant-roadsign {
+    @media (min-width: @screen-sm) {
+      &:before {
+        display: none;
+      }
+    }
+
+    .step-tab {
+      align-items: center;
+      background: @color-white;
+      display: flex;
+      flex: 1 1 0;
+      justify-content: center;
+      position: relative;
+      text-align: center;
+      padding-right: 30px;
+      align-items: center;
+      min-height: 50px;
+
+      .step-tab-content {
+        align-items: center;
+        color: inherit;
+        display: flex;
+        flex: 1 1 0;
+        height: 100%;
+        justify-content: center;
+
+        .item-icon {
+          .rioglyph {
+            font-size: 20px;
+            margin-right: 5px;
+          }
+        }
+      }
+
+      &.active {
+        color: @brand-primary;
+        font-weight: @font-medium;
+      }
+
+      &.disabled {
+        border-color: @gray;
+        background-color: @color-white;
+        color: @gray;
+      }
+
+      &:after {
+        content: "";
+        display: block;
+        top: 0;
+        bottom: 0;
+        width: 25px;
+        position: absolute;
+        right: 0;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        background-color: @gray-lighter;
+        background-image: url(~"data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2250%22%20height%3D%22100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22@{roadsign-svg-color}%22%20d%3D%22M0%200h50v100H0z%22%2F%3E%3Cpath%20d%3D%22M10%200l40.04%2050L10%20100l-9.999-.001L40%2050%200%200h10z%22%20fill%3D%22@{roadsign-arrow-color}%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+      }
+
+      &:last-child {
+        &:after {
+          display: none;
+          padding-right: 0;
+        }
+      }
+    }
+  }
+
+  &.mobile-breakpoint {
+    @media (max-width: @screen-sm) {
+      flex-direction: column;
+
+      &:after,
+      &:before {
+        height: 100%;
+        left: calc(~"50% - 1px");
+        top: 0;
+        width: 2px;
+      }
+
+      &.variant-circle {
+        align-items: center;
+
+        .step-tab {
+          margin: 5px 0;
+
+          &:first-child {
+            margin-top: 0;
+          }
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+
+      &.variant-roadsign {
+        .step-tab {
+          margin: 10px 0;
+          padding-right: 0;
+
+          &:after {
+            display: none;
+          }
+
+          &:first-child {
+            margin: 0 0 10px 0;
+          }
+
+          &:last-child {
+            margin: 10px 0 0 0;
+          }
+        }
+      }
+    }
+  }
+}

package/lib/styles/components/SupportMarker.less

@@ -0,0 +1,34 @@
+.support-marker {
+  html.show-support-marker & {
+    box-shadow: 0px 0px 0px 2px @brand-info;
+    position: relative;
+
+    &:before {
+      background-color: @brand-info;
+      color: @color-white;
+      content: attr(data-support);
+      display: block;
+      hyphens: auto;
+      left: 0;
+      overflow: hidden;
+      padding: 3px 8px 5px 6px;
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      white-space: pre;
+      width: auto;
+      word-break: break-word;
+      word-wrap: break-word;
+      z-index: 1;
+      border-radius: 0 0 @border-radius-default 0;
+    }
+
+    &:hover {
+      //box-shadow: none;
+
+      &:before {
+        opacity: 0.1;
+      }
+    }
+  }
+}

package/lib/styles/components/Switch.less

@@ -0,0 +1,145 @@
+@switch-animation-time: 0.15s;
+@switch-animation-delay: @switch-animation-time * 0.5;
+@switch-height: 20px;
+@switch-padding: 2px;
+
+.uikit-switch {
+  height: @switch-height;
+}
+
+.switch-label {
+  align-items: center;
+  display: inline-flex;
+  margin: 0;
+  position: relative;
+
+  &.label-position {
+    &-left {
+      flex-direction: row-reverse;
+
+      .switch-content {
+        margin-left: @switch-padding * 2;
+      }
+    }
+
+    &-right {
+      .switch-content {
+        margin-right: @switch-padding * 2;
+      }
+    }
+  }
+
+  .switch-input {
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+
+    &:checked + .switch-content {
+      background: @brand-primary;
+
+      .panel-primary .panel-heading & {
+        background: @color-highlight-dark;
+      }
+
+      .switch-text {
+        &:before {
+          opacity: 0;
+          padding: 0;
+          text-align: left;
+          width: 0;
+        }
+
+        &:after {
+          opacity: 1;
+          padding: 0 @switch-height + @switch-padding 0 @switch-padding * 3;
+          width: auto;
+        }
+      }
+
+      .switch-handle {
+        left: calc(~"100% - (@{switch-height} - @{switch-padding})");
+      }
+    }
+
+    &:disabled {
+      pointer-events: none;
+
+      + .switch-content {
+        pointer-events: none;
+        background: @gray-light;
+      }
+
+      &:checked + .switch-content {
+        background: @color-highlight-light;
+      }
+    }
+  }
+
+  .switch-content {
+    background-color: @gray;
+    border-radius: @border-radius-round;
+    cursor: pointer;
+    height: @switch-height;
+    position: relative;
+
+    .switch-text {
+      border-radius: inherit;
+      display: block;
+      font-size: 12px;
+      height: inherit;
+      position: relative;
+      text-transform: uppercase;
+
+      &:before, &:after {
+        color: @color-white;
+        display: inline-block;
+        line-height: @switch-height;
+        overflow: hidden;
+        position: relative;
+        transition: inherit;
+        user-select: none;
+        white-space: nowrap;
+      }
+
+      &:before {
+        content: attr(data-off);
+        opacity: 1;
+        padding: 0 @switch-padding * 3 0 @switch-height + @switch-padding;
+        text-align: right;
+        width: 100%;
+        transition: none;
+      }
+
+      &:after {
+        content: attr(data-on);
+        opacity: 0;
+        width: 0;
+        transition: width @switch-animation-time ease ~"," opacity @switch-animation-time ease @switch-animation-delay;
+      }
+    }
+
+    .switch-handle {
+      background: @color-white;
+      border-radius: @border-radius-round;
+      height: @switch-height - @switch-padding * 2;
+      left: @switch-padding;
+      position: absolute;
+      top: @switch-padding;
+      transition: all @switch-animation-time ease;
+      width: @switch-height - @switch-padding * 2;
+
+      &:before {
+        background: @gray-lighter;
+        border-radius: @border-radius-round;
+        content: '';
+        height: @switch-height * 0.5;
+        left: 50%;
+        margin: -(@switch-height * 0.25) 0 0 -(@switch-height * 0.25);
+        position: absolute;
+        top: 50%;
+        width: @switch-height * 0.5;
+      }
+    }
+  }
+}