@elliemae/ds-basic 3.22.0-next.8 → 3.22.0-rc.1

package/dist/styles/components/packages/ds-treeview/Tree.scss

@@ -1,262 +0,0 @@
-// ********************************************
-// container definition
-$tree-list: #{$prefix}-tree-list;
-$tree-item: #{$prefix}-tree-item;
-$rz-normal: #{$prefix}-tv-row-size-normal;
-$rz-compact: #{$prefix}-tv-row-size-compact;
-$normal: 36px;
-$compact: 28px;
-
-$dsicon: #{$prefix}-icon;
-
-// selects the duplicated item when dragging
-// this works because duplicate item always appends to body by default
-body > .#{$tree-item} {
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
-}
-
-.#{$tree-item} {
-  color: color(neutral, 800);
-  display: flex;
-  align-items: center;
-  position: relative;
-  background-color: color(neutral, 000);
-  padding: 0 space(xxs);
-  min-height: $normal;
-
-  &--fixed-height {
-    height: 36px;
-    &-compact {
-      height: 28px;
-    }
-  }
-
-  &__value--wrap-all {
-    max-width: 100%;
-    // hyphens seems to not be working well with break-all
-    // -webkit-hyphens: auto;
-    // -moz-hyphens: auto;
-    // -ms-hyphens: auto;
-    // hyphens: auto;
-    word-break: break-all;
-  }
-  &__value--truncate {
-    white-space: nowrap;
-  }
-
-  &-children-count-displayer {
-    color: color(neutral, 500);
-  }
-  &--valid-drop-in:after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border: 2px solid color(brand-primary, 600);
-  }
-
-  &--invalid-drop-in:after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border: 2px solid color(danger, 900);
-  }
-
-  .#{$tree-item}__value {
-    min-width: 0;
-    width: 100%;
-    margin: space(xs) 0;
-    margin-top: space(xs) * 1.5;
-    .tree-item-value {
-      margin-right: 2px;
-    }
-    &--truncate {
-      height: 16px;
-    }
-  }
-
-  &__addons {
-    display: flex;
-    align-items: center;
-    align-self: flex-start;
-    height: $normal;
-    margin-right: space(xxs) * 0.5;
-    .#{$dsicon} {
-      @include icon-color(color(brand-primary, 800));
-    }
-  }
-
-  &.selected {
-    &:before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      border: 1px solid color(brand-primary, 500);
-      pointer-events: none;
-    }
-    background-color: color(brand-primary, 200);
-  }
-
-  &.drag-overlay {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
-    border-radius: 2px;
-    padding-right: space(xs);
-  }
-
-  &--dragging {
-    background-color: color(neutral, 080);
-    color: color(neutral, 500);
-    .#{$dsicon} {
-      @include icon-color(color(neutral, 500));
-    }
-  }
-
-  .drag-handle {
-    position: relative;
-    transition: duration(fast) easing(base);
-    align-items: center;
-    display: flex;
-    height: 24px;
-    visibility: visible;
-    opacity: 1;
-    margin-left: 8px;
-    outline: none;
-    cursor: grab;
-    &[data-isactive='true'],
-    &[data-isdragoverlay='true'] {
-      cursor: grabbing;
-    }
-    &.focuseable:focus:after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      border: 2px solid color(brand-primary, 700);
-      pointer-events: none;
-    }
-  }
-  .expandable-arrow {
-    margin-left: 8px;
-    width: 16px;
-    height: 16px;
-    min-width: unset;
-    border: none;
-  }
-  &-checkbox {
-    width: 16px;
-    height: 16px;
-  }
-  &-checkbox,
-  &-radio {
-    margin-left: 8px;
-  }
-  &-radio {
-    padding-bottom: 0;
-  }
-
-  &.can-group-over {
-    .#{$tree-item}__value {
-      font-weight: bold;
-    }
-  }
-
-  .#{$tree-item}-content {
-    display: flex;
-    flex: 1;
-    min-width: 0;
-  }
-
-  .tree-item-icon {
-    margin-right: space(xxs);
-    width: 16px;
-    height: 16px;
-    color: color(brand-primary, 800);
-  }
-
-  .tree-item-radio {
-    padding-bottom: 0;
-  }
-
-  &.hover {
-    //Update from mixins when the correct states story comes
-    background-color: color(brand-primary, 200);
-
-    &.selected {
-      background-color: color(brand-primary, 200);
-    }
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: unset;
-    border-radius: 0px;
-    z-index: 1;
-    &:before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      border: 2px solid color(brand-primary, 700);
-      pointer-events: none;
-    }
-    &.selected {
-      outline: unset;
-    }
-  }
-
-  .toolbar-trigger {
-    margin-top: space(xxs);
-  }
-}
-
-.#{$tree-list} {
-  // overrides default browser ul
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-
-  min-width: 240px;
-
-  &.#{$rz-compact} {
-    .#{$tree-item} {
-      min-height: $compact;
-      &__addons {
-        height: $compact;
-      }
-      &__value {
-        margin: 0;
-        margin-top: 4px;
-      }
-    }
-    .toolbar-trigger {
-      margin-top: 0;
-    }
-  }
-}
-
-.#{$tree-list}-no-items {
-  display: flex;
-  justify-content: center;
-  padding-top: space(m);
-  height: 100%;
-  width: 100%;
-}
-
-.tree-text-highlight {
-  font-weight: bold;
-  background-color: color(warning, 600);
-}