halleyx-ui-framework 5.4.0 → 5.4.2

package/dist/src/assets/styles/tree.scss

@@ -1,1050 +0,0 @@
-.hlx-tree-area {
-  position: absolute;
-  display: flex;
-  flex-wrap: wrap;
-  user-select: none;
-  font-size: 10px;
-
-  &.drag-border {
-    border: 0.4px dashed var(--hlx-border-color);
-  }
-  & > li {
-    min-height: 400px;
-    min-width: 400px;
-  }
-  justify-content: center;
-  $color: #222;
-  $background-color: white;
-  $border-weight: 1px;
-  $margin: 12px;
-  margin: calc($margin * 1.5);
-  padding: 0;
-
-  &:not(:empty):before,
-  &:not(:empty):after,
-  ul:not(:empty):before,
-  ul:not(:empty):after,
-  li:not(:empty):before,
-  li:not(:empty):after {
-    display: block;
-    position: absolute;
-    content: "";
-  }
-
-  ul,
-  li {
-    position: relative;
-    margin: 0;
-    padding: 0;
-  }
-
-  li {
-    list-style: none;
-  }
-  li > div.card {
-    color: var(--hlx-text-color-tree);
-    display: inline-table;
-    position: relative;
-    border-radius: 5px;
-    border: 1px solid var(--hlx-border-color);
-
-    // background-color: $background-color;
-    width: 200px;
-    height: 100px;
-    min-height: 100px;
-    padding: 5px;
-    overflow: visible;
-    &:hover {
-      border-color: var(--hlx-color-primary);
-      cursor: pointer;
-      cursor: pointer;
-    }
-  }
-  li > div > p {
-    line-height: 18px;
-    font-size: 12px;
-    font-weight: 600;
-    &.head-label {
-      color: var(--hlx-text-color-tree);
-      font-weight: 700;
-      margin-top: 0;
-      text-align: center;
-      font-size: 14px !important;
-      background-color: var(--hlx-color-primary);
-      color: white;
-      border-radius: 5px;
-    }
-  }
-  //@Horizontal view
-  &.horizontal {
-    min-height: 600px;
-    min-width: 600px;
-    & > li > div.card {
-      margin: 0 !important;
-      i {
-        bottom: 37% !important;
-      }
-    }
-    & > li > ul > :first-child:before {
-      height: 51%;
-      top: 53%;
-    }
-
-    & > li:last-child:before {
-      height: 50%;
-      bottom: calc(50% - $margin/2);
-      top: auto;
-    }
-    li {
-      display: flex;
-      align-items: center;
-      margin-left: calc($margin * 2);
-
-      div.card {
-        // margin: 0px 0px 10px 15px;
-        margin: $margin 0 0 calc($margin/2);
-        margin-left: 14px;
-
-        min-width: 150px;
-        min-height: 90px;
-        display: flex;
-        justify-content: center;
-        align-content: center;
-        div.header.grid {
-          text-align: center;
-          display: flex;
-          flex-direction: row;
-          justify-content: center;
-          flex-wrap: wrap;
-          padding: 4px 0;
-          border: none;
-          color: getCssVar("color", "primary", "dark");
-          font-weight: bold;
-          height: auto;
-        }
-        // div.box {
-        //   height: max-content;
-        //   line-height: 1.5;
-        //   &:hover{
-        //     .grid {
-        //       .key {
-        //         color:getCssVar('color', 'primary','dark');
-        //       }
-        //   }
-        // // }
-        //   // padding: 10px 0 10px 10px;
-        //   .grid {
-        //     .key {
-        //       // color: var(--bg-color);
-        //     }
-        //     .value {
-        //       // color: var(--sub-color);
-        //     }
-        //   }
-        // }
-
-        i {
-          color: var(--hlx-color-primary);
-          position: absolute;
-          bottom: 42%;
-          z-index: 100;
-          right: -0.55em !important;
-          cursor: pointer;
-          font-size: var(--hlx-font-size-xs);
-        }
-      }
-
-      &:before {
-        position: absolute;
-        border-left: $border-weight solid var(--hlx-border-color);
-        height: 100%;
-        font-weight: 700;
-        width: 0;
-        top: 0;
-      }
-
-      &:first-child:before {
-        height: 51%;
-        top: 55%;
-      }
-
-      &:last-child:before {
-        height: 50%;
-        bottom: calc(50% - $margin/2);
-        top: auto;
-      }
-
-      &:after {
-        border-top: $border-weight solid var(--hlx-border-color);
-        height: 0;
-        width: 15px;
-        font-weight: 700;
-
-        top: calc(50% + $margin/2);
-      }
-
-      ul:after {
-        border-top: $border-weight solid var(--hlx-border-color);
-        height: 0;
-        width: 25px;
-        font-weight: 700;
-        top: calc(50% + $margin/2);
-      }
-
-      &:only-child:before {
-        content: none;
-      }
-
-      ul:after {
-        left: 0;
-      }
-    }
-
-    & > li {
-      &:only-child {
-        margin-left: 0;
-      }
-
-      &:only-child:before,
-      &:only-child:after {
-        content: none;
-      }
-    }
-  }
-
-  &.cascade {
-    li {
-      margin-left: 2 * $margin;
-
-      div {
-        margin-top: $margin;
-      }
-
-      &:before {
-        border-left: $border-weight solid var(--hlx-border-color);
-        height: 100%;
-        width: 0;
-        top: 0;
-        left: -$margin;
-      }
-
-      &:after {
-        border-top: $border-weight solid var(--hlx-border-color);
-        width: $margin;
-        left: -$margin;
-        top: calc($margin * 2);
-      }
-
-      &:last-child:before {
-        height: calc($margin * 2);
-        top: 0;
-      }
-    }
-
-    & > li {
-      &:first-child:before {
-        top: calc($margin * 2);
-      }
-
-      &:only-child {
-        margin-left: 0;
-      }
-
-      &:only-child:before,
-      &:only-child:after {
-        content: none;
-      }
-    }
-  }
-
-  &.vertical {
-    display: flex;
-
-    ul {
-      display: flex;
-      justify-content: center;
-    }
-
-    li {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-
-      div.card {
-        margin: $margin calc($margin/2);
-        min-width: 150px;
-        min-height: 90px;
-        display: flex;
-        justify-content: center;
-        align-content: center;
-        div.box {
-          padding: 10px 10px 0px !important;
-          .grid {
-            width: 100%;
-          }
-        }
-
-        i {
-          color: var(--hlx-color-primary);
-          position: absolute;
-          bottom: -0.5em;
-          z-index: 100;
-          font-size: var(--hlx-font-size-xs);
-          right: 46% !important;
-          cursor: pointer;
-        }
-
-        // }
-      }
-
-      &:before {
-        border-left: $border-weight solid var(--hlx-border-color);
-        height: $margin;
-        width: 0;
-        top: 0;
-      }
-
-      &:after {
-        border-top: $border-weight solid var(--hlx-border-color);
-        height: 0;
-        width: 100%;
-      }
-
-      &:first-child:after {
-        border-top: $border-weight solid var(--hlx-border-color);
-        height: 0;
-        width: 50%;
-        left: 50%;
-      }
-
-      &:last-child:after {
-        border-top: $border-weight solid var(--hlx-border-color);
-        height: 0;
-        width: 50%;
-        right: 50%;
-      }
-
-      &:only-child:after {
-        content: none;
-      }
-
-      ul:before {
-        border-left: $border-weight solid var(--hlx-border-color);
-        height: $margin;
-        width: 0;
-        top: -$margin;
-      }
-
-      ul:after {
-        border-left: $border-weight solid var(--hlx-border-color);
-        height: $margin;
-        width: 0;
-        top: -$margin;
-      }
-    }
-
-    & > li {
-      &:only-child:before,
-      &:only-child:after {
-        content: none;
-      }
-    }
-  }
-
-  %subcascade {
-    flex-direction: column;
-    align-items: start;
-    padding: 0 $margin;
-
-    &:before {
-      left: 2 * $margin;
-    }
-
-    &:after {
-      left: 0;
-    }
-
-    &:first-child:after {
-      left: 2 * $margin;
-      width: 100%;
-    }
-
-    &:last-child:after {
-      left: 0;
-      width: 2 * $margin;
-    }
-
-    ul,
-    li {
-      display: block;
-    }
-
-    ul:before,
-    ul:after,
-    li:before,
-    li:after {
-      border: none;
-    }
-
-    div {
-      margin: 0;
-      margin-top: $margin;
-    }
-
-    li {
-      margin-left: 2 * $margin;
-
-      &:before {
-        border-left: $border-weight solid var(--hlx-border-color);
-        height: 100%;
-        width: 0;
-        top: 0;
-        left: -$margin;
-      }
-
-      &:after {
-        border-top: $border-weight solid var(--hlx-border-color);
-        width: $margin;
-        height: 0;
-        left: -$margin;
-        top: calc($margin * 2);
-        content: "";
-      }
-
-      &:last-child:before {
-        height: calc($margin * 2);
-        top: 0;
-      }
-    }
-  }
-
-  &.vertical .cascade {
-    @extend %subcascade;
-  }
-
-  &.vertical.cascade-1 {
-    & > li {
-      @extend %subcascade;
-    }
-  }
-
-  &.vertical.cascade-2 {
-    & > li > ul > li {
-      @extend %subcascade;
-    }
-  }
-
-  &.vertical.cascade-3 {
-    & > li > ul > li > ul > li {
-      @extend %subcascade;
-    }
-  }
-
-  &.vertical.cascade-4 {
-    & > li > ul > li > ul > li > ul > li {
-      @extend %subcascade;
-    }
-  }
-  $border: var(--hlx-border-color-dark);
-  div.card {
-    box-sizing: border-box;
-    // max-width: 300px;
-    height: max-content;
-
-    line-height: 1.5;
-    padding: 10px 0 10px 10px;
-    border-radius: 7px;
-
-    .card-body {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-    &:hover {
-      .grid.header {
-        color: getCssVar("color", "primary", "dark");
-      }
-    }
-    .grid {
-      &.header {
-        width: max-content;
-        display: flex;
-        flex-direction: column;
-        font-size: 16px;
-        font-weight: bold;
-        padding: 0;
-        border: none;
-        color: var(--hlx-color-primary);
-      }
-      width: 90%;
-      margin: 0 !important;
-      height: -webkit-max-content !important;
-      height: -moz-max-content;
-      min-height: -webkit-max-content !important;
-      min-height: -moz-max-content !important;
-      min-height: max-content !important;
-      gap: 10%;
-      display: grid;
-      font-size: 14px;
-      line-height: 1.5;
-      grid-template-columns: -webkit-max-content auto;
-      grid-template-columns: max-content auto;
-      align-items: center;
-      justify-content: center;
-
-      .key {
-        color: #565553;
-        font-weight: 600;
-      }
-      .value {
-        color: #969393;
-      }
-    }
-  }
-
-  .hide {
-    display: none !important;
-  }
-  .icon-circle-filled-minus:before {
-    font-size: large;
-  }
-  .icon-circle-filled-plus:before {
-    font-size: large;
-  }
-}
-.hlx-tree-area-upc {
-  position: absolute;
-  display: flex;
-  flex-wrap: wrap;
-  user-select: none;
-  font-size: 10px;
-
-  &.drag-border {
-    border: 0.4px dashed var(--hlx-border-color);
-  }
-  & > li {
-    min-height: 400px;
-    min-width: 400px;
-  }
-  justify-content: center;
-  $color: #222;
-  $background-color: white;
-  $border-weight: 1px;
-  $margin: 12px;
-  margin: calc($margin * 1.5);
-  padding: 0;
-
-  &:not(:empty):before,
-  &:not(:empty):after,
-  ul:not(:empty):before,
-  ul:not(:empty):after,
-  li:not(:empty):before,
-  li:not(:empty):after {
-    display: block;
-    position: absolute;
-    content: "";
-  }
-
-  ul,
-  li {
-    position: relative;
-    margin: 0;
-    padding: 0;
-  }
-
-  li {
-    list-style: none;
-  }
-  li > div.card {
-    color: var(--hlx-text-color-tree);
-    display: inline-table;
-    position: relative;
-    border-radius: 5px;
-    border: 1px solid var(--hlx-border-color);
-
-    // background-color: $background-color;
-    max-width: 300px;
-    min-width: 200px;
-    max-height: 200px;
-    min-height: 100px;
-    padding: 5px;
-    overflow: visible;
-    &:hover {
-      border-color: var(--hlx-color-primary);
-      cursor: pointer;
-      cursor: pointer;
-    }
-  }
-  li > div > p {
-    line-height: 18px;
-    font-size: 12px;
-    font-weight: 600;
-    &.head-label {
-      color: var(--hlx-text-color-tree);
-      font-weight: 700;
-      margin-top: 0;
-      text-align: center;
-      font-size: 14px !important;
-      background-color: var(--hlx-color-primary);
-      color: white;
-      border-radius: 5px;
-    }
-  }
-  //@Horizontal view
-  &.horizontal {
-    min-height: 600px;
-    min-width: 600px;
-    & > li > div.card {
-      margin: 0 !important;
-      .downIcon {
-        bottom: 37% !important;
-      }
-    }
-    & > li > ul > :first-child:before {
-      height: 51%;
-      top: 53%;
-    }
-
-    & > li:last-child:before {
-      height: 50%;
-      bottom: calc(50% - $margin/2);
-      top: auto;
-    }
-    li {
-      display: flex;
-      align-items: center;
-      margin-left: calc($margin * 2);
-
-      div.card {
-        // margin: 0px 0px 10px 15px;
-        margin: $margin 0 0 calc($margin/2);
-        margin-left: 14px;
-
-        min-width: 150px;
-        min-height: 90px;
-        display: flex;
-        justify-content: center;
-        align-content: center;
-        div.header.grid {
-          text-align: center;
-          display: flex;
-          flex-direction: row;
-          justify-content: center;
-          flex-wrap: wrap;
-          padding: 4px 0;
-          border: none;
-          color: getCssVar("color", "primary", "dark");
-          font-weight: bold;
-          height: auto;
-        }
-        // div.box {
-        //   height: max-content;
-        //   line-height: 1.5;
-        //   &:hover{
-        //     .grid {
-        //       .key {
-        //         color:getCssVar('color', 'primary','dark');
-        //       }
-        //   }
-        // // }
-        //   // padding: 10px 0 10px 10px;
-        //   .grid {
-        //     .key {
-        //       // color: var(--bg-color);
-        //     }
-        //     .value {
-        //       // color: var(--sub-color);
-        //     }
-        //   }
-        // }
-
-        .downIcon {
-          color: var(--hlx-color-primary);
-          position: absolute;
-          bottom: 42%;
-          z-index: 100;
-          right: -0.55em !important;
-          cursor: pointer;
-          font-size: var(--hlx-font-size-xs);
-        }
-      }
-
-      &:before {
-        position: absolute;
-        border-left: $border-weight solid #54bd95;
-        height: 100%;
-        font-weight: 700;
-        width: 0;
-        top: 0;
-      }
-
-      &:first-child:before {
-        height: 51%;
-        top: 55%;
-      }
-
-      &:last-child:before {
-        height: 50%;
-        bottom: calc(50% - $margin/2);
-        top: auto;
-      }
-
-      &:after {
-        border-top: $border-weight solid #54bd95;
-        height: 0;
-        width: 15px;
-        font-weight: 700;
-
-        top: calc(50% + $margin/2);
-      }
-
-      ul:after {
-        border-top: $border-weight solid #54bd95;
-        height: 0;
-        width: 25px;
-        font-weight: 700;
-        top: calc(50% + $margin/2);
-      }
-
-      &:only-child:before {
-        content: none;
-      }
-
-      ul:after {
-        left: 0;
-      }
-    }
-
-    & > li {
-      &:only-child {
-        margin-left: 0;
-      }
-
-      &:only-child:before,
-      &:only-child:after {
-        content: none;
-      }
-    }
-  }
-
-  &.cascade {
-    li {
-      margin-left: 2 * $margin;
-
-      div {
-        margin-top: $margin;
-      }
-
-      &:before {
-        border-left: $border-weight solid #54bd95;
-        height: 100%;
-        width: 0;
-        top: 0;
-        left: -$margin;
-      }
-
-      &:after {
-        border-top: $border-weight solid #54bd95;
-        width: $margin;
-        left: -$margin;
-        top: calc($margin * 2);
-      }
-
-      &:last-child:before {
-        height: calc($margin * 2);
-        top: 0;
-      }
-    }
-
-    & > li {
-      &:first-child:before {
-        top: calc($margin * 2);
-      }
-
-      &:only-child {
-        margin-left: 0;
-      }
-
-      &:only-child:before,
-      &:only-child:after {
-        content: none;
-      }
-    }
-  }
-
-  &.vertical {
-    display: flex;
-
-    ul {
-      display: flex;
-      justify-content: center;
-    }
-
-    li {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-
-      div.card {
-        margin: $margin calc($margin/2);
-        min-width: 150px;
-        min-height: 90px;
-        display: flex;
-        justify-content: center;
-        align-content: center;
-        div.box {
-          padding: 10px 10px 0px !important;
-          .grid {
-            width: 100%;
-          }
-        }
-.collapseIcon{
-  background-color: white;
-  color: var(--hlx-color-primary);
-  position: absolute;
-  bottom: -0.4em;
-  z-index: 100;
-  font-size: var(--hlx-font-size-xs);
-  right: 47.5% !important;
-  cursor: pointer;
-  width: 9px;
-  height: 8px;
-  border-radius: 100%;
-}
-        .downIcon {
-          color: var(--hlx-color-primary);
-          position: relative;
-          bottom: 0.5em;
-          z-index: 100;
-          font-size: var(--hlx-font-size-xs);
-          right: 45.5% !important;
-          cursor: pointer;
-      }
-          
-        
-
-        // }
-      }
-
-      &:before {
-        border-left: $border-weight solid #54bd95;
-        height: $margin;
-        width: 0;
-        top: 0;
-      }
-
-      &:after {
-        border-top: $border-weight solid #54bd95;
-        height: 0;
-        width: 100%;
-      }
-
-      &:first-child:after {
-        border-top: $border-weight solid #54bd95;
-        height: 0;
-        width: 50%;
-        left: 50%;
-      }
-
-      &:last-child:after {
-        border-top: $border-weight solid #54bd95;
-        height: 0;
-        width: 50%;
-        right: 50%;
-      }
-
-      &:only-child:after {
-        content: none;
-      }
-
-      ul:before {
-        border-left: $border-weight solid #54bd95;
-        height: $margin;
-        width: 0;
-        top: -$margin;
-      }
-
-      ul:after {
-        border-left: $border-weight solid#54bd95 ;
-        height: $margin;
-        width: 0;
-        top: -$margin;
-      }
-    }
-
-    & > li {
-      &:only-child:before,
-      &:only-child:after {
-        content: none;
-      }
-    }
-  }
-
-  %subcascade {
-    flex-direction: column;
-    align-items: start;
-    padding: 0 $margin;
-
-    &:before {
-      left: 2 * $margin;
-    }
-
-    &:after {
-      left: 0;
-    }
-
-    &:first-child:after {
-      left: 2 * $margin;
-      width: 100%;
-    }
-
-    &:last-child:after {
-      left: 0;
-      width: 2 * $margin;
-    }
-
-    ul,
-    li {
-      display: block;
-    }
-
-    ul:before,
-    ul:after,
-    li:before,
-    li:after {
-      border: none;
-    }
-
-    div {
-      margin: 0;
-      margin-top: $margin;
-    }
-
-    li {
-      margin-left: 2 * $margin;
-
-      &:before {
-        border-left: $border-weight solid #54bd95;
-        height: 100%;
-        width: 0;
-        top: 0;
-        left: -$margin;
-      }
-
-      &:after {
-        border-top: $border-weight solid #54bd95;
-        width: $margin;
-        height: 0;
-        left: -$margin;
-        top: calc($margin * 2);
-        content: "";
-      }
-
-      &:last-child:before {
-        height: calc($margin * 2);
-        top: 0;
-      }
-    }
-  }
-
-  &.vertical .cascade {
-    @extend %subcascade;
-  }
-
-  &.vertical.cascade-1 {
-    & > li {
-      @extend %subcascade;
-    }
-  }
-
-  &.vertical.cascade-2 {
-    & > li > ul > li {
-      @extend %subcascade;
-    }
-  }
-
-  &.vertical.cascade-3 {
-    & > li > ul > li > ul > li {
-      @extend %subcascade;
-    }
-  }
-
-  &.vertical.cascade-4 {
-    & > li > ul > li > ul > li > ul > li {
-      @extend %subcascade;
-    }
-  }
-  $border: var(--hlx-border-color-dark);
-  div.card {
-    box-sizing: border-box;
-    // max-width: 300px;
-    height: max-content;
-
-    line-height: 1.5;
-    padding: 10px 0 10px 10px;
-    border-radius: 7px;
-
-    .card-body {
-      display: flex; 
-      justify-content: center;
-      align-items: center;
-      padding: 5px;
-      line-height: normal !important;
-    }
-    &:hover {
-      .grid.header {
-        color: getCssVar("color", "primary", "dark");
-      }
-    }
-    .grid {
-      &.header {
-        width: max-content;
-        display: flex;
-        flex-direction: row;
-        font-size: 14px;
-        text-align: center;
-        font-family:QuickSand ;
-       font-weight: 600;
-       overflow: hidden;
-       text-overflow: ellipsis;
-       
-        padding: 0;
-        border: none;
-        color: #191a15;
-      }
-      width: 90%;
-      margin: 0 !important;
-      height: -webkit-max-content !important;
-      height: -moz-max-content;
-      min-height: -webkit-max-content !important;
-      min-height: -moz-max-content !important;
-      min-height: max-content !important;
-      gap: 5%;
-      display: grid;
-      font-size: 14px;
-      line-height: 1.5;
-      grid-template-columns: -webkit-max-content auto;
-      grid-template-columns: max-content auto;
-      align-items: center;
-      justify-content: center;
-
-      .key {
-        color: #565553;
-        font-weight: 600;
-      }
-      .value {
-        color: #969393;
-      }
-    }
-  }
-
-  .hide {
-    display: none !important;
-  }
-  .icon-circle-filled-minus:before {
-    font-size: large;
-  }
-  .icon-circle-filled-plus:before {
-    font-size: large;
-  }
-}