@rio-cloud/rio-uikit 0.16.3 → 0.16.4-beta.10

package/styles/components/ApplicationLayout.less

@@ -1,238 +0,0 @@
-.ApplicationLayout {
-  position: relative;
-
-  .ApplicationLayoutHeader {
-    height: @ApplicationLayoutHeaderHeight;
-    width: 100%;
-    position: relative;
-
-    .ApplicationHeader {
-      z-index: @zindex-navbar;
-    }
-
-    ~ .ApplicationLayoutSidebar {
-      height: @ApplicationLayoutBodyHeightWithoutHeader; // fallback
-      height: @ApplicationLayoutBodyHeightWithoutHeaderAndViewportFix;
-    }
-
-    ~ .ApplicationLayoutBody {
-      height: @ApplicationLayoutBodyHeightWithoutHeader; // fallback
-      height: @ApplicationLayoutBodyHeightWithoutHeaderAndViewportFix;
-
-      &.has-footer {
-        height: @ApplicationLayoutBodyHeightWithoutHeaderWithoutFooter; // fallback
-        height: @ApplicationLayoutBodyHeightWithoutHeaderWithoutFooterAndViewportFix;
-      }
-    }
-
-
-  }
-
-  .ApplicationLayoutSidebar {
-    position: relative;
-    float: left;
-    height: @ApplicationLayoutBodyHeight; // fallback
-    height: @ApplicationLayoutBodyHeightAndViewportFix;
-    z-index: @zindex-sidebar;
-
-    &.right {
-      float: right;
-    }
-  }
-
-  .ApplicationLayoutBody {
-    float: none;
-    height: @ApplicationLayoutBodyHeight; // fallback
-    height: @ApplicationLayoutBodyHeightAndViewportFix;
-    overflow: auto;
-    position: relative;
-
-    &.has-footer {
-      height: @ApplicationLayoutBodyHeightWithoutFooter; // fallback
-      height: @ApplicationLayoutBodyHeightWithoutFooterAndViewportFix;
-    }
-
-    // TODO remove with v1.0 (downward compatibility) - remove when cleanup
-    .ApplicationLayoutBodyNavigation {
-      &:not(.unstyled) {
-        align-items: center;
-        background: var(--color-white);
-        border-bottom: 1px solid var(--gray-light);
-        display: flex;
-        justify-content: space-between;
-        // padding: 0 @ApplicationLayoutBodyPadding*0.25 0 @ApplicationLayoutBodyPadding*0.5;
-      }
-
-      // &:not(.header-has-no-application-menu) {
-      //   @media (min-width: @screen-lg) {
-      //     padding-left: 365px;
-      //   }
-      // }
-
-      .nav-pills {
-        padding-left: @ApplicationLayoutBodyPadding*0.5;
-
-        &:not(.nav-stacked) {
-          box-shadow: none;
-
-          > li {
-            > a, > span, > div {
-
-              padding-left: 0;
-              padding-right: 0;
-              margin-left: 15px;
-              margin-right: 15px;
-
-              &:is(:hover, :focus) {
-                box-shadow: inset 0px -2px 0px 0px var(--color-black);
-              }
-            }
-
-            &:is(:active, .active) {
-              > a, > span, > div {
-                box-shadow: inset 0px -3px 0px 0px var(--color-black);
-              }
-            }
-          }
-        }
-      }
-    }
-    // END TODO
-
-    // body:not(.modal-open) & {
-    //   // -webkit-overflow-scrolling: touch; // TODO remove when cleanup
-    // }
-
-    .scroll-to-top {
-      height: 0;
-      position: absolute;
-      transition: height 0.5s ease;
-      width: @btn-size-default;
-      overflow: hidden;
-
-      &.in {
-        height: @btn-size-default;
-      }
-
-      @media (max-width: @screen-xs-max) {
-        bottom: @ApplicationLayoutBodyPadding * 0.3;
-        right: @ApplicationLayoutBodyPadding * 0.3;
-      }
-
-      @media (min-width: @screen-ls) {
-        bottom: @ApplicationLayoutBodyPadding * 0.8;
-        right: @ApplicationLayoutBodyPadding * 0.8;
-      }
-    }
-
-    /* Default application content area with default padding and default background */
-    .module-content-wrapper {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
-
-    .module-content {
-      flex: 1 1 0; // instead "auto" we 0 for safari
-      margin: 0;
-      min-width: 0;
-      overflow: auto;
-      position: relative;
-
-      @media (max-width: @screen-xs-max) {
-        padding: @ApplicationLayoutBodyPadding*0.5;
-      }
-      @media (min-width: @screen-ls) {
-        padding: @ApplicationLayoutBodyPadding;
-      }
-    }
-
-    .ApplicationLayoutBodyBanner {
-      line-height: 1.25;
-      padding: 3px 10px 4px 10px;
-      text-align: center;
-
-      + .module-content {
-        height: auto; // double scrollbar bug // Unnecessary?
-      }
-    }
-
-    &.not-responsive {
-      .module-content {
-        min-width: @ApplicationLayoutNotResponsiveWidth;;
-        padding: @ApplicationLayoutBodyPadding;
-      }
-
-      @media (max-width: @ApplicationLayoutNotResponsiveWidth) {
-        .scroll-to-top {
-          position: fixed;
-        }
-      }
-    }
-  }
-
-  .ApplicationLayoutBodyBottomBar {
-    align-items: center;
-    background-color: var(--color-white);
-    border-top: 1px solid var(--gray-light);
-    display: flex;
-    height: @ApplicationLayoutBodyBottomBarHeight;
-    padding: 10px;
-
-    &.use-body-padding {
-      @media (max-width: @screen-xs-max) {
-        padding-left: @ApplicationLayoutBodyPadding*0.5;
-        padding-right: @ApplicationLayoutBodyPadding*0.5;
-      }
-
-      @media (min-width: @screen-ls) {
-        padding-left: @ApplicationLayoutBodyPadding;
-        padding-right: @ApplicationLayoutBodyPadding;
-      }
-    }
-  }
-
-  // Common Website-behavior
-  &.common-website-behavior {
-    position: unset;
-
-    .ApplicationLayoutBody {
-      height: unset;
-      overflow: unset;
-      position: unset;
-      float: unset;
-
-      .module-content {
-        background-color: transparent;
-        flex: unset;
-        height: unset;
-        margin: 0;
-        min-width: 0;
-        overflow: unset;
-        padding: 0;
-        position: unset;
-      }
-    }
-
-    .ApplicationLayoutHeader {
-      left: 0;
-      position: fixed;
-      right: 0;
-      top: 0;
-      z-index: 1000;
-
-      + .ApplicationLayoutBody {
-        margin-top: @ApplicationLayoutHeaderHeight;
-
-        .module-content {
-          min-height: @ApplicationLayoutBodyHeightWithoutHeader; // fallback
-          min-height: @ApplicationLayoutBodyHeightWithoutHeaderAndViewportFix;
-        }
-      }
-    }
-  }
-
-  &:after {
-    clear: both;
-  }
-}

package/styles/components/AssetTree.less

@@ -1,441 +0,0 @@
-@asset-tree-shadow-color: .hsla(@always-color-black-hsl, 0.1)[@result];
-@asset-tree-collapsed-width: 50px;
-@asset-tree-sidebar-bg: var(--always-color-black);
-@asset-tree-sidebar-icon-color: var(--always-color-white);
-
-// font-weight hotfix old tree
-.ObjectTree {
-  font-weight: @font-normal;
-}
-
-.AssetTree {
-  position: relative;
-  height: 100%;
-  background-color: var(--color-white);
-
-  &Content {
-    display: flex;
-    height: 100%;
-  }
-
-  .TreeSidebar {
-    background: @asset-tree-sidebar-bg;
-    display: flex;
-    flex-direction: column;
-    min-width: @asset-tree-collapsed-width;
-    width: @asset-tree-collapsed-width;
-  }
-
-  .TreeSidebarToggle {
-    cursor: pointer;
-    height: @asset-tree-collapsed-width;
-    text-align: center;
-    width: @asset-tree-collapsed-width;
-
-    .rioglyph {
-      color: @asset-tree-sidebar-icon-color;
-      font-size: 18px;
-      height: @asset-tree-collapsed-width;
-      line-height: @asset-tree-collapsed-width;
-      opacity: 1;
-      width: @asset-tree-collapsed-width;
-    }
-  }
-
-  &.closed {
-    box-shadow: none !important;
-    width: 50px !important;
-
-    .TreeSidebarToggle {
-      transform: rotate(180deg);
-    }
-
-    .TreeSidebarNavigation li {
-      &:before, &:after {
-        display: none;
-      }
-    }
-  }
-
-  &Body {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
-    overflow: auto;
-    // -webkit-overflow-scrolling: touch; // TODO remove when cleanup
-  }
-
-  .TreeSidebarNavigation {
-    .reset-list();
-    flex: 1 0;
-    padding-top: 6px;
-
-    li {
-      align-items: center;
-      color: @asset-tree-sidebar-icon-color;
-      cursor: pointer;
-      display: flex;
-      font-size: 30px;
-      height: @asset-tree-collapsed-width;
-      justify-content: center;
-      overflow: hidden;
-      position: relative;
-      text-align: center;
-      transition: opacity 0.25s ease;
-      width: @asset-tree-collapsed-width;
-
-      .rioglyph {
-        opacity: 0.35;
-      }
-
-      .selection-bubble {
-        position: relative;
-        width: @asset-tree-collapsed-width;
-        height: @asset-tree-collapsed-width;
-      }
-
-      &.active {
-        color: @asset-tree-sidebar-icon-color;
-
-        &:before, &:after {
-          border-color: transparent;
-          border-style: solid;
-          border-width: 8px 6px 8px 0;
-          content: '';
-          height: 0;
-          position: absolute;
-          right: -12px;
-          top: calc(~'50% - 8px');
-          transition: right 0.25s ease;
-          width: 0;
-        }
-
-        &:before {
-          border-right-color: @asset-tree-sidebar-bg;
-          right: 1px;
-        }
-
-        &:after {
-          border-right-color: var(--color-white);
-          right: 0;
-        }
-
-        .rioglyph {
-          opacity: 1;
-        }
-      }
-
-      &.selected {
-        .selection-bubble:after {
-          background: var(--brand-primary);
-          border-radius: @border-radius-round;
-          border: 2px solid var(--color-black);
-          content: '';
-          height: 14px;
-          position: absolute;
-          right: 9px;
-          top: 7px;
-          width: 14px;
-        }
-      }
-    }
-  }
-
-  &ResizeLimit {
-    display: none;
-    position: absolute;
-    height: 100%;
-    width: 0;
-    border: 1px dashed var(--gray-darkest);
-    opacity: 0.2;
-    pointer-events: none;
-  }
-
-  &.fluid {
-    .ApplicationLayoutSidebar:not(.right) & {
-      float: left;
-      left: 0;
-      box-shadow: 1px 0 0 0 var(--gray-light);
-    }
-
-    .ApplicationLayoutSidebar.right & {
-      float: right;
-      box-shadow: -1px 0 0 0 var(--gray-light);
-    }
-  }
-
-  &.fly {
-    position: absolute;
-    top: 0;
-
-    .ApplicationLayoutSidebar:not(.right) & {
-      box-shadow: 5px 5px 5px @asset-tree-shadow-color;
-      left: 0;
-    }
-
-    .ApplicationLayoutSidebar.right & {
-      box-shadow: -5px 5px 5px @asset-tree-shadow-color;
-      right: 0;
-    }
-  }
-
-  html:not(.ua-desktop) & {
-    .TreeSidebar {
-      background: var(--gray-lightest);
-      box-shadow: inset -1px 0 var(--gray-light);
-    }
-
-    &.closed {
-      .TreeSidebar {
-        background: var(--color-white);
-      }
-    }
-
-    .TreeSidebarToggle {
-      .rioglyph {
-        color: var(--color-black);
-      }
-    }
-
-    .TreeSidebarNavigation {
-      li {
-        color: var(--color-black);
-
-        .rioglyph {
-          opacity: 0.5;
-        }
-
-        &.active {
-          &:before {
-            border-right-color: var(--gray-light);
-          }
-
-          &:after {
-            border-right-color: var(--color-white);
-          }
-
-          .rioglyph {
-            opacity: 1;
-          }
-        }
-
-        &.selected {
-          .selection-bubble:after {
-            border: 2px solid var(--gray-lightest);
-          }
-        }
-      }
-    }
-  }
-}
-
-// TREE
-.TreeHeader {
-  background: var(--color-white);
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  border-bottom: 1px solid var(--gray-light);
-
-  .TreeHead {
-    min-height: 50px;
-  }
-
-  &Options {
-    .dropdown-toggle {
-      width: 20px;
-      height: 20px;
-    }
-
-    .TreeOption {
-      line-height: 1.25 !important;
-      margin: 5px 0;
-
-      span:last-child {
-        word-break: break-word; // webkit
-        word-wrap: break-word;
-      }
-
-      &:first-child {
-        margin-top: 0;
-      }
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-}
-
-.TreeSearch {
-  display: flex;
-  padding: 15px;
-
-  .no-spacings & {
-    padding: 0 0 15px 0;
-  }
-
-  + .TreeHead {
-    margin-top: -15px;
-  }
-}
-
-.TreeFilter {
-  display: none;
-}
-
-.TreeRoot {
-  flex: 1 0 auto;
-  overflow: auto;
-  contain: content;
-
-  .TreeNodeContainer {
-    font-size: 14px;
-
-    &.open {
-      .TreeNode .TreeLabelExpander {
-        transform: translateY(-50%) rotate(-180deg) !important;
-      }
-    }
-
-    &:not(.open) {
-      .TreeLeaf:not(.root) {
-        display: none;
-      }
-    }
-
-    .TreeNode,
-    .TreeLeaf {
-      background: var(--color-white);
-      border-bottom: 1px solid var(--gray-lighter);
-      display: flex;
-      padding: 0 10px 0 15px;
-
-      &:hover {
-        background-color: var(--gray-lightest);
-      }
-
-      &.active {
-        .TreeLabel {
-          .TreeLabelName {
-            font-weight: @font-medium;
-            letter-spacing: -0.2px;
-          }
-        }
-      }
-
-      .TreeCheckbox {
-        .checkbox-text {
-          &:before {
-            margin: 0;
-          }
-        }
-      }
-
-      .TreeLabel {
-        align-items: center;
-        cursor: pointer;
-        display: flex;
-        flex: 1 0;
-        //margin-left: 8px;
-        overflow: hidden;
-        padding: 10px 0;
-        position: relative;
-
-        > .rioglyph:first-child:not(.undefined) {
-          margin-right: 5px;
-        }
-
-        .TreeLabelName {
-          align-items: flex-start;
-          display: flex;
-          flex: 1 1 0;
-          font-weight: @font-normal;
-          hyphens: auto;
-          letter-spacing: 0;
-          line-height: 1.25;
-          min-height: 17px; // fix for empty nodes
-          overflow: hidden;
-          word-break: break-word; // webkit
-          word-wrap: break-word;
-
-          .TreeLabelNameText {
-            display: flex;
-            flex-direction: column;
-
-            .TreeLabelNameTextHeadline {}
-
-            .TreeLabelNameTextSubline {
-              font-size: 12px;
-              color: var(--gray);
-            }
-          }
-
-          > .rioglyph:not(.undefined) {
-            font-size: 16px;
-            margin: 1px 5px 0 0;
-          }
-        }
-
-        .TreeLabelCount {
-          letter-spacing: 0px;
-          position: absolute;
-          right: 30px;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-
-        .TreeLabelExpander {
-          color: var(--gray-dark);
-          position: absolute;
-          right: 5px;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-      }
-    }
-
-    .TreeNode {
-      align-items: center;
-
-      .TreeCheckbox {
-        margin: 0 7px 0 0;
-      }
-
-      .TreeLabelName {
-        padding-right: 55px;
-      }
-
-      &.checked ~ .TreeLeaf {
-        .checkbox {
-          display: none;
-        }
-
-        // copy active state
-        .TreeRoot .TreeNodeContainer .TreeNode.active;
-      }
-
-      ~ .TreeLeaf {
-        padding: 0 15px 0 40px;
-      }
-    }
-
-    .TreeLeaf {
-      align-items: flex-start;
-
-      .TreeCheckbox {
-        margin: 10px 7px 0 0;
-      }
-
-      .TreeRadioButton {
-        pointer-events: none;
-        margin: 10px 7px 0 0;
-
-        + .TreeLabel {
-          margin-left: -25px;
-          padding-left: 22px;
-        }
-      }
-    }
-  }
-}

package/styles/components/AutoSuggest.less

@@ -1,22 +0,0 @@
-.AutoSuggest {
-  .clearfix;
-
-  .input-group & {
-    flex: 1 1 auto;
-  }
-
-  .dropdown-menu {
-    max-height: @dropdown-max-height;
-    overflow-x: hidden;
-    overflow-y: auto;
-
-    > .active {
-      color: var(--color-white);
-      background-color: var(--brand-primary);
-    }
-
-    > li > a {
-      white-space: normal;
-    }
-  }
-}

package/styles/components/BottomSheet.less

@@ -1,22 +0,0 @@
-// z-index should be below dialog
-@z-index-bottom-sheet: @zindex-modal - 2;
-
-.bottom-sheet{
-    z-index: @z-index-bottom-sheet;
-}
-
-.bottom-sheet-backdrop {
-    position: absolute;
-    inset: 0;
-    z-index: @z-index-bottom-sheet - 1;
-    background-color: .hsla(@color-black-hsl, 0.5)[@result];
-
-    [data-theme*="dark"] & {
-      background-color: .hsla(@gray-darkest-hsl, 0.3)[@result];
-    }
-
-    @supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) {
-      opacity: 0.99;
-      backdrop-filter: blur(1px);
-    }
-}